Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-10-06 09:37:12 +02:00
Code Issues Releases Wiki Activity

improve ckoud widget for small screen devices

Browse Source
This commit is contained in:
Raymond Hill 2018-04-10 11:21:56 -04:00
parent 4ec386de98
commit 8436ccbc4e
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
5 changed files with 56 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/3p-filters.html
View File

@ -15,22 +15,20 @@
<div class="body">
<div id="cloudWidget" class="hide" data-cloud-entry="tpFiltersPane"></div>
<div>
<ul id="options" class="root">
<li><button id="buttonUpdate" class="custom important disabled" data-i18n="3pUpdateNow"></button>
<button id="buttonPurgeAll" class="custom disabled" data-i18n="3pPurgeAll"></button>
<button id="buttonApply" class="custom important disabled" data-i18n="3pApplyChanges"></button>
<li><input type="checkbox" id="autoUpdate"><label data-i18n="3pAutoUpdatePrompt1" for="autoUpdate"></label>&ensp;
<li><input type="checkbox" id="parseCosmeticFilters"><label data-i18n="3pParseAllABPHideFiltersPrompt1" for="parseCosmeticFilters"></label><button class="whatisthis"></button>
<div class="whatisthis-expandable para" data-i18n="3pParseAllABPHideFiltersInfo"></div>
<li><input type="checkbox" id="ignoreGenericCosmeticFilters"><label data-i18n="3pIgnoreGenericCosmeticFilters" for="ignoreGenericCosmeticFilters"></label><button class="whatisthis"></button>
<div class="whatisthis-expandable para" data-i18n="3pIgnoreGenericCosmeticFiltersInfo"></div>
</ul>
<ul class="root">
<li><span id="listsOfBlockedHostsPrompt"></span>
<ul id="lists"></ul>
</ul>
</div>
<ul id="options" class="root">
<li><button id="buttonUpdate" class="custom important disabled" data-i18n="3pUpdateNow"></button>
<button id="buttonPurgeAll" class="custom disabled" data-i18n="3pPurgeAll"></button>
<button id="buttonApply" class="custom important disabled" data-i18n="3pApplyChanges"></button>
<li><input type="checkbox" id="autoUpdate"><label data-i18n="3pAutoUpdatePrompt1" for="autoUpdate"></label>&ensp;
<li><input type="checkbox" id="parseCosmeticFilters"><label data-i18n="3pParseAllABPHideFiltersPrompt1" for="parseCosmeticFilters"></label><button class="whatisthis"></button>
<div class="whatisthis-expandable para" data-i18n="3pParseAllABPHideFiltersInfo"></div>
<li><input type="checkbox" id="ignoreGenericCosmeticFilters"><label data-i18n="3pIgnoreGenericCosmeticFilters" for="ignoreGenericCosmeticFilters"></label><button class="whatisthis"></button>
<div class="whatisthis-expandable para" data-i18n="3pIgnoreGenericCosmeticFiltersInfo"></div>
</ul>
<ul class="root">
<li><span id="listsOfBlockedHostsPrompt"></span>
<ul id="lists"></ul>
</ul>
</div>

12
src/cloud-ui.html
View File

@ -5,11 +5,13 @@
<title></title>
</head>
<body>
<button id="cloudPush" type="button" title="cloudPush"></button>
<span data-i18n="cloudNoData"></span>
<button id="cloudPull" type="button" title="cloudPull" disabled></button>
<button id="cloudPullAndMerge" type="button" title="cloudPullAndMerge" disabled></button>
<p id="cloudError"><span></span></p>
<div class="cloudTools">
<button id="cloudPush" type="button" class="custom" title="cloudPush"><span class="fa">&#xf0ee;</span></button>
<span id="cloudInfo" data-i18n="cloudNoData"></span>
<button id="cloudPull" type="button" class="custom" title="cloudPull" disabled><span class="fa">&#xf0ed;</span></button>
<button id="cloudPullAndMerge" type="button" class="custom" title="cloudPullAndMerge" disabled><span class="fa">&#xf0ed;<span>&#xf067;</span></span></button>
</div>
<p id="cloudError"></p>
<span id="cloudCog" class="fa">&#xf013;</span>
<div id="cloudOptions">
<div>

52
src/css/cloud-ui.css
View File

@ -2,62 +2,52 @@
background: url("../img/cloud.png") hsl(216, 100%, 93%);
border-radius: 3px;
margin: 0.5em 0;
padding: 1em 1em 0 1em;
padding: 0.5em;
position: relative;
}
#cloudWidget.hide {
display: none;
}
#cloudWidget > button {
display: inline-block;
font-family: FontAwesome;
font-size: 160%;
font-style: normal;
font-weight: normal;
line-height: 1;
padding: 0.2em 0.25em 0.1em 0.25em;
position: relative;
vertical-align: baseline;
#cloudWidget .cloudTools {
align-items: center;
display: flex;
flex-wrap: nowrap;
}
#cloudWidget > button[disabled] {
#cloudWidget button[disabled] {
visibility: hidden;
}
#cloudWidget > button.error {
#cloudWidget button > span.fa {
font-size: 150%;
}
#cloudWidget button.error {
color: red;
}
#cloudPush:after {
content: '\f0ee';
}
#cloudPull:before,
#cloudPullAndMerge:before {
content: '\f0ed';
}
#cloudPullAndMerge {
margin: 0 0.25em;
margin-left: 0.25em;
}
#cloudPullAndMerge:after {
content: '\f067';
#cloudPullAndMerge > span {
position: relative;
}
#cloudPullAndMerge > span > span {
font-size: 50%;
position: absolute;
right: 0;
top: 10%;
}
#cloudWidget > span {
#cloudInfo {
color: gray;
display: inline-block;
font-size: 90%;
margin: 0 1em;
overflow: hidden;
padding: 0;
vertical-align: bottom;
white-space: pre;
}
#cloudError {
color: red;
margin: 0;
padding: 0.5em 0;
}
#cloudError > span {
font-size: x-small;
margin: 0.5em 0 0 0;
}
#cloudError:empty {
display: none;
}
#cloudWidget > #cloudCog {
cursor: pointer;

12
src/css/dashboard-common.css
View File

@ -6,7 +6,7 @@ body {
padding: 0;
}
body > div.body {
padding: 0 0.5em 0.5em 0.5em;
padding: 0 0.5em;
}
@media screen and (max-device-width: 960px) {
body {
@ -91,7 +91,17 @@ input[type="checkbox"][disabled] + label {
background-color: #FEDAE0;
}
@media (max-height: 640px), (max-height: 800px) and (max-width: 480px) {
.body > p,
.body > ul {
margin: 0.5em 0;
}
.vverbose {
display: none !important;
}
}
@media (max-height: 400px) {
html {
min-height: 400px !important;
overflow: auto !important;
}
}

6
src/js/cloud-ui.js
View File

@ -1,7 +1,7 @@
/*******************************************************************************
uBlock Origin - a browser extension to block requests.
Copyright (C) 2015-2017 Raymond Hill
Copyright (C) 2015-2018 Raymond Hill
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
@ -75,7 +75,7 @@ var onCloudDataReceived = function(entry) {
};
var time = new Date(entry.tstamp);
widget.querySelector('span').textContent =
widget.querySelector('#cloudInfo').textContent =
entry.source + '\n' +
time.toLocaleString('fullwide', timeOptions);
};
@ -111,7 +111,7 @@ var pushData = function() {
document.getElementById('cloudPush')
.classList
.toggle('error', failed);
document.querySelector('#cloudError > span')
document.querySelector('#cloudError')
.textContent = failed ? error : '';
fetchCloudData();
}