From a8e3118feafd5c2d7c3e3d03727beff17f9928b4 Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Thu, 9 Apr 2020 09:20:29 -0400 Subject: [PATCH] Third pass to re-design the dashboard Related commits: - https://github.com/gorhill/uBlock/commit/453f5450b6e6550618bf97b5b0541f5f46c35d8e - https://github.com/gorhill/uBlock/commit/a45a21f337216d7d4aaddb5a454ed4842eca3806 This commit fixes parts of the re-design not rendering as intended as per '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. --- src/css/3p-filters.css | 39 +++++++++++++++++++++------------------ src/css/dashboard.css | 14 +++++--------- src/css/settings.css | 6 +++--- src/dashboard.html | 16 ++++++++-------- src/js/dashboard.js | 5 ++--- 5 files changed, 39 insertions(+), 41 deletions(-) diff --git a/src/css/3p-filters.css b/src/css/3p-filters.css index 8fc41ce840cc8..ee593b93bdac4 100644 --- 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,14 +22,17 @@ 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; } @@ -33,11 +40,6 @@ body { 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 index db187a9aec1d3..d597224210637 100644 --- 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 index 58f1736174189..e37383449e69b 100644 --- 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 index 9ac6c5c106a06..24e760308dc8c 100644 --- a/src/dashboard.html +++ b/src/dashboard.html @@ -11,14 +11,14 @@
- +
diff --git a/src/js/dashboard.js b/src/js/dashboard.js index 59d83c154a7de..73f10982d8685 100644 --- 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