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

X-original-commit: 411e1cb1d3
This commit is contained in:
Elisabeth Dickinson 2022-06-13 16:33:19 +02:00 committed by Antoine Vandevenne (anv)
parent ddf9fe780e
commit bf1e7ee63e
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"> <nav id="o_menu" class="o_side_nav border-end">
{%- if 'hide-page-toc' not in meta %} {%- if 'hide-page-toc' not in meta %}
{# Shown when the JS has properly set all the classes on the TOC elements #} {# 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" %} {%- include "layout_templates/page_toc.html" %}
</aside> </aside>
{%- endif %} {%- 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" %} {%- include "layout_templates/menu.html" %}
</div> </div>
</nav> </nav>
<header class="o_main_header border-bottom navbar navbar-light navbar-expand-lg"> <header class="o_headers">
{%- include "layout_templates/header.html" %} {%- 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> </header>
{%- endblock %} {%- 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"> <a href="{{ pathto(master_doc) }}" class="o_logo">
<img src="{{ pathto('_static/img/logos/odoo_logo.svg', 1) }}" height="20" alt="Odoo"/> <img src="{{ pathto('_static/img/logos/odoo_logo.svg', 1) }}" height="20" alt="Odoo"/>
<span>docs</span> <span>docs</span>
</a> </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> </div>
{%- include "layout_templates/searchbox.html" %} <div class="o_subheader border-bottom d-flex">
<div class="d-none d-lg-flex ms-auto"> <div class="o_side_nav_toggler_wrapper border-end d-flex d-lg-none">
{%- include "layout_templates/language_switcher.html" %} <button class="h-100 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#o_menu" aria-label="Toggle navigation">
{%- include "layout_templates/version_switcher.html" %} <i class="i-sidepanel"></i>
<a class="btn btn-primary fw_semibold" href="https://odoo.com/trial">{{ _('Try Odoo for FREE') }}</a> </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> </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"> <div class="dropdown">
{%- if alternate_languages|length > 0 %} {%- if alternate_languages|length > 0 %}
<button class="btn border dropdown-toggle" <button class="btn btn-sm dropdown-toggle"
id="languages" id="languages"
data-bs-toggle="dropdown"> data-bs-toggle="dropdown">
{{ language }} {# The current language #} {{ language }} {# The current language #}
</button> </button>
{%- else %} {%- else %}
<button class="btn border dropdown-toggle" <button class="btn btn-sm dropdown-toggle"
id="languages" id="languages"
disabled=""> disabled="">
{{ language }} {# The current language #} {{ 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 #} {# 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"> <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="text" name="q" id="q" class="form-control rounded-pill" placeholder="What are you looking for?">
<input type="hidden" name="area" value="default"> <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="o_versions row">
<div class="col align-self-center"> <div class="dropdown">
<label class="fw_bold small ms-2">Version</label> {%- if alternate_versions|length > 0 %}
</div> <button class="btn btn-sm dropdown-toggle"
<div class="col"> id="versions"
<div class="dropdown"> data-bs-toggle="dropdown">
{%- if alternate_versions|length > 0 %} {{ version_display_name }} {# The current version #}
<button class="btn border dropdown-toggle" </button>
id="versions" {%- else %}
data-bs-toggle="dropdown"> <button class="btn btn-sm dropdown-toggle"
{{ version_display_name }} {# The current version #} id="versions"
</button> disabled="">
{%- else %} {{ version_display_name }} {# The current version #}
<button class="btn border dropdown-toggle" </button>
id="versions" {%- endif %}
disabled=""> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="versions">
{{ version_display_name }} {# The current version #} {%- for alternate_version, url in alternate_versions %}
</button> <li><a class="dropdown-item" href="{{ url }}">{{ alternate_version }}</a></li>
{%- endif %} {%- endfor %}
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="versions"> </ul>
{%- for alternate_version, url in alternate_versions %}
<li><a class="dropdown-item" href="{{ url }}">{{ alternate_version }}</a></li>
{%- endfor %}
</ul>
</div>
</div> </div>
</div> </div>

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

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