Add dropdown for mobile search

sumocoders · Aug 3, 2023 · 8e282c8 · 8e282c8
1 parent 6760f7f
commit 8e282c8
Show file tree

Hide file tree

Showing 10 changed files with 73 additions and 28 deletions.
diff --git a/src/Frontend/Themes/Bootstrap/src/Layout/Sass/_bootstrap-variables.scss b/src/Frontend/Themes/Bootstrap/src/Layout/Sass/_bootstrap-variables.scss
@@ -1133,8 +1133,8 @@ $zindex-sticky:                     1020;
 $zindex-fixed:                      1030;
 $zindex-offcanvas-backdrop:         1040;
 $zindex-offcanvas:                  1045;
-$zindex-modal-backdrop:             1050;
-$zindex-modal:                      1055;
+$zindex-modal-backdrop:             1110;
+$zindex-modal:                      1120;
 $zindex-popover:                    1070;
 $zindex-tooltip:                    1080;
 $zindex-toast:                      1090;

diff --git a/src/Frontend/Themes/Bootstrap/src/Layout/Sass/base/_base.scss b/src/Frontend/Themes/Bootstrap/src/Layout/Sass/base/_base.scss
@@ -22,3 +22,7 @@ p img {
     z-index: 10;
   }
 }
+
+.box-shadow {
+  box-shadow: $box-shadow-sm;
+}
diff --git a/src/Frontend/Themes/Bootstrap/src/Layout/Sass/components/_navbar-languages.scss b/src/Frontend/Themes/Bootstrap/src/Layout/Sass/components/_navbar-languages.scss
@@ -1,7 +1,10 @@
 .navbar-language {
   @include media-breakpoint-down(lg) {
+    .dropdown-toggle {
+      padding: 8px $dropdown-item-padding-x 8px 0;
+    }
       .dropdown, .dropdown-menu {
-        display: flex;
+        display: flex !important;
       }
 
     .dropdown-item {

diff --git a/src/Frontend/Themes/Bootstrap/src/Layout/Sass/components/_navbar-offcanvas.scss b/src/Frontend/Themes/Bootstrap/src/Layout/Sass/components/_navbar-offcanvas.scss
@@ -12,17 +12,11 @@
         flex-flow: column nowrap;
       }
 
-      .search {
-        margin-top: auto;
-        width: 100%;
-
-        form {
-          width: 100%;
-        }
-
-        .twitter-typeahead {
-          flex-grow: 1;
-        }
+      .dropdown-menu {
+        position: static;
+        display: block;
+        border: none;
+        padding: 0;
       }
     }
   }

diff --git a/src/Frontend/Themes/Bootstrap/src/Layout/Sass/components/_navbar.scss b/src/Frontend/Themes/Bootstrap/src/Layout/Sass/components/_navbar.scss
@@ -1,14 +1,5 @@
 .navbar {
   z-index: 1100;
-
-  @include media-breakpoint-down(lg) {
-    .dropdown-menu {
-      position: static;
-      display: block;
-      border: none;
-      padding: 0;
-    }
-  }
 }
 
 .navbar-brand {

diff --git a/src/Frontend/Themes/Bootstrap/src/Layout/Sass/components/_search.scss b/src/Frontend/Themes/Bootstrap/src/Layout/Sass/components/_search.scss
@@ -0,0 +1,18 @@
+@include media-breakpoint-down(lg) {
+  .search {
+    width: 100%;
+
+    form {
+      width: 100%;
+    }
+
+    .twitter-typeahead {
+      flex-grow: 1;
+    }
+  }
+
+  .dropdown-menu.dropdown-search {
+    width: 80vw;
+    right: -100%;
+  }
+}
diff --git a/src/Frontend/Themes/Bootstrap/src/Layout/Sass/screen.scss b/src/Frontend/Themes/Bootstrap/src/Layout/Sass/screen.scss
@@ -25,6 +25,7 @@
 @import 'components/privacyConsentDialog';
 @import 'components/quote';
 @import 'components/dropdown';
+@import 'components/search';
 @import 'components/navbar';
 @import 'components/navbar-toggler';
 @import 'components/navbar-offcanvas';

diff --git a/src/Frontend/Themes/Bootstrap/src/Layout/Templates/Base.html.twig b/src/Frontend/Themes/Bootstrap/src/Layout/Templates/Base.html.twig
@@ -119,6 +119,10 @@
     {% include "Core/Layout/Templates/PrivacyConsentDialog.html.twig" %}
   {% endblock %}
 
+  {% block searchModal %}
+    {% include "Core/Layout/Templates/SearchModal.html.twig" %}
+  {% endblock %}
+
   {# Site wide HTML #}
   {% block htmlFooter %}
     {{ siteHTMLFooter|raw }}

diff --git a/src/Frontend/Themes/Bootstrap/src/Layout/Templates/Navbar.html.twig b/src/Frontend/Themes/Bootstrap/src/Layout/Templates/Navbar.html.twig
@@ -4,6 +4,20 @@
       {{ siteTitle }}
     </a>
 
+    <div class="dropdown d-lg-none ms-auto me-3">
+      <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+        <i class="fa fa-search"></i>
+        <span class="visually-hidden">{{ 'lbl.Search'|trans }}</span>
+      </button>
+      <ul class="dropdown-menu dropdown-search dropdown-menu-end p-2 border-0 box-shadow mt-2">
+        {% for top in positions.top %}
+          {% if top.html %}
+            {{ top.html|raw }}
+          {% endif %}
+        {% endfor %}
+      </ul>
+    </div>
+
     <button class="btn btn-white navbar-toggler d-lg-none p-0 ms-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
             aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon">
@@ -19,11 +33,14 @@
       <div class="offcanvas-body">
         {{ getnavigation('page', 0, 1) }}
 
-        {% for top in positions.top %}
-          {% if top.html %}
-            {{ top.html|raw }}
-          {% endif %}
-        {% endfor %}
+        <div class="d-none d-lg-block">
+          {% for top in positions.top %}
+            {% if top.html %}
+              {{ top.html|raw }}
+            {% endif %}
+          {% endfor %}
+        </div>
+
         {% include 'Core/Layout/Templates/Languages.html.twig' %}
       </div>
     </div>

diff --git a/src/Frontend/Themes/Bootstrap/src/Layout/Templates/SearchModal.html.twig b/src/Frontend/Themes/Bootstrap/src/Layout/Templates/SearchModal.html.twig
@@ -0,0 +1,13 @@
+<div class="modal fade d-lg-none" id="topModal" tabindex="-1" aria-labelledby="topModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-fullscreen-md-down modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h1 class="modal-title fs-5 visually-hidden" id="topModalLabel">Modal title</h1>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body d-flex flex-column justify-content-center">
+
+      </div>
+    </div>
+  </div>
+</div>