WIP #807 @5.5

diff --git a/images/interface.svg b/images/interface.svg
index 5586dbcfdc079312a83ab7ab6fe60e7e75b1e61e..027c28c2ae0e347a859b452622a90f95e5a005f9 100644 (file)
--- a/images/interface.svg
+++ b/images/interface.svg
@@ -1,5 +1,9 @@
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
 
+    <symbol id="interface-menu" viewBox="0 0 512 512">
+        <path d="m0 26l512 0 0 51-512 0z m0 204l512 0 0 52-512 0z m0 205l512 0 0 51-512 0z"/>
+    </symbol>
+
     <symbol id="interface-close" viewBox="0 0 512 512">
         <path d="m512 63l-66-63-190 193-193-193-63 63 193 193-193 190 63 66 193-193 190 193 66-66-193-190z"/>
     </symbol>

diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index 360ce80b13eb96c8e72c6c2be138000d0ac83df1..a855b47448740b20fa7c6afa1a247d2cb8a79c01 100644 (file)
--- 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 a5244acdfa37a9c67a65819089a8eca32a2cc3df..161705c9cdb6fe8b0a22d920e9ddfc48bc0f05a9 100644 (file)
--- 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": [
-        //                 '<a href="#">[Sharing links]</a>'
-        //             ]
-        //         }
-        //     ];
-        //
-        // 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 = '<a href="#" id="menuOpener">' + this.fluidbook.l10n.__('Menu') + '</a>';
+        var menuOpener = '<a href="#" id="menuOpener">' + this.fluidbook.l10n.__('Menu') + getSpriteIcon('interface-menu') + '</a>';
         $('#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('<div class="no-results">' + this.fluidbook.l10n.__('no result found') + '</div>');
+                    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 9f565ed4c72eb0425268fdbf9159070fc21959e4..e2529c1e2e6b25ef4b84a4d133a5c2a38fbe10b2 100644 (file)
--- 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 f7995bb17a5061e7a4c8a66e4b0014e5366dbd80..7b7226a5f4066144bdb7cadc65b3530796ea8f8c 100644 (file)
--- 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