From fa267e5cfcbe1375eaaa5f560d740feaa394706f Mon Sep 17 00:00:00 2001
From: Elisabeth Dickinson <edi@odoo.com>
Date: Wed, 26 May 2021 16:48:05 +0200
Subject: [PATCH] [FIX] odoo_theme: design fixes

- change button color (in line with odoo.com)
- adapt margin above h2
- change gray variable on footer (to use the same as everywhere else)
- fix grey background in nav
- fix opacity on icon when active in nav
- add icons on mobile homepage
- fix missing homepage separator in mobile
- fix nav top padding on mobile (hidden by searchbar)
- adjust nav's active links styles
- adjust margin on version switcher
- hide toctree-wrapper when show-content is in meta
- fix highlighted-link on tablet screen
- style toctree-wrapper (a lil bit)
- hide local toc while page is loading
- SCSS linting
---
 extensions/odoo_theme/layout.html             |   7 +-
 .../odoo_theme/layout_templates/homepage.html |  10 +-
 .../layout_templates/version_switcher.html    |   2 +-
 extensions/odoo_theme/static/js/page_toc.js   |   3 +
 .../odoo_theme/static/scss/_variables.scss    |   4 +-
 extensions/odoo_theme/static/style.scss       | 165 +++++++++++-------
 6 files changed, 122 insertions(+), 69 deletions(-)

diff --git a/extensions/odoo_theme/layout.html b/extensions/odoo_theme/layout.html
index 0c1a31f44..c0ccb1a51 100644
--- a/extensions/odoo_theme/layout.html
+++ b/extensions/odoo_theme/layout.html
@@ -79,6 +79,10 @@
             {%- set main_classes = main_classes + ['o_index'] %}
         {%- endif %}
 
+        {%- if 'show-content' in meta %}  {# The page is an accessible toctree #}
+            {%- set main_classes = main_classes + ['o_hide_toc'] %}
+        {%- endif %}
+
         {%- if 'code-column' in meta %}  {# The page contains a 'memento' (dynamic side block) #}
             {%- set main_classes = main_classes + ['o_has_code_column'] %}
         {%- endif %}
@@ -110,7 +114,8 @@
             {%- endif %}
         </main>
         {%- if 'hide-page-toc' not in meta %}
-            <aside id="o_page_toc" class="o_page_toc">
+            {# Shown when the JS has properly set all the classes on the TOC elements #}
+            <aside id="o_page_toc" class="o_page_toc" hidden>
                 {%- include "layout_templates/page_toc.html" %}
             </aside>
         {%- endif %}
diff --git a/extensions/odoo_theme/layout_templates/homepage.html b/extensions/odoo_theme/layout_templates/homepage.html
index 55e676906..3cbf4aece 100644
--- a/extensions/odoo_theme/layout_templates/homepage.html
+++ b/extensions/odoo_theme/layout_templates/homepage.html
@@ -11,7 +11,7 @@
     <section>
         <div class="row gx-lg-5">
             <div class="col-lg-6">
-                <h2>Applications</h2>
+                <h2><i class="i-doc-apps d-lg-none me-2"></i>Applications</h2>
                 <p class="text-muted">Master any app thanks to their end-user guides. Our wide array of functional workflows and processes are designed to help you unleash Odoo's potential.</p>
                 <h5 class="text-muted pt-3 text-uppercase fw_semibold">Top Links</h5>
                 <ul class="list-unstyled">
@@ -37,7 +37,7 @@
                 </ul>
             </div>
             <div class="col-lg-6">
-                <h2>Administration</h2>
+                <h2 class="border-top pt-4 pt-lg-0"><i class="i-doc-admin d-lg-none me-2"></i>Administration</h2>
                 <p class="text-muted">Easily setup your first Odoo installation. From downloads to day-to-day database administration, the dedicated tutorials have got you covered.</p>
                 <h5 class="text-muted pt-3 text-uppercase fw_semibold">Top Links</h5>
                 <ul class="list-unstyled">
@@ -66,7 +66,7 @@
         </div>
         <div class="row gx-lg-5">
             <div class="col-lg-6">
-                <h2 class="border-top pt-4">Developer</h2>
+                <h2 class="border-top pt-4"><i class="i-doc-dev d-lg-none me-2"></i>Developer</h2>
                 <p class="text-muted">Learn to develop in Odoo by reading the framework references and programmer tutorials.</p>
                 <h5 class="text-muted pt-3 text-uppercase fw_semibold">Top Links</h5>
                 <ul class="list-unstyled">
@@ -93,7 +93,7 @@
                 </ul>
             </div>
             <div class="col-lg-6">
-                <h2 class="border-top pt-4">Services</h2>
+                <h2 class="border-top pt-4"><i class="i-doc-services d-lg-none me-2"></i>Services</h2>
                 <p class="text-muted">Find out how to open a support ticket should you need to contact a Customer Service Representative.</p>
                 <h5 class="text-muted pt-3 text-uppercase fw_semibold">Top Links</h5>
                 <ul class="list-unstyled">
@@ -117,7 +117,7 @@
         </div>
         <div class="row gx-lg-5">
             <div class="col-lg-6">
-                <h2 class="border-top pt-4">Contributing</h2>
+                <h2 class="border-top pt-4"><i class="i-doc-contribute d-lg-none me-2"></i>Contributing</h2>
                 <p class="text-muted">You want to contribute to Odoo but don't know where to start? The tutorials and guidelines are there to help you make Odoo even better.</p>
                 <h5 class="text-muted pt-3 text-uppercase fw_semibold">Top Links</h5>
                 <ul class="list-unstyled">
diff --git a/extensions/odoo_theme/layout_templates/version_switcher.html b/extensions/odoo_theme/layout_templates/version_switcher.html
index cd90c3a14..120cc6473 100644
--- a/extensions/odoo_theme/layout_templates/version_switcher.html
+++ b/extensions/odoo_theme/layout_templates/version_switcher.html
@@ -1,6 +1,6 @@
 <div class="o_versions row gx-2 me-3">
 	<div class="col col-form-label">
-    	<label class="fw_bold small me-2">Version</label>
+    	<label class="fw_bold small ms-2">Version</label>
     </div>
     <div class="col">
         <div class="dropdown">
diff --git a/extensions/odoo_theme/static/js/page_toc.js b/extensions/odoo_theme/static/js/page_toc.js
index 03fabf14d..6d3485ab1 100644
--- a/extensions/odoo_theme/static/js/page_toc.js
+++ b/extensions/odoo_theme/static/js/page_toc.js
@@ -22,6 +22,9 @@
 
             // Allow to hide the TOC entry referring the title (<h1> heading)
             _flagFirstHeadingRef();
+
+            // Show hidden menu when the css classes have been properly specified
+            this.pageToc.removeAttribute('hidden');
         }
     });
 
diff --git a/extensions/odoo_theme/static/scss/_variables.scss b/extensions/odoo_theme/static/scss/_variables.scss
index 2f0b177eb..9be524c0c 100644
--- a/extensions/odoo_theme/static/scss/_variables.scss
+++ b/extensions/odoo_theme/static/scss/_variables.scss
@@ -173,7 +173,7 @@ $o-inverse-dark:                            #5b7687;
 $o-inverse-darker:                          #485761;
 
 $color-alpha:                               #00A19B;
-$color-alpha-dark:                          #00807D;
+$color-alpha-dark:                          #017e84;
 $color-alpha-light:                         #26d1af;
 $color-alpha-lightest:                      #2aebc4;
 
@@ -205,8 +205,6 @@ $gray-light:                                #d5d5d5;
 $gray:                                      #888888;
 $gray-dark:                                 #707070;
 $gray-darker:                               #282F33;
-$gray-darkest:                              shade-color($gray-darker, 30%);
-
 
 $primary:                                   $color-alpha-dark;
 $secondary:                                 $o-violet-dark;
diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss
index 12973d20e..944a7f28c 100644
--- a/extensions/odoo_theme/static/style.scss
+++ b/extensions/odoo_theme/static/style.scss
@@ -14,15 +14,18 @@ body {
     a:not(:hover), a.o_logo {
         text-decoration: none !important;
     }
+
     dd {
         margin-left: 1rem;
     }
+
     // This fixes the scroll position on all elements, including refs
     :target {
         &:before {
             @include o-scroll-padding()
         }
     }
+
     abbr[title="Pull Request"] {
         @include o-easter-egg();
     }
@@ -37,7 +40,7 @@ body {
 // Header with logo, searchbar and switchers
 //------------------------------------------------------------------------------
 
-header.o_main_header{
+header.o_main_header {
     width: 100%;
     height: $o-header-mobile-height;
     position: fixed;
@@ -50,13 +53,16 @@ header.o_main_header{
         height: $o-header-height;
         padding-right: 3rem;
     }
+
     .o_logo_wrapper {
         padding: 0 1rem;
+
         > .o_logo {
             img {
                 margin-bottom: -2px;
                 vertical-align: baseline;
             }
+
             span {
                 @include font-size($font-size-base);
                 color: $o-violet;
@@ -95,26 +101,34 @@ header.o_main_header{
 
 
     .highlight-link {
+        @media only screen and (max-width: 1242px) and (min-width: 992px){
+            position: absolute;
+            bottom: 0;
+        }
         margin-bottom: 0;
         padding: 0 1rem;
         text-align: center;
         align-self: center;
+
         a {
             @include font-size($font-size-secondary);
         }
     }
     .navbar-toggler {
         border: none;
+
         &[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%)
@@ -127,20 +141,25 @@ header.o_main_header{
             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 {
             box-shadow: none;
             outline:none;
@@ -161,7 +180,8 @@ header.o_main_header{
         @include media-breakpoint-up(lg) {
             max-width: 500px;
         }
-        .btn{
+
+        .btn {
             @include o-position-absolute($top: 50%, $right: 1rem);
             @include o-transform (translateY(-50%)) ;
             padding: 0;
@@ -182,6 +202,7 @@ header.o_main_header{
     position: fixed;
     top: -100%;
     left:0;
+
     &.show {
         top: $o-header-mobile-height;
     }
@@ -193,7 +214,7 @@ header.o_main_header{
         padding-left: 3rem;
     }
     @include o-transition(all, .3s);
-    padding-top: 1rem;
+    padding-top: 4rem;
     padding-left: 1rem;
     background-color: lighten($o-violet-dark, 70%) ;
     z-index: 10;
@@ -205,37 +226,35 @@ header.o_main_header{
         padding-bottom: .5rem;
     }
 
-    .toctree-l1 > ul {
-        padding-left: 1.5rem;
-    }
-
     ul {
         .o_deepest_active_toc_entry {
-            background-color: $gray-lightest;
+            background-color: $gray-lighter;
+            border-left: 3px solid $gray-lighter;
+            margin-left: -3px;
         }
 
         > .toctree-l1 {
-
-            &[class*="o_menu_"] > .o_toc_entry_wrapper > i {
-                opacity: .75;
-                &:before {
-                    @include o-inline-icon($i-doc-apps, 0 1rem 0 0);
-                    color: $o-violet-dark;
-                    margin-right: 0.5rem;
-                }
+            &[class*="o_menu_"] > .o_toc_entry_wrapper > i:before {
+                @include o-inline-icon($i-doc-apps, 0 5px 0 0);
+                color: $o-violet-dark;
             }
+
             &.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}';
             }
@@ -244,12 +263,15 @@ header.o_main_header{
     }
     scrollbar-width: thin;
     scrollbar-color: $o-violet-darker transparent;
+
     &::-webkit-scrollbar {
         width: 5px;
     }
+
     &::-webkit-scrollbar-track {
         background: $white;
     }
+
     &::-webkit-scrollbar-thumb {
         background-color: $o-violet-darker ;
         border-radius: 0;
@@ -262,21 +284,28 @@ header.o_main_header{
         padding-left: 1rem;
 
         li {
-            padding-left: .2rem;
+            &.toctree_l2 {
+                padding-left: .2rem;
+            }
             > a.reference {
-                padding-left: 1.2rem;
+                padding-left: .8rem;
             }
 
             a {
                 display: inline-block;
-                padding: .5rem 0;
+                padding: .4rem 0;
                 color: inherit;
                 opacity: .75;
+
                 &.current, &:hover {
                     opacity: 1;
                 }
             }
 
+            > .o_toc_entry_wrapper i {
+                opacity: .75;
+            }
+
             &:not(.toctree-l1) {
                 .o_toc_entry_wrapper {
                     &:not(.o_page_toc_title) {
@@ -288,6 +317,7 @@ header.o_main_header{
                         display: inline-block;
                         margin-right: .2rem;
                         @include o-transition(rotate, .3s);
+                        font-size: .75rem;
                         font-weight: $fw_bold;
                         color: inherit;
 
@@ -297,19 +327,21 @@ header.o_main_header{
                     }
                 }
             }
+
             &.o_active_toc_entry {
                 &:not(.toctree-l1) > .o_toc_entry_wrapper {
                     i[class^="i-"]:not(.collapsed) {
                         @include o-transform(rotate(90deg));
                     }
                 }
-                > a , > .o_toc_entry_wrapper a {
+                > a , > .o_toc_entry_wrapper a, > .o_toc_entry_wrapper i {
                     font-weight: $fw_bold;
                     opacity: 1;
                 }
             }
         }
     }
+
     > ul { //is first ul in toc
         padding-left: 0;
     }
@@ -344,11 +376,12 @@ header.o_main_header{
 
         a {
             font-weight: $fw_regular;
-            color: $gray-darkest;
+            color: $gray-darker;
         }
 
         .o_page_toc_title {
             display:none;
+
             + ul {
                 padding-left: 0;
             }
@@ -361,7 +394,6 @@ header.o_main_header{
 
 #wrap {
     margin-top: $o-header-mobile-height;
-
     @include media-breakpoint-up(lg) {
         display: flex;
         justify-content: space-between;
@@ -390,7 +422,6 @@ header.o_main_header{
             padding-top: 7rem;
         }
         padding-bottom: 3rem;
-
         @include media-breakpoint-up(lg) {
             left: $o-side-nav-width;
             max-width: calc(100vw - (#{$o-side-nav-width} + var(--bs-gutter-x, 1.5rem)) - #{$o-on-page-width});
@@ -416,11 +447,18 @@ header.o_main_header{
                     margin: -3rem -3rem 3rem;
                     padding: 2rem 3rem;
                 }
+
                 .btn-primary {
                     background-color: #00A09D;
                     border-color: #00A09D;
                 }
             }
+            .row:first-of-type h2.border-top {
+                @include media-breakpoint-up(lg) {
+                    border-top: 0 solid transparent !important;
+                }
+            }
+
             h5 {
                 font-size: 12px;
             }
@@ -431,6 +469,7 @@ header.o_main_header{
                     padding-bottom: .5rem;
                     display: flex;
                     align-items: center;
+
                     &:before {
                         @include o-inline-icon($i-article, 0 .2rem 0 0);
                         color: $gray-light;
@@ -446,7 +485,6 @@ header.o_main_header{
         }
 
         // pages with full width: Legal
-
         &.o_fullwidth_page {
             .toctree-l1 > a {
                 display: block;
@@ -459,11 +497,9 @@ header.o_main_header{
         }
 
         // pages with column for code on the right
-
         &.o_has_code_column {
-
             article.doc-body {
-                > *{
+                > * {
                   max-width: 100%;
                 }
 
@@ -494,13 +530,11 @@ header.o_main_header{
                         @include o-code-col();
                     }
 
-
-
                     .o_git_link {
                         right: calc(#{$o-codecol-width} + 2rem);
                     }
-                    section {
 
+                    section {
                         > * {
                             width: $o-halfpage-width;
                             float: left;
@@ -541,13 +575,34 @@ header.o_main_header{
             }
         }
 
-        article.doc-body {
-            position: relative;
-
-            // hide ugly toctree on "in between" pages (e.g.: /applications.html, /administration.html, ...)
+        &.o_hide_toc {
             .toctree-wrapper {
                 display: none;
             }
+        }
+
+        .toctree-wrapper {
+            > ul {
+                padding-left: 0;
+                list-style: none;
+            }
+
+            .toctree-l1 > a[href="#"] {
+                font-size: 1.2rem;
+                font-weight: 600;
+                border-bottom: 2px solid $gray-darker;
+            }
+
+            a[href="#"] {
+                pointer-events: none;
+                cursor: default;
+                color: $gray-darker;
+                font-weight: $fw_regular;
+            }
+        }
+
+        article.doc-body {
+            position: relative;
 
             .o_git_link {
                 @include font-size($font-size-secondary);
@@ -559,6 +614,7 @@ header.o_main_header{
                     margin-right: .2rem;
                 }
             }
+
             .command {
                 font-family: var(--bs-font-monospace);
             }
@@ -598,7 +654,7 @@ header.o_main_header{
                 > h2 {
                     font-family: $font-family-serif;
                     color: $gray-darker;
-                    margin-top: 3rem;
+                    margin-top: 2rem;
                     margin-bottom: 1rem;
                     padding-bottom: .3rem;
                     border-bottom: 1px solid $gray-light;
@@ -634,14 +690,17 @@ header.o_main_header{
                 }
 
                 .figure {
+
                     .caption, .caption-text {
                         font-weight: $fw_semibold;
                         color: $gray;
                     }
-                    .caption, .caption-text, .legend, .legend p{
+
+                    .caption, .caption-text, .legend, .legend p {
                         font-style: italic;
                         margin: 0 auto;
                     }
+
                     @include media-breakpoint-up(md) {
                         &:not([class^="col"]) .legend {
                             max-width: 60%;
@@ -653,9 +712,11 @@ header.o_main_header{
                     text-decoration: none;
                     font-size: 0;
                     visibility: hidden !important;
+
                     &:before {
                         content: "\a0";
                     }
+
                     &:after {
                         content: '#{$i-link}';
                         font-family: icomoon !important;
@@ -667,11 +728,13 @@ header.o_main_header{
                         @include o-transition(all, .1s)
                     }
                 }
-                *:hover > a.headerlink:after{
+
+                *:hover > a.headerlink:after {
                     // This makes permalinks only visible on hover.
                         visibility: visible;
                         opacity: 1;
                 }
+
                 table.table {
                     @include media-breakpoint-down(lg){
                     display: block;
@@ -680,10 +743,8 @@ header.o_main_header{
                             overflow-wrap: break-word;
                         }
                     }
-
                 }
             }
-
         }
 
         div[class^="highlight"] {
@@ -691,7 +752,6 @@ header.o_main_header{
             overflow-x: auto;
             border: 1px solid $gray-light;
             margin: 1px 0 24px 0;
-            /* max-width: 90vw; */
 
             div[class^="highlight"] {
                 padding: 0px;
@@ -706,7 +766,7 @@ header.o_main_header{
                 overflow: auto;
             }
         }
-        // fixes on pages
+
         .guilabel, .menuselection {
             font-weight: $fw_semibold;
         }
@@ -750,19 +810,7 @@ header.o_main_header{
             text-align: left;
         }
 
-        // restyle numbers on lists
         ol {
-            /* list-style: none;
-            counter-reset: a;
-            > li {
-                position: relative;
-                counter-increment: a;
-                &:before {
-                    content: counter(a) '.';
-                    font-weight: $fw_semibold;
-                    @include o-position-absolute(auto, auto, auto, -1.8rem);
-                }
-            } */
             ol {
                 list-style: lower-alpha;
                 > li:before {
@@ -791,7 +839,7 @@ header.o_main_header{
                 background-color: $white !important;
             }
 
-            > p , > ul{
+            > p , > ul {
                 margin-bottom: .5rem;
             }
             > *:last-child {
@@ -836,8 +884,6 @@ header.o_main_header{
                         content: '#{$i-note}';
                     }
                 }
-
-
             }
 
             &.alert-tip, &.tip {
@@ -896,7 +942,8 @@ header.o_main_header{
                 @include media-breakpoint-up(lg){
                     display: inline-block;
                     width: calc(50% - 1rem);
-                }s
+                }
+
                 a {
                     color: $o-violet-dark;
                 }
@@ -919,7 +966,7 @@ footer {
     .o_get_help {
         padding-top: 3rem;
         padding-bottom: 3rem;
-        background: $gray-100;
+        background: $gray-lighter;
         @include media-breakpoint-up(lg) {
             padding-left: calc(#{$o-side-nav-width} + 3rem)
         }
@@ -932,4 +979,4 @@ footer {
         }
 
     }
-}
\ No newline at end of file
+}