From f5f1d77b0dd1c4f6359098e3f25f8109cc4356fa Mon Sep 17 00:00:00 2001
From: Elisabeth Dickinson <edi@odoo.com>
Date: Wed, 31 Mar 2021 15:11:41 +0200
Subject: [PATCH] mobile fixes

---
 extensions/odoo_theme/layout.html             | 14 +--
 .../odoo_theme/layout_templates/footer.html   | 12 +--
 .../odoo_theme/layout_templates/header.html   |  2 +-
 .../layout_templates/searchbox.html           |  4 +-
 .../scss/bootstrap_scss/_variables.scss       |  2 +-
 extensions/odoo_theme/static/style.scss       | 89 ++++++++++++-------
 6 files changed, 73 insertions(+), 50 deletions(-)

diff --git a/extensions/odoo_theme/layout.html b/extensions/odoo_theme/layout.html
index 20ea54d08..925f86eaa 100644
--- a/extensions/odoo_theme/layout.html
+++ b/extensions/odoo_theme/layout.html
@@ -63,18 +63,16 @@
     <nav id="o_main_toctree" class="o_side_nav border-end" hidden>
         {% include "layout_templates/menu.html" %}
     </nav>
-    <header class="o_main_header border-bottom">
+    <header class="o_main_header border-bottom navbar navbar-light navbar-expand-lg">
         {% include "layout_templates/header.html" %}
+        <button class="navbar-toggler pe-3 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#o_main_toctree" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
     </header>
 {% endblock %}
 
 {% block content %}
     <div id="wrap">
-        <nav class="navbar navbar-expand-lg navbar-light d-lg-none" aria-label="Toggle OffCanvas">
-            <button class="navbar-toggler p-0 border-0" type="button" data-bs-toggle="offcanvas" aria-label="Toggle navigation">
-              <span class="navbar-toggler-icon"></span>
-            </button>
-        </nav>
         {% set main_classes = [] %}
         {% if pagename == master_doc %}  {# The current page is the homepage #}
             {% set main_classes = main_classes + ['index'] %} {# TODO EDI should be 'o_index' #}
@@ -91,7 +89,9 @@
         {% if 'hide_page_toc' in meta %}
             {% set main_classes = main_classes + ['o_fullwidth_page'] %}
         {% endif %}
-
+        <div class="px-3 pt-4 d-lg-none">
+            {% 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/footer.html b/extensions/odoo_theme/layout_templates/footer.html
index 612c2348c..9cb6e704d 100644
--- a/extensions/odoo_theme/layout_templates/footer.html
+++ b/extensions/odoo_theme/layout_templates/footer.html
@@ -1,14 +1,14 @@
-<div class="o_get_help d-lg-flex text-center text-lg-start">
+<div class="o_get_help container-fluid d-lg-flex">
     <div class="col-12 col-lg-10">
         <h5><i class="i-o-help me-2"></i>Get Help</h5>
         <div>
-            <a href="https://odoo.com/help" target="_blank" class="btn btn-outline-secondary">Contact Support</a>
-            <a href="https://www.odoo.com/forum/help-1" target="_blank" class="btn btn-outline-secondary">Ask the Odoo Community</a>
+            <a href="https://odoo.com/help" target="_blank" class="btn btn-outline-secondary mb-2">Contact Support</a>
+            <a href="https://www.odoo.com/forum/help-1" target="_blank" class="btn btn-outline-secondary mb-2">Ask the Odoo Community</a>
         </div>
     </div>
-    <div class="col-12 col-lg-2 mt-5 mt-lg-0">
-        <a href="https://www.odoo.com">
-            <img src="{{ pathto('_static/img/logos/odoo_logo.svg', 1) }}" width="100" alt="Odoo"/>
+    <div class="col-12 col-lg-2 mt-5 mt-lg-0 text-center">
+        <a class="o_logo" href="https://www.odoo.com">
+            <img src="{{ pathto('_static/img/logos/odoo_logo.svg', 1) }}" height="20" alt="Odoo"/>
         </a>
     </div>
 </div>
diff --git a/extensions/odoo_theme/layout_templates/header.html b/extensions/odoo_theme/layout_templates/header.html
index daa99c41e..25414eef2 100644
--- a/extensions/odoo_theme/layout_templates/header.html
+++ b/extensions/odoo_theme/layout_templates/header.html
@@ -1,7 +1,7 @@
 <div class="o_logo_wrapper">
       <a href="{{ pathto(master_doc) }}" class="o_logo">
           <img src="{{ pathto('_static/img/logos/odoo_logo.svg', 1) }}"
-               height="30" alt="Odoo"/>
+               height="20" alt="Odoo"/>
           <span>docs</span>
       </a>
 </div>
diff --git a/extensions/odoo_theme/layout_templates/searchbox.html b/extensions/odoo_theme/layout_templates/searchbox.html
index 03151214b..143a47e37 100644
--- a/extensions/odoo_theme/layout_templates/searchbox.html
+++ b/extensions/odoo_theme/layout_templates/searchbox.html
@@ -1,4 +1,4 @@
-<div id="searchbox" class="d-flex flex-grow-1 justify-content-stretch justify-content-lg-start pe-2" role="search">
+<div class="o_search_wrapper flex-grow-1 justify-content-stretch justify-content-lg-start 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">
@@ -6,4 +6,4 @@
         <button type="submit" class="btn"><i class="i-search"></i></button>
     </form>
 </div>
-<script type="text/javascript">$('#searchbox').show(0);</script>
+<script type="text/javascript">$('.o_search_wrapper').show(0);</script>
diff --git a/extensions/odoo_theme/static/scss/bootstrap_scss/_variables.scss b/extensions/odoo_theme/static/scss/bootstrap_scss/_variables.scss
index d9acaca98..9d6962717 100644
--- a/extensions/odoo_theme/static/scss/bootstrap_scss/_variables.scss
+++ b/extensions/odoo_theme/static/scss/bootstrap_scss/_variables.scss
@@ -560,7 +560,7 @@ $input-btn-line-height:       $line-height-base !default;
 $input-btn-focus-width:         .25rem !default;
 $input-btn-focus-color-opacity: .25 !default;
 $input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity) !default;
-$input-btn-focus-box-shadow:    0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+$input-btn-focus-box-shadow:    0 0 20px $input-btn-focus-width $input-btn-focus-color !default;
 
 $input-btn-padding-y-sm:      .25rem !default;
 $input-btn-padding-x-sm:      .5rem !default;
diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss
index efb3a2d63..e0ace5e87 100644
--- a/extensions/odoo_theme/static/style.scss
+++ b/extensions/odoo_theme/static/style.scss
@@ -6,6 +6,13 @@
 @import "scss/_typography";
 @import "scss/_iconfont";
 
+:root {
+    --o-header-height:                           50px;
+    @include media-breakpoint-up(lg) {
+        --o-header-height:                           90px;
+    }
+}
+
 div[aria-label="related navigation"] {
     display: none;
 }
@@ -35,9 +42,7 @@ body {
 //------------------------------------------------------------------------------
 
 header.o_main_header{
-    display: flex;
-    align-items: center;
-    height: $o-header-height;
+    height: var(--o-header-height);
     position: fixed;
     top: 0;
     left: 0;
@@ -67,6 +72,30 @@ header.o_main_header{
             margin-right: 3rem;
         }
     }
+    .o_search_wrapper {
+        @include media-breakpoint-down(lg) {
+           display: none !important;
+       }
+    }
+
+    .highlight-link {
+        margin-bottom: 0;
+        display: flex;
+        align-items: center;
+        a {
+            padding: 0 1rem;
+            @include font-size($font-size-secondary);
+        }
+    }
+}
+
+.o_logo img {
+    @include media-breakpoint-up(lg) {
+        height: 30px
+    }
+}
+
+.o_search_wrapper {
     .o_search {
         position: relative;
         width: 100%;
@@ -81,16 +110,6 @@ header.o_main_header{
             color: $gray;
         }
     }
-
-    .highlight-link {
-        margin-bottom: 0;
-        display: flex;
-        align-items: center;
-        a {
-            padding: 0 1rem;
-            @include font-size($font-size-secondary);
-        }
-    }
 }
 
 //------------------------------------------------------------------------------
@@ -99,12 +118,12 @@ header.o_main_header{
 
 .o_side_nav {
     width: $o-side-nav-width;
-    height: calc(100vh - #{$o-header-height});
+    height: calc(100vh - var(--o-header-height));
     overflow-y: auto;
     position: fixed;
-    top:$o-header-height;
-    left:-100%;
-    &.o-mobile-show {
+    top: var(--o-header-height);
+    left: -100%;
+    &.show {
         left:0;
         width: 100%;
     }
@@ -245,11 +264,11 @@ header.o_main_header{
             display: block;
             position: -webkit-sticky;
             position: sticky;
-            top: $o-header-height;
+            top: var(--o-header-height);
             right: 0;
             width: $o-on-page-width;
             height: 100%;
-            max-height: calc(100vh - #{$o-header-height});
+            max-height: calc(100vh - var(--o-header-height));
             padding: 3rem 3rem 3rem 0;
             overflow-y: auto;
         }
@@ -280,7 +299,7 @@ header.o_main_header{
 //------------------------------------------------------------------------------
 
 #wrap {
-    margin-top: $o-header-height;
+    margin-top: var(--o-header-height);
 
     @include media-breakpoint-up(lg) {
         display: flex;
@@ -304,6 +323,7 @@ header.o_main_header{
     main {
         position: relative;
         padding-top: 3rem;
+        padding-bottom: 3rem;
 
         @include media-breakpoint-up(lg) {
             left: $o-side-nav-width;
@@ -485,7 +505,10 @@ header.o_main_header{
 
             .o_git_link {
                 @include font-size($font-size-secondary);
-                @include o-position-absolute($top: 10px, $right: 1rem);
+                @include o-position-absolute($top: 0px, $right: 1rem);
+                @include media-breakpoint-up(lg) {
+                    @include o-position-absolute($top: 10px, $right: 1rem);
+                }
                 i {
                     margin-right: .2rem;
                 }
@@ -576,8 +599,10 @@ header.o_main_header{
                         font-style: italic;
                         margin: 0 auto;
                     }
-                    &:not([class^="col"]) .legend {
-                        max-width: 60%;
+                    @include media-breakpoint-up(md) {
+                        &:not([class^="col"]) .legend {
+                            max-width: 60%;
+                        }
                     }
                 }
 
@@ -810,10 +835,12 @@ header.o_main_header{
             }
 
             &.alert-go_to {
-                display: inline-block;
                 border-color: $o-violet;
                 background-color: $gray-lightest;
-                width: calc(50% - 1rem);
+                @include media-breakpoint-up(lg){
+                    display: inline-block;
+                    width: calc(50% - 1rem);
+                }s
                 a {
                     color: $o-violet-dark;
                 }
@@ -833,17 +860,13 @@ header.o_main_header{
 // Footer
 //------------------------------------------------------------------------------
 footer {
-
-    > div {
-        padding: 3rem;
-
+    .o_get_help {
+        padding-top: 3rem;
+        padding-bottom: 3rem;
+        background: $gray-100;
         @include media-breakpoint-up(lg) {
             padding-left: calc(#{$o-side-nav-width} + 3rem)
         }
-    }
-
-    .o_get_help {
-        background: $gray-100;
 
         h5 {
             color: $secondary;