Third pass to re-design the dashboard

Related commits: - 453f545 - a45a21f This commit fixes parts of the re-design not rendering as intended as per <https://github.com/brampitoyo>'s feedback screenshots. The dashboard tab buttons have been converted to `span` tags (from `a` tags), thus eliminating the unwanted side effect of the text being rendered as unvisited links (blueish). The font size intended for touch screens was not taking effect due to bad cut & paste. Other minor adjustments to improve consistency in spacing.
gorhill · Apr 9, 2020 · a8e3118 · a8e3118
1 parent 923e9fd
commit a8e3118
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 41 deletions.
diff --git a/src/css/3p-filters.css b/src/css/3p-filters.css
@@ -4,10 +4,14 @@
  }
 body {
  border: 0;
- font: 14px/21px sans-serif;
+ font: 14px/1.5 sans-serif;
  margin: 0;
  padding: 0;
  }
+input[type="checkbox"] {
+ margin-inline-end: 0.5em;
+ -webkit-margin-end: 0.5em;
+ }
 .root {
  background-color: white;
  overflow: auto;
@@ -18,26 +22,24 @@ body {
  display: flex;
  margin: 0.5em 0;
  }
+.entry > * {
+ margin-left: 0;
+ margin-right: 0;
+ margin-inline-end: 0.5em;
+ -webkit-margin-end: 0.5em;
+ }
 #actions {
  position: sticky;
  top: 0;
  z-index: 10;
  }
-#options li {
- margin-bottom: 0.5em;
- }
 #listsOfBlockedHostsPrompt {
  cursor: pointer;
  }
 #lists {
  margin: 0.5em 0 0 0;
  padding: 0;
  }
-#lists > li {
- margin: 0.5em 0 0 0;
- padding: 0;
- list-style-type: none;
- }
 #listsOfBlockedHostsPrompt::before,
 .groupEntry:not([data-groupkey="user"]) .geDetails::before {
  color: #888;
@@ -64,10 +66,6 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
  font-size: 90%;
  pointer-events: none;
  }
-.groupEntry > ul {
- margin: 0.25em 0 0 0;
- padding-left: 1em;
- }
 .listEntries {
  margin-inline-start: 0.7em;
  -webkit-margin-start: 0.7em;
@@ -80,11 +78,15 @@ body.hideUnused #listsOfBlockedHostsPrompt::before,
  display: none;
  }
 .listEntry > * {
- margin-right: 0.5em;
+ margin-left: 0;
+ margin-right: 0;
+ margin-inline-end: 0.5em;
+ -webkit-margin-end: 0.5em;
  unicode-bidi: embed;
  }
-.listEntry input[type="checkbox"] {
- margin-right: 0.5em;
+.listEntry > label {
+ align-items: center;
+ display: inline-flex;
  }
 .listEntry.toRemove input[type="checkbox"] {
  visibility: hidden;
@@ -179,6 +181,7 @@ body.updating .listEntry.checked.obsolete .updating {
  display: block;
  font-size: smaller;
  height: 6em;
+ margin: 0;
  resize: vertical;
  visibility: hidden;
  white-space: pre;
@@ -189,7 +192,7 @@ body.updating .listEntry.checked.obsolete .updating {
  }
 
 @media (pointer: coarse) {
- #dashboard-nav {
- font: 16px/24px sans-serif;
+ body {
+ font: 16px/1.5 sans-serif;
  }
 }
diff --git a/src/css/dashboard.css b/src/css/dashboard.css
@@ -1,6 +1,6 @@
 html, body {
  border: 0;
- font: 14px/21px sans-serif;
+ font: 14px/1.5 sans-serif;
  height: 100%;
  margin: 0;
  overflow: hidden;
@@ -21,13 +21,13 @@ html, body {
  width: 100%;
  z-index: 10;
  }
-#dashboard-nav > span {
+#dashboard-nav > span.logo {
  align-items: center;
  display: inline-flex;
  padding: 0 0.5em;
  width: 1.25em;
  }
-#dashboard-nav > span > img {
+#dashboard-nav > span.logo > img {
  width: 100%;
  }
 .tabButton {
@@ -41,10 +41,6 @@ html, body {
 .tabButton:focus {
  outline: 0;
  }
-.tabButton:active,
-.tabButton:visited {
- color: #20123a;
- }
 .tabButton.selected {
  border-bottom: 3px solid #592acb;
  color: #592acb;
@@ -77,14 +73,14 @@ iframe {
  width: 100vw;
  }
 
-body:not(.canUpdateShortcuts) .tabButton[href="#shortcuts.html"] {
+body:not(.canUpdateShortcuts) .tabButton[data-pane="shortcuts.html"] {
  display: none;
  }
 
 @media (pointer: coarse) {
  #dashboard-nav {
  flex-wrap: nowrap;
- font: 16px/24px sans-serif;
+ font: 16px/1.5 sans-serif;
  overflow-x: auto;
  }
 }
diff --git a/src/css/settings.css b/src/css/settings.css
@@ -1,6 +1,6 @@
 body {
  border: 0;
- font: 14px/21px sans-serif;
+ font: 14px/1.5 sans-serif;
  margin: 0;
  padding: 0;
  }
@@ -42,7 +42,7 @@ body.advancedUser #advanced-user-enabled ~ a.fa {
  }
 
 @media (pointer: coarse) {
- #dashboard-nav {
- font: 16px/24px sans-serif;
+ body {
+ font: 16px/1.5 sans-serif;
  }
 }
diff --git a/src/dashboard.html b/src/dashboard.html
@@ -11,14 +11,14 @@
 
 <body>
 <div id="dashboard-nav">
- <span class="hverbose" ><img data-i18n-title="extName" src="img/ublock.svg"></span><!--
- --><a class="tabButton" href="#settings.html" data-i18n="settingsPageName"></a><!--
- --><a class="tabButton" href="#3p-filters.html" data-i18n="3pPageName"></a><!--
- --><a class="tabButton" href="#1p-filters.html" data-i18n="1pPageName"></a><!--
- --><a class="tabButton" href="#dyna-rules.html" data-i18n="rulesPageName"></a><!--
- --><a class="tabButton" href="#whitelist.html" data-i18n="whitelistPageName"></a><!--
- --><a class="tabButton" href="#shortcuts.html" data-i18n="shortcutsPageName"></a><!--
- --><a class="tabButton" href="#about.html" data-i18n="aboutPageName"></a>
+ <span class="logo" ><img data-i18n-title="extName" src="img/ublock.svg"></span><!--
+ --><span class="tabButton" data-pane="settings.html" data-i18n="settingsPageName"></span><!--
+ --><span class="tabButton" data-pane="3p-filters.html" data-i18n="3pPageName"></span><!--
+ --><span class="tabButton" data-pane="1p-filters.html" data-i18n="1pPageName"></span><!--
+ --><span class="tabButton" data-pane="dyna-rules.html" data-i18n="rulesPageName"></span><!--
+ --><span class="tabButton" data-pane="whitelist.html" data-i18n="whitelistPageName"></span><!--
+ --><span class="tabButton" data-pane="shortcuts.html" data-i18n="shortcutsPageName"></span><!--
+ --><span class="tabButton" data-pane="about.html" data-i18n="aboutPageName"></span>
 </div>
 <div id="unsavedWarning">
  <div>

diff --git a/src/js/dashboard.js b/src/js/dashboard.js
@@ -84,7 +84,7 @@ const discardUnsavedData = function(synchronous = false) {
 };
 
 const loadDashboardPanel = function(pane, first) {
- const tabButton = uDom.nodeFromSelector(`[href="#${pane}"]`);
+ const tabButton = uDom.nodeFromSelector(`[data-pane="${pane}"]`);
  if ( tabButton === null || tabButton.classList.contains('selected') ) {
  return;
  }
@@ -111,8 +111,7 @@ const loadDashboardPanel = function(pane, first) {
 };
 
 const onTabClickHandler = function(ev) {
- loadDashboardPanel(ev.target.hash.slice(1));
- ev.preventDefault();
+ loadDashboardPanel(ev.target.getAttribute('data-pane'));
 };
 
 // https://github.com/uBlockOrigin/uBlock-issues/issues/106