wip #7952

diff --git a/js/libs/fluidbook/fluidbook.burger.js b/js/libs/fluidbook/fluidbook.burger.js
index ede2c7c7fbb21a5a0856fed13324559dc48bf641..565c0e08512de4fb7238699ac8cc1a250c0cc5e5 100644 (file)
--- a/js/libs/fluidbook/fluidbook.burger.js
+++ b/js/libs/fluidbook/fluidbook.burger.js
@@ -53,6 +53,11 @@ FluidbookBurger.prototype = {
         // Add close button to menu
         this.getElement().prepend(this.getMenuCloseButton());
         this.initBurger();
+
+        // Add class if search is float
+        if(this.fluidbook.settings.search_field === "float") {
+            $('body').addClass('floatmode');
+        }
     },
 
     initNav() {
@@ -66,10 +71,13 @@ FluidbookBurger.prototype = {
 
         // Add holder list element for menu items
         $("#menu").append('<div id="menuList"' + v2 + '><ul></ul></div>');
+    },
 
+    initSearch: function() {
         // Add Search form
         var searchElement = (this.fluidbook.settings.search) ? this.getSearch() : '';
-        this.searchHTML = '<div id="menuSearch">' + searchElement + '</div>'; // Save for later so it can be injected after MMenu is rendered
+        const searchHtml = '<div id="menuSearch">' + searchElement + '</div>'; // Save for later so it can be injected after MMenu is rendered
+        $('body').append(searchHtml);
     },
 
     initBurger: function () {

diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index 9f281a5b2a18ef83ccd4e700544808239f262259..13d58f72e7f74fe72e4ce899d5525089a2d15c0f 100644 (file)
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -197,6 +197,7 @@ FluidbookNav.prototype = {
         // MMenu specific elements
         if (navType === 'menu') {
             this.burger.initNav();
+            this.burger.initSearch();
             if (this.fluidbook.settings.navOrderH.length > 0) {
                 navOrder = this.fluidbook.settings.navOrderH;
             }

diff --git a/js/libs/fluidbook/fluidbook.search.js b/js/libs/fluidbook/fluidbook.search.js
index 43d67605c5d7b39862463af79968bce399c8fe52..699da024a3adea2ac97b61206bb0c4f522778369 100644 (file)
--- a/js/libs/fluidbook/fluidbook.search.js
+++ b/js/libs/fluidbook/fluidbook.search.js
@@ -39,6 +39,8 @@ FluidbookSearch.prototype = {
         });
 
         this.initResultsNav();
+
+        console.log("search",$this.fluidbook.nav)
     },
 
     debugSearch: function (keyword) {
@@ -827,7 +829,7 @@ FluidbookSearch.prototype = {
         if (!this.hintsEnabled) {
             return;
         }
-        this.menuSearchHints = $('#menuSearchHints');
+        this.menuSearchHints = $('#menuSearchHints, #menuSearch');
         this.fluidbook.nav.burger.hideMenuItems(); // Hide menu items to give space for hints div
 
         this.menuSearchHints.fadeIn(300);

diff --git a/style/burger.less b/style/burger.less
index 400174a39c76492bcf3d4277b142013b729a0413..10511dbafc451e41c8ec22ed4cab14dc0ec80c39 100644 (file)
--- a/style/burger.less
+++ b/style/burger.less
@@ -59,7 +59,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
 // Fluidbook menu styles
 #menu {
   transition: left 0.4s ease, right 0.4s ease;
-  background-color: @menu-background;
+  background-color: transparent; //@menu-background;
   color: @menu-text;
   box-shadow: rgba(0, 0, 0, 0.2) -5px 6px 13px 0px; // ToDo: adjust drop-shadow depending on which side the menu comes from
   width: 320px;
@@ -86,6 +86,8 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
   &.open {
     transition: left 0.4s, right 0.4s;
     left: 0;
+    background: transparent;
+    box-shadow: none;
   }
 
   a, li > span {
@@ -186,12 +188,20 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
 }
 
 #menuSearch {
+  display: none;
   position: absolute;
 
-  top: 0;
-  left: 0;
+  top: 30px;
+  left: 50%;
+  transform: translate(-50%, 0);
   width: 100%;
-  z-index: 2; // Ensure search box sits above #shareLinks
+  max-width: 400px;
+  //z-index: 2; // Ensure search box sits above #shareLinks
+  background-color: @menu-field-background;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: rgba(0, 0, 0, 0.2) -5px 6px 13px 0px;
+  z-index: 999;
 
   &:after {
     border: none;
@@ -247,7 +257,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
   height: 60px;
   padding: 21px 21px 23px 23px !important; // Controls size of icon and position within the element
   color: @menu-text;
-  .button-hover();
+  //.button-hover();
   cursor: pointer;
   z-index: 3;
 
@@ -295,9 +305,9 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
   left: 0;
   top: 50%;
   transform: translateY(-50%);
-  color: @menu-background;
+  color: @menu-text;
   height: auto;
-  padding-top: 20px;
+  padding-left: 20px !important;
 
   .svg-icon {
     width: 25px;
@@ -330,10 +340,15 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
 }
 
 #menuSearchHints {
-  padding: 15px 0;
+
+  &:has(.hint) {
+    padding: 10px 0;
+    margin: 0 10px;
+    border-top: 1px solid darken(#fff, 80%);
+  }
 
   .hint {
-    padding: 13px 30px;
+    padding: 10px 15px;
     font-size: 16px;
     display: block;
     width: 100%;
@@ -355,7 +370,7 @@ html.mm-opening .mm-menu.mm-opened[class*=mm-pagedim] ~ #mm-blocker {
       margin: auto;
       top: 0;
       bottom: 0;
-      right: 25px;
+      right: 15px;
       transform: rotate(135deg);
 
       // Reverse arrow position and direction for RTL screens