kiwix/kiwix-tools
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-tools.git synced 2025-09-21 19:03:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

Make server toolbar auto-hide and collapse buttons into dropdown on small screens

Browse Source
This commit is contained in:
Joe Reeve 2019-06-17 14:21:00 +01:00 committed by Kelson
parent 758014a5ba
commit bad7f2ddf1
2 changed files with 82 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
static/server/taskbar.css
View File

@ -5,6 +5,8 @@
right:0;
top: 0;
z-index:100;
background-position-y: 0px;
transition: 0.3s;
}
#kiwixtoolbar > a {
@ -28,8 +30,26 @@
max-width: 720px;
margin: 0 auto;
}
.kiwix .kiwix_button_wrapper {
float: left;
#button_show_toggle {
display: none;
}
#button_show_toggle:not(:checked) ~ label:after {
content:'►';
}
#button_show_toggle:checked ~ label:after {
content:'▼';
}
#button_show_toggle:checked ~ label ~ .kiwix_button_cont,
#button_show_toggle:checked ~ label ~ .kiwix_button_cont > a {
display: block;
}
#button_show_toggle:not(:checked) ~ label ~ .kiwix_button_cont {
display: none;
}
label[for="button_show_toggle"],
.kiwix_button_cont {
display: block;
}
.kiwix .kiwix_searchform {
float: right;
@ -72,6 +92,18 @@ li.ui-state-focus {
font-weight: bold;
}
@media(min-width:415px) {
.kiwix_button_cont {
display: block !important;
}
.kiwix_button_cont > a {
display: inline-block !important;
}
label[for="button_show_toggle"] {
display: none;
}
}
@media (max-width: 520px) {
.kiwixsearch {
margin-top: 5px;

53
static/server/taskbar.html.part
View File

@ -1,11 +1,6 @@
<span class="kiwix">
<span id="kiwixtoolbar" class="ui-widget-header">
<div class="kiwix_centered">
<div class="kiwix_button_wrapper">
<a id="kiwix_serve_taskbar_library_button" href="__ROOT_LOCATION__/"><button>&#x1f3e0;</button></a>
<a id="kiwix_serve_taskbar_home_button" href="__ROOT_LOCATION__/__CONTENT__/"><button>__ZIM_TITLE__</button></a>
<a id="kiwix_serve_taskbar_random_button" href="__ROOT_LOCATION__/random?content=__CONTENT_ESCAPED__"><button>&#x1F3B2;</button></a>
</div>
<div class="kiwix_searchform">
<form class="kiwixsearch" method="GET" action="__ROOT_LOCATION__/search" id="kiwixsearchform">
<input type="hidden" name="content" value="__CONTENT__" />
@ -13,7 +8,55 @@
<input type="submit" value="&#x1f50d;">
</form>
</div>
<input type="checkbox" id="button_show_toggle">
<label for="button_show_toggle"></label>
<div class="kiwix_button_cont">
<a id="kiwix_serve_taskbar_library_button" href="__ROOT_LOCATION__/"><button>&#x1f3e0;</button></a>
<a id="kiwix_serve_taskbar_home_button" href="__ROOT_LOCATION__/__CONTENT__/"><button>__ZIM_TITLE__</button></a>
<a id="kiwix_serve_taskbar_random_button"
href="__ROOT_LOCATION__/random?content=__CONTENT_ESCAPED__"><button>&#x1F3B2;</button></a>
</div>
</div>
</span>
</span>
<div style="display: block; height: 5em;"></div>
<script>
(function ($) {
if ($(window).width() < 520) {
var didScroll;
var lastScrollTop = 0;
var delta = 5;
// on scroll, let the interval function know the user has scrolled
$(window).scroll(function (event) {
didScroll = true;
});
// run hasScrolled() and reset didScroll status
setInterval(function () {
if (didScroll) {
hasScrolled();
didScroll = false;
}
}, 250);
function hasScrolled() {
var st = $(this).scrollTop();
// Make sure they scroll more than delta
if (Math.abs(lastScrollTop - st) <= delta)
return;
// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop) {
// Scroll Down
$('#kiwixtoolbar').css({ top: '-100%' });
} else {
// Scroll Up
$('#kiwixtoolbar').css({ top: '0' });
}
lastScrollTop = st;
}
}
})(jQuery);
</script>