[IMP] odoo_theme: add subheader and adapt switchers and searchbar

task-2800937

X-original-commit: 411e1cb1d3

extensions/odoo_theme/layout.html

@@ -65,21 +65,16 @@
     <nav id="o_menu" class="o_side_nav border-end">
         {%- if 'hide-page-toc' not in meta %}
             {# Shown when the JS has properly set all the classes on the TOC elements #}
-            <aside id="o_page_toc_in_nav" class="o_page_toc o_in_nav_toc border-bottom pb-3 mb-4" hidden>
+            <aside id="o_page_toc_in_nav" class="o_page_toc o_in_nav_toc border-bottom pt-3 pb-3" hidden>
                 {%- include "layout_templates/page_toc.html" %}
             </aside>
         {%- endif %}
-        <div id="o_main_toctree" class="o_main_toc" hidden>
+        <div id="o_main_toctree" class="o_main_toc mt-3" hidden>
             {%- include "layout_templates/menu.html" %}
         </div>
     </nav>
-    <header class="o_main_header border-bottom navbar navbar-light navbar-expand-lg">
+    <header class="o_headers">
         {%- include "layout_templates/header.html" %}
-        <button class="navbar-toggler p-0 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#o_menu" aria-label="Toggle navigation">
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-        </button>
     </header>
 {%- endblock %}
 

extensions/odoo_theme/layout_templates/header.html

@@ -1,12 +1,23 @@
+<div class="o_main_header border-bottom d-flex align-items-center">
     <div class="o_logo_wrapper">
       <a href="{{ pathto(master_doc) }}" class="o_logo">
           <img src="{{ pathto('_static/img/logos/odoo_logo.svg', 1) }}" height="20" alt="Odoo"/>
           <span>docs</span>
       </a>
     </div>
+    <div class="d-flex flex-grow-1">
         {%- include "layout_templates/searchbox.html" %}
-<div class="d-none d-lg-flex ms-auto">
+        <a class="btn btn-primary fw_semibold ms-auto d-none d-lg-inline-block" href="https://odoo.com/trial">{{ _('Try Odoo for FREE') }}</a>
+    </div>
+</div>
+<div class="o_subheader border-bottom d-flex">
+    <div class="o_side_nav_toggler_wrapper border-end d-flex d-lg-none">
+        <button class="h-100 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#o_menu" aria-label="Toggle navigation">
+            <i class="i-sidepanel"></i>
+        </button>
+    </div>
+    <div class="d-flex justify-content-end ms-auto">
         {%- include "layout_templates/language_switcher.html" %}
         {%- include "layout_templates/version_switcher.html" %}
-    <a class="btn btn-primary fw_semibold" href="https://odoo.com/trial">{{ _('Try Odoo for FREE') }}</a>
+    </div>
 </div>

extensions/odoo_theme/layout_templates/language_switcher.html

@@ -1,13 +1,13 @@
-<div class="o_languages me-3">
+<div class="o_languages">
 	<div class="dropdown">
         {%- if alternate_languages|length > 0 %}
-            <button class="btn border dropdown-toggle"
+            <button class="btn btn-sm dropdown-toggle"
                     id="languages"
                     data-bs-toggle="dropdown">
                 {{ language }} {# The current language #}
             </button>
         {%- else %}
-            <button class="btn border dropdown-toggle"
+            <button class="btn btn-sm dropdown-toggle"
                     id="languages"
                     disabled="">
                 {{ language }} {# The current language #}

extensions/odoo_theme/layout_templates/searchbox.html

@@ -1,5 +1,5 @@
 {# NOTE: the 'searchbox' id is used to hook the "Hide Search Matches" button #}
-<div id="searchbox" class="o_search_wrapper pe-lg-2" role="search">
+<div id="searchbox" class="o_search_wrapper d-flex flex-grow-1" 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">

extensions/odoo_theme/layout_templates/version_switcher.html

@@ -1,17 +1,13 @@
-<div class="o_versions row gx-2 me-3">
+<div class="o_versions row">
-	<div class="col align-self-center">
-    	<label class="fw_bold small ms-2">Version</label>
-    </div>
-    <div class="col">
     <div class="dropdown">
         {%- if alternate_versions|length > 0 %}
-                <button class="btn border dropdown-toggle"
+            <button class="btn btn-sm dropdown-toggle"
                     id="versions"
                     data-bs-toggle="dropdown">
                 {{ version_display_name }} {# The current version #}
             </button>
         {%- else %}
-                <button class="btn border dropdown-toggle"
+            <button class="btn btn-sm dropdown-toggle"
                     id="versions"
                     disabled="">
                 {{ version_display_name }} {# The current version #}
@@ -24,4 +20,3 @@
         </ul>
     </div>
 </div>
-</div>

extensions/odoo_theme/static/scss/_variables.scss

@@ -231,9 +231,13 @@ $doc_cyan:                                  $color-alpha;
 
 // Header
 $o-header-mobile-height:                    50px;
-$o-header-height:                           90px;
+$o-header-height:                           80px;
 $o-header-white:                            #ffffff;
 
+$o-subheader-height:                        calc(#{$o-header-height}/2.5);
+
+$o-headers-mobile-height:                   calc(#{$o-header-mobile-height} + (#{$o-subheader-height}));
+$o-headers-height:                          calc(#{$o-header-height} + #{$o-subheader-height});
 // Navigation
 $o-side-nav-width:                          350px;
 $o-on-page-width:                           20%;

extensions/odoo_theme/static/style.scss

@@ -51,15 +51,16 @@ span.viewcode-link {
 // Header with logo, searchbar and switchers
 //------------------------------------------------------------------------------
 
-header.o_main_header {
+header {
     width: 100%;
-    height: $o-header-mobile-height;
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
-    background-color: $o-header-white;
     z-index: 10;
+    .o_main_header {
+        height: $o-header-mobile-height;
+        background-color: $o-header-white;
         padding: 0 $padding-s;
         @include media-breakpoint-up(lg) {
             height: $o-header-height;
@@ -70,6 +71,14 @@ header.o_main_header {
         }
 
         .o_logo_wrapper {
+            margin-right: $margin-s;
+            @include media-breakpoint-up(xl) {
+                width: calc(#{$o-side-nav-width} - #{$padding-m});
+            }
+            @include media-breakpoint-up(lg) {
+                margin-right: $margin-l;
+            }
+
             > .o_logo {
                 img {
                     margin-bottom: -2px;
@@ -82,12 +91,6 @@ header.o_main_header {
                     @include o-easter-egg($img:'img/ducky.svg');
                 }
             }
-        @include media-breakpoint-up(xl) {
-            width: calc(#{$o-side-nav-width} - #{$padding-l});
-        }
-        @include media-breakpoint-up(lg) {
-            margin-right: $margin-l;
-        }
         }
 
         .o_logo img {
@@ -96,43 +99,41 @@ header.o_main_header {
             }
         }
 
-    .o_search_wrapper {
+        > div:not(.o_logo_wrapper) {
-        display: flex;
-        position: relative;
-        opacity: 1;
-        @include transition(opacity .3s);
-        @include media-breakpoint-down(lg) {
-            display: block;
-            position: absolute;
-            width: calc(100% - (#{$padding-s} * 2));
-            top: calc(100% + #{$padding-s});
-        }
             @include media-breakpoint-up(lg) {
-            flex-grow: 1;
+                width: calc(100% - (#{$o-side-nav-width}));
-            max-width: 500px;
+            }
+        }
+
+        .o_search_wrapper {
+            position: relative;
+
+            @include media-breakpoint-up(lg) {
+                padding-right: $padding-m;
             }
 
             .o_search {
                 position: relative;
                 width: 100%;
-
-
                 .btn {
-                @include o-position-absolute($top: 50%, $right: 1rem);
+                    @include o-position-absolute($top: 50%, $right: .5rem);
                     @include o-transform (translateY(-50%)) ;
+
+                    @include media-breakpoint-up(lg) {
+                        right: 1rem;
+                    }
                     padding: 0;
                     font-size: 1.2rem;
                     color: $gray;
                 }
+
+                .form-control {
+                    @include media-breakpoint-down(lg) {
+                        padding: 0.275rem 0.5rem;
+                        font-size: $font-size-secondary;
                     }
                 }
 
-    &.o_header_scrolled {
-        .o_search_wrapper {
-            @include media-breakpoint-down(lg) {
-                opacity: 0;
-            }
-        }
             }
 
             .highlight-link {
@@ -142,56 +143,32 @@ header.o_main_header {
                     @include font-size(12px);
                 }
             }
-
-    .navbar-toggler {
-        &[aria-expanded="true"] {
-            .icon-bar {
-                &:nth-of-type(1) {
-                    @include o-transform(rotate(45deg));;
-                    @include o-transform-origin(10%, 10%)
-                }
-
-                &:nth-of-type(2) {
-                    opacity: 0;
-                    filter: alpha(opacity=0);
-                }
-
-                &:nth-of-type(3) {
-                    @include o-transform(rotate(-45deg));
-                    @include o-transform-origin(10%, 90%)
-                }
-            }
-        }
-
-        .icon-bar {
-            display: block;
-            width: 22px;
-            height: 2px;
-            background-color: $gray-dark;
-            @include o-transition(all, .2s);
-
-            &+ .icon-bar {
-                margin-top: 4px;
-            }
-
-            &:nth-of-type(1) {
-                @include o-transform(rotate(0));
-            }
-
-            &:nth-of-type(2) {
-                opacity: 1;
-                filter: alpha(opacity=100);
-            }
-
-            &:nth-of-type(3) {
-                @include o-transform(rotate(0));
         }
     }
 
-        &:focus {
+    .o_subheader {
+        background: $gray-lighter;
+        height: $o-subheader-height;
+        padding-right: $padding-s;
+        @include media-breakpoint-up(lg) {
+            padding: 0 $padding-m;
+        }
+        @include media-breakpoint-up(xl) {
+            padding: 0 $padding-l 0 0;
+        }
+
+        .o_side_nav_toggler_wrapper {
+            height: 100%;
+            button {
+                &:focus, &:focus-visible{
                 box-shadow: none;
                 outline:none;
                 }
+                &[aria-expanded="true"]{
+                    background-color: rgba(0,0,0, .2);
+                }
+            }
+        }
     }
 }
 
@@ -207,7 +184,6 @@ header.o_main_header {
     top: -100%;
     left:0;
     @include o-transition(all, .3s);
-    padding-top: 4rem;
     padding-left: $padding-s;
     background-color: lighten($o-violet-dark, 70%) ;
     z-index: 10;
@@ -370,7 +346,7 @@ header.o_main_header {
             display: none;
             @include media-breakpoint-up(xl) {
                 display: block;
-                top: $o-header-height;
+                top: $o-headers-height;
                 right: 0;
                 padding: $padding-l $padding-s $padding-l 0;
                 overflow-y: auto;
@@ -379,7 +355,7 @@ header.o_main_header {
             position: sticky;
             width: $o-on-page-width;
             height: 100%;
-            max-height: calc(100vh - #{$o-header-height});
+            max-height: calc(100vh - #{$o-headers-height});
         }
         &.o_in_nav_toc {
             display: block;
@@ -415,11 +391,11 @@ header.o_main_header {
 //------------------------------------------------------------------------------
 
 #wrap {
-    margin-top: $o-header-mobile-height;
+    margin-top: $o-headers-mobile-height;
     @include media-breakpoint-up(lg) {
         display: flex;
         justify-content: space-between;
-        margin-top: $o-header-height;
+        margin-top: $o-headers-height;
     }
 
     code {
@@ -439,7 +415,6 @@ header.o_main_header {
 
     main {
         position: relative;
-        padding-top: 5rem;
         padding-bottom: $padding-l;
         @include media-breakpoint-up(lg) {
             left: calc(#{$o-side-nav-width} - #{$padding-s});
@@ -627,6 +602,7 @@ header.o_main_header {
         }
 
         article.doc-body {
+            padding-top: $padding-s;
             position: relative;
 
             .o_git_link {