mirror of
https://github.com/gorhill/uBlock.git
synced 2024-09-15 07:22:28 +02:00
Even more fine tuning of UI as per feedback
Fix unstyled checkbox in "Filter lists" pane. Related feedback: https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629780098 Hopefully fix glitchy popup panel when opened from the extension icon. By default the panel is configured to be rendered in landscape. It will be toggled programmatically to portrait mode when either the environment is mobile or the viewport is horizontally constrained. Related feedback: https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629712393 New layout for rendering the statistics text strings in landscape mode, so as to avoid text wrapping and to allow a slightly narrower basic pane. Related discussion: https://github.com/uBlockOrigin/uBlock-issues/issues/1027#issuecomment-629785966
This commit is contained in:
Raymond Hill
parent
4edbc8d456
commit
2237d97466
@ -57,7 +57,7 @@
|
||||
--><span class="fa-icon status failed" data-i18n-title="3pNetworkError">unlink</span><!--
|
||||
--><span class="counts"></span></span></span></label>
|
||||
</div>
|
||||
<div class="listEntry toImport"><label><input type="checkbox" id="importLists"><span><span class="forinput" data-i18n="3pImport"></span> <a class="fa-icon info towiki" href="https://github.com/gorhill/uBlock/wiki/Filter-lists-from-around-the-web" target="_blank">info-circle</a></span></label><!--
|
||||
<div class="listEntry toImport"><label><span class="input checkbox"><input type="checkbox" id="importLists"><svg><use href="img/material-design.svg#checkmark" /></svg></span><span><span class="forinput" data-i18n="3pImport"></span> <a class="fa-icon info towiki" href="https://github.com/gorhill/uBlock/wiki/Filter-lists-from-around-the-web" target="_blank">info-circle</a></span></label><!--
|
||||
--><!--
|
||||
--><textarea id="externalLists" dir="ltr" spellcheck="false" placeholder="3pExternalListsHint"></textarea>
|
||||
</div>
|
||||
|
||||
@ -5,6 +5,9 @@
|
||||
}
|
||||
|
||||
/* Internal CSS values */
|
||||
:root body {
|
||||
overflow: hidden;
|
||||
}
|
||||
:root body,
|
||||
:root.mobile body {
|
||||
--font-size: 14px;
|
||||
@ -28,10 +31,13 @@ a {
|
||||
#panes {
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row-reverse;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
#main {
|
||||
max-width: 340px;
|
||||
min-width: 18em;
|
||||
}
|
||||
hr {
|
||||
border: 0;
|
||||
@ -111,17 +117,47 @@ body.needSave #revertRules {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#basicStats {
|
||||
column-gap: var(--popup-gap);
|
||||
display: grid;
|
||||
grid-template: auto / auto;
|
||||
margin: var(--popup-gap) var(--popup-gap) 0 var(--popup-gap);
|
||||
}
|
||||
#basicStats > span {
|
||||
justify-self: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
#basicStats > [data-i18n] {
|
||||
font-size: 95%;
|
||||
}
|
||||
#basicStats > [data-i18n] + span {
|
||||
font-size: 105%;
|
||||
margin-bottom: var(--popup-gap);
|
||||
}
|
||||
:root.portrait #basicStats {
|
||||
grid-template: auto / auto auto;
|
||||
}
|
||||
:root.portrait #basicStats > span {
|
||||
font-size: inherit;
|
||||
justify-self: stretch;
|
||||
margin-bottom: var(--popup-gap);
|
||||
white-space: unset;
|
||||
}
|
||||
:root.portrait #basicStats > [data-i18n] {
|
||||
}
|
||||
:root.portrait #basicStats > [data-i18n] + span {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.itemRibbon {
|
||||
column-gap: var(--popup-gap);
|
||||
display: grid;
|
||||
grid-template: auto / auto auto;
|
||||
margin: var(--popup-gap) var(--popup-gap) 0 var(--popup-gap);
|
||||
grid-auto-columns: 1fr;
|
||||
grid-auto-flow: column;
|
||||
grid-template: auto / 1fr 1fr;
|
||||
margin: var(--popup-gap);
|
||||
}
|
||||
.itemRibbon > span {
|
||||
margin-bottom: var(--popup-gap);
|
||||
}
|
||||
.itemRibbon > [data-i18n] + span {
|
||||
justify-self: end;
|
||||
.itemRibbon > span + span {
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
@ -176,10 +212,13 @@ body.mobile.no-tooltips .toolRibbon .tool {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.moreOrLess {
|
||||
#moreOrLess {
|
||||
column-gap: var(--popup-gap);
|
||||
display: grid;
|
||||
grid-template: auto / 1fr 1fr;
|
||||
margin: 0;
|
||||
}
|
||||
.moreOrLess > span {
|
||||
#moreOrLess > span {
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: var(--popup-gap);
|
||||
@ -189,7 +228,7 @@ body.mobile.no-tooltips .toolRibbon .tool {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
#lessButton {
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
}
|
||||
body[data-more="a b c d e f"] #moreButton {
|
||||
pointer-events: none;
|
||||
@ -202,11 +241,14 @@ body[data-more=""] #lessButton {
|
||||
|
||||
#firewall {
|
||||
border: 0;
|
||||
flex-shrink: 0;
|
||||
flex-shrink: 1;
|
||||
font-size: 90%;
|
||||
margin: 0;
|
||||
max-height: 600px;
|
||||
max-width: 460px;
|
||||
min-width: 30em;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
text-align: right;
|
||||
--rule-cell-width: 5em;
|
||||
}
|
||||
@ -491,44 +533,51 @@ body:not([data-more~="e"]) [data-more="e"] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* horizontally-constrained viewport */
|
||||
:root.portrait body {
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
}
|
||||
:root.portrait #panes {
|
||||
flex-direction: column;
|
||||
}
|
||||
:root.portrait #main {
|
||||
max-width: unset;
|
||||
min-width: unset;
|
||||
}
|
||||
:root.portrait #firewall {
|
||||
max-height: unset;
|
||||
max-width: unset;
|
||||
min-width: unset;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
/* touch-driven devices */
|
||||
:root.mobile #firewall {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
/* mouse-driven devices */
|
||||
:root.desktop {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
}
|
||||
:root:not(.mobile) body {
|
||||
--popup-gap: 12px;
|
||||
max-width: 800px;
|
||||
:root.desktop body {
|
||||
--popup-gap: calc(var(--font-size) * 0.875);
|
||||
}
|
||||
:root.desktop #panes {
|
||||
flex-direction: row-reverse;
|
||||
width: unset;
|
||||
}
|
||||
:root.desktop #main {
|
||||
max-width: 340px;
|
||||
width: 21em;
|
||||
}
|
||||
:root:not(.mobile) #switch:hover {
|
||||
:root.desktop #switch:hover {
|
||||
background-color: var(--default-surface-hover);
|
||||
}
|
||||
:root:not(.mobile) .rulesetTools [id]:hover {
|
||||
:root.desktop .rulesetTools [id]:hover {
|
||||
fill: var(--default-ink);
|
||||
}
|
||||
:root:not(.mobile) #firewall {
|
||||
:root.desktop #firewall {
|
||||
direction: rtl;
|
||||
flex-grow: 1;
|
||||
line-height: 1.4;
|
||||
}
|
||||
:root.desktop #firewall {
|
||||
max-height: 600px;
|
||||
max-width: 460px;
|
||||
overflow-y: auto;
|
||||
width: 32em;
|
||||
}
|
||||
:root:not(.mobile) .tool:hover {
|
||||
:root.desktop .tool:hover {
|
||||
background-color: var(--default-surface-hover);
|
||||
}
|
||||
:root:not(.mobile) .moreOrLess > span:hover {
|
||||
:root.desktop #moreOrLess > span:hover {
|
||||
background-color: var(--default-surface-hover);
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
let popupFontSize = 'unset';
|
||||
vAPI.localStorage.getItemAsync('popupFontSize').then(value => {
|
||||
if ( typeof value !== 'string' || value === 'unset' ) { return; }
|
||||
document.body.style.setProperty('font-size', value);
|
||||
document.body.style.setProperty('--font-size', value);
|
||||
popupFontSize = value;
|
||||
});
|
||||
|
||||
@ -184,7 +184,8 @@ const formatNumber = function(count) {
|
||||
} else {
|
||||
count = Math.floor(count * 1000) / 1000;
|
||||
}
|
||||
return (count).toLocaleString(undefined) + '\u2009M';};
|
||||
return (count).toLocaleString(undefined) + '\u2009M';
|
||||
};
|
||||
|
||||
let intlNumberFormat;
|
||||
|
||||
@ -613,10 +614,10 @@ let renderOnce = function() {
|
||||
if ( popupData.fontSize !== popupFontSize ) {
|
||||
popupFontSize = popupData.fontSize;
|
||||
if ( popupFontSize !== 'unset' ) {
|
||||
body.style.setProperty('font-size', popupFontSize);
|
||||
body.style.setProperty('--font-size', popupFontSize);
|
||||
vAPI.localStorage.setItem('popupFontSize', popupFontSize);
|
||||
} else {
|
||||
body.style.removeProperty('font-size');
|
||||
body.style.removeProperty('--font-size');
|
||||
vAPI.localStorage.removeItem('popupFontSize');
|
||||
}
|
||||
}
|
||||
@ -1200,18 +1201,22 @@ const getPopupData = async function(tabId) {
|
||||
const checkViewport = async function() {
|
||||
const root = document.querySelector(':root');
|
||||
if ( root.classList.contains('desktop') ) {
|
||||
const main = document.getElementById('main');
|
||||
const sticky = document.getElementById('sticky');
|
||||
const stickyParent = sticky.parentElement;
|
||||
if ( stickyParent !== main ) {
|
||||
main.prepend(sticky);
|
||||
}
|
||||
await nextFrames(4);
|
||||
const main = document.getElementById('main');
|
||||
const firewall = document.getElementById('firewall');
|
||||
const minWidth = (main.offsetWidth + firewall.offsetWidth) / 1.1;
|
||||
if ( window.innerWidth < minWidth ) {
|
||||
stickyParent.prepend(sticky);
|
||||
root.classList.remove('desktop');
|
||||
root.classList.add('portrait');
|
||||
}
|
||||
} else if ( root.classList.contains('mobile') ) {
|
||||
root.classList.add('portrait');
|
||||
}
|
||||
if ( root.classList.contains('portrait') ) {
|
||||
const panes = document.getElementById('panes');
|
||||
const sticky = document.getElementById('sticky');
|
||||
const stickyParent = sticky.parentElement;
|
||||
if ( stickyParent !== panes ) {
|
||||
panes.prepend(sticky);
|
||||
}
|
||||
}
|
||||
await nextFrames(1);
|
||||
|
||||
@ -13,6 +13,7 @@
|
||||
|
||||
<body class="loading" data-more="a b c d">
|
||||
<div id="panes">
|
||||
<div id="main">
|
||||
<div id="sticky">
|
||||
<div id="stickyTools">
|
||||
<div class="rulesetTools">
|
||||
@ -40,7 +41,6 @@
|
||||
</div>
|
||||
<div id="hostname"><span></span>­<span></span></div>
|
||||
</div>
|
||||
<div id="main">
|
||||
<hr data-more="d">
|
||||
<div id="extraTools" class="toolRibbon" data-more="d">
|
||||
<span id="no-popups" class="hnSwitch tool enabled" role="button" aria-label tabindex="0" title><span class="fa-icon fa-icon-badged">ph-popups<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span class="caption" data-i18n="popupNoPopups_v2"></span></span>
|
||||
@ -50,7 +50,7 @@
|
||||
<span id="no-scripting" class="hnSwitch tool enabled" role="button" aria-label tabindex="0" title><span class="fa-icon fa-icon-badged">code<svg class="nope" viewBox="0 0 20 20"><path d="M1,1 19,19M1,19 19,1" /></svg></span><span class="caption" data-i18n="popupNoScripting_v2"></span></span>
|
||||
</div>
|
||||
<hr data-more="a">
|
||||
<div id="basicStats" class="itemRibbon" data-more="a">
|
||||
<div id="basicStats" data-more="a">
|
||||
<span data-i18n="popupBlockedOnThisPage_v2"></span><span></span>
|
||||
<span data-i18n="popupDomainsConnected_v2"></span><span></span>
|
||||
<span data-i18n="popupBlockedSinceInstall_v2" data-more="b"></span><span data-more="b"></span>
|
||||
@ -67,7 +67,7 @@
|
||||
<span data-i18n="popupVersion"></span><span id="version"></span>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="itemRibbon moreOrLess">
|
||||
<div id="moreOrLess">
|
||||
<span id="moreButton">
|
||||
<span data-i18n="popupMoreButton_v2"></span> <span class="fa-icon">angle-up</span>
|
||||
</span>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user