From: Stephen Cameron Date: Thu, 29 Jun 2017 12:34:52 +0000 (+0200) Subject: WIP #807 @3 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=d64cd33811cf51017261ef97e96bc5dde4263b19;p=fluidbook-html5.git WIP #807 @3 --- diff --git a/images/interface.svg b/images/interface.svg index 027c28c2..6e158e0b 100644 --- a/images/interface.svg +++ b/images/interface.svg @@ -48,4 +48,9 @@ + + + + + diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js index a855b474..f5af0018 100644 --- a/js/libs/fluidbook/fluidbook.js +++ b/js/libs/fluidbook/fluidbook.js @@ -726,9 +726,33 @@ Fluidbook.prototype = { initSearchResults: function () { this.menuSearchResults = $('#menuSearchResults'); + this.resizeSearchResults(); this.menuSearchResults.hide(); }, + resizeSearchResults: function () { + + //console.warn('calling resizeSR'); + //console.log('menu open?', this.nav.menuIsOpen); + + if (!fluidbook.nav.menuIsOpen) return false; + + var wh = $(window).height(), + formHeight = $('#searchForm').height(); + marginTop = marginBottom = 50, + maxHeight = wh - formHeight - marginTop - marginBottom; + + // Search results element may not exist when resize is called + if (fluidbook.menuSearchResults == undefined) { + fluidbook.initSearchResults(); + return false; // initSearchResults will call this resize function anyway + } + + // Set max-height for search results section (using CSS vh units was unreliable) + fluidbook.menuSearchResults.css('maxHeight', maxHeight); + fluidbook.menuSearchResults.perfectScrollbar('update'); + }, + initSearchHints: function () { this.menuSearchHints = $('#menuSearchHints'); diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js index 192b6698..b9cdbb6b 100644 --- a/js/libs/fluidbook/fluidbook.nav.js +++ b/js/libs/fluidbook/fluidbook.nav.js @@ -62,6 +62,9 @@ FluidbookNav.prototype = { $this.menuAPI.close(); }); + // Recalculate available size for menu search results + $(window).on('fluidbookresize', fluidbook.resizeSearchResults); + }, // getIcon: function (name) { // var src = 'data/images/' + name + '.'; @@ -263,10 +266,17 @@ FluidbookNav.prototype = { } }); } - } else if (icon == 'pdf' || icon == 'print') { - if ($("#print").length == 0 && (this.fluidbook.datas.print || this.fluidbook.datas.pdf)) { - var printOrDownload = '!' + this.fluidbook.l10n.__('print') + ' | ' + this.fluidbook.l10n.__('download pdf'); - this.addLink('interface-print', '#', 'print', printOrDownload, printOrDownload); + } else if (icon == 'pdf') { + if ($("#download").length == 0 && this.fluidbook.datas.pdf) { + this.addLink('interface-download', '#', 'download', 'download', 'download'); + $("#download").on('click', function () { + $this.fluidbook.print(); + return false; + }); + } + } else if (icon == 'print') { + if ($("#print").length == 0 && this.fluidbook.datas.print) { + this.addLink('interface-print', '#', 'print', 'print', 'print'); $("#print").on('click', function () { $this.fluidbook.print(); return false; @@ -476,8 +486,8 @@ FluidbookNav.prototype = { return; } } else { - // Add the - $(this).append('
' + totalHits + ' ' + fluidbook.l10n.__('hit(s)') + '
'); + // Add the link to the main result page. Link around the hits div is for better usability (previously wasn't clickable) + $(this).append('
' + totalHits + ' ' + fluidbook.l10n.__('hit(s)') + '
'); if (fluidbook.pad.enabled) { if (pagesWithHits.length == 1) { $(this).find('a').attr('href', '#/page/' + pagesWithHits[0]); @@ -497,6 +507,13 @@ FluidbookNav.prototype = { fluidbook.hideSearchHints(); fluidbook.menuSearchResults.fadeIn(300); + // Initialise scrollbar after populating so bars appear immediately + fluidbook.menuSearchResults.perfectScrollbar({ + suppressScrollX: true, + minScrollbarLength: 40, + //maxScrollbarLength: 60 + }); + }); // window.location.hash = '/search/' + q; diff --git a/style/fluidbook.less b/style/fluidbook.less index e2529c1e..ab1e0ebc 100644 --- a/style/fluidbook.less +++ b/style/fluidbook.less @@ -1028,7 +1028,6 @@ form input[type="text"], form input[type="email"] { position: absolute; top: 0px; left: 0px; - font-size: 12px; img { width: 100px; height: @thumb-height; @@ -1037,9 +1036,12 @@ form input[type="text"], form input[type="email"] { .number { text-align: center; display: block; - font-family: Arial, Helvetica, sans-serif; - margin: 1px 0 0 0; + margin: 0; + padding: 5px 0 0 0; max-width: 100px; + font-size: 14px; + font-weight: bold; + line-height: 1; } &.right { left: 100px; diff --git a/style/mmenu/mmenu.less b/style/mmenu/mmenu.less index f296fe69..3f2f730f 100644 --- a/style/mmenu/mmenu.less +++ b/style/mmenu/mmenu.less @@ -62,6 +62,11 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker { transition: opacity .4s ease 0s; // No delay before fading in the overlay } +// Selected menu item +.mm-menu .mm-listview>li.mm-selected>a:not(.mm-next), .mm-menu .mm-listview>li.mm-selected>span { + background: rgba(255,255,255,.2); +} + // Fluidbook menu styles #menu { @@ -103,6 +108,8 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker { } #menuSearch { + margin-bottom: 23px; // Spacing between search panel and first menu item + &:after { border: none; } @@ -110,7 +117,8 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker { // Main menu with icons #menuList { - padding-top: 80px; // Offset for the fixed search box plus some extra padding + overflow: hidden; + //padding-top: 80px; // Offset for the fixed search box plus some extra padding &:before { height: 0; // Fix spacing with search box @@ -138,9 +146,10 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker { #searchForm { - position: fixed; - top: 0; - left: 0; + //position: fixed; + //top: 0; + //left: 0; + position: relative; padding: 0; text-align: left; } @@ -150,6 +159,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker { color: @menu-field-text; -webkit-appearance: none; border: none; + border-radius: 0; height: 60px; font-size: 16px; padding: 0 1em 0 70px; @@ -217,9 +227,12 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker { } #menuSearchResults { - max-height: ~"calc(100vh - 100px)"; - overflow-y: auto; - padding-top: 20px; + position: relative; + height: 100%; + // Max height is now handled via JS + //max-height: ~"calc(100vh - 60px - 100px)"; // 100vh - search form height - results margins + margin: 50px auto 0 0; + width: 295px; // To make 25px gap to right of scrollbar (320px - 25px) a { padding: 0; @@ -227,7 +240,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker { .doubleThumb { display: block !important; - margin: 10px auto 40px auto !important; + margin: 0 auto 40px auto !important; &:not(.simple), &.simple .thumb img { box-shadow: 10px 4px 10px 0px rgba(68, 68, 68, 0.5); } @@ -244,6 +257,23 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim]~#mm-blocker { .no-results { padding: 5px 25px; } + + // Perfect Scrollbar mods + .ps__scrollbar-y-rail { + background: rgba(0, 0, 0, 0.1); + width: 6px; + opacity: 1; + } + + .ps__scrollbar-y { + right: 0; + background-color: @menu-text; + } + + .ps:hover>.ps__scrollbar-y-rail:hover { + width: 11px; + } + }