diff --git a/Changelog b/Changelog index 4b598c8..ac79cc4 100644 --- a/Changelog +++ b/Changelog @@ -1,3 +1,11 @@ +kiwix-tools 2.1.0 +================= + +kiwix-serve +----------- + +* Mobile friendly top bar + kiwix-tools 2.0.0 ================= diff --git a/meson.build b/meson.build index cbb8e7b..1e27f30 100644 --- a/meson.build +++ b/meson.build @@ -1,5 +1,5 @@ project('kiwix-tools', 'cpp', - version : '2.0.0', + version : '2.1.0', license : 'GPL', default_options: ['c_std=c11', 'cpp_std=c++11', 'werror=true']) diff --git a/static/server/caret.png b/static/server/caret.png new file mode 100644 index 0000000..96b67db Binary files /dev/null and b/static/server/caret.png differ diff --git a/static/server/global_taskbar.html.part b/static/server/global_taskbar.html.part index b19f852..d2b81be 100644 --- a/static/server/global_taskbar.html.part +++ b/static/server/global_taskbar.html.part @@ -1,13 +1,13 @@
-
+
+ -
-
+
\ No newline at end of file diff --git a/static/server/home.html.tmpl b/static/server/home.html.tmpl index db4d554..e2f898d 100644 --- a/static/server/home.html.tmpl +++ b/static/server/home.html.tmpl @@ -40,6 +40,7 @@ } .book__info { line-height: 18px; color: #777; font-weight: bold; font-size: 13px; } + diff --git a/static/server/include.html.part b/static/server/include.html.part index 7996fcb..635e6f9 100644 --- a/static/server/include.html.part +++ b/static/server/include.html.part @@ -25,3 +25,4 @@ jk("html").addClass("cybook"); } + \ No newline at end of file diff --git a/static/server/resources_list.txt b/static/server/resources_list.txt index 9df07e1..078bb6f 100644 --- a/static/server/resources_list.txt +++ b/static/server/resources_list.txt @@ -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 diff --git a/static/server/taskbar.css b/static/server/taskbar.css index f8a3aa7..7f3967d 100644 --- a/static/server/taskbar.css +++ b/static/server/taskbar.css @@ -1,13 +1,17 @@ #kiwixtoolbar { position: fixed; padding: .5em; - left:0; - right:0; + left: 0; + right: 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; } @@ -20,20 +24,66 @@ height: 3em; } -#kiwixsearchbox { +.kiwixsearch { + position: relative; + height: 26px; + width: 100%; + left: 0; + margin-bottom: 0; +} + +.kiwix_searchform { width: 20em; } +#kiwix_serve_taskbar_home_button button { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 160px; +} + .kiwix .kiwix_centered { max-width: 720px; 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 { float: right; } + .kiwix #kiwixtoolbar button, .kiwix #kiwixtoolbar input[type="submit"] { box-sizing: border-box !important; @@ -48,22 +98,34 @@ cursor: pointer !important; font-size: 16px !important; } -.kiwix #kiwixtoolbar a { - margin-bottom: 5px; -} + .kiwix #kiwixtoolbar #kiwixsearchform input[type='text'] { + position: absolute; + left: 0; box-sizing: border-box !important; + width: 100%; height: 26px !important; line-height: 20px !important; border: 1px solid #999 !important; border-radius: 3px !important; background-color: #fff !important; - padding: 2px 2px 2px 3px !important; + padding: 2px 2px 2px 27px !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 */ -#ui-id-1, .ui-autocomplete { +#ui-id-1, +.ui-autocomplete { background: white !important; border: solid 1px grey !important; } @@ -72,22 +134,49 @@ li.ui-state-focus { font-weight: bold; } -@media (max-width: 520px) { - .kiwixsearch { - margin-top: 5px; +@media(min-width:420px) { + .kiwix_button_cont { + display: inline-block !important; + } + + .kiwix_button_cont>a { + display: inline-block !important; + } + + label[for="kiwix_button_show_toggle"] { + display: none; } } + @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 { float: none; } - #kiwixsearchbox { - width: 65%; - } - #kiwixsearchform input[type="submit"] { - width: 28%; + + .kiwix_searchform { + width: 36%; } + .height_separator { height: 6em; } } + +@media(max-width:415px) { + .kiwix_searchform { + width: 80%; + } +} \ No newline at end of file diff --git a/static/server/taskbar.html.part b/static/server/taskbar.html.part index 3ea5226..c11a621 100644 --- a/static/server/taskbar.html.part +++ b/static/server/taskbar.html.part @@ -1,19 +1,22 @@
-
- - - -
+ -
+ + +
+ + + +
-
+
\ No newline at end of file diff --git a/static/server/taskbar.js b/static/server/taskbar.js new file mode 100644 index 0000000..e8b9a93 --- /dev/null +++ b/static/server/taskbar.js @@ -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); \ No newline at end of file