From 03a085dff0232aa8d76a9280ac19d4615c684b33 Mon Sep 17 00:00:00 2001
From: sri-odoo <sri@odoo.com>
Date: Mon, 18 Feb 2019 12:17:01 +0000
Subject: [PATCH] [IMP] website_slides: improve homepage navbar design

Force white background + add the default bootstrap shadow. Do not use <h4>
tags to keep the right font-size on mobile. Simplify layout, add a second
navabar to handle content supposed to be moved to the right.

Commit linked to task ID 1941250 and PR #31279.
---
 .../static/src/scss/website_slides.scss       | 20 ++++++--
 .../website_slides_templates_homepage.xml     | 49 ++++++++++---------
 .../website_slides_templates_homepage.xml     |  6 +--
 3 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index cf37378ae5a..526dc59a40a 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -27,10 +27,11 @@ $MAX-Z-INDEX : 2147483647 !default;
 }
 
 .o_wslides_wrap {
-    .cta-title {
-        font-size: 1.2em;
-    }
+    background-color: desaturate(map-get($grays, "200"), 80%);
 
+    .cta-title {
+        font-size: 1.2em;   
+    }
     .o_wslides_course_card {
         .card-body {
             padding: 0.75em 1em;
@@ -123,8 +124,17 @@ $MAX-Z-INDEX : 2147483647 !default;
 // **************************************************
 
 div .o_wslides_home_nav {
-    position: relative;
-    top: -50px;
+    top: -40px;
+
+    @include media-breakpoint-up(md) {
+        font-size: 1rem;
+
+         .o_wslides_nav_navbar_right {
+            margin-left: auto;
+            padding-left: $spacer;
+            border-left: 1px solid $border-color;
+        }
+    }
 }
 
 div .o_wslides_home_main {
diff --git a/addons/website_slides/views/website_slides_templates_homepage.xml b/addons/website_slides/views/website_slides_templates_homepage.xml
index d255762c9f5..74b8e4a7558 100644
--- a/addons/website_slides/views/website_slides_templates_homepage.xml
+++ b/addons/website_slides/views/website_slides_templates_homepage.xml
@@ -19,23 +19,20 @@
                     </div>
                 </div>
             </section>
-            <div class="container mt16 o_wslides_home_nav">
-                <nav class="navbar navbar-expand-lg navbar-light bg-light">
+            <div class="container mt16 o_wslides_home_nav position-relative">
+                <nav class="navbar navbar-expand-md navbar-light shadow-sm" style="background: white!important">
                     <button class="navbar-toggler" type="button"
                         data-toggle="collapse" data-target="#navbarSlidesHomepage"
                         aria-controls="navbarSlidesHomepage" aria-expanded="false" aria-label="Toggle navigation">
-                        <span class="navbar-toggler-icon"></span>
+                        <span class="navbar-toggler-icon"/>
                     </button>
                     <div class="collapse navbar-collapse" id="navbarSlidesHomepage">
-                        <a class="navbar-brand" href="#"></a>
-                        <ul class="navbar-nav mr-auto">
-                            <li class="nav-item o_wslides_home_all_slides">
-                                <h4><a class="nav-link" href="/slides/all"><i class="fa fa-rocket"/> All courses</a></h4>
-                            </li>
-                            <li class="nav-item ml16">
-                                <h4><a class="nav-link" href="/slides/all"><i class="fa fa-file"/> My courses</a></h4>
-                            </li>
-                        </ul>
+                        <div class="navbar-nav">
+                            <a class="nav-link nav-link mr-md-2 o_wslides_home_all_slides" href="/slides/all"><i class="fa fa-graduation-cap mr-1"/>All courses</a>
+                        </div>
+                        <div class="navbar-nav o_wslides_nav_navbar_right">
+                            <a class="nav-link nav-link" href="/slides/all"><i class="fa fa-file mr-1"/>My courses</a>
+                        </div>
                     </div>
                 </nav>
             </div>
@@ -129,10 +126,12 @@
                     <h3 class="mb-4">Start your online course today !</h3>
                 </div>
             </section>
-            <div class="container mt16 o_wslides_home_nav">
+            <div class="container mt16 o_wslides_home_nav position-relative">
                 <!-- Navbar dynamically composed using displayed channel tag groups. -->
-                <nav class="navbar navbar-expand-lg navbar-light bg-light">
-                    <a class="navbar-brand" t-att-href="'/slides?%s' % keep_query('debug')"><i class="fa fa-chevron-left"/></a>
+                <nav class="navbar navbar-expand-md navbar-light shadow-sm" style="background: white!important">
+                    <div class="navbar-nav border-right pr-3">
+                        <a class="nav-link nav-item" t-att-href="'/slides?%s' % keep_query('debug')"><i class="fa fa-chevron-left"/></a>
+                    </div>
                     <button class="navbar-toggler" type="button"
                         data-toggle="collapse" data-target="#navbarTagGroups"
                         aria-controls="navbarTagGroups" aria-expanded="false" aria-label="Toggle navigation">
@@ -140,15 +139,15 @@
                     </button>
                     <div class="collapse navbar-collapse" id="navbarTagGroups">
                         <t t-set="search_tag_groups" t-value="search_tags.mapped('group_id')"/>
-                        <ul class="navbar-nav mr-auto">
+                        <ul class="navbar-nav flex-grow-1">
                             <t t-foreach="tag_groups" t-as="tag_group">
                                 <li t-att-class="'nav-item dropdown ml16 %s' % ('active' if tag_group in search_tag_groups else '')">
-                                    <h4><a class="nav-link dropdown-toggle"
+                                    <a class="nav-link dropdown-toggle"
                                         href="/slides/all"
                                         t-att-data-target="'#navToogleTagGroup%s' % tag_group.id"
                                         role="button" data-toggle="dropdown"
                                         aria-haspopup="true" aria-expanded="false"
-                                        t-esc="tag_group.name"/></h4>
+                                        t-esc="tag_group.name"/>
                                     <div class="dropdown-menu" t-att-id="'navToogleTagGroup%s' % tag_group.id">
                                         <t t-foreach="tag_group.tag_ids" t-as="tag">
                                             <a t-att-class="'dropdown-item %s' % ('active' if tag in search_tags else '')"
@@ -158,19 +157,21 @@
                                     </div>
                                 </li>
                             </t>
+                            <!-- karma / profile -->
+                            <li class="nav-item ml-auto" t-if="not is_public_user">
+                                <a t-att-href="'/profile/user/%s' % user.id" class="nav-link mr-2">
+                                    <i class="fa fa-diamond"/> <t t-esc="user_id.karma"/>
+                                </a>
+                            </li>
                         </ul>
-                        <!-- karma / profile -->
-                        <a t-if="not is_public_user" t-att-href="'/profile/user/%s' % user.id" class="font-weight-bold mr-3">
-                            <i class="fa fa-diamond"/> <t t-esc="user_id.karma"/>
-                        </a>
                         <!-- search box -->
-                        <form method="GET" class="form-inline justify-content-center">
+                        <form method="GET" class="form-inline o_wslides_nav_navbar_right">
                             <div class="input-group">
                                 <input type="search" name="search" class="form-control"
                                     placeholder="Search something" aria-label="Search"
                                     t-att-value="search_term"/>
                                 <div class="input-group-append">
-                                    <button class="btn btn-outline-success oe_search_button" type="submit" aria-label="Search" title="Search">
+                                    <button class="btn border oe_search_button" type="submit" aria-label="Search" title="Search">
                                         <i class="fa fa-search"/>
                                     </button>
                                 </div>
diff --git a/addons/website_slides_survey/views/website_slides_templates_homepage.xml b/addons/website_slides_survey/views/website_slides_templates_homepage.xml
index 24132371f7f..bc4be6ba9b2 100644
--- a/addons/website_slides_survey/views/website_slides_templates_homepage.xml
+++ b/addons/website_slides_survey/views/website_slides_templates_homepage.xml
@@ -2,10 +2,8 @@
 <odoo>
     <data>
         <template id="courses_home_inherit_survey" inherit_id="website_slides.courses_home">
-            <xpath expr="//li[hasclass('o_wslides_home_all_slides')]" position="after">
-                <li class="nav-item ml16">
-                    <h4><a class="nav-link" href="/slides/all?slide_type=certification"><i class="fa fa-trophy"/> Certifications</a></h4>
-                </li>
+            <xpath expr="//a[hasclass('o_wslides_home_all_slides')]" position="after">
+                <a class="nav-link nav-link" href="/slides/all?slide_type=certification"><i class="fa fa-trophy mr-1"/>Certifications</a>
             </xpath>
         </template>
     </data>