From 8436ccbc4ed373aa1b0b34a060dcf0c713144aef Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Tue, 10 Apr 2018 11:21:56 -0400 Subject: [PATCH] improve ckoud widget for small screen devices --- src/3p-filters.html | 30 ++++++++++----------- src/cloud-ui.html | 12 +++++---- src/css/cloud-ui.css | 52 +++++++++++++++--------------------- src/css/dashboard-common.css | 12 ++++++++- src/js/cloud-ui.js | 6 ++--- 5 files changed, 56 insertions(+), 56 deletions(-) diff --git a/src/3p-filters.html b/src/3p-filters.html index 21b3c6e71..32cddd4f4 100644 --- a/src/3p-filters.html +++ b/src/3p-filters.html @@ -15,22 +15,20 @@
-
-
    -
  • - - -
  •   -
  • -
    -
  • -
    -
-
    -
  • -
      -
    -
    + +
    diff --git a/src/cloud-ui.html b/src/cloud-ui.html index 3053d7ab8..3f69a362c 100644 --- a/src/cloud-ui.html +++ b/src/cloud-ui.html @@ -5,11 +5,13 @@ - - - - -

    +
    + + + + +
    +

    diff --git a/src/css/cloud-ui.css b/src/css/cloud-ui.css index 609b3cddc..334e58773 100644 --- a/src/css/cloud-ui.css +++ b/src/css/cloud-ui.css @@ -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; diff --git a/src/css/dashboard-common.css b/src/css/dashboard-common.css index 869ea8428..a011dd33e 100644 --- a/src/css/dashboard-common.css +++ b/src/css/dashboard-common.css @@ -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; + } + } diff --git a/src/js/cloud-ui.js b/src/js/cloud-ui.js index d0a76bb7a..c5c404219 100644 --- a/src/js/cloud-ui.js +++ b/src/js/cloud-ui.js @@ -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(); }