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

[IMP] odoo_theme: fix layout on esoteric screens

Browse Source
This commit is contained in:
Elisabeth Dickinson 2021-06-04 17:27:11 +02:00 committed by GitHub
parent 2591ddc6d2
commit 49baf6b4d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 105 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
extensions/odoo_theme/layout.html
View File

@ -64,7 +64,7 @@
</nav> </nav>
<header class="o_main_header border-bottom navbar navbar-light navbar-expand-lg"> <header class="o_main_header border-bottom navbar navbar-light navbar-expand-lg">
{%- include "layout_templates/header.html" %} {%- include "layout_templates/header.html" %}
<button class="navbar-toggler pe-3 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#o_main_toctree" aria-label="Toggle navigation"> <button class="navbar-toggler p-0 border-0" type="button" data-bs-toggle="collapse" data-bs-target="#o_main_toctree" aria-label="Toggle navigation">
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span> <span class="icon-bar"></span>

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

@ -234,7 +234,7 @@ $o-header-white: #ffffff;
// Navigation // Navigation
$o-side-nav-width: 350px; $o-side-nav-width: 350px;
$o-on-page-width: 25%; $o-on-page-width: 20%;
// o_has_code_column pages // o_has_code_column pages
$o-halfpage-width: 54%; $o-halfpage-width: 54%;
@ -247,4 +247,12 @@ $website-2x-prefix: "2x_";
// Animations and Transitions // Animations and Transitions
$o-ease: cubic-bezier(.55,0,.1,1); $o-ease: cubic-bezier(.55,0,.1,1);
// Paddings and margins
$padding-xs: .5rem;
$padding-s: 1rem;
$padding-m: 2rem;
$padding-l: 3rem;
$margin-s: $padding-s;
$margin-m: $padding-m;
$margin-l: $padding-l;

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

@ -49,14 +49,17 @@ header.o_main_header {
right: 0; right: 0;
background-color: $o-header-white; background-color: $o-header-white;
z-index: 10; z-index: 10;
padding: 0 $padding-s;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
height: $o-header-height; height: $o-header-height;
padding-right: 3rem; padding: 0 $padding-m;
}
@include media-breakpoint-up(xl) {
padding: 0 $padding-l;
} }
.o_logo_wrapper {
padding: 0 1rem;
.o_logo_wrapper {
> .o_logo { > .o_logo {
img { img {
margin-bottom: -2px; margin-bottom: -2px;
@ -70,24 +73,44 @@ header.o_main_header {
} }
} }
@include media-breakpoint-up(xl) { @include media-breakpoint-up(xl) {
width: $o-side-nav-width; width: calc(#{$o-side-nav-width} - #{$padding-l});
} }
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
padding-left: 3rem; margin-right: $margin-l;
margin-right: 3rem;
} }
} }
.o_logo img {
@include media-breakpoint-up(lg) {
height: 30px
}
}
.o_search_wrapper { .o_search_wrapper {
display: flex; display: flex;
opacity: 1; opacity: 1;
@include transition(opacity .3s); @include transition(opacity .3s);
@include media-breakpoint-down(lg) { @include media-breakpoint-down(lg) {
display: block; display: block;
position: absolute; position: absolute;
width: calc(100% - (#{$padding-s} * 2));
top: calc(100% + #{$padding-s});
}
.o_search {
position: relative;
width: 100%; width: 100%;
padding: 0 10px; @include media-breakpoint-up(lg) {
top: calc(100% + 15px); max-width: 500px;
}
.btn {
@include o-position-absolute($top: 50%, $right: 1rem);
@include o-transform (translateY(-50%)) ;
padding: 0;
font-size: 1.2rem;
color: $gray;
}
} }
} }
@ -99,7 +122,6 @@ header.o_main_header {
} }
} }
.highlight-link { .highlight-link {
@media only screen and (max-width: 1242px) and (min-width: 992px){ @media only screen and (max-width: 1242px) and (min-width: 992px){
position: absolute; position: absolute;
@ -114,9 +136,8 @@ header.o_main_header {
@include font-size($font-size-secondary); @include font-size($font-size-secondary);
} }
} }
.navbar-toggler {
border: none;
.navbar-toggler {
&[aria-expanded="true"] { &[aria-expanded="true"] {
.icon-bar { .icon-bar {
&:nth-of-type(1) { &:nth-of-type(1) {
@ -135,6 +156,7 @@ header.o_main_header {
} }
} }
} }
.icon-bar { .icon-bar {
display: block; display: block;
width: 22px; width: 22px;
@ -167,63 +189,44 @@ header.o_main_header {
} }
} }
.o_logo img {
@include media-breakpoint-up(lg) {
height: 30px
}
}
.o_search_wrapper {
.o_search {
position: relative;
width: 100%;
@include media-breakpoint-up(lg) {
max-width: 500px;
}
.btn {
@include o-position-absolute($top: 50%, $right: 1rem);
@include o-transform (translateY(-50%)) ;
padding: 0;
font-size: 1.2rem;
color: $gray;
}
}
}
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
// Left side nav toctree // Left side nav toctree
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
.o_side_nav { .o_side_nav {
width: 100%; width: 100%;
height: calc(100vh - #{$o-header-mobile-height}); height: 100%;
overflow-y: auto; overflow-y: auto;
position: fixed; position: fixed;
top: -100%; top: -100%;
left:0; left:0;
&.show {
top: $o-header-mobile-height;
}
@include media-breakpoint-up(lg) {
width: $o-side-nav-width;
height: calc(100vh - #{$o-header-height});
top: $o-header-height;
padding-top: 2rem;
padding-left: 3rem;
}
@include o-transition(all, .3s); @include o-transition(all, .3s);
padding-top: 4rem; padding-top: 4rem;
padding-left: 1rem; padding-left: $padding-s;
background-color: lighten($o-violet-dark, 70%) ; background-color: lighten($o-violet-dark, 70%) ;
z-index: 10; z-index: 10;
@include font-size($font-size-secondary); @include font-size($font-size-secondary);
color: $o-violet-dark; color: $o-violet-dark;
@include media-breakpoint-up(lg) {
width: calc(#{$o-side-nav-width} - 1rem);
height: calc(100vh - #{$o-header-height});
top: $o-header-height;
padding-top: $padding-m;
padding-left: $padding-m;
}
@include media-breakpoint-up(xl) {
width: $o-side-nav-width;
padding-top: $padding-l;
padding-left: $padding-l;
}
&.show {
top: $o-header-mobile-height;
}
.toctree-l1 { .toctree-l1 {
padding-top: .5rem; padding-top: $padding-xs;
padding-bottom: .5rem; padding-bottom: $padding-xs;
} }
ul { ul {
@ -281,7 +284,7 @@ header.o_main_header {
.o_side_nav, .o_page_toc_nav { .o_side_nav, .o_page_toc_nav {
ul { // all uls in toc ul { // all uls in toc
list-style: none; list-style: none;
padding-left: 1rem; padding-left: $padding-s;
li { li {
> a.reference { > a.reference {
@ -350,7 +353,7 @@ header.o_main_header {
aside.o_page_toc { aside.o_page_toc {
display: none; display: none;
@include font-size($font-size-secondary); @include font-size($font-size-secondary);
@include media-breakpoint-up(lg) { @include media-breakpoint-up(xl) {
display: block; display: block;
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;
@ -359,7 +362,7 @@ header.o_main_header {
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-header-height});
padding: 3rem 3rem 3rem 0; padding: $padding-l $padding-s $padding-l 0;
overflow-y: auto; overflow-y: auto;
} }
@ -367,8 +370,8 @@ header.o_main_header {
text-transform: uppercase; text-transform: uppercase;
font-weight: $fw_bold; font-weight: $fw_bold;
color: $gray-darker; color: $gray-darker;
padding-left: .5rem; padding-left: $padding-xs;
margin-bottom: .5rem; margin-bottom: $padding-xs;
} }
a { a {
@ -414,21 +417,22 @@ header.o_main_header {
main { main {
position: relative; position: relative;
padding-top: 3rem; padding-top: 5rem;
@include media-breakpoint-down(lg) { padding-bottom: $padding-l;
padding-top: 7rem;
}
padding-bottom: 3rem;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
left: $o-side-nav-width; left: calc(#{$o-side-nav-width} - #{$padding-s});
max-width: calc(100vw - (#{$o-side-nav-width} + var(--bs-gutter-x, 1.5rem)) - #{$o-on-page-width}); max-width: calc(100vw - #{$o-side-nav-width});
padding: 3rem; padding: $padding-l;
margin: 0; margin: 0;
} }
@include media-breakpoint-up(xl) {
left: $o-side-nav-width;
max-width: calc(100vw - #{$o-side-nav-width} - #{$o-on-page-width});
}
&.o_index, &.o_fullwidth_page, &.o_has_code_column { &.o_index, &.o_fullwidth_page, &.o_has_code_column {
@include media-breakpoint-up(lg) { @include media-breakpoint-up(xl) {
max-width: calc(100vw - (#{$o-side-nav-width} + var(--bs-gutter-x, 1rem)) ); max-width: calc(100vw - #{$o-side-nav-width});
} }
} }
@ -436,13 +440,17 @@ header.o_main_header {
&.o_index { &.o_index {
.o_content_fw_banner { .o_content_fw_banner {
margin: -3rem -0.75rem 3rem; margin: 0 -0.75rem $margin-m;
padding: 2rem 1rem; padding: $padding-m $padding-s;
align-items: center; align-items: center;
@include o-gradient(); @include o-gradient();
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
margin: -3rem -3rem 3rem; margin: -#{$margin-m} -#{$margin-m} $margin-m;
padding: 2rem 3rem; padding: $padding-m $padding-m;
}
@include media-breakpoint-up(xl) {
margin: -#{$margin-l} -#{$margin-l} $margin-l;
padding: $padding-l $padding-l;
} }
.btn-primary { .btn-primary {
@ -463,7 +471,7 @@ header.o_main_header {
ul { ul {
> li { > li {
position: relative; position: relative;
padding-bottom: .5rem; padding-bottom: $padding-xs;
display: flex; display: flex;
align-items: center; align-items: center;
@ -487,9 +495,9 @@ header.o_main_header {
display: block; display: block;
color: $gray-darker; color: $gray-darker;
@include font-size($h2-font-size); @include font-size($h2-font-size);
padding-bottom: .5rem; padding-bottom: $padding-xs;
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $gray-light;
margin-bottom: 1rem; margin-bottom: $margin-s;
} }
} }
@ -528,7 +536,7 @@ header.o_main_header {
} }
.o_git_link { .o_git_link {
right: calc(#{$o-codecol-width} + 2rem); right: calc(#{$o-codecol-width} + $padding-l);
} }
section { section {
@ -552,7 +560,7 @@ header.o_main_header {
float: none; float: none;
clear: none; clear: none;
margin-left: 57%; margin-left: 57%;
padding: 1rem; padding: $padding-s;
blockquote { blockquote {
font-weight: $fw_semibold; font-weight: $fw_semibold;
@ -603,9 +611,9 @@ header.o_main_header {
.o_git_link { .o_git_link {
@include font-size($font-size-secondary); @include font-size($font-size-secondary);
@include o-position-absolute($top: 0px, $right: 1rem); @include o-position-absolute($top: 0px, $right: $margin-s);
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
@include o-position-absolute($top: 10px, $right: 1rem); @include o-position-absolute($top: 10px, $right: $margin-s);
} }
i { i {
margin-right: .2rem; margin-right: .2rem;
@ -626,7 +634,7 @@ header.o_main_header {
padding-left: 0; padding-left: 0;
li { li {
padding-bottom: .5rem; padding-bottom: $padding-xs;
} }
} }
} }
@ -644,26 +652,26 @@ header.o_main_header {
max-width: calc(100% - 120px); max-width: calc(100% - 120px);
} }
+ * { + * {
margin-top: 1rem; margin-top: $margin-s;
} }
} }
> h2 { > h2 {
font-family: $font-family-serif; font-family: $font-family-serif;
color: $gray-darker; color: $gray-darker;
margin-top: 2rem; margin-top: $margin-m;
margin-bottom: 1rem; margin-bottom: $margin-s;
padding-bottom: .3rem; padding-bottom: .3rem;
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $gray-light;
} }
> h3 { > h3 {
margin-top: 2rem; margin-top: $margin-m;
font-weight: $fw_bold; font-weight: $fw_bold;
} }
> h4 { > h4 {
margin-top: 2rem; margin-top: $margin-l;
} }
> h4, > h5, > h6 { > h4, > h5, > h6 {
@ -961,11 +969,11 @@ header.o_main_header {
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
footer { footer {
.o_get_help { .o_get_help {
padding-top: 3rem; padding-top: $padding-l;
padding-bottom: 3rem; padding-bottom: $padding-l;
background: $gray-lighter; background: $gray-lighter;
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
padding-left: calc(#{$o-side-nav-width} + 3rem) padding-left: calc(#{$o-side-nav-width} + #{$padding-l})
} }
h5 { h5 {