[FIX] portal: nav in title
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
This commit is contained in:
stefanorigano
committed by
Jeremy Kersten
Jeremy Kersten
parent
aae54ecc15
commit
ba38d22f9d
@@ -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 {
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user