From 26d489c6e1df6f33bad716dd7ea0ff2837a5d765 Mon Sep 17 00:00:00 2001
From: Elisabeth Dickinson <edi@odoo.com>
Date: Wed, 12 May 2021 09:49:55 +0200
Subject: [PATCH] [FIX] theme: improve search bar implementation and behavior

This commit removes the extra search bar that was dedicated to the
mobile layout and adapts the desktop's one to be compatible with mobile.
It also brings back the "Hide Search Matches" button.
---
 extensions/odoo_theme/layout.html                |  4 ----
 .../odoo_theme/layout_templates/searchbox.html   |  3 +--
 extensions/odoo_theme/static/style.scss          | 16 ++++++++++++----
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/extensions/odoo_theme/layout.html b/extensions/odoo_theme/layout.html
index a4cd60526..0c1a31f44 100644
--- a/extensions/odoo_theme/layout.html
+++ b/extensions/odoo_theme/layout.html
@@ -91,10 +91,6 @@
             {%- set main_classes = main_classes + ['o_fullwidth_page'] %}
         {%- endif %}
 
-        <div class="px-3 py-4 d-lg-none">
-            <!-- Searchbox only visible in mobile -->
-            {%- include "layout_templates/searchbox.html" %}
-        </div>
         <main class="container-fluid {{ ' '.join(main_classes) }}">
             {%- if pagename == master_doc %}
                 {# Custom landing page on the root of the documentation #}
diff --git a/extensions/odoo_theme/layout_templates/searchbox.html b/extensions/odoo_theme/layout_templates/searchbox.html
index 103b3b8b2..22c7b5f90 100644
--- a/extensions/odoo_theme/layout_templates/searchbox.html
+++ b/extensions/odoo_theme/layout_templates/searchbox.html
@@ -1,6 +1,5 @@
 {# NOTE: the 'searchbox' id is used to hook the "Hide Search Matches" button #}
-{# NOTE: currently renamed to '_searchbox' to hide the button until it receives proper styling #}
-<div id="_searchbox" class="o_search_wrapper flex-grow-1 justify-content-stretch justify-content-lg-start pe-lg-2" role="search">
+<div id="searchbox" class="o_search_wrapper flex-grow-1 pe-lg-2" role="search">
     <form class="o_search" action="{{ pathto('search') }}" method="get">
         <input type="text" name="q" id="q" class="form-control rounded-pill" placeholder="What are you looking for?">
         <input type="hidden" name="area" value="default">
diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss
index 7cc0f58e6..668b36c62 100644
--- a/extensions/odoo_theme/static/style.scss
+++ b/extensions/odoo_theme/static/style.scss
@@ -72,17 +72,22 @@ header.o_main_header{
         }
     }
     .o_search_wrapper {
+        display: flex;
         @include media-breakpoint-down(lg) {
-           display: none !important;
+            display: block;
+            position: absolute;
+            width: 100%;
+            padding: 0 10px;
+            top: calc(100% + 30px);
        }
     }
 
     .highlight-link {
         margin-bottom: 0;
-        display: flex;
-        align-items: center;
+        padding: 0 1rem;
+        text-align: center;
+        align-self: center;
         a {
-            padding: 0 1rem;
             @include font-size($font-size-secondary);
         }
     }
@@ -369,6 +374,9 @@ header.o_main_header{
     main {
         position: relative;
         padding-top: 3rem;
+        @include media-breakpoint-down(lg) {
+            padding-top: 7rem;
+        }
         padding-bottom: 3rem;
 
         @include media-breakpoint-up(lg) {