WIP #807 @3

diff --git a/images/interface.svg b/images/interface.svg
index 027c28c2ae0e347a859b452622a90f95e5a005f9..6e158e0b68795ae8d8cade39b55c77c28253f84e 100644 (file)
--- a/images/interface.svg
+++ b/images/interface.svg
@@ -48,4 +48,9 @@
         <path d="m303 231c-6 0-11-2-16-6-8-9-8-23 0-31l188-188c8-8 22-8 31 0 8 9 8 22 0 31l-188 188c-4 4-10 6-15 6z m187 0c-12 0-21-10-21-22l0-166-166 0c-12 0-22-9-22-21 0-12 10-22 22-22l187 0c12 0 22 10 22 22l0 187c0 12-10 22-22 22z m-468 281c-6 0-11-2-16-6-8-9-8-22 0-31l188-188c8-8 22-8 31 0 8 9 8 23 0 31l-188 188c-4 4-10 6-15 6z m187 0l-187 0c-12 0-22-10-22-22l0-187c0-12 10-22 22-22 12 0 21 10 21 22l0 166 166 0c12 0 22 9 22 21 0 12-10 22-22 22z"/>
     </symbol>
 
+
+    <symbol id="interface-download" viewBox="0 0 512 512">
+        <path d="m427 512l-342 0c-22 0-43-8-58-23-15-15-23-36-23-58l0-41c0-12 10-22 21-22 12 0 22 10 22 22l0 41c0 22 16 38 38 38l342 0c22 0 38-16 38-38l0-41c0-12 10-22 22-22 12 0 21 10 21 22l0 41c0 22-8 43-23 58-15 15-36 23-58 23z m-171-102c-12 0-21-10-21-22l0-367c0-11 9-21 21-21 12 0 21 10 21 21l0 367c0 12-9 22-21 22z m0 0c-6 0-11-3-16-7l-145-154c-8-8-7-22 1-30 9-8 22-8 30 1l130 137 130-137c8-8 21-9 30-1 8 8 9 22 1 30l-145 154c-5 4-10 7-16 7z"/>
+    </symbol>
+
 </svg>

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index a855b47448740b20fa7c6afa1a247d2cb8a79c01..f5af00180db6525f26514d934935bf9bb57193e1 100644 (file)
--- 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 192b66980456ac37c4b8182af74cf8147a221605..b9cdbb6b3225e0bb999eadf2767401617edce4bc 100644 (file)
--- 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('<div class="hits yes">' + totalHits + ' ' + fluidbook.l10n.__('hit(s)') + '</div>');
+                        // Add the link to the main result page. Link around the hits div is for better usability (previously wasn't clickable)
+                        $(this).append('<a href="#/page/' + $(this).attr('page') + '"><div class="hits yes">' + totalHits + ' ' + fluidbook.l10n.__('hit(s)') + '</div></a>');
                         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 e2529c1e2e6b25ef4b84a4d133a5c2a38fbe10b2..ab1e0ebcc7b63bbde0761e2e9a69dc7519e8d3c8 100644 (file)
--- 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 f296fe69c42d34f1c5fe7179aebe2f2300b16661..3f2f730fc28faed49bafd36ac5ecc480ababc0c8 100644 (file)
--- 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;
+  }
+
 }