security-and-privacy/CanvasBlocker
security-and-privacy/CanvasBlocker
1
0
Fork 0
mirror of https://github.com/kkapsner/CanvasBlocker synced 2024-12-22 12:50:36 +01:00
Code Releases Activity

Improved option pages on mobile

Browse Source 
Fixes #387
This commit is contained in:
kkapsner 2019-08-21 14:33:29 +02:00
parent a95fae3de8
commit acc171041d
9 changed files with 120 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
options/options.css
View File

@ -2,6 +2,12 @@ body.standalone {
padding: 0.5em; padding: 0.5em;
} }
@media (max-width: 400px){
body.standalone {
padding: 0;
}
}
header { header {
margin-bottom: 1em; margin-bottom: 1em;
} }
@ -11,6 +17,16 @@ header .bookmarkNotice {
padding: 0.5em; 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 { header .bookmarkNotice .dontShowOptionsOnUpdate {
display: block; display: block;
margin-top: 0.5em; margin-top: 0.5em;
@ -52,6 +68,11 @@ header .bookmarkNotice .dontShowOptionsOnUpdate input {
position: relative; position: relative;
} }
@media (max-width: 400px){
.settings .section h2 {
font-size: 1.2em;
}
}
.settings .section .collapser { .settings .section .collapser {
cursor: pointer; cursor: pointer;
@ -75,6 +96,11 @@ header .bookmarkNotice .dontShowOptionsOnUpdate input {
border-top: 1px solid #c1c1c1; border-top: 1px solid #c1c1c1;
position: relative; position: relative;
} }
@media (max-width: 400px){
.settings .settingRow .content {
padding: 0.35em 0 0.25em;
}
}
.settings .settingRow.displayHiddenRow td { .settings .settingRow.displayHiddenRow td {
position: relative; position: relative;
} }
@ -96,6 +122,12 @@ header .bookmarkNotice .dontShowOptionsOnUpdate input {
.settings .settingRow td:first-child .content, td.hideColumn label { .settings .settingRow td:first-child .content, td.hideColumn label {
margin-left: 10px; 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 { .settings .settingRow td:last-child .content {
margin-right: 10px; margin-right: 10px;
} }
@ -149,6 +181,11 @@ header .bookmarkNotice .dontShowOptionsOnUpdate input {
white-space: pre-wrap; white-space: pre-wrap;
padding-right: 5px; 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 { input[type=""], input[type="text"], input[type="number"], select, textarea {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
@ -225,10 +262,18 @@ textarea {
.urlValues .notSpecifiedForUrl { .urlValues .notSpecifiedForUrl {
opacity: 0.5; opacity: 0.5;
} }
.inputURL {
max-width: calc(100% - 2em);
}
td.hideColumn { td.hideColumn {
width: 45px; width: 45px;
} }
@media (max-width: 400px){
td.hideColumn {
width: 33px;
}
}
.hideContent { .hideContent {
cursor: pointer; cursor: pointer;
@ -289,6 +334,8 @@ td.hideColumn {
display: table-row; display: table-row;
} }
/* groups */
.groupTabs { .groupTabs {
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
@ -316,13 +363,34 @@ td.hideColumn {
padding: 0.5em 1em; padding: 0.5em 1em;
margin: 2px; margin: 2px;
} }
.groups .groupName.selected { @media (min-width: 401px){
.groups .groupName.selected {
border-right-color: transparent; border-right-color: transparent;
border-top-right-radius: 0; border-top-right-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
margin-right: -1px; margin-right: -1px;
padding-right: calc(1em + 3px); padding-right: calc(1em + 3px);
background-color: var(--background-color); 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) { body:not(.searching) .settings tbody.sectionBody:not(.selectedGroup) {
display: none; display: none;

1
options/options.html
View File

@ -7,6 +7,7 @@
<link href="../icons/icon.svg" type="image/svg" rel="icon"> <link href="../icons/icon.svg" type="image/svg" rel="icon">
<link href="../icons/icon.svg" type="image/svg" rel="shortcut icon"> <link href="../icons/icon.svg" type="image/svg" rel="shortcut icon">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body> <body>
<script src="../lib/require.js"></script> <script src="../lib/require.js"></script>

1
options/optionsGui.js
View File

@ -245,6 +245,7 @@
let footCell = document.createElement("td"); let footCell = document.createElement("td");
footCell.colSpan = 3; footCell.colSpan = 3;
let newInput = document.createElement("input"); let newInput = document.createElement("input");
newInput.className = "inputURL";
newInput.title = extension.getTranslation("inputURL"); newInput.title = extension.getTranslation("inputURL");
const addURLSetting = function(){ const addURLSetting = function(){
var url = newInput.value.trim(); var url = newInput.value.trim();

7
options/presets.css
View File

@ -7,5 +7,10 @@
.notice .noticeImage { .notice .noticeImage {
float: left; float: left;
margin: 0 0.5em 0.5em 0; margin: 0 0.5em 0 0;
height: 2.25em;
}
.introduction {
clear: both;
} }

1
options/presets.html
View File

@ -6,6 +6,7 @@
<link href="../icons/icon.svg" type="image/svg" rel="icon"> <link href="../icons/icon.svg" type="image/svg" rel="icon">
<link href="../icons/icon.svg" type="image/svg" rel="shortcut icon"> <link href="../icons/icon.svg" type="image/svg" rel="shortcut icon">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head> </head>
<body> <body>
<script src="../lib/require.js"></script> <script src="../lib/require.js"></script>

30
options/presets.js
View File

@ -102,6 +102,35 @@
}).forEach(function(node){ }).forEach(function(node){
document.body.appendChild(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"); document.querySelector("head title").textContent = extension.getTranslation("presets_title");
@ -150,6 +179,7 @@
} }
let introduction = document.createElement("div"); let introduction = document.createElement("div");
introduction.className = "introduction";
introduction.textContent = extension.getTranslation("presets_introduction"); introduction.textContent = extension.getTranslation("presets_introduction");
head.appendChild(introduction); head.appendChild(introduction);
}()); }());

2
releaseNotes.txt
View File

@ -6,7 +6,7 @@ Version 0.5.14:
- -
fixes: fixes:
- - improved option pages on mobile
known issues: known issues:
- if a data URL is blocked the page action button does not appear - if a data URL is blocked the page action button does not appear

1
themes/base/layout.css
View File

@ -26,6 +26,7 @@ button {
box-sizing: border-box; box-sizing: border-box;
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
cursor: pointer; cursor: pointer;
font-size: 1em;
} }
button:focus { button:focus {

4
versions/updates.json
View File

@ -57,6 +57,10 @@
{ {
"version": "0.5.14Alpha20190724", "version": "0.5.14Alpha20190724",
"update_link": "https://canvasblocker.kkapsner.de/versions/canvasblocker_beta-0.5.14Alpha20190724-an+fx.xpi" "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"
} }
] ]
} }