kiwix/kiwix-tools
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-tools.git synced 2025-09-22 11:22:38 -04:00
Code Issues Packages Projects Releases Wiki Activity

Switch caret to image and move JS to separate file

Browse Source
This commit is contained in:
Joe Reeve 2019-07-08 13:18:07 +01:00 committed by Kelson
parent 5b612e67bd
commit 7db7d2a2ab
7 changed files with 66 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
static/server/caret.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
static/server/home.html.tmpl
View File

@ -40,6 +40,7 @@
}
.book__info { line-height: 18px; color: #777; font-weight: bold; font-size: 13px; }
</style>
<script type="text/javascript" src="__ROOT_LOCATION__/skin/taskbar.js" async></script>
</head>
<body class="kiwix">

1
static/server/include.html.part
View File

@ -25,3 +25,4 @@
jk("html").addClass("cybook");
}
</script>
<script type="text/javascript" src="__ROOT_LOCATION__/skin/taskbar.js" async></script>

2
static/server/resources_list.txt
View File

@ -19,6 +19,8 @@ jquery-ui/jquery-ui.theme.min.css
jquery-ui/jquery-ui.min.css
home.html.tmpl
include.html.part
caret.png
taskbar.js
taskbar.css
taskbar.html.part
global_taskbar.html.part

26
static/server/taskbar.css
View File

@ -52,16 +52,6 @@
display: none;
}
#button_show_toggle:not(:checked)~label:after {
content: '⌃';
transform: rotate(180deg);
}
#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;
@ -71,12 +61,18 @@
display: none;
}
label[for="button_show_toggle"]:after {
transition: 0.1s;
label[for="button_show_toggle"] {
display: inline-block;
font-size: 30px;
line-height: 21px;
vertical-align: middle;
height: 26px;
}
label[for="button_show_toggle"] img {
transition: 0.1s;
height: 26px;
}
#button_show_toggle:checked~label img {
transform: rotate(-180deg);
}
label[for="button_show_toggle"],

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

@ -9,7 +9,7 @@
</form>
</div>
<input type="checkbox" id="button_show_toggle">
<label for="button_show_toggle"></label>
<label for="button_show_toggle"><img src="__ROOT_LOCATION__/skin/caret.png" alt=""></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>
@ -19,54 +19,4 @@
</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;
}
}
$('#kiwixsearchbox').on({
focus: function(){
$('.kiwix_searchform').addClass('full_width');
$('label[for="button_show_toggle"], .kiwix_button_cont').addClass('searching');
},
blur: function(){
$('.kiwix_searchform').removeClass('full_width');
$('label[for="button_show_toggle"], .kiwix_button_cont').removeClass('searching');
}
});
})(jQuery);
</script>
<div style="display: block; height: 5em;"></div>

49
static/server/taskbar.js Normal file
View File

@ -0,0 +1,49 @@
(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;
}
}
$('#kiwixsearchbox').on({
focus: function () {
$('.kiwix_searchform').addClass('full_width');
$('label[for="button_show_toggle"], .kiwix_button_cont').addClass('searching');
},
blur: function () {
$('.kiwix_searchform').removeClass('full_width');
$('label[for="button_show_toggle"], .kiwix_button_cont').removeClass('searching');
}
});
})(jQuery);