-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
First pass to Re-design the dashboard
This is a first pass in which only the dashboard navigation widget and the "Settings" pane have been revisited. Reference work: - https://app.abstract.com/share/54f1465e-8d1c-4e7b-9ae4-f37e21bef7fe
- Loading branch information
Showing
7 changed files
with
120 additions
and
149 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,37 +1,44 @@ | ||
| ul { | ||
| padding-left: 1em; | ||
| padding-right: 0; | ||
| body { | ||
| border: 0; | ||
| font: 16px/24px sans-serif; | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| hr { | ||
| border: 0; | ||
| border-top: 1px solid #ccc; | ||
| margin: 1.5em 0; | ||
| } | ||
| .body { | ||
| color: #20123a; | ||
| margin-top: 1em; | ||
| } | ||
| body[dir="rtl"] ul { | ||
| padding-left: 0; | ||
| padding-right: 1em; | ||
| .entries { | ||
| margin: 0.5em 0; | ||
| } | ||
| ul#userSettings { | ||
| padding-left: 0; | ||
| .section { | ||
| font-size: large; | ||
| font-weight: bold; | ||
| margin-top: 0.75em; | ||
| } | ||
| li { | ||
| margin-top: 0.25em; | ||
| .synopsis { | ||
| font-size: smaller; | ||
| } | ||
| ul#userSettings, | ||
| ul#userSettings ul { | ||
| list-style-type: none; | ||
| .entry { | ||
| align-items: baseline; | ||
| display: flex; | ||
| margin: 0.5em 0; | ||
| } | ||
| ul#userSettings .subgroup { | ||
| margin-top: 1em; | ||
| .entry > * { | ||
| margin-inline-end: 0.5em; | ||
| -webkit-margin-end: 0.5em; | ||
| } | ||
| ul#userSettings .subgroup > span { | ||
| font-size: larger; | ||
| font-weight: bold; | ||
| .entry > input[type="checkbox"] { | ||
| align-self: center; | ||
| } | ||
| #advanced-user-enabled ~ a.fa { | ||
| display: none; | ||
| } | ||
| body.advancedUser #advanced-user-enabled ~ a.fa { | ||
| display: inline; | ||
| } | ||
| #localData > ul > li { | ||
| margin-top: 1em; | ||
| } | ||
| #localData > ul > li > ul > li:nth-of-type(2) { | ||
| font-family: monospace; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
453f545There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What I miss in new mobile interface is quick access to version info.
453f545There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe you could comment about this at https://share.goabstract.com/54f1465e-8d1c-4e7b-9ae4-f37e21bef7fe?collectionLayerId=5d7b3b93-381e-42c6-ab6a-404ed874f520&sha=95d331bab08df7e733f2aa54eb60fc5acff40765?
I don't have an account there so I don't know if just creating an account would allow to comment. Maybe there could be a small label out of the way somewhere in the popup panel with the version number.
453f545There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
font size in the settings pane have become noticably larger, was this intentional ?
font: 16px/24px sans-serif;is noticably higher than the previous one, will this be customizable in future builds ?
453f545There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
For Firefox Preview design, I was suggested to use
16px/24px.I will use
14px/21pxas default size, and use16px/24pxfor touchscreen devices.453f545There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes, that's the previous setting and this new setting jumps right into my face when I open the settings page.
453f545There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Version information on top:
Version information on the bottom:
453f545There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I am undecided for now. I prefer to not put back the title bar, it existed only because originally this was how I made the dashboard accessible.
So currently I lean toward rendering the version at the bottom, but I feel this should be more discrete, it's not a key piece of information related to the current web site.
453f545There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I finally went with the second suggestion, with a minor change: since the version line can also be toggled on/off (like the firewall panel), it is shown before the firewall panel instead of after.
cc @brampitoyo