From ba38d22f9d5584aa9d9222bdcac3cdab0148ba17 Mon Sep 17 00:00:00 2001
From: stefanorigano <sri@odoo.com>
Date: Mon, 7 May 2018 17:21:25 +0200
Subject: [PATCH] [FIX] portal: nav in title
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The commit fix an issue causing the portal navbar to overlap/inherit wrong style in customised websites.

The previous layout used to add the entire portal navbar inside an <h3>, causing inner elements to inherit the titles style.
According to WC3 standards, titles can have phrasing content only.
Titles reference > https://w3c.github.io/html-reference/h3.html
Phrasing content reference > https://w3c.github.io/html-reference/common-models.html#common.elem.phrasing

By chance this issue was not visible on runbot, but was severely affecting our website and probably clients ones too.
This commit wrap the portal navbar in a standard bootstrap navbar structure, fixing the title issue and provinding some imp. too:

- Search is now available for mobile
- Modules can inject a custom/botstrap class (eg. navbar-default) ot customize design if needed
---
 addons/portal/static/src/less/portal.less |  71 ++++++++++-
 addons/portal/views/portal_templates.xml  | 149 ++++++++++++----------
 2 files changed, 151 insertions(+), 69 deletions(-)

diff --git a/addons/portal/static/src/less/portal.less b/addons/portal/static/src/less/portal.less
index e6344b3d5d9..0e34d305fb5 100644
--- a/addons/portal/static/src/less/portal.less
+++ b/addons/portal/static/src/less/portal.less
@@ -289,11 +289,72 @@ img {
         }
     }
 
-    .o_portal_search_panel_fixed_width {
-        overflow: hidden;
-        max-width: 125px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+    .o_portal_navbar {
+        .navbar-brand {
+            margin: 0;
+
+            @media (min-width: @grid-float-breakpoint) {
+                padding: @navbar-padding-vertical @navbar-padding-horizontal 0 0;
+            }
+        }
+
+        // ===== Default portal navbar design =====
+        &.o_portal_navbar_default {
+            margin-bottom: 8px;
+
+            .navbar-brand {
+                padding: @navbar-padding-vertical @navbar-padding-horizontal 0 0;
+            }
+
+            .navbar-header .dropdown-menu {
+                right: 0;
+                left: auto;
+            }
+
+            .navbar-toggle {
+                margin-right: 0;
+                margin-bottom: 0;
+                background-color: @table-bg-active;
+                padding: 6px 10px @navbar-padding-vertical;
+                border: 1px solid @btn-default-border;
+                border-width: 1px 1px 0 1px;
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+                z-index: 1;
+
+                &.collapsed {
+                    padding:6px 10px;
+                    border-width: 1px;
+                    border-radius: @btn-border-radius-base;
+                    background-color: transparent;
+                }
+            }
+
+            @media (max-width: @grid-float-breakpoint) {
+                .navbar-collapse {
+                    z-index: 0;
+                    box-shadow: inset 0 0 0 1px @btn-default-border;
+                    background-color: @table-bg-active;
+                    border-radius: @btn-border-radius-base;
+                    border-top-right-radius: 0;
+                    .o-transform(translateY(-2px));
+
+                    &.in {
+                        overflow: visible;
+                    }
+                }
+            }
+
+            @media (min-width: @grid-float-breakpoint) {
+                > .container-fluid {
+                    padding: 0;
+
+                    .navbar-form {
+                        padding-right: 0;
+                    }
+                }
+            }
+        }
     }
 
     table.table tr {
diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml
index 6b79d009158..a242c9ef9ce 100644
--- a/addons/portal/views/portal_templates.xml
+++ b/addons/portal/views/portal_templates.xml
@@ -66,7 +66,7 @@
 
     <template id="portal_layout" name="Portal Layout">
         <t t-call="portal.frontend_layout">
-            <div class="container mt16 o_portal">
+            <div class="container mt16 mb16 o_portal">
                 <div class="oe_structure">
                     <div t-if="not no_breadcrumbs" class="row">
                         <div class="col-sm-12">
@@ -147,72 +147,93 @@
         :param string filterby : name of the filter criteria
         :param default_url : the base url of the pages (like '/my/orders')
         :param boolean o_portal_search_panel : set to True to active the input search
-        :param html $0 : content of the t-call, <li>a</li><li>b</li>
+        :param html $0 : content of the t-call, <li class="pull-left">Link</li>
+        :param title : bavbar title
+        :param classes : navbar classes
     -->
     <template id="portal_searchbar" name="Portal Search Bar">
-        <t t-if='searchbar_inputs'>
-            <div class='hidden-xs pull-right o_portal_search_panel'>
-                 <div class="input-group">
-                    <div class="input-group-btn">
-                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
-                            <span id="search_label">Search</span> <span class="caret"></span>
-                        </button>
-                        <ul class="dropdown-menu" role="menu">
-                            <li t-foreach='searchbar_inputs' t-as='input' t-att-class="search_in == searchbar_inputs[input]['input'] and 'active'">
-                                <a t-att-href="'#' + searchbar_inputs[input]['input']"><span t-raw="searchbar_inputs[input]['label']"/></a>
-                            </li>
-                        </ul>
-                    </div>
-                    <input type="text" class="form-control o_portal_search_panel_fixed_width" t-att-value='search' name="search"/>
-                    <span class="input-group-btn">
-                        <button class="btn btn-default search-submit" type="button"><span class="fa fa-search"></span></button>
-                    </span>
+        <nav t-attf-class="navbar o_portal_navbar {{classes if classes else 'o_portal_navbar_default'}}">
+            <div class="container-fluid">
+                <!--  Navbar title only -->
+                <div class="navbar-header pull-left">
+                    <t t-set="no_title">No title</t>
+                    <h3 class="navbar-brand"><t t-esc="title or no_title"/></h3>
                 </div>
-            </div>
-        </t>
-        <div t-if="searchbar_sortings" class="dropdown pull-right mr4">
-            <button id="portal_searchbar_sortby" class="o_portal_search_panel_fixed_width btn btn-default" type="button" data-toggle="dropdown">
-                <span class="fa fa-sort fa-lg" />
-                <span class='hidden-xs hidden-sm hidden-md' t-esc="searchbar_sortings[sortby].get('label', 'Newest')"/>
-                <span class="caret"></span>
-            </button>
-            <ul class="dropdown-menu" aria-labelledby="portal_searchbar_sortby">
-                <li t-foreach="searchbar_sortings" t-as="option" t-attf-class="#{sortby == option and 'active'}">
-                    <a t-att-href="request.httprequest.path + '?' + keep_query('*', sortby=option)">
-                        <span t-esc="searchbar_sortings[option].get('label')"/>
-                    </a>
-                </li>
-            </ul>
-        </div>
-        <div t-if="searchbar_filters" class="dropdown pull-right mr4">
-            <button id="portal_searchbar_filters" class="o_portal_search_panel_fixed_width btn btn-default" type="button" data-toggle="dropdown">
-                <span class="fa fa-filter fa-lg" />
-                <span class='hidden-xs hidden-sm hidden-md' t-esc="searchbar_filters[filterby].get('label', 'All')"/>
-                <span class="caret"></span>
-            </button>
-            <ul class="dropdown-menu" aria-labelledby="portal_searchbar_filters">
-                <li t-foreach="searchbar_filters" t-as="option" t-att-class="filterby == option and 'active'">
-                    <a t-att-href="default_url + '?' + keep_query('*', filterby=option)">
-                        <span t-esc="searchbar_filters[option].get('label')"/>
-                    </a>
-                </li>
-            </ul>
-        </div>
-        <div t-if="searchbar_groupby" class="dropdown pull-right mr4">
-            <button id="portal_searchbar_groupby" class="o_portal_search_panel_fixed_width btn btn-default" type="button" data-toggle="dropdown">
-                <span class="fa fa-bars fa-lg" />
-                <span class='hidden-xs hidden-sm hidden-md' t-esc="searchbar_groupby[groupby].get('label', 'None')"/>
-                <span class="caret"></span>
-            </button>
-            <ul class="dropdown-menu" aria-labelledby="portal_searchbar_groupby">
-                <li t-foreach="searchbar_groupby" t-as="option" t-att-class="groupby == option and 'active'">
-                    <a t-att-href="default_url + '?' + keep_query('*', groupby=option)">
-                        <span t-esc="searchbar_groupby[option].get('label')"/>
-                    </a>
-                </li>
-            </ul>
-        </div>
-        
+
+                <!-- Non-collapsing menu item(s) -->
+                <div class="navbar-header navbar-right pull-right">
+                    <ul class="nav pull-left">
+                        <t t-raw="0"/>
+                        <li t-if="searchbar_sortings" class="dropdown pull-left ml16">
+                            <button id="portal_searchbar_sortby" data-toggle="dropdown" class="btn btn-default navbar-btn">
+                                <span class="fa fa-sort"/>
+                                <span class="hidden-xs hidden-sm"><t t-esc="searchbar_sortings[sortby].get('label', 'Newest')"/></span>
+                                <span class="caret"/>
+                            </button>
+                            <ul class="dropdown-menu" aria-labelledby="portal_searchbar_sortby">
+                                <li t-foreach="searchbar_sortings" t-as="option" t-attf-class="#{sortby == option and 'active'}">
+                                    <a t-att-href="request.httprequest.path + '?' + keep_query('*', sortby=option)">
+                                        <span t-esc="searchbar_sortings[option].get('label')"/>
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li t-if="searchbar_filters" class="dropdown pull-left ml4">
+                            <button id="portal_searchbar_filters" data-toggle="dropdown" class="btn btn-default navbar-btn">
+                                <span class="fa fa-filter"/>
+                                <span class="hidden-xs hidden-sm"><t t-esc="searchbar_filters[filterby].get('label', 'All')"/></span>
+                                <span class="caret"/>
+                            </button>
+                            <ul class="dropdown-menu" aria-labelledby="portal_searchbar_filters">
+                                <li t-foreach="searchbar_filters" t-as="option" t-att-class="filterby == option and 'active'">
+                                    <a t-att-href="default_url + '?' + keep_query('*', filterby=option)">
+                                        <span t-esc="searchbar_filters[option].get('label')"/>
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                        <li t-if="searchbar_groupby" class="dropdown pull-left ml4">
+                            <button id="portal_searchbar_groupby" data-toggle="dropdown" class="btn btn-default navbar-btn">
+                                <span class="fa fa-object-group"/>
+                                <span class="hidden-xs hidden-sm"><t t-esc="searchbar_groupby[groupby].get('label', 'None')"/></span>
+                                <span class="caret"/>
+                            </button>
+                            <ul class="dropdown-menu" aria-labelledby="portal_searchbar_groupby">
+                                <li t-foreach="searchbar_groupby" t-as="option" t-att-class="groupby == option and 'active'">
+                                    <a t-att-href="default_url + '?' + keep_query('*', groupby=option)">
+                                        <span t-esc="searchbar_groupby[option].get('label')"/>
+                                    </a>
+                                </li>
+                            </ul>
+                        </li>
+                    </ul>
+                    <button t-if='searchbar_inputs' type="button" class="navbar-toggle collapsed btn ml16" data-toggle="collapse" data-target="#o_portal_searchbar_collapse"><span class="fa fa-search"/></button>
+                </div>
+                <div t-if='searchbar_inputs' class="visible-xs-block clearfix"/>
+
+                <!-- Collapsing content (searchbar_inputs) -->
+                <div t-if='searchbar_inputs' class="collapse navbar-collapse text-right" id="o_portal_searchbar_collapse">
+                    <div class="navbar-form o_portal_search_panel">
+                         <div class="input-group">
+                            <div class="input-group-btn">
+                                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
+                                    <span id="search_label" class="hidden-xs">Search</span><span class="caret"></span>
+                                </button>
+                                <ul class="dropdown-menu" role="menu">
+                                    <li t-foreach='searchbar_inputs' t-as='input' t-att-class="search_in == searchbar_inputs[input]['input'] and 'active'">
+                                        <a t-att-href="'#' + searchbar_inputs[input]['input']"><span t-raw="searchbar_inputs[input]['label']"/></a>
+                                    </li>
+                                </ul>
+                            </div>
+                            <input type="text" class="form-control" t-att-value='search' name="search"/>
+                            <span class="input-group-btn">
+                                <button class="btn btn-default search-submit" type="button"><span class="fa fa-search hidden-xs"/><span class="fa fa-arrow-right visible-xs-inline-block"/></button>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div> <!-- /.container-fluid -->
+        </nav>
     </template>
 
     <template id="portal_contact" name="Contact">