NextERP/documentation
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] documentation-user: restructuring submenu

Browse Source 
— Layout

* Create html templates to print breadcrumb's and submenu's lists.
* Remove ‘o_main_back’ ( no longer needed)
* Minimum mobile support for submenu. Note: The default website submenu
should be refactored in order to support mobile by default

— Style

* Create a less mixin to handle all doc’s dropdowns
* Add a specific style for breadcrumb when it’s placed inside the
submenu.
This commit is contained in:
stefanorigano 2016-05-09 16:34:11 +02:00 committed by Martin Trigaux
parent cc7c259778
commit 43164704c9
6 changed files with 374 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
_extensions/odoo/breadcrumb_list.html Normal file
View File

@ -0,0 +1,23 @@
{# warning: if doc structure change, these rules may have to change as well #}
{# ===== VARIABLES ====== #}
{% set master_doc_short_name = 'User Doc' %}
{% if pagename == master_doc %}
<li><a href="{{ pathto(master_doc) }}" class="active">{{ master_doc_short_name }}</a></li>
{% else %}
{% for parent in parents %}
{% if loop.length > 1%}
{% if loop.first %}
<li><a href="{{ pathto(master_doc) }}">{{ master_doc_short_name }}</a></li>
{% else %}
{% if loop.index == 2 %}
<li><a href="{{ parent.link|e }}">{{parent.title}}</a></li>
{% endif %}
{% endif %}
{% else %}
<li><a href="{{ pathto(master_doc) }}">{{ master_doc_short_name }}</a></li>
{% endif %}
{% endfor %}
<li class="active"><a href="#">{{ meta.get('main-title', title) }}</a></li>
{% endif %}

80
_extensions/odoo/layout.html
View File

@ -162,55 +162,47 @@
</div>
<nav class="navbar o_sub_nav">
<div class="container">
<span class="o_main_back">
{# warning: if doc structure change, these rules may have
to change as well #}
{% if pagename.count('/') %}
{# If the current document is an application's content,
link to the application root #}
{% set updoc, _ = pagename.split('/', 1) %}
{% else %}
{# otherwise link to master_doc #}
{% set updoc = master_doc %}
{% endif %}
<a href="{{ pathto(updoc) }}" class="mdi-navigation-arrow-back"></a>
</span>
<a href="#" class="navbar-header">
<span id="o_doc_title" class="o_app_name_title">{{ meta.get('main-title', title) }}</span>
</a>
<div class="collapse navbar-collapse">
<div class="call-to-action navbar-right">
<div class="navbar-header visible-xs">
<button type="button" class="navbar-toggle collapsed text-left btn-block" data-toggle="collapse" data-target="#o_sub-menu" aria-expanded="false">
Navigate
<span class="mdi-hardware-keyboard-arrow-down pull-right"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="o_sub-menu">
<ol class="o_breadcrumb breadcrumb nav navbar-left">
{% block breadcrumb_desktop %}
{% include "breadcrumb_list.html" %}
{% endblock %}
</ol>
<div class="call-to-action navbar-right hidden-xs">
<a href="http://www.odoo.com/trial" class="btn btn-primary">Start Now</a>
</div>
{% if languages %}
<ul class="navbar-nav navbar-right nav">
<li class="languages dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">
{{ language }}
</a>
<ul class="dropdown-menu" role="menu">
{% for name, url in languages %}
<li><a href="{{ url }}">{{ name }}</a></li>
{% endfor %}
</ul>
</li>
<ul class="navbar-nav navbar-right nav o_sub_nav_actions">
{% if pagename != master_doc %}
<li class="divider"></li>
{% endif%}
{% block switchers_desktop %}
{% include "switchers_list.html" %}
{% endblock %}
</ul>
{% endif %}
{% if versions %}
<ul class="nav navbar-nav navbar-right">
<li class="versions dropdown">
<a class="dropdown-toggle" data-toggle="dropdown">
{{ version }}
</a>
<ul class="dropdown-menu" role="menu">
{% for name, url in versions %}
<li><a href="{{ url }}">{{ name }}</a></li>
{% endfor %}
</ul>
</li>
{% if languages or versions %}
<li class="divider"></li>
{% endif %}
{% block sub_menu_desktop %}
{% include "sub-menu_list.html" %}
{% endblock %}
{% if languages or versions %}
<li class="divider"></li>
{% endif %}
</ul>
{% endif %}
{{ toctree(titles_only=True, maxdepth=2, includehidden=True, collapse=False, navbar='main') }}
</div>
</div>
</nav>

98
_extensions/odoo/static/mixins.less
View File

@ -216,6 +216,104 @@
@keyframes @name { @arguments(); }
}
//-- Documentation Dropdown style
.o-doc-dropdown {
> a.dropdown-toggle {
padding: 0 5px 0 10px;
&:after {
.mdi-icon( "\e7c1");
@media screen and (max-width: @screen-xs-max) {
font-size: 1.5em
}
}
}
&.open {
z-index: 1;
position: relative;
background-color: @gray-light;
color: @header-link-normal;
@media screen and (min-width: @screen-sm-min){
background-color: @w-header-white;
}
.dropdown-toggle {
color: @header-link-normal;
&:hover {
color: @headings-color;
}
}
.dropdown-menu {
margin-top: 0;
border: none;
border-radius: 0;
text-align: left;
min-width: 100%;
background-color: @w-header-white;
padding-bottom: @w-header-height/4;
.deep-1();
> li > a {
font-size: 12px;
display: block;
color: @header-link-normal;
float: none;
text-transform: none;
font-weight: @fw_medium;
@media screen and (max-width: @screen-xs-max) {
padding-left: 10px;
}
}
> li.active > a {
color: white;
background-color: desaturate(@brand-primary, 40%);
}
@media screen and (max-width: @screen-xs-max) {
position: static;
}
@media screen and (min-width: @screen-sm-min) {
background-color: @w-header-white;
}
}
}
&.o_dropdown_mobile_nav {
margin-left: 0;
> .dropdown-toggle {
&:after {
.o-position-absolute(0, 0);
}
}
.o_breadcrumb_dropdown_menu > li{
> a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
> a:before {
content: "|";
margin-right: 0.5em;
}
&:nth-child(1) > a:before {
display: none;
}
&:nth-child(2) > a:before {
padding-left: 0.5em;
}
&:nth-child(3) > a:before {
padding-left: 1em;
}
}
}
}
// Shadows

242
_extensions/odoo/static/style.less
View File

@ -22,17 +22,130 @@
// The following rules are specific for the documentation website.
.o_main_header {
.mdi-navigation-menu {
padding: 13px;
}
@o-sub-inner-h: @w-sub-nav-height - 2;
&.o_mobile_menu_opened .mdi-navigation-menu {
background-color: @footer-bg-color;
color: @gray-lighter;
}
.o_sub_nav {
> .o_sub_nav #o_sub-menu .o_breadcrumb {
@media screen and (min-width: @screen-sm-min) {
background-color: transparent;
padding: 0;
margin: 0 0 0 -15px;
height: @o-sub-inner-h;
line-height: @o-sub-inner-h;
}
> li {
display: block;
&, > a {
height: 30px;
line-height: 2;
}
&:before {
font-weight: @fw_bold;
float: left;
padding: 0;
margin-right: -1px;
display: none;
}
@media screen and (min-width: @screen-sm-min) {
margin-left: 0;
margin-right: -1px;
height: @o-sub-inner-h;
line-height: @o-sub-inner-h;
display: inline-block;
&:before {
display: block;
}
> a {
padding: 0;
height: @o-sub-inner-h;
line-height: @w-sub-nav-height;
letter-spacing: -0.1px;
word-spacing: -1px;
font-size: 0.9em;
display: inline-block;
height: 100%;
max-width: 80px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
&:last-child > a {
max-width: 170px;
}
}
@media screen and (min-width: 1980px) {
> a {
max-width: 120px;
}
}
@media screen and (min-width: @screen-lg-min) {
&:last-child > a {
max-width: none;
}
}
@media screen and (max-width: @screen-xs-max) {
> a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
> a:before {
content: "|";
margin-right: 0.5em;
}
&:nth-child(1) > a:before {
display: none;
}
&:nth-child(2) > a:before {
padding-left: 0.5em;
}
&:nth-child(3) > a:before {
padding-left: 1em;
}
}
}
}
&.index {
@media screen and (max-width: @screen-xs-max ){
> .o_sub_nav #o_sub-menu .o_breadcrumb {
display: none;
}
}
}
> .o_sub_nav {
border-radius: 0;
.navbar-toggle {
padding: 0 15px;
margin: 0;
height: @o-sub-inner-h;
background-color: @gray-lighter;
span {
line-height: @o-sub-inner-h;
}
&.collapsed {
background-color: @w-header-white;
}
}
.collapse .nav {
margin-right: 0;
margin-bottom: 0;
@ -45,83 +158,96 @@
margin: 0;
> a {
padding:0 10px;
padding:0 0 0 10px;
}
&.divider {
height: auto;
line-height: 1;
border-bottom: 1px solid @gray-light;
padding: 4px 0px 5px;
}
&.dropdown {
> a.dropdown-toggle {
padding: 0 15px 0 10px;
.o-doc-dropdown();
}
}
}
&:after {
.mdi-icon("\e7c1");
.o-position-absolute(0,0);
}
}
> .container > .collapse > .nav,
> .container .o_breadcrumb {
> li > a {
@media screen and (min-width: @screen-sm-min) and ( max-width: @screen-sm-max ) {
font-size: 10px;
font-weight: @fw_semibold;
}
}
}
&.open {
background-color: @w-header-white;
color: @header-link-normal;
li.dropdown {
.o-doc-dropdown();
}
}
.dropdown-toggle {
&.o_inverted:not(.o_scrolled) {
@media (max-width: @screen-xs-max) {
.o_sub_nav {
display: block;
margin-bottom: 0;
.nav {
margin: 0 0 0 -8px;
> li > a{
color: @text-color;
&:hover, &:focus {
color: @header-link-normal;
&:hover {
color: @headings-color;
}
}
.dropdown-menu {
background-color: @w-header-white;
margin-top: 0;
border: none;
border-radius: 0;
text-align: left;
min-width: 100%;
padding-bottom: @w-header-height/4;
.deep-1();
> li > a {
font-size : 12px;
display : block;
color : @header-link-normal;
float : none;
text-transform: none;
font-weight : normal;
}
}
}
}
}
}
.o_main_back {
float: left;
height: 35px;
line-height: 50px;
a {
color: white;
}
}
.o_sub_nav_actions {
margin-left: 10px;
#o_doc_title {
padding-left: 10px;
display: inline-block;
.transform-origin(0 50%);
.translate(50px, 0);
.opacity(0);
.transition(all 0.3s);
> li {
background: fade(@gray-lightest, 10%);
margin-right: 1px;
&:last-child {
margin-right: 0
}
}
}
}
&.o_scrolled {
.o_sub_nav {
.o_main_back a{
color: @odoo-brand-primary;
}
#o_doc_title {
.opacity(1);
.translate(0, 0);
.transition(~'opacity 1s, transform 0.3s');
}
.o_sub_nav_actions {
margin-left: 10px;
&:first-of-type {
margin-right: -25px;
}
> li {
background: fade(@gray, 10%);
margin-right: 1px;
&:last-child {
margin-right: 0
}
}
}
}
}
}

8
_extensions/odoo/sub-menu_list.html Normal file
View File

@ -0,0 +1,8 @@
{# note: if odoo.com/page/docs sub-menu's structure change, these links have to change as well #}
<li><a href="http://www.odoo.com/documentation/user/9.0/index.html">User</a></li>
<li><a href="http://www.odoo.com/documentation/9.0/index.html">Developer</a></li>
<li><a href="http://www.odoo.com/documentation/9.0/api_integration.html">API</a></li>
<li><a href="http://www.odoo.com/documentation/9.0/setup/install.html">Installation</a></li>
<li><a href="http://www.odoo.com/page/odoo-white-paper">White Papers</a></li>
<li><a href="http://www.odoo.com/page/legal">Legal</a></li>

25
_extensions/odoo/switchers_list.html Normal file
View File

@ -0,0 +1,25 @@
{% if languages %}
<li class="languages dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">
{{ language }}
</a>
<ul class="dropdown-menu" role="menu">
{% for name, url in languages %}
<li><a href="{{ url }}">{{ name }}</a></li>
{% endfor %}
</ul>
</li>
{% endif %}
{% if versions %}
<li class="versions dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown">
{{ version }}
</a>
<ul class="dropdown-menu" role="menu">
{% for name, url in versions %}
<li><a href="{{ url }}">{{ name }}</a></li>
{% endfor %}
</ul>
</li>
{% endif %}