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

[IMP] odoo_theme: add subheader and adapt switchers and searchbar

Browse Source 
task-2800937
This commit is contained in:
Elisabeth Dickinson 2022-06-13 16:33:19 +02:00 committed by Antoine Vandevenne (anv)
parent b1fa30f431
commit 411e1cb1d3
7 changed files with 147 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
extensions/odoo_theme/layout.html
View File

@ -65,21 +65,16 @@
<nav id="o_menu" class="o_side_nav border-end">
{%- if 'hide-page-toc' not in meta %}
{# Shown when the JS has properly set all the classes on the TOC elements #}
<aside id="o_page_toc_in_nav" class="o_page_toc o_in_nav_toc border-bottom pb-3 mb-4" hidden>
<aside id="o_page_toc_in_nav" class="o_page_toc o_in_nav_toc border-bottom pt-3 pb-3" hidden>
{%- include "layout_templates/page_toc.html" %}
</aside>
{%- endif %}
<div id="o_main_toctree" class="o_main_toc" hidden>
<div id="o_main_toctree" class="o_main_toc mt-3" hidden>
{%- include "layout_templates/menu.html" %}
</div>
</nav>
<header class="o_main_header border-bottom navbar navbar-light navbar-expand-lg">
<header class="o_headers">
{%- include "layout_templates/header.html" %}
<button class="navbar-toggler p-0 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#o_menu" aria-label="Toggle navigation">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</header>
{%- endblock %}

23
extensions/odoo_theme/layout_templates/header.html
View File

@ -1,12 +1,23 @@
<div class="o_logo_wrapper">
<div class="o_main_header border-bottom d-flex align-items-center">
<div class="o_logo_wrapper">
<a href="{{ pathto(master_doc) }}" class="o_logo">
<img src="{{ pathto('_static/img/logos/odoo_logo.svg', 1) }}" height="20" alt="Odoo"/>
<span>docs</span>
</a>
</div>
<div class="d-flex flex-grow-1">
{%- include "layout_templates/searchbox.html" %}
<a class="btn btn-primary fw_semibold ms-auto d-none d-lg-inline-block" href="https://odoo.com/trial">{{ _('Try Odoo for FREE') }}</a>
</div>
</div>
{%- include "layout_templates/searchbox.html" %}
<div class="d-none d-lg-flex ms-auto">
{%- include "layout_templates/language_switcher.html" %}
{%- include "layout_templates/version_switcher.html" %}
<a class="btn btn-primary fw_semibold" href="https://odoo.com/trial">{{ _('Try Odoo for FREE') }}</a>
<div class="o_subheader border-bottom d-flex">
<div class="o_side_nav_toggler_wrapper border-end d-flex d-lg-none">
<button class="h-100 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#o_menu" aria-label="Toggle navigation">
<i class="i-sidepanel"></i>
</button>
</div>
<div class="d-flex justify-content-end ms-auto">
{%- include "layout_templates/language_switcher.html" %}
{%- include "layout_templates/version_switcher.html" %}
</div>
</div>

6
extensions/odoo_theme/layout_templates/language_switcher.html
View File

@ -1,13 +1,13 @@
<div class="o_languages me-3">
<div class="o_languages">
<div class="dropdown">
{%- if alternate_languages|length > 0 %}
<button class="btn border dropdown-toggle"
<button class="btn btn-sm dropdown-toggle"
id="languages"
data-bs-toggle="dropdown">
{{ language }} {# The current language #}
</button>
{%- else %}
<button class="btn border dropdown-toggle"
<button class="btn btn-sm dropdown-toggle"
id="languages"
disabled="">
{{ language }} {# The current language #}

2
extensions/odoo_theme/layout_templates/searchbox.html
View File

@ -1,5 +1,5 @@
{# NOTE: the 'searchbox' id is used to hook the "Hide Search Matches" button #}
<div id="searchbox" class="o_search_wrapper pe-lg-2" role="search">
<div id="searchbox" class="o_search_wrapper d-flex flex-grow-1" role="search">
<form class="o_search" action="{{ pathto('search') }}" method="get">
<input type="text" name="q" id="q" class="form-control rounded-pill" placeholder="What are you looking for?">
<input type="hidden" name="area" value="default">

45
extensions/odoo_theme/layout_templates/version_switcher.html
View File

@ -1,27 +1,22 @@
<div class="o_versions row gx-2 me-3">
<div class="col align-self-center">
<label class="fw_bold small ms-2">Version</label>
</div>
<div class="col">
<div class="dropdown">
{%- if alternate_versions|length > 0 %}
<button class="btn border dropdown-toggle"
id="versions"
data-bs-toggle="dropdown">
{{ version_display_name }} {# The current version #}
</button>
{%- else %}
<button class="btn border dropdown-toggle"
id="versions"
disabled="">
{{ version_display_name }} {# The current version #}
</button>
{%- endif %}
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="versions">
{%- for alternate_version, url in alternate_versions %}
<li><a class="dropdown-item" href="{{ url }}">{{ alternate_version }}</a></li>
{%- endfor %}
</ul>
</div>
<div class="o_versions row">
<div class="dropdown">
{%- if alternate_versions|length > 0 %}
<button class="btn btn-sm dropdown-toggle"
id="versions"
data-bs-toggle="dropdown">
{{ version_display_name }} {# The current version #}
</button>
{%- else %}
<button class="btn btn-sm dropdown-toggle"
id="versions"
disabled="">
{{ version_display_name }} {# The current version #}
</button>
{%- endif %}
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="versions">
{%- for alternate_version, url in alternate_versions %}
<li><a class="dropdown-item" href="{{ url }}">{{ alternate_version }}</a></li>
{%- endfor %}
</ul>
</div>
</div>

6
extensions/odoo_theme/static/scss/_variables.scss
View File

@ -231,9 +231,13 @@ $doc_cyan: $color-alpha;
// Header
$o-header-mobile-height: 50px;
$o-header-height: 90px;
$o-header-height: 80px;
$o-header-white: #ffffff;
$o-subheader-height: calc(#{$o-header-height}/2.5);
$o-headers-mobile-height: calc(#{$o-header-mobile-height} + (#{$o-subheader-height}));
$o-headers-height: calc(#{$o-header-height} + #{$o-subheader-height});
// Navigation
$o-side-nav-width: 350px;
$o-on-page-width: 20%;

220
extensions/odoo_theme/static/style.scss
View File

@ -51,146 +51,123 @@ span.viewcode-link {
// Header with logo, searchbar and switchers
//------------------------------------------------------------------------------
header.o_main_header {
header {
width: 100%;
height: $o-header-mobile-height;
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: $o-header-white;
z-index: 10;
padding: 0 $padding-s;
@include media-breakpoint-up(lg) {
height: $o-header-height;
padding: 0 $padding-m;
}
@include media-breakpoint-up(xl) {
padding: 0 $padding-l 0 $padding-m;
}
.o_logo_wrapper {
> .o_logo {
img {
margin-bottom: -2px;
vertical-align: baseline;
}
span {
@include font-size($font-size-base);
color: $o-violet;
@include o-easter-egg($img:'img/ducky.svg');
}
.o_main_header {
height: $o-header-mobile-height;
background-color: $o-header-white;
padding: 0 $padding-s;
@include media-breakpoint-up(lg) {
height: $o-header-height;
padding: 0 $padding-m;
}
@include media-breakpoint-up(xl) {
width: calc(#{$o-side-nav-width} - #{$padding-l});
}
@include media-breakpoint-up(lg) {
margin-right: $margin-l;
}
}
.o_logo img {
@include media-breakpoint-up(lg) {
height: 30px
}
}
.o_search_wrapper {
display: flex;
position: relative;
opacity: 1;
@include transition(opacity .3s);
@include media-breakpoint-down(lg) {
display: block;
position: absolute;
width: calc(100% - (#{$padding-s} * 2));
top: calc(100% + #{$padding-s});
}
@include media-breakpoint-up(lg) {
flex-grow: 1;
max-width: 500px;
padding: 0 $padding-l 0 $padding-m;
}
.o_search {
position: relative;
width: 100%;
.o_logo_wrapper {
margin-right: $margin-s;
@include media-breakpoint-up(xl) {
width: calc(#{$o-side-nav-width} - #{$padding-m});
}
@include media-breakpoint-up(lg) {
margin-right: $margin-l;
}
> .o_logo {
img {
margin-bottom: -2px;
vertical-align: baseline;
}
.btn {
@include o-position-absolute($top: 50%, $right: 1rem);
@include o-transform (translateY(-50%)) ;
padding: 0;
font-size: 1.2rem;
color: $gray;
span {
@include font-size($font-size-base);
color: $o-violet;
@include o-easter-egg($img:'img/ducky.svg');
}
}
}
.o_logo img {
@include media-breakpoint-up(lg) {
height: 30px
}
}
> div:not(.o_logo_wrapper) {
@include media-breakpoint-up(lg) {
width: calc(100% - (#{$o-side-nav-width}));
}
}
}
&.o_header_scrolled {
.o_search_wrapper {
@include media-breakpoint-down(lg) {
opacity: 0;
position: relative;
@include media-breakpoint-up(lg) {
padding-right: $padding-m;
}
.o_search {
position: relative;
width: 100%;
.btn {
@include o-position-absolute($top: 50%, $right: .5rem);
@include o-transform (translateY(-50%)) ;
@include media-breakpoint-up(lg) {
right: 1rem;
}
padding: 0;
font-size: 1.2rem;
color: $gray;
}
.form-control {
@include media-breakpoint-down(lg) {
padding: 0.275rem 0.5rem;
font-size: $font-size-secondary;
}
}
}
.highlight-link {
@include o-position-absolute($bottom: -1.5rem, $right: 1rem);
margin-bottom: 0;
a {
@include font-size(12px);
}
}
}
}
.highlight-link {
@include o-position-absolute($bottom: -1.5rem, $right: 1rem);
margin-bottom: 0;
a {
@include font-size(12px);
.o_subheader {
background: $gray-lighter;
height: $o-subheader-height;
padding-right: $padding-s;
@include media-breakpoint-up(lg) {
padding: 0 $padding-m;
}
}
.navbar-toggler {
&[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%)
}
}
@include media-breakpoint-up(xl) {
padding: 0 $padding-l 0 0;
}
.icon-bar {
display: block;
width: 22px;
height: 2px;
background-color: $gray-dark;
@include o-transition(all, .2s);
&+ .icon-bar {
margin-top: 4px;
.o_side_nav_toggler_wrapper {
height: 100%;
button {
&:focus, &:focus-visible{
box-shadow: none;
outline:none;
}
&[aria-expanded="true"]{
background-color: rgba(0,0,0, .2);
}
}
&: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;
}
}
}
@ -207,7 +184,6 @@ header.o_main_header {
top: -100%;
left:0;
@include o-transition(all, .3s);
padding-top: 4rem;
padding-left: $padding-s;
background-color: lighten($o-violet-dark, 70%) ;
z-index: 10;
@ -370,7 +346,7 @@ header.o_main_header {
display: none;
@include media-breakpoint-up(xl) {
display: block;
top: $o-header-height;
top: $o-headers-height;
right: 0;
padding: $padding-l $padding-s $padding-l 0;
overflow-y: auto;
@ -379,7 +355,7 @@ header.o_main_header {
position: sticky;
width: $o-on-page-width;
height: 100%;
max-height: calc(100vh - #{$o-header-height});
max-height: calc(100vh - #{$o-headers-height});
}
&.o_in_nav_toc {
display: block;
@ -415,11 +391,11 @@ header.o_main_header {
//------------------------------------------------------------------------------
#wrap {
margin-top: $o-header-mobile-height;
margin-top: $o-headers-mobile-height;
@include media-breakpoint-up(lg) {
display: flex;
justify-content: space-between;
margin-top: $o-header-height;
margin-top: $o-headers-height;
}
code {
@ -439,7 +415,6 @@ header.o_main_header {
main {
position: relative;
padding-top: 5rem;
padding-bottom: $padding-l;
@include media-breakpoint-up(lg) {
left: calc(#{$o-side-nav-width} - #{$padding-s});
@ -627,6 +602,7 @@ header.o_main_header {
}
article.doc-body {
padding-top: $padding-s;
position: relative;
.o_git_link {