kiwix/kiwix-js-pwa
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-js-pwa.git synced 2025-09-12 13:58:28 -04:00
Code Issues Packages Projects Releases Wiki Activity

Style checkboxes and radio buttons for better visibility

Browse Source 
Former-commit-id: 2afccbca06acb662aab06e7204782e6e38c0f04b [formerly 4ce64482281f7a36456e4c6a11a003554c50438c]
Former-commit-id: f8a39e12e57986128f73ac2f9cf01d9ae5c829ad
This commit is contained in:
Jaifroid 2019-04-07 18:50:55 +01:00
parent 2553826b55
commit 0580cc1bc8
4 changed files with 206 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
www/css/app.css
View File

@ -383,7 +383,133 @@ pre {
margin-bottom: 15% !important; margin-bottom: 15% !important;
} }
@media (max-width: 768px) { /*********************************/
/******* Custom checkboxes *******/
/*********************************/
/* Hide the browser's default checkbox */
.container input[type=checkbox], .container input[type=radio] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: -25px;
height: 20px;
width: 20px;
background-color: #eee;
border: 2px solid #0078d7;
}
.panel-warning .checkmark, .panel-warning .radiobtn {
border-color: darkkhaki;
}
.panel-danger .checkmark, .panel-danger .radiobtn {
border-color: #a94442;
}
.dark .checkmark, .dark .radiobtn {
border-color: darkslategray;
}
/* On mouse-over, add a grey background color */
.checkbox:hover input ~ .checkmark {
background-color: #ccc;
}
.dark .panel-warning .checkmark, .dark .panel-warning .radiobtn {
border-color: #808000;
}
.dark .panel-danger .checkmark, .dark .panel-danger .radiobtn {
border-color: #800000;
}
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark, .container input:indeterminate ~ .checkmark, .container input:checked ~ .radiobtn {
background-color: steelblue;
}
.dark .container input:checked ~ .checkmark, .dark .container input:indeterminate ~ .checkmark, .dark .container input:checked ~ .radiobtn {
background-color: #12303b;
}
.panel-warning input:checked ~ .checkmark, .panel-warning input:checked ~ .radiobtn {
background-color: darkkhaki;
}
.dark .panel-warning input:checked ~ .checkmark, .dark .panel-warning input:checked ~ .radiobtn {
background-color: #4d4d00;
}
.panel-danger input:checked ~ .checkmark, .panel-danger input:checked ~ .radiobtn {
background-color: #a94442;
}
.dark .panel-danger input:checked ~ .checkmark, .dark .panel-danger input:checked ~ .radiobtn {
background-color: #4d0000;
}
/* Style the checkmark/indicator */
.container input:checked ~ .checkmark:after {
content: "";
position: absolute;
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
.container input:indeterminate ~ .checkmark:after {
content: "";
position: absolute;
top: 30%;
left: 30%;
width: 40%;
height: 40%;
background: white;
}
/* Create a custom radio button */
.radiobtn {
position: absolute;
top: 0;
left: -25px;
height: 20px;
width: 20px;
background-color: #eee;
border-radius: 50%;
border: 2px solid #0078d7;
}
/* On mouse-over, add a grey background color */
.radio:hover input ~ .radiobtn {
background-color: #ccc;
}
/* Style the indicator (dot/circle) */
.container input:checked ~ .radiobtn:after {
content: "";
position: absolute;
top: 4px;
left: 4px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
@media (max-width: 768px) {
/*Increase touchability of bottom buttons*/ /*Increase touchability of bottom buttons*/
footer .btn-default { footer .btn-default {
font-size: 120% !important; font-size: 120% !important;
@ -464,8 +590,9 @@ pre {
padding-bottom: 1px !important; padding-bottom: 1px !important;
font-size: 16px !important; font-size: 16px !important;
}*/ }*/
} }
@media (max-width: 440px) {
@media (max-width: 440px) {
/*.btn-primary { /*.btn-primary {
font-size: 12px !important; font-size: 12px !important;
} }
@ -475,4 +602,4 @@ pre {
#btnHome { #btnHome {
float: left; float: left;
}*/ }*/
} }

38
www/index.html
View File

@ -478,16 +478,19 @@
<div id="displayThemeDiv" class="panel panel-info" style="clear: left;"> <div id="displayThemeDiv" class="panel panel-info" style="clear: left;">
<div class="panel-heading">Dark mode:</div> <div class="panel-heading">Dark mode:</div>
<div class="panel-body"> <div class="panel-body">
<label class="checkbox"> <label class="checkbox" title="Tap three times for dark | auto | light">
<input type="checkbox" name="cssUIDarkTheme" id="cssUIDarkThemeCheck"> <input type="checkbox" name="cssUIDarkTheme" id="cssUIDarkThemeCheck">
<b>Set dark mode for User Interface</b>: [<span id="cssUIDarkThemeState"></span>] (<i>auto</i> mode uses UWP system Settings if available) <span class="checkmark"></span>
<b>Set dark mode for User Interface</b>: [ <b><span id="cssUIDarkThemeState"></span></b> ] (<i>auto</i> mode uses UWP system Settings if available)
</label> </label>
<label class="checkbox"> <label class="checkbox" title="Tap three times for dark | auto | light">
<input type="checkbox" name="cssWikiDarkTheme" id="cssWikiDarkThemeCheck"> <input type="checkbox" name="cssWikiDarkTheme" id="cssWikiDarkThemeCheck">
<b>Set dark theme for articles</b>: [<span id="cssWikiDarkThemeState"></span>] (<i>experimental</i>: tested with Wikimedia ZIMs) <span class="checkmark"></span>
<b>Set dark theme for articles</b>: [ <b><span id="cssWikiDarkThemeState"></span></b> ] (<i>experimental</i>: tested with Wikimedia ZIMs)
</label> </label>
<label id="darkInvert" style="display:none;" class="checkbox"> <label id="darkInvert" style="display:none;" class="checkbox">
<input type="checkbox" name="cssWikiDarkThemeInvert" id="cssWikiDarkThemeInvertCheck"> <input type="checkbox" name="cssWikiDarkThemeInvert" id="cssWikiDarkThemeInvertCheck">
<span class="checkmark"></span>
<b>Use simple inversion for dark theme</b> (should work with all archive types) <b>Use simple inversion for dark theme</b> (should work with all archive types)
</label> </label>
</div> </div>
@ -497,19 +500,23 @@
<div class="panel-body"> <div class="panel-body">
<label class="radio"> <label class="radio">
<input name="cssInjectionMode" id="cssModeAutoRadio" type="radio" value="auto"> <input name="cssInjectionMode" id="cssModeAutoRadio" type="radio" value="auto">
<span class="radiobtn"></span>
<b>Select style automatically</b> (<i>recommended</i>: matches the ZIM style) <b>Select style automatically</b> (<i>recommended</i>: matches the ZIM style)
</label> </label>
<label class="radio"> <label class="radio">
<input name="cssInjectionMode" id="cssModeDesktopRadio" type="radio" value="desktop"> <input name="cssInjectionMode" id="cssModeDesktopRadio" type="radio" value="desktop">
<span class="radiobtn"></span>
<b>Use Wikimedia desktop style</b> (and transform if necessary) <b>Use Wikimedia desktop style</b> (and transform if necessary)
</label> </label>
<label class="radio"> <label class="radio">
<input name="cssInjectionMode" id="cssModeMobileRadio" type="radio" value="mobile"> <input name="cssInjectionMode" id="cssModeMobileRadio" type="radio" value="mobile">
<span class="radiobtn"></span>
<b>Use Wikimedia mobile style</b> (and transform if necessary) <b>Use Wikimedia mobile style</b> (and transform if necessary)
</label> </label>
<label class="checkbox"> <label class="checkbox" title="Tap three times for always | auto | never">
<input name="pageMaxWidth" id="removePageMaxWidthCheck" type="checkbox" value="false"> <input name="pageMaxWidth" id="removePageMaxWidthCheck" type="checkbox" value="false">
<b>Remove max page width restriction</b>: <span id="pageMaxWidthState"></span> (useful for recent Wikipedia archives) <span class="checkmark"></span>
<b>Remove max page width restriction</b>: [ <b><span id="pageMaxWidthState"></span></b> ] (useful for recent Wikipedia archives)
</label> </label>
</div> </div>
</div> </div>
@ -518,6 +525,7 @@
<div class="panel-body"> <div class="panel-body">
<label class="checkbox"> <label class="checkbox">
<input type="checkbox" name="hideToolbar" id="hideToolbarCheck"> <input type="checkbox" name="hideToolbar" id="hideToolbarCheck">
<span class="checkmark"></span>
<b>Hide top toolbar while scrolling</b> (tap <span class="glyphicon glyphicon-arrow-up"></span> once to reveal) <b>Hide top toolbar while scrolling</b> (tap <span class="glyphicon glyphicon-arrow-up"></span> once to reveal)
</label> </label>
<label oninput="document.getElementById('spinnerVal').innerHTML = relativeUIFontSizeSlider.value + '%';" style="width: 80%;"> <label oninput="document.getElementById('spinnerVal').innerHTML = relativeUIFontSizeSlider.value + '%';" style="width: 80%;">
@ -528,27 +536,31 @@
</label> </label>
<label class="checkbox"> <label class="checkbox">
<input type="checkbox" name="cssCacheMode" id="cssCacheModeCheck"> <input type="checkbox" name="cssCacheMode" id="cssCacheModeCheck">
<span class="checkmark"></span>
<b>Use locally cached display styles</b> (<i>recommended</i> for Wikipedia ZIM) <b>Use locally cached display styles</b> (<i>recommended</i> for Wikipedia ZIM)
</label> </label>
<label class="checkbox"> <label class="checkbox">
<input type="checkbox" name="imageDisplayMode" id="imageDisplayModeCheck"> <input type="checkbox" name="imageDisplayMode" id="imageDisplayModeCheck">
<span class="checkmark"></span>
<b>Display images if any</b> (if hidden, tap the <span style="background-color:lightblue; color:black;">&nbsp;blue area&nbsp;</span> to display one-by-one) <b>Display images if any</b> (if hidden, tap the <span style="background-color:lightblue; color:black;">&nbsp;blue area&nbsp;</span> to display one-by-one)
</label> </label>
<label class="checkbox"> <label class="checkbox">
<input type="checkbox" name="hideActiveContentWarning" id="hideActiveContentWarningCheck"> <input type="checkbox" name="hideActiveContentWarning" id="hideActiveContentWarningCheck">
<b>Permanently hide warning about active content</b> (only hide if you know how to access the Archive Index [<i>Hint: type a space in the search box</i>]) <span class="checkmark"></span>
<b>Permanently hide active content warning</b> (for experienced users)
</label> </label>
<label class="text"> <label class="text">
<b>Start character</b> of alphabet: <b>Start character</b> of alphabet:
<input type="text" name="alphaChar" id="alphaCharTxt" value="A" style="width:2em;"> <input type="text" name="alphaChar" id="alphaCharTxt" value="A" style="width:2em;color:steelblue;">
(use capital letters if they exist in your locale)<br /> (use capital letters if they exist in your locale)<br />
<b>End character</b> of alphabet:&nbsp;&nbsp; <b>End character</b> of alphabet:&nbsp;&nbsp;
<input type="text" name="omegaChar" id="omegaCharTxt" value="Z" style="width:2em;"> <input type="text" name="omegaChar" id="omegaCharTxt" value="Z" style="width:2em;color:steelblue;">
(these are used to set appropriate alphabet for the Archive Index) (these are used to set appropriate alphabet for the Archive Index)
</label> </label>
<label class="checkbox"> <label class="checkbox">
<input type="checkbox" name="allowHTMLExtraction" id="allowHTMLExtractionCheck"> <input type="checkbox" name="allowHTMLExtraction" id="allowHTMLExtractionCheck">
<strong>Allow opening articles in a separate browser tab</strong> (slightly increases app's memory usage) <span class="checkmark"></span>
<b>Allow opening articles in a separate browser tab</b> (slightly increases app's memory usage)
</label> </label>
</div> </div>
</div> </div>
@ -565,6 +577,7 @@
<div class="panel-body"> <div class="panel-body">
<label class="checkbox"> <label class="checkbox">
<input type="checkbox" name="rememberLastPage" id="rememberLastPageCheck"> <input type="checkbox" name="rememberLastPage" id="rememberLastPageCheck">
<span class="checkmark"></span>
<b>Reopen last-visited page</b> on next app launch <b>Reopen last-visited page</b> on next app launch
</label> </label>
</div> </div>
@ -581,6 +594,7 @@
<div class="panel-body"> <div class="panel-body">
<label class="checkbox"> <label class="checkbox">
<input type="checkbox" name="displayFileSelectors" id="displayFileSelectorsCheck"> <input type="checkbox" name="displayFileSelectors" id="displayFileSelectorsCheck">
<span class="checkmark"></span>
<b>Display selectors</b> for files and folders : <i>This is for downloading <b>Wikivoyage</b> in other languages</i>. If you wish to open different ZIM files (e.g. Wikipedia), you should instead download Kiwix JS from the Store <b>Display selectors</b> for files and folders : <i>This is for downloading <b>Wikivoyage</b> in other languages</i>. If you wish to open different ZIM files (e.g. Wikipedia), you should instead download Kiwix JS from the Store
</label> </label>
</div> </div>
@ -590,10 +604,12 @@
<div class="panel-body"> <div class="panel-body">
<label class="radio"> <label class="radio">
<input type="radio" name="useMathJax" id="useMathJaxRadioTrue" value="true"> <input type="radio" name="useMathJax" id="useMathJaxRadioTrue" value="true">
<span class="radiobtn"></span>
<b>Typeset TeX equations with MathJax</b> (<i>recommended</i>: very fast, but not all symbols supported in all languages; will use SVG fallbacks if TeX string not available) <b>Typeset TeX equations with MathJax</b> (<i>recommended</i>: very fast, but not all symbols supported in all languages; will use SVG fallbacks if TeX string not available)
</label> </label>
<label class="radio"> <label class="radio">
<input type="radio" name="useMathJax" id="useMathJaxRadioFalse" value="false"> <input type="radio" name="useMathJax" id="useMathJaxRadioFalse" value="false">
<span class="radiobtn"></span>
<b>Use SVG fallback images</b> (very slow and memory hungry, but will dislplay all symbols) <b>Use SVG fallback images</b> (very slow and memory hungry, but will dislplay all symbols)
</label> </label>
</div> </div>
@ -603,10 +619,12 @@
<div class="panel-body"> <div class="panel-body">
<label class="radio"> <label class="radio">
<input type="radio" name="contentInjectionMode" value="jquery" id="jQueryModeRadio" checked> <input type="radio" name="contentInjectionMode" value="jquery" id="jQueryModeRadio" checked>
<span class="radiobtn"></span>
<b>JQuery</b> (slow and memory hungry, but safer) <b>JQuery</b> (slow and memory hungry, but safer)
</label> </label>
<label class="radio"> <label class="radio">
<input type="radio" name="contentInjectionMode" value="serviceworker" id="serviceworkerModeRadio"> <input type="radio" name="contentInjectionMode" value="serviceworker" id="serviceworkerModeRadio">
<span class="radiobtn"></span>
<b>ServiceWorker</b> (faster but unstable, and not supported by all platforms) <b>ServiceWorker</b> (faster but unstable, and not supported by all platforms)
</label> </label>
<div id="serviceWorkerStatus"></div> <div id="serviceWorkerStatus"></div>

18
www/js/app.js
View File

@ -778,8 +778,11 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'q', 'module'
if (params.cssTheme == 'auto') document.getElementById('darkInvert').style.display = cssUIThemeGetOrSet('auto', true) == 'light' ? 'none' : 'inline'; if (params.cssTheme == 'auto') document.getElementById('darkInvert').style.display = cssUIThemeGetOrSet('auto', true) == 'light' ? 'none' : 'inline';
document.getElementById('cssUIDarkThemeCheck').addEventListener('click', function () { document.getElementById('cssUIDarkThemeCheck').addEventListener('click', function () {
//This code implements a tri-state checkbox //This code implements a tri-state checkbox
if (this.readOnly) { this.checked = true; this.readOnly = false; } if (this.readOnly) this.checked = this.readOnly = false;
else if (this.checked) this.readOnly = this.indeterminate = true; else if (!this.checked) this.readOnly = this.indeterminate = true;
//Code below shows how to invert the order
//if (this.readOnly) { this.checked = true; this.readOnly = false; }
//else if (this.checked) this.readOnly = this.indeterminate = true;
params.cssUITheme = this.indeterminate ? "auto" : this.checked ? 'dark' : 'light'; params.cssUITheme = this.indeterminate ? "auto" : this.checked ? 'dark' : 'light';
if (!uiSettings) initializeUISettings(); if (!uiSettings) initializeUISettings();
cookies.setItem('cssUITheme', params.cssUITheme, Infinity); cookies.setItem('cssUITheme', params.cssUITheme, Infinity);
@ -789,8 +792,8 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'q', 'module'
if (params.cssUITheme != params.cssTheme) $('#cssWikiDarkThemeCheck').click(); if (params.cssUITheme != params.cssTheme) $('#cssWikiDarkThemeCheck').click();
}); });
document.getElementById('cssWikiDarkThemeCheck').addEventListener('click', function () { document.getElementById('cssWikiDarkThemeCheck').addEventListener('click', function () {
if (this.readOnly) { this.checked = true; this.readOnly = false; } if (this.readOnly) this.checked = this.readOnly = false;
else if (this.checked) this.readOnly = this.indeterminate = true; else if (!this.checked) this.readOnly = this.indeterminate = true;
params.cssTheme = this.indeterminate ? "auto" : this.checked ? 'dark' : 'light'; params.cssTheme = this.indeterminate ? "auto" : this.checked ? 'dark' : 'light';
if (!uiSettings) initializeUISettings(); if (!uiSettings) initializeUISettings();
var determinedValue = params.cssTheme; var determinedValue = params.cssTheme;
@ -877,15 +880,16 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'q', 'module'
} }
} }
var determinedWikiTheme = params.cssTheme == 'auto' ? cssUIThemeGetOrSet('auto', true) : params.cssTheme; var determinedWikiTheme = params.cssTheme == 'auto' ? cssUIThemeGetOrSet('auto', true) : params.cssTheme;
var breakoutLink = doc.getElementById('breakoutLink');
if (determinedWikiTheme != "light") { if (determinedWikiTheme != "light") {
var link = doc.createElement("link"); var link = doc.createElement("link");
link.setAttribute("rel", "stylesheet"); link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css"); link.setAttribute("type", "text/css");
link.setAttribute("href", determinedWikiTheme == "dark" ? treePath + "-/s/style-dark.css" : treePath + "-/s/style-dark-invert.css"); link.setAttribute("href", determinedWikiTheme == "dark" ? treePath + "-/s/style-dark.css" : treePath + "-/s/style-dark-invert.css");
doc.head.appendChild(link); doc.head.appendChild(link);
doc.getElementById('breakoutLink').src = treePath + 'img/icons/new_window_lb.svg'; if (breakoutLink) breakoutLink.src = treePath + 'img/icons/new_window_lb.svg';
} else { } else {
doc.getElementById('breakoutLink').src = treePath + 'img/icons/new_window.svg'; if (breakoutLink) breakoutLink.src = treePath + 'img/icons/new_window.svg';
} }
document.getElementById('darkInvert').style.display = determinedWikiTheme == 'light' ? 'none' : 'inline'; document.getElementById('darkInvert').style.display = determinedWikiTheme == 'light' ? 'none' : 'inline';
} }
@ -915,7 +919,7 @@ define(['jquery', 'zimArchiveLoader', 'util', 'uiUtil', 'cookies', 'q', 'module'
if (this.readOnly) this.checked = this.readOnly = false; if (this.readOnly) this.checked = this.readOnly = false;
else if (!this.checked) this.readOnly = this.indeterminate = true; else if (!this.checked) this.readOnly = this.indeterminate = true;
params.removePageMaxWidth = this.indeterminate ? "auto" : this.checked; params.removePageMaxWidth = this.indeterminate ? "auto" : this.checked;
document.getElementById('pageMaxWidthState').innerHTML = (params.removePageMaxWidth == "auto" ? "[auto]" : params.removePageMaxWidth ? "[always]" : "[never]") + "&nbsp;"; document.getElementById('pageMaxWidthState').innerHTML = (params.removePageMaxWidth == "auto" ? "auto" : params.removePageMaxWidth ? "always" : "never");
cookies.setItem('removePageMaxWidth', params.removePageMaxWidth, Infinity); cookies.setItem('removePageMaxWidth', params.removePageMaxWidth, Infinity);
removePageMaxWidth(); removePageMaxWidth();
}); });

6
www/js/init.js
View File

@ -82,9 +82,9 @@ if (getCookie('lastPageLoad') == 'failed') {
document.getElementById('cssCacheModeCheck').checked = params.cssCache; document.getElementById('cssCacheModeCheck').checked = params.cssCache;
document.getElementById('imageDisplayModeCheck').checked = params.imageDisplay; document.getElementById('imageDisplayModeCheck').checked = params.imageDisplay;
document.getElementById('removePageMaxWidthCheck').checked = params.removePageMaxWidth === true; // Will be false if false or auto document.getElementById('removePageMaxWidthCheck').checked = params.removePageMaxWidth === true; // Will be false if false or auto
document.getElementById('removePageMaxWidthCheck').indeterminate = params.removePageMaxWidth == "auto" ? true : false; document.getElementById('removePageMaxWidthCheck').indeterminate = params.removePageMaxWidth == "auto";
document.getElementById('removePageMaxWidthCheck').readOnly = params.removePageMaxWidth == "auto" ? true : false; document.getElementById('removePageMaxWidthCheck').readOnly = params.removePageMaxWidth == "auto";
document.getElementById('pageMaxWidthState').innerHTML = (params.removePageMaxWidth == "auto" ? "[auto]" : params.removePageMaxWidth ? "[true]" : "[false]"); document.getElementById('pageMaxWidthState').innerHTML = (params.removePageMaxWidth == "auto" ? "auto" : params.removePageMaxWidth ? "always" : "never");
document.getElementById('hideToolbarCheck').checked = params.hideToolbar; document.getElementById('hideToolbarCheck').checked = params.hideToolbar;
document.getElementById('cssUIDarkThemeCheck').checked = params.cssUITheme == "dark"; // Will be true, or false if light or auto document.getElementById('cssUIDarkThemeCheck').checked = params.cssUITheme == "dark"; // Will be true, or false if light or auto
document.getElementById('cssUIDarkThemeCheck').indeterminate = params.cssUITheme == "auto"; document.getElementById('cssUIDarkThemeCheck').indeterminate = params.cssUITheme == "auto";