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

[IMP] odoo_theme: revamp side menu to add overlay

Browse Source 
task-2800937

X-original-commit: 4ed8c2238a
This commit is contained in:
Elisabeth Dickinson 2022-06-14 13:18:34 +02:00 committed by Antoine Vandevenne (anv)
parent 0138a0822a
commit e7cb811971
2 changed files with 47 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
extensions/odoo_theme/layout.html
View File

@ -62,7 +62,9 @@
</nav> </nav>
</noscript> </noscript>
{# 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 #}
<nav id="o_menu" class="o_side_nav border-end"> <nav id="o_menu" class="o_side_nav">
<div class="o_mobile-overlay" data-bs-toggle="collapse" data-bs-target="#o_menu"></div>
<div class="o_side_nav-inner 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 pt-3 pb-3" hidden> <aside id="o_page_toc_in_nav" class="o_page_toc o_in_nav_toc border-bottom pt-3 pb-3" hidden>
@ -72,6 +74,7 @@
<div id="o_main_toctree" class="o_main_toc mt-3" 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>
</div>
</nav> </nav>
<header class="o_headers"> <header class="o_headers">
{%- include "layout_templates/header.html" %} {%- include "layout_templates/header.html" %}

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

@ -11,6 +11,7 @@ div[aria-label="related navigation"] {
} }
body { body {
position: relative;
a:not(:hover), a.o_logo { a:not(:hover), a.o_logo {
text-decoration: none !important; text-decoration: none !important;
} }
@ -178,10 +179,18 @@ header {
.o_side_nav { .o_side_nav {
width: 100%; width: 100%;
.o_mobile-overlay {
background-color: rgba(0,0,0,.3);
@include o-position-absolute($top: 0, $bottom: 0, $left: 0, $right:0);
opacity: 0;
transition: opacity .2s linear;
z-index: -100;
}
.o_side_nav-inner {
width: 90%;
height: calc(100% - (#{$o-headers-mobile-height}); height: calc(100% - (#{$o-headers-mobile-height});
overflow-y: auto; overflow-y: auto;
position: fixed; position: fixed;
top: $o-headers-mobile-height;
left: -100%; left: -100%;
@include o-transition(all, .3s); @include o-transition(all, .3s);
padding-left: $padding-s; padding-left: $padding-s;
@ -191,19 +200,24 @@ header {
color: $o-violet-dark; color: $o-violet-dark;
font-weight: $fw_regular; font-weight: $fw_regular;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
width: calc(#{$o-side-nav-width} - 1rem); width: $o-side-nav-width;
height: calc(100vh - #{$o-headers-height}); height: calc(100vh - (#{$o-headers-height}));
left: 0; left: 0;
padding-top: $padding-m; padding-top: $padding-m;
padding-left: $padding-m; padding-left: $padding-m;
} }
@include media-breakpoint-up(xl) {
width: $o-side-nav-width;
} }
&.show { &.show {
.o_mobile-overlay {
opacity: 1;
z-index: 1;
}
.o_side_nav-inner {
left: 0; left: 0;
} }
}
.toctree-l1 { .toctree-l1 {
padding-top: $padding-xs; padding-top: $padding-xs;