make header title shorter

This reverts commit 96bec006e587e00ca8b4720a615b1c5d64550eb3.

content/administration.rst

@@ -2,10 +2,12 @@
 :show-content:
 :hide-page-toc:
 :show-toc:
+:classes: pt-0
+:showbanner:
 
-====================
-Install and Maintain
-====================
+==========
+Deployment
+==========
 
 These guides provide instructions on how to install, maintain and upgrade Odoo databases.
 

content/applications.rst

@@ -2,11 +2,12 @@
 :show-content:
 :hide-page-toc:
 :show-toc:
+:classes: pt-0
+:showbanner:
 
-
-=========
-User Docs
-=========
+====
+User
+====
 
 Discover our user guides and configuration tutorials per application.
 

content/contributing.rst

@@ -1,5 +1,7 @@
 :show-content:
 :hide-page-toc:
+:classes: pt-0
+:showbanner:
 
 ============
 Contributing

content/developer.rst

@@ -2,7 +2,8 @@
 :show-content:
 :hide-page-toc:
 :show-toc:
-
+:classes: pt-0
+:showbanner:
 
 =========
 Developer

content/developer/howtos.rst

@@ -1,5 +1,7 @@
 :show-content:
 :hide-page-toc:
+:classes: pt-0
+:showbanner:
 
 =============
 How-to guides

content/developer/tutorials.rst

@@ -1,5 +1,7 @@
 :show-content:
 :hide-page-toc:
+:classes: pt-0
+:showbanner:
 
 =========
 Tutorials

extensions/odoo_theme/layout.html

@@ -104,15 +104,22 @@
             {%- set main_classes = main_classes + ['o_fullwidth_page'] %}
         {%- endif %}
 
+        {%- if 'showbanner' in meta %}
+            {%- set main_classes = main_classes + ['o_with_banner'] %}
+        {%- endif %}
+
         <main class="container-fluid {{ ' '.join(main_classes) }}">
             {%- if pagename == master_doc %}
                 {# Custom landing page on the root of the documentation #}
                 {%- include "layout_templates/homepage.html" %}
-            {%- elif pagename == 'legal' %}
+                {%- elif pagename == 'legal' %}
                 {%- include "layout_templates/legal.html" %}
             {%- else %}
                 <article id="o_content" class="doc-body">
                     <div role="main"> {# Beacon used by the Sphinx search to know where to look for a string #}
+                        {%- if 'showbanner' in meta %}
+                            <section class="o_content_fw_banner"></section>
+                        {%- endif %}
                         {%- block body %} {%- endblock %}
                     </div>
                     {%- if github_link and pagename != 'search' and not pagename.startswith('legal') %}
@@ -123,6 +130,9 @@
                     {%- endif %}
                 </article>
             {%- endif %}
+            <footer>
+                {%- include "layout_templates/footer.html" %}
+            </footer>
         </main>
         {%- if 'hide-page-toc' not in meta %}
             {# Shown when the JS has properly set all the classes on the TOC elements #}
@@ -131,7 +141,4 @@
             </aside>
         {%- endif %}
     </div>
-    <footer>
-        {%- include "layout_templates/footer.html" %}
-    </footer>
 {%- endblock %}

extensions/odoo_theme/layout_templates/footer.html

@@ -1,14 +1,5 @@
-<div class="o_get_help container-fluid d-lg-flex">
-    <div class="col-12 col-lg-10">
-        <h4><i class="i-o-help me-2"></i>{{ _("Get Help") }}</h4>
-        <div>
-            <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 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 class="container-fluid d-flex justify-content-center">
+    <a class="o_logo" href="https://www.odoo.com">
+        <img src="{{ pathto('_static/img/logos/odoo_logo.svg', 1) }}" height="40" alt="Odoo"/>
+    </a>
 </div>

extensions/odoo_theme/layout_templates/header.html

@@ -1,23 +1,20 @@
-<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" %}
-        <a class="btn btn-primary fw_bold 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_main_header border-bottom d-flex align-items-center flex-wrap">
     <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">
+    <div class="o_logo_wrapper ps-3">
+      <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>
+    {%- include "layout_templates/searchbox.html" %}
+    <div class="d-flex justify-content-end ms-auto o_menus">
+        {%- include "layout_templates/help_menu.html" %}
         {%- include "layout_templates/language_switcher.html" %}
         {%- include "layout_templates/version_switcher.html" %}
     </div>
+    <a class="btn btn-primary fw_bold ms-auto d-none d-lg-inline-block flex-shrink-0" href="https://odoo.com/trial">{{ _('Try Odoo for FREE') }}</a>
 </div>

extensions/odoo_theme/layout_templates/help_menu.html

@@ -0,0 +1,11 @@
+<div class="row me-1">
+    <div class="dropdown">
+        <button class="btn btn-sm dropdown-toggle h-100 fw-bold"
+               id="get_help" data-bs-toggle="dropdown">
+            {{ _("Get Help") }}</button>
+        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="get_help">
+            <li><a href="https://odoo.com/help" target="_blank" class="dropdown-item">{{ _("Contact Support") }}</a></li>
+            <li><a href="https://www.odoo.com/forum/help-1" target="_blank" class="dropdown-item">{{ _("Ask the Odoo Community") }}</a></li>
+        </ul>
+    </div>
+</div>

extensions/odoo_theme/layout_templates/homepage.html

@@ -5,7 +5,7 @@
     <section>
         <div class="row gx-lg-5">
             <div class="col-lg-6">
-                <h2><a href="{{ pathto('applications') }}">{{ _("User Docs") }}</a></h2>
+                <h2><a href="{{ pathto('applications') }}">{{ _("User") }}</a></h2>
                 <p class="text-dark">{{ _("Discover our guide to help you use and configure the platform, by applications.") }}</p>
                 <h5 class="text-dark pt-3 text-uppercase fw_bold">{{ _("Top Apps") }}</h5>
                 <ul class="list-unstyled">
@@ -32,7 +32,7 @@
                 </ul>
             </div>
             <div class="col-lg-6">
-                <h2 class="border-top pt-4 pt-lg-0"><a href="{{ pathto('administration') }}">{{ _("Install and Maintain") }}</a></h2>
+                <h2 class="border-top pt-4 pt-lg-0"><a href="{{ pathto('administration') }}">{{ _("Deployment") }}</a></h2>
                 <p class="text-dark">{{ _("Learn how to install, deploy and upgrade Odoo on premise or on Odoo.sh.") }}</p>
                 <h5 class="text-dark pt-3 text-uppercase fw_bold">{{ _("Top Links") }}</h5>
                 <ul class="list-unstyled">

extensions/odoo_theme/layout_templates/language_switcher.html

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

extensions/odoo_theme/layout_templates/page_toc.html

@@ -1,4 +1,4 @@
-<div class="o_page_toc_nav mt-1">
+<div class="o_page_toc_nav mt-1 ms-1">
     <h5>{{ _("On this page") }}</h5>
     {{ toc }} {# this is the page TOC (or local toc) #}
 </div>

extensions/odoo_theme/layout_templates/searchbox.html

@@ -1,7 +1,7 @@
 {# NOTE: the 'searchbox' id is used to hook the "Hide Search Matches" button #}
 <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="text" name="q" id="q" class="form-control" placeholder="What are you looking for?">
         <input type="hidden" name="area" value="default">
         <input type="hidden" name="check_keywords" value="yes">
         <button type="submit" class="btn"><i class="i-search"></i></button>

extensions/odoo_theme/layout_templates/version_switcher.html

@@ -1,13 +1,13 @@
 <div class="o_versions row">
     <div class="dropdown">
         {%- if alternate_versions|length > 0 %}
-            <button class="btn btn-sm dropdown-toggle"
+            <button class="btn btn-sm dropdown-toggle h-100 fw-bold"
                     id="versions"
                     data-bs-toggle="dropdown">
                 {{ version_display_name }} {# The current version #}
             </button>
         {%- else %}
-            <button class="btn btn-sm dropdown-toggle"
+            <button class="btn btn-sm dropdown-toggle h-100 fw-bold"
                     id="versions"
                     disabled="">
                 {{ version_display_name }} {# The current version #}

extensions/odoo_theme/static/scss/_typography.scss

@@ -5,8 +5,8 @@
 //------------------------------------------------------------------------------
 // Fonts
 //------------------------------------------------------------------------------
-@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+// @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');
+// @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
 @font-face {
   font-family: 'icomoon';
   src: url('fonts/icomoon.woff2') format('woff2'),

extensions/odoo_theme/static/scss/_variables.scss

@@ -123,8 +123,8 @@ $o-header-bg:                               $white;
 
 $o-subheader-height:                        32px;
 
-$o-headers-mobile-height:                   $o-header-mobile-height + $o-subheader-height;
-$o-headers-height:                          $o-header-height + $o-subheader-height;
+$o-headers-mobile-height:                   $o-header-mobile-height;
+$o-headers-height:                          $o-header-height;
 // Navigation
 $o-side-nav-width:                          350px;
 $o-on-page-width:                           20%;

extensions/odoo_theme/static/style.scss

@@ -15,7 +15,7 @@ div[aria-label="related navigation"] {
 }
 
 body {
-    position: relative;
+    font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
 
     a {
         text-underline-position: from-font;
@@ -40,31 +40,29 @@ body {
 
 }
 
-.hidden {
-    display: none !important;
-    opacity: 0 !important;
-    visibility: hidden !important;
-}
-
 //------------------------------------------------------------------------------
 // Header with logo, searchbar and switchers
 //------------------------------------------------------------------------------
 
 header {
-    position: fixed;
-    width: 100%;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 10;
+
+    background-color: $o-gray-bg;
+
+    @include media-breakpoint-up(lg) {
+        background-color: white;
+        position: fixed;
+        width: 100%;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 10;
+    }
 
     .o_main_header {
-        height: $o-header-mobile-height;
+        height: $o-header-height;
         padding: 0 $o-padding-s;
-        background-color: $o-header-bg;
 
         @include media-breakpoint-up(lg) {
-            height: $o-header-height;
             padding: 0 $o-padding-m;
         }
 
@@ -105,12 +103,6 @@ header {
             }
         }
 
-        > div:not(.o_logo_wrapper) {
-            @include media-breakpoint-up(lg) {
-                width: calc(100% - (#{$o-side-nav-width}));
-            }
-        }
-
         .o_search_wrapper {
             position: relative;
 
@@ -157,35 +149,6 @@ header {
             }
         }
     }
-
-    .o_subheader {
-        height: $o-subheader-height;
-        padding-right: $o-padding-s;
-        background: $o-gray-bg;
-
-        @include media-breakpoint-up(lg) {
-            padding: 0 $o-padding-m;
-        }
-
-        @include media-breakpoint-up(xl) {
-            padding: 0 $o-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);
-                }
-            }
-        }
-    }
 }
 
 //------------------------------------------------------------------------------
@@ -206,11 +169,12 @@ header {
         left: -100%;
         z-index: 10;
         width: 90%;
-        height: calc(100% - #{$o-headers-mobile-height});
+        height: calc(100% - #{$o-headers-height});
         transition: all, .3s;
         overflow-y: auto;
         padding-left: $o-padding-s;
-        background-color: lighten($secondary, 70%) ;
+        background-color: $o-gray-bg;
+
         color: $secondary;
         font-weight: $font-weight-normal;
 
@@ -226,10 +190,6 @@ header {
             width: 5px;
         }
 
-        &::-webkit-scrollbar-track {
-            background: $white;
-        }
-
         &::-webkit-scrollbar-thumb {
             background-color: $secondary;
             border-radius: 0;
@@ -256,6 +216,11 @@ header {
         }
     }
 
+    i:before {
+        display: inline-block;
+        width: 1em;
+    }
+
     .toctree-l1 {
         padding-bottom: $o-padding-xs;
 
@@ -265,36 +230,6 @@ header {
                 font-weight: $o-font-weight-medium;
             }
         }
-
-        &[class*="o_menu_"] {
-            &.o_deepest_active_toc_entry > .o_toc_entry_wrapper i {
-                color: $white;
-            }
-
-            > .o_toc_entry_wrapper > i:before {
-                @include o-inline-icon(0 $o-icon-margin 0 0);
-            }
-        }
-
-        &.o_menu_applications > .o_toc_entry_wrapper > i:before {
-            content:'#{$i-doc-apps}';
-        }
-
-        &.o_menu_administration > .o_toc_entry_wrapper > i:before {
-            content:'#{$i-doc-admin}';
-        }
-
-        &.o_menu_developer > .o_toc_entry_wrapper > i:before {
-            content:'#{$i-doc-dev}';
-        }
-
-        &.o_menu_services > .o_toc_entry_wrapper > i:before {
-            content:'#{$i-doc-services}';
-        }
-
-        &.o_menu_contributing > .o_toc_entry_wrapper > i:before {
-            content:'#{$i-doc-contribute}';
-        }
     }
 }
 
@@ -312,6 +247,13 @@ header {
         color: $o-gray-color;
         font-weight: $font-weight-normal;
         @include font-size($font-size-sm);
+        color: $gray-700;
+        font-weight: 500;
+
+        &:hover {
+            color: black;
+            text-decoration: none;
+        }
     }
 
     ul {
@@ -330,14 +272,6 @@ header {
                     color: inherit;
                     font-weight: inherit;
                 }
-
-                &.o_deepest_active_toc_entry {
-                    > a,  > .o_toc_entry_wrapper, > .o_toc_entry_wrapper a {
-                        background-color: $secondary;
-                        color: $white;
-                        font-weight: inherit;
-                    }
-                }
             }
 
             &:not(.toctree-l1) .o_toc_entry_wrapper {
@@ -382,6 +316,7 @@ header {
 
 aside.o_page_toc {
     color: $body-color;
+    background-color: $o-gray-bg;
 
     &:not(.o_in_nav_toc) {
         position: -webkit-sticky;
@@ -431,7 +366,6 @@ aside.o_page_toc {
     display: grid;
     grid-template-areas: "main";
     grid-template-columns: minmax(0,100%);
-    margin-top: $o-headers-mobile-height;
 
     @include media-breakpoint-up(lg) {
         grid-template-areas: "sidebar main toc";
@@ -458,6 +392,10 @@ main.container-fluid {
     &.o_index, &.o_fullwidth_page, &.o_has_code_column {
         grid-column-end: toc;
     }
+    &:not(.o_fullwidth_page):not(.o_index):not(.o_has_code_column) {
+        margin: auto;
+        max-width: 900px;
+    }
 }
 
 //------------------------------------------------------------------------------
@@ -467,23 +405,24 @@ main.container-fluid {
 // Homepage
 // https://www.odoo.com/documentation/master/index.html
 
-.o_index {
-    .o_content_fw_banner {
-        align-items: center;
-        margin: 0 -0.75rem $o-margin-m;
-        padding: $o-padding-m $o-padding-s;
-        @include o-gradient();
+.o_content_fw_banner {
+    align-items: center;
+    margin: 0 -0.75rem $o-margin-m;
+    padding: $o-padding-m $o-padding-s;
+    @include o-gradient();
 
-        @include media-breakpoint-up(lg) {
-            margin: -#{$o-margin-m} -#{$o-margin-l} $o-margin-m;
-            padding: $o-padding-m $o-padding-m;
-        }
-
-        @include media-breakpoint-up(xl) {
-            margin: -#{$o-margin-m} -#{$o-margin-l} $o-margin-l;
-            padding: $o-padding-l $o-padding-l;
-        }
+    @include media-breakpoint-up(lg) {
+        margin: -#{$o-margin-m} -#{$o-margin-l} $o-margin-m;
+        padding: $o-padding-m $o-padding-m;
     }
+
+    @include media-breakpoint-up(xl) {
+        margin: -#{$o-margin-m} -#{$o-margin-l} $o-margin-l;
+        padding: $o-padding-l $o-padding-l;
+    }
+}
+
+.o_index {
     .row:first-of-type h2.border-top {
         @include media-breakpoint-up(lg) {
             border-top: 0 solid transparent !important;
@@ -618,9 +557,15 @@ main.container-fluid {
     }
 }
 
+.o_with_banner .o_git_link {
+    color: $gray-100;
+}
+
 article.doc-body {
     position: relative;
-    padding-top: $o-padding-s;
+    @include media-breakpoint-up(lg) {
+        padding-top: $o-padding-s;
+    }
 
     .o_git_link {
         @include o-position-absolute($top: 0px, $right: $o-margin-s);
@@ -645,8 +590,8 @@ article.doc-body {
 
         > h1 {
             margin-bottom: $o-margin-s;
-            color: $secondary;
-            font-weight: $font-weight-bolder;
+            color: $gray-900;
+            font-weight: 600;
 
             @include media-breakpoint-up(lg) {
                 max-width: calc(100% - 120px);
@@ -657,7 +602,6 @@ article.doc-body {
             margin-bottom: $o-margin-s;
             padding-bottom: .3rem;
             border-bottom: 1px solid $o-gray-border;
-            font-family: $o-font-family-serif;
             color: $o-gray-color;
         }
 
@@ -1212,26 +1156,3 @@ span.viewcode-link {
         }
     }
 }
-
-//------------------------------------------------------------------------------
-// Footer
-//------------------------------------------------------------------------------
-
-footer {
-    .o_get_help {
-        padding-top: $o-padding-l;
-        padding-bottom: $o-padding-l;
-        background: $o-gray-bg;
-
-        @include media-breakpoint-up(lg) {
-            padding-left: calc(#{$o-side-nav-width} + #{$o-padding-l})
-        }
-
-        h4 {
-            margin-bottom: $o-margin-s;
-            color: $secondary;
-            font-weight: $font-weight-bolder;
-        }
-
-    }
-}