From b8cc7475c72cae7a5ed5fbda87b91e161f44e8b7 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Fri, 23 Jun 2017 18:47:34 +0200 Subject: [PATCH] WIP #807 @5.5 --- images/interface.svg | 4 ++ js/libs/fluidbook/fluidbook.js | 1 + js/libs/fluidbook/fluidbook.nav.js | 69 ++++++++++++------------ style/fluidbook.less | 8 --- style/mmenu/mmenu.less | 87 +++++++++++++++++++++++++++--- 5 files changed, 120 insertions(+), 49 deletions(-) diff --git a/images/interface.svg b/images/interface.svg index 5586dbcf..027c28c2 100644 --- a/images/interface.svg +++ b/images/interface.svg @@ -1,5 +1,9 @@ + + + + diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js index 360ce80b..a855b474 100644 --- a/js/libs/fluidbook/fluidbook.js +++ b/js/libs/fluidbook/fluidbook.js @@ -726,6 +726,7 @@ Fluidbook.prototype = { initSearchResults: function () { this.menuSearchResults = $('#menuSearchResults'); + this.menuSearchResults.hide(); }, initSearchHints: function () { diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js index a5244acd..161705c9 100644 --- a/js/libs/fluidbook/fluidbook.nav.js +++ b/js/libs/fluidbook/fluidbook.nav.js @@ -12,21 +12,6 @@ function FluidbookNav(fluidbook) { FluidbookNav.prototype = { initMenu: function () { var $this = this; - // navbars = [ - // { - // "position": "bottom", - // "content": [ - // '[Sharing links]' - // ] - // } - // ]; - // - // if (this.fluidbook.datas.search) { - // navbars.push({ - // "position": "top", - // "content": [ this.getSearch() ] - // }); - // } this.menu.mmenu({ @@ -48,8 +33,7 @@ FluidbookNav.prototype = { "navbar": { //add: false // Removes main title bars completely title: "" // Hides the default "Menu" text - }, - //"navbars": navbars + } }); this.menuAPI = this.menu.data('mmenu'); @@ -58,6 +42,8 @@ FluidbookNav.prototype = { this.menuAPI.bind("open:finish", function () { $('body').addClass('menu-open'); $this.menuIsOpen = true; + + $('#q').focus(); }); this.menuAPI.bind("close:finish", function () { @@ -71,19 +57,24 @@ FluidbookNav.prototype = { $this.menuAPI.open(); }); + // Close menu when a search result is clicked + $(document).on('click', '#menuSearchResults a', function (e) { + $this.menuAPI.close(); + }); + }, - getIcon: function (name) { - var src = 'data/images/' + name + '.'; - if (this.fluidbook.support.SVG) { - src += 'svg'; - } else { - src += 'png'; - } - if (this._dimensions[name] == undefined) { - return ''; - } - return this.fluidbook.loader.getImage(src, this._dimensions[name][0], this._dimensions[name][1]); - }, + // getIcon: function (name) { + // var src = 'data/images/' + name + '.'; + // if (this.fluidbook.support.SVG) { + // src += 'svg'; + // } else { + // src += 'png'; + // } + // if (this._dimensions[name] == undefined) { + // return ''; + // } + // return this.fluidbook.loader.getImage(src, this._dimensions[name][0], this._dimensions[name][1]); + // }, addLink: function (name, href, id, help, before, c) { if (this.menu.find('#' + id).length > 0) { return; @@ -144,7 +135,7 @@ FluidbookNav.prototype = { var $this = this; // index, chapters, print, friend, bookmark, pdf, archives, basket, fullscreen, sound, 3d, help - var menuOpener = '' + this.fluidbook.l10n.__('Menu') + ''; + var menuOpener = '' + this.fluidbook.l10n.__('Menu') + getSpriteIcon('interface-menu') + ''; $('#main header').append(menuOpener); // Add holder list element for menu items @@ -270,6 +261,7 @@ FluidbookNav.prototype = { } else if (icon == 'fullscreen' && Modernizr.fullscreen && !DATAS.phonegap) { this.addLink('interface-fullscreen', '#', 'fullscreen', 'switch between fullscreen and normal'); $("#fullscreen").click(function () { + $this.menuAPI.close(); screenfull.toggle(); return false; }) @@ -385,7 +377,9 @@ FluidbookNav.prototype = { // Handle empty result set if (results.total <= 0) { - fluidbook.menuSearchResults.html(this.fluidbook.l10n.__('no result found')); + fluidbook.menuSearchResults.html('
' + this.fluidbook.l10n.__('no result found') + '
'); + fluidbook.hideSearchHints(); + fluidbook.menuSearchResults.fadeIn(300); return false; } @@ -477,8 +471,17 @@ FluidbookNav.prototype = { //$("#q").keyup(searchHints); $(document).on('keyup', '#q', function(key) { - if (13 == key.which) return; // Ignore enter key otherwise hints are re-displayed after form is submitted - searchHints(); + switch (key.which) { + case 13: // Enter key + case 37: // Left arrow + case 38: // Up arrow + case 39: // Right arrow + case 40: // Down arrow + return; // Ignore these keys + break; + default: + searchHints(); + } }); $(document).on('click', ".hint", function () { diff --git a/style/fluidbook.less b/style/fluidbook.less index 9f565ed4..e2529c1e 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -526,14 +526,6 @@ header { z-index: 12; } -.ltr #menu a#submitSearch { - margin: 0 0 0 5px; -} - -.rtl #menu a#submitSearch { - margin: 0 5px 0 0; -} - #afterSearch { display: inline-block; position: relative; diff --git a/style/mmenu/mmenu.less b/style/mmenu/mmenu.less index f7995bb1..7b7226a5 100644 --- a/style/mmenu/mmenu.less +++ b/style/mmenu/mmenu.less @@ -40,9 +40,21 @@ border-color: @menu-text; } -//.mm-hasnavbar-top-1 .mm-panels { -// top: 60px; -//} +// Main list settings +.mm-listview { + font-size: 16px; + line-height: 40px; +} + +// Disable borders between list items +.mm-listview>li:not(.mm-divider):after, .mm-navbar { + border: none; +} + +// Extra padding for submenus with title bars +.mm-panels>.mm-panel.mm-hasnavbar { + padding-top: 60px; +} // Page overlay opacity html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker { @@ -59,7 +71,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker { color: @menu-text; a, span { - padding: 10px; + padding: 10px 10px 10px 30px; img { display: inline-block; @@ -78,7 +90,13 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker { position: absolute; right: 10px; top: 10px; - color: @menu-text; + color: @icon-color; + + .svg-icon { + width: 20px; + vertical-align: middle; + margin-left: 15px; + } } #menuSearch { @@ -89,7 +107,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker { // Main menu with icons #menuList { - padding-top: 60px; // Offset for the fixed search box... + padding-top: 80px; // Offset for the fixed search box plus some extra padding &:before { height: 0; // Fix spacing with search box @@ -131,7 +149,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker { border: none; height: 60px; font-size: 16px; - padding: 0 1em 0 2.8em; + padding: 0 1em 0 70px; width: 260px; } @@ -147,23 +165,76 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker { height: 20px; margin-top: 1px; // Fixes weird clipping of top of icon } + + .ltr & { + margin: 0; + } + + .rtl & { + margin: 0 5px 0 0; + } } #menuSearchResults, #menuSearchHints { display: none; // Hidden by default, displayed via JS } +#menuSearchHints { + padding-top: 15px; + + .hint { + padding: 13px 30px; + font-size: 16px; + display: block; + width: 100%; + height: auto; + position: relative; + + // > arrow + &:after { + content: ''; + position: absolute; + border-top: 2px solid transparent; + border-left: 2px solid transparent; + border-color: currentColor; + display: block; + width: 8px; + height: 8px; + margin: auto; + top: 0; + bottom: 0; + right: 25px; + transform: rotate(135deg); + } + + em { + font-style: normal; + } + } +} + #menuSearchResults { - max-height: ~"calc(100vh - 60px)"; + max-height: ~"calc(100vh - 100px)"; overflow-y: auto; padding-top: 20px; .doubleThumb { display: block !important; margin: 10px auto 40px auto !important; + &:not(.simple), &.simple .thumb img { + box-shadow: 10px 4px 10px 0px rgba(68, 68, 68, 0.5); + } + } + + .hits { + font-size: 16px !important; } .padding { display: none !important; } + + .no-results { + padding: 5px 25px; + } } \ No newline at end of file -- 2.39.5