Merge pull request #98 from devgeniem/PIEN-8034

Pien-8034: Fix search in hamburger-menu

CHANGELOG.MD

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## 0.3.4 2022-12-27
+
+### Fixed
+- PIEN-8034: Remove single search-button and add a working search-form to hamburger-menu
+
 ## 0.3.3 2022-09-07
 
 ### Fixed

assets/styles/ui-components/header/_fly-out-nav.scss

@@ -73,6 +73,7 @@
 
     &__actions {
         display: flex;
+        flex-wrap: wrap;
         justify-content: center;
         margin-top: 2rem;
 

partials/ui/menu/fly-out-nav.dust

@@ -26,11 +26,7 @@
                 {>"ui/menu/language-nav" links=Header.language_nav.links /}
 
                 {^Header.hide_search}
-                    <a href="{Header.search_action|s}?s="
-                       class="{Header.colors.search_button|s} button is-primary button--icon">
-                        {Strings.s.header.search|s}
-                        {>"ui/icon" icon="search" class="icon--large is-primary-invert"  /}
-                    </a>
+                    {>"ui/search-form-small" button_class=Header.colors.search_button /}
                 {/Header.hide_search}
             </div>
 

partials/ui/search-form-small.dust

@@ -0,0 +1,16 @@
+<form role="search" method="get" class="search-form is-flex is-flex-direction-row is-align-items-center mt-5 has-width-100"
+    action="{Header.search_action|url}">
+    <div class="mr-2 is-flex-grow-1">
+        <label>
+            <span class="is-sr-only">{Strings.s.header.search_input_label|html}</span>
+            <input type="search"
+                   class="search-form__input has-background-white p-3 has-width-100"
+                   placeholder="{Strings.s.header.search_input_placeholder|s}" value="{search_query|attr}" name="s">
+        </label>
+    </div>
+
+    <button type="submit" class="search-form__button button is-secondary button--icon {button_class|attr}">
+        {Strings.s.header.search|html}
+        {>"ui/icon" icon="search" class="icon--medium"  /}
+    </button>
+</form>

style.css

@@ -1,7 +1,7 @@
 /*
  * Theme Name:  TMS Theme Vesi
  * Description: Tampere Multisite Vesi Theme
- * Version:     0.3.1
+ * Version:     0.3.4
  * Author:      Geniem
  * Author URI:  https://geniem.fi
  * Template:    tms-theme-base