mirror of
https://github.com/gorhill/uBlock.git
synced 2024-11-10 09:07:54 +01:00
Third pass to re-design the dashboard
Related commits: -453f5450b6-a45a21f337This 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.
This commit is contained in:
Raymond Hill
parent
923e9fd8f6
commit
a8e3118fea
5 changed files with 39 additions and 41 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue