From acc171041dc4cb7ef15f3354bd96a5086da39077 Mon Sep 17 00:00:00 2001 From: kkapsner Date: Wed, 21 Aug 2019 14:33:29 +0200 Subject: [PATCH] Improved option pages on mobile Fixes #387 --- options/options.css | 82 ++++++++++++++++++++++++++++++++++++++---- options/options.html | 1 + options/optionsGui.js | 1 + options/presets.css | 7 +++- options/presets.html | 1 + options/presets.js | 30 ++++++++++++++++ releaseNotes.txt | 2 +- themes/base/layout.css | 1 + versions/updates.json | 4 +++ 9 files changed, 120 insertions(+), 9 deletions(-) diff --git a/options/options.css b/options/options.css index ac6e7d4..5a469b8 100644 --- a/options/options.css +++ b/options/options.css @@ -2,6 +2,12 @@ body.standalone { padding: 0.5em; } +@media (max-width: 400px){ + body.standalone { + padding: 0; + } +} + header { margin-bottom: 1em; } @@ -11,6 +17,16 @@ header .bookmarkNotice { padding: 0.5em; } +@media (max-width: 400px){ + header { + margin-bottom: 0.5em; + } + header h1 { + margin-top: 0.3em; + margin-bottom: 0.3em; + } +} + header .bookmarkNotice .dontShowOptionsOnUpdate { display: block; margin-top: 0.5em; @@ -52,6 +68,11 @@ header .bookmarkNotice .dontShowOptionsOnUpdate input { position: relative; } +@media (max-width: 400px){ + .settings .section h2 { + font-size: 1.2em; + } +} .settings .section .collapser { cursor: pointer; @@ -75,6 +96,11 @@ header .bookmarkNotice .dontShowOptionsOnUpdate input { border-top: 1px solid #c1c1c1; position: relative; } +@media (max-width: 400px){ + .settings .settingRow .content { + padding: 0.35em 0 0.25em; + } +} .settings .settingRow.displayHiddenRow td { position: relative; } @@ -96,6 +122,12 @@ header .bookmarkNotice .dontShowOptionsOnUpdate input { .settings .settingRow td:first-child .content, td.hideColumn label { margin-left: 10px; } +@media (max-width: 400px){ + .settings .settingRow td:first-child .content, td.hideColumn label { + margin-left: 0px; + padding-top: 0.1em; + } +} .settings .settingRow td:last-child .content { margin-right: 10px; } @@ -149,6 +181,11 @@ header .bookmarkNotice .dontShowOptionsOnUpdate input { white-space: pre-wrap; padding-right: 5px; } +@media (max-width: 400px){ + .settings.displayDescriptions .settingRow .description { + margin-inline-start: 0.5em; + } +} input[type=""], input[type="text"], input[type="number"], select, textarea { width: 100%; box-sizing: border-box; @@ -225,10 +262,18 @@ textarea { .urlValues .notSpecifiedForUrl { opacity: 0.5; } +.inputURL { + max-width: calc(100% - 2em); +} td.hideColumn { width: 45px; } +@media (max-width: 400px){ + td.hideColumn { + width: 33px; + } +} .hideContent { cursor: pointer; @@ -289,6 +334,8 @@ td.hideColumn { display: table-row; } +/* groups */ + .groupTabs { display: flex; flex-wrap: nowrap; @@ -316,13 +363,34 @@ td.hideColumn { padding: 0.5em 1em; margin: 2px; } -.groups .groupName.selected { - border-right-color: transparent; - border-top-right-radius: 0; - border-bottom-right-radius: 0; - margin-right: -1px; - padding-right: calc(1em + 3px); - background-color: var(--background-color); +@media (min-width: 401px){ + .groups .groupName.selected { + border-right-color: transparent; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + margin-right: -1px; + padding-right: calc(1em + 3px); + background-color: var(--background-color); + } +} +@media (max-width: 400px){ + .groupTabs { + display: block; + } + + .groups { + border: none; + margin: 0 0 0.3em 0; + } + + .groups .groupName { + margin: 2px 0; + padding: 1px 1em; + } + + .groups .groupName.selected { + background-color: var(--stacked-inputs-focus-color); + } } body:not(.searching) .settings tbody.sectionBody:not(.selectedGroup) { display: none; diff --git a/options/options.html b/options/options.html index bd7aa9a..64c4803 100644 --- a/options/options.html +++ b/options/options.html @@ -7,6 +7,7 @@ + diff --git a/options/optionsGui.js b/options/optionsGui.js index c696885..105b658 100644 --- a/options/optionsGui.js +++ b/options/optionsGui.js @@ -245,6 +245,7 @@ let footCell = document.createElement("td"); footCell.colSpan = 3; let newInput = document.createElement("input"); + newInput.className = "inputURL"; newInput.title = extension.getTranslation("inputURL"); const addURLSetting = function(){ var url = newInput.value.trim(); diff --git a/options/presets.css b/options/presets.css index 49e20ad..7bac808 100644 --- a/options/presets.css +++ b/options/presets.css @@ -7,5 +7,10 @@ .notice .noticeImage { float: left; - margin: 0 0.5em 0.5em 0; + margin: 0 0.5em 0 0; + height: 2.25em; +} + +.introduction { + clear: both; } \ No newline at end of file diff --git a/options/presets.html b/options/presets.html index 142dd2a..d66db53 100644 --- a/options/presets.html +++ b/options/presets.html @@ -6,6 +6,7 @@ + diff --git a/options/presets.js b/options/presets.js index 271962c..e1dd46c 100644 --- a/options/presets.js +++ b/options/presets.js @@ -102,6 +102,35 @@ }).forEach(function(node){ document.body.appendChild(node); }); + + // fit content to the window size + if (window.innerHeight > document.body.getBoundingClientRect().bottom){ + const computedStyle = window.getComputedStyle(document.body); + const availableHeight = window.innerHeight - parseFloat(computedStyle.marginBottom); + const originalFontSize = parseFloat(computedStyle.fontSize) || 10; + let fontSize = originalFontSize; + let lastDelta = 8; + + while ( + availableHeight > document.body.getBoundingClientRect().bottom + ){ + fontSize += lastDelta; + document.body.style.fontSize = fontSize + "px"; + } + let direction = -1; + while ( + lastDelta > 0.125 + ){ + lastDelta /= 2; + fontSize += direction * lastDelta; + document.body.style.fontSize = fontSize + "px"; + direction = Math.sign(availableHeight - document.body.getBoundingClientRect().bottom); + } + while (availableHeight < document.body.getBoundingClientRect().bottom){ + fontSize -= lastDelta; + document.body.style.fontSize = fontSize + "px"; + } + } }); document.querySelector("head title").textContent = extension.getTranslation("presets_title"); @@ -150,6 +179,7 @@ } let introduction = document.createElement("div"); + introduction.className = "introduction"; introduction.textContent = extension.getTranslation("presets_introduction"); head.appendChild(introduction); }()); \ No newline at end of file diff --git a/releaseNotes.txt b/releaseNotes.txt index 0ae917c..d7859a6 100644 --- a/releaseNotes.txt +++ b/releaseNotes.txt @@ -6,7 +6,7 @@ Version 0.5.14: - fixes: - - + - improved option pages on mobile known issues: - if a data URL is blocked the page action button does not appear diff --git a/themes/base/layout.css b/themes/base/layout.css index e16adaf..54f01d2 100644 --- a/themes/base/layout.css +++ b/themes/base/layout.css @@ -26,6 +26,7 @@ button { box-sizing: border-box; padding: 0.25em 0.5em; cursor: pointer; + font-size: 1em; } button:focus { diff --git a/versions/updates.json b/versions/updates.json index 57f4834..df01667 100644 --- a/versions/updates.json +++ b/versions/updates.json @@ -57,6 +57,10 @@ { "version": "0.5.14Alpha20190724", "update_link": "https://canvasblocker.kkapsner.de/versions/canvasblocker_beta-0.5.14Alpha20190724-an+fx.xpi" + }, + { + "version": "0.5.14Alpha20190821", + "update_link": "https://canvasblocker.kkapsner.de/versions/canvasblocker_beta-0.5.14Alpha20190821-an+fx.xpi" } ] }