kiwix/kiwix-tools
1
0
Fork 0
mirror of https://github.com/kiwix/kiwix-tools.git synced 2025-09-28 14:51:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #300 from kiwix/ISNIT0/server-toolbar

Browse Source 
Make server toolbar auto-hide and collapse buttons into dropdown on small screens
This commit is contained in:
Kelson 2019-07-09 12:36:23 +02:00 committed by GitHub
commit 64717c2124
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 184 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
Changelog
View File

@ -1,3 +1,11 @@
kiwix-tools 2.1.0
=================
kiwix-serve
-----------
* Mobile friendly top bar
kiwix-tools 2.0.0 kiwix-tools 2.0.0
================= =================

2
meson.build
View File

@ -1,5 +1,5 @@
project('kiwix-tools', 'cpp', project('kiwix-tools', 'cpp',
version : '2.0.0', version : '2.1.0',
license : 'GPL', license : 'GPL',
default_options: ['c_std=c11', 'cpp_std=c++11', 'werror=true']) default_options: ['c_std=c11', 'cpp_std=c++11', 'werror=true'])

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

4
static/server/global_taskbar.html.part
View File

@ -1,10 +1,10 @@
<span class="kiwix"> <span class="kiwix">
<span id="kiwixtoolbar" class="ui-widget-header"> <span id="kiwixtoolbar" class="ui-widget-header">
<div class="kiwix_centered"> <div class="kiwix_centered">
<div class="kiwix_searchform"> <div class="kiwix_searchform" style="margin: auto auto;float: none;">
<form class="kiwixsearch" method="GET" action="__ROOT_LOCATION__/search" id="kiwixsearchform"> <form class="kiwixsearch" method="GET" action="__ROOT_LOCATION__/search" id="kiwixsearchform">
<label for="kiwixsearchbox" style="line-height: 30px;">&#x1f50d;</label>
<input autocomplete="off" class="ui-autocomplete-input" id="kiwixsearchbox" name="pattern" type="text"> <input autocomplete="off" class="ui-autocomplete-input" id="kiwixsearchbox" name="pattern" type="text">
<input type="submit" value="&#x1f50d;">
</form> </form>
</div> </div>
</div> </div>

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

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

@ -25,3 +25,4 @@
jk("html").addClass("cybook"); jk("html").addClass("cybook");
} }
</script> </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 jquery-ui/jquery-ui.min.css
home.html.tmpl home.html.tmpl
include.html.part include.html.part
caret.png
taskbar.js
taskbar.css taskbar.css
taskbar.html.part taskbar.html.part
global_taskbar.html.part global_taskbar.html.part

129
static/server/taskbar.css
View File

@ -1,13 +1,17 @@
#kiwixtoolbar { #kiwixtoolbar {
position: fixed; position: fixed;
padding: .5em; padding: .5em;
left:0; left: 0;
right:0; right: 0;
top: 0; top: 0;
z-index:100; z-index: 100;
background-position-y: 0px;
transition: 0.3s;
width: 100%;
box-sizing: border-box;
} }
#kiwixtoolbar > a { #kiwixtoolbar>a {
float: left; float: left;
} }
@ -20,20 +24,66 @@
height: 3em; height: 3em;
} }
#kiwixsearchbox { .kiwixsearch {
position: relative;
height: 26px;
width: 100%;
left: 0;
margin-bottom: 0;
}
.kiwix_searchform {
width: 20em; width: 20em;
} }
#kiwix_serve_taskbar_home_button button {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 160px;
}
.kiwix .kiwix_centered { .kiwix .kiwix_centered {
max-width: 720px; max-width: 720px;
margin: 0 auto; margin: 0 auto;
} }
.kiwix .kiwix_button_wrapper {
float: left; #kiwix_button_show_toggle {
display: none;
} }
#kiwix_button_show_toggle:checked~label~.kiwix_button_cont,
#kiwix_button_show_toggle:checked~label~.kiwix_button_cont>a {
display: block;
}
#kiwix_button_show_toggle:not(:checked)~label~.kiwix_button_cont {
display: none;
}
label[for="kiwix_button_show_toggle"] {
display: inline-block;
height: 26px;
}
label[for="kiwix_button_show_toggle"] img {
transition: 0.1s;
height: 26px;
}
#kiwix_button_show_toggle:checked~label img {
transform: rotate(-180deg);
}
label[for="kiwix_button_show_toggle"],
.kiwix_button_cont {
display: block;
}
.kiwix .kiwix_searchform { .kiwix .kiwix_searchform {
float: right; float: right;
} }
.kiwix #kiwixtoolbar button, .kiwix #kiwixtoolbar button,
.kiwix #kiwixtoolbar input[type="submit"] { .kiwix #kiwixtoolbar input[type="submit"] {
box-sizing: border-box !important; box-sizing: border-box !important;
@ -48,22 +98,34 @@
cursor: pointer !important; cursor: pointer !important;
font-size: 16px !important; font-size: 16px !important;
} }
.kiwix #kiwixtoolbar a {
margin-bottom: 5px;
}
.kiwix #kiwixtoolbar #kiwixsearchform input[type='text'] { .kiwix #kiwixtoolbar #kiwixsearchform input[type='text'] {
position: absolute;
left: 0;
box-sizing: border-box !important; box-sizing: border-box !important;
width: 100%;
height: 26px !important; height: 26px !important;
line-height: 20px !important; line-height: 20px !important;
border: 1px solid #999 !important; border: 1px solid #999 !important;
border-radius: 3px !important; border-radius: 3px !important;
background-color: #fff !important; background-color: #fff !important;
padding: 2px 2px 2px 3px !important; padding: 2px 2px 2px 27px !important;
font-size: 16px !important; font-size: 16px !important;
} }
label[for=kiwixsearchbox] {
z-index: 1;
position: absolute;
height: 100%;
left: 5px;
font-size: 90%;
line-height: 26px;
vertical-align: middle;
}
/* Try to fix buggy stuff in jquery-ui autocomplete */ /* Try to fix buggy stuff in jquery-ui autocomplete */
#ui-id-1, .ui-autocomplete { #ui-id-1,
.ui-autocomplete {
background: white !important; background: white !important;
border: solid 1px grey !important; border: solid 1px grey !important;
} }
@ -72,22 +134,49 @@ li.ui-state-focus {
font-weight: bold; font-weight: bold;
} }
@media (max-width: 520px) { @media(min-width:420px) {
.kiwixsearch { .kiwix_button_cont {
margin-top: 5px; display: inline-block !important;
}
.kiwix_button_cont>a {
display: inline-block !important;
}
label[for="kiwix_button_show_toggle"] {
display: none;
} }
} }
@media (max-width: 645px) { @media (max-width: 645px) {
#kiwix_button_show_toggle~label~.kiwix_button_cont.searching {
display: none !important;
}
label[for="kiwix_button_show_toggle"].searching {
display: none !important;
}
.kiwix_searchform.full_width {
width: 100%;
}
.kiwixsearch { .kiwixsearch {
float: none; float: none;
} }
#kiwixsearchbox {
width: 65%; .kiwix_searchform {
} width: 36%;
#kiwixsearchform input[type="submit"] {
width: 28%;
} }
.height_separator { .height_separator {
height: 6em; height: 6em;
} }
} }
@media(max-width:415px) {
.kiwix_searchform {
width: 80%;
}
}

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

@ -1,18 +1,21 @@
<span class="kiwix"> <span class="kiwix">
<span id="kiwixtoolbar" class="ui-widget-header"> <span id="kiwixtoolbar" class="ui-widget-header">
<div class="kiwix_centered"> <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"> <div class="kiwix_searchform">
<form class="kiwixsearch" method="GET" action="__ROOT_LOCATION__/search" id="kiwixsearchform"> <form class="kiwixsearch" method="GET" action="__ROOT_LOCATION__/search" id="kiwixsearchform">
<input type="hidden" name="content" value="__CONTENT__" /> <input type="hidden" name="content" value="__CONTENT__" />
<label for="kiwixsearchbox">&#x1f50d;</label>
<input autocomplete="off" class="ui-autocomplete-input" id="kiwixsearchbox" name="pattern" type="text"> <input autocomplete="off" class="ui-autocomplete-input" id="kiwixsearchbox" name="pattern" type="text">
<input type="submit" value="&#x1f50d;">
</form> </form>
</div> </div>
<input type="checkbox" id="kiwix_button_show_toggle">
<label for="kiwix_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>
<a id="kiwix_serve_taskbar_random_button"
href="__ROOT_LOCATION__/random?content=__CONTENT_ESCAPED__"><button>&#x1F3B2;</button></a>
</div>
</div> </div>
</span> </span>
</span> </span>

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="kiwix_button_show_toggle"], .kiwix_button_cont').addClass('searching');
},
blur: function () {
$('.kiwix_searchform').removeClass('full_width');
$('label[for="kiwix_button_show_toggle"], .kiwix_button_cont').removeClass('searching');
}
});
})(jQuery);