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

[MERGE] Forward-port of branch 12.0 to 13.0

Browse Source
This commit is contained in:
Antoine Vandevenne (anv)
2021-06-07 09:09:43 +02:00
parent 9db11c78c9 b1b48759ba
commit a8cfd6c6c5
27 changed files with 569 additions and 545 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extensions/odoo_theme/layout.html
+1 -1
View File
@@ -64,7 +64,7 @@
</nav>
<header class="o_main_header border-bottom navbar navbar-light navbar-expand-lg">
{%- 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>
extensions/odoo_theme/layout_templates/homepage.html
+7 -2
View File
@@ -123,8 +123,13 @@
<h5 class="text-muted pt-3 text-uppercase fw_semibold">Top Links</h5>
<ul class="list-unstyled">
<li>
<a href="{{ pathto('contributing/documentation/introduction_guide') }}" class="stretched-link">
Introduction guide
<a href="{{ pathto('contributing/documentation') }}" class="stretched-link">
Write documentation
</a>
</li>
<li>
<a href="{{ pathto('contributing/documentation/content_guidelines') }}" class="stretched-link">
Content guidelines
</a>
</li>
</ul>
extensions/odoo_theme/static/js/menu.js
+20 -10
View File
@@ -21,22 +21,32 @@
* TOC entries (<li> elements) that are on the path of the displayed page receive the
* `o_active_toc_entry` class, and their related (parent) TOC entry list (<ul> elements) receive
* the `show` (Bootstrap) class.
* Also, the deepest TOC entry receives the `o_deepest_active_toc_entry` class, and its child
* TOC entry list receives the `show` class.
* Also, the deepest TOC entries of their respective branch receive the
* `o_deepest_active_toc_entry` class, and their child TOC entry lists receive the `show` class.
*/
const _flagActiveTocEntriesAndLists = () => {
let deepestTocEntry = undefined;
const regexLayer = /\btoctree-l(?<layer>\d+)\b/;
let lastLayer = undefined;
let lastTocEntry = undefined;
const deepestTocEntries = [];
this.navigationMenu.querySelectorAll('.current').forEach(element => {
if (element.tagName === 'UL') {
// Expand all related <ul>
element.classList.add('show');
element.classList.add('show'); // Expand all related <ul>
} else if (element.tagName === 'LI') {
// Highlight all <li> in the active hierarchy
element.classList.add('o_active_toc_entry');
deepestTocEntry = element;
element.classList.add('o_active_toc_entry'); // Highlight all active <li>
let match = regexLayer.exec(element.className);
let currentLayer = parseInt(match.groups.layer, 10);
if (lastLayer && currentLayer <= lastLayer) { // We just moved to another branch
deepestTocEntries.push(lastTocEntry);
}
lastLayer = currentLayer;
lastTocEntry = element;
}
})
if (deepestTocEntry) {
if (lastTocEntry) {
deepestTocEntries.push(lastTocEntry); // The last TOC entry is the deepest of its branch
}
deepestTocEntries.forEach(deepestTocEntry => {
const childTocEntryList = deepestTocEntry.querySelector('ul');
if (childTocEntryList) {
childTocEntryList.classList.add('show');
@@ -44,7 +54,7 @@
deepestTocEntry = deepestTocEntry.parentElement.parentElement;
}
deepestTocEntry.classList.add('o_deepest_active_toc_entry');
}
});
};
document.addEventListener('scroll', () => {
extensions/odoo_theme/static/scss/_variables.scss
+9 -1
View File
@@ -234,7 +234,7 @@ $o-header-white: #ffffff;
// Navigation
$o-side-nav-width: 350px;
$o-on-page-width: 25%;
$o-on-page-width: 20%;
// o_has_code_column pages
$o-halfpage-width: 54%;
@@ -247,4 +247,12 @@ $website-2x-prefix: "2x_";
// Animations and Transitions
$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;
extensions/odoo_theme/static/style.scss
+97 -92
View File
@@ -49,14 +49,17 @@ header.o_main_header {
right: 0;
background-color: $o-header-white;
z-index: 10;
padding: 0 $padding-s;
@include media-breakpoint-up(lg) {
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 {
img {
margin-bottom: -2px;
@@ -70,25 +73,45 @@ header.o_main_header {
}
}
@include media-breakpoint-up(xl) {
width: $o-side-nav-width;
width: calc(#{$o-side-nav-width} - #{$padding-l});
}
@include media-breakpoint-up(lg) {
padding-left: 3rem;
margin-right: 3rem;
margin-right: $margin-l;
}
}
.o_logo img {
@include media-breakpoint-up(lg) {
height: 30px
}
}
.o_search_wrapper {
display: flex;
opacity: 1;
@include transition(opacity .3s);
@include media-breakpoint-down(lg) {
display: block;
position: absolute;
width: 100%;
padding: 0 10px;
top: calc(100% + 15px);
width: calc(100% - (#{$padding-s} * 2));
top: calc(100% + #{$padding-s});
}
.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;
}
}
}
&.o_header_scrolled {
@@ -99,7 +122,6 @@ header.o_main_header {
}
}
.highlight-link {
@media only screen and (max-width: 1242px) and (min-width: 992px){
position: absolute;
@@ -114,9 +136,8 @@ header.o_main_header {
@include font-size($font-size-secondary);
}
}
.navbar-toggler {
border: none;
.navbar-toggler {
&[aria-expanded="true"] {
.icon-bar {
&:nth-of-type(1) {
@@ -135,6 +156,7 @@ header.o_main_header {
}
}
}
.icon-bar {
display: block;
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
//------------------------------------------------------------------------------
.o_side_nav {
width: 100%;
height: calc(100vh - #{$o-header-mobile-height});
height: 100%;
overflow-y: auto;
position: fixed;
top: -100%;
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);
padding-top: 4rem;
padding-left: 1rem;
padding-left: $padding-s;
background-color: lighten($o-violet-dark, 70%) ;
z-index: 10;
@include font-size($font-size-secondary);
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 {
padding-top: .5rem;
padding-bottom: .5rem;
padding-top: $padding-xs;
padding-bottom: $padding-xs;
}
ul {
@@ -281,14 +284,11 @@ header.o_main_header {
.o_side_nav, .o_page_toc_nav {
ul { // all uls in toc
list-style: none;
padding-left: 1rem;
padding-left: $padding-s;
li {
&.toctree_l2 {
padding-left: .2rem;
}
> a.reference {
padding-left: .8rem;
padding-left: .875rem;
}
a {
@@ -315,7 +315,7 @@ header.o_main_header {
> i[class^="i-"] {
display: inline-block;
margin-right: .2rem;
margin-right: .125rem;
@include o-transition(rotate, .3s);
font-size: .75rem;
font-weight: $fw_bold;
@@ -353,7 +353,7 @@ header.o_main_header {
aside.o_page_toc {
display: none;
@include font-size($font-size-secondary);
@include media-breakpoint-up(lg) {
@include media-breakpoint-up(xl) {
display: block;
position: -webkit-sticky;
position: sticky;
@@ -362,7 +362,7 @@ header.o_main_header {
width: $o-on-page-width;
height: 100%;
max-height: calc(100vh - #{$o-header-height});
padding: 3rem 3rem 3rem 0;
padding: $padding-l $padding-s $padding-l 0;
overflow-y: auto;
}
@@ -370,8 +370,8 @@ header.o_main_header {
text-transform: uppercase;
font-weight: $fw_bold;
color: $gray-darker;
padding-left: .5rem;
margin-bottom: .5rem;
padding-left: $padding-xs;
margin-bottom: $padding-xs;
}
a {
@@ -417,21 +417,22 @@ header.o_main_header {
main {
position: relative;
padding-top: 3rem;
@include media-breakpoint-down(lg) {
padding-top: 7rem;
}
padding-bottom: 3rem;
padding-top: 5rem;
padding-bottom: $padding-l;
@include media-breakpoint-up(lg) {
left: $o-side-nav-width;
max-width: calc(100vw - (#{$o-side-nav-width} + var(--bs-gutter-x, 1.5rem)) - #{$o-on-page-width});
padding: 3rem;
left: calc(#{$o-side-nav-width} - #{$padding-s});
max-width: calc(100vw - #{$o-side-nav-width});
padding: $padding-l;
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 {
@include media-breakpoint-up(lg) {
max-width: calc(100vw - (#{$o-side-nav-width} + var(--bs-gutter-x, 1rem)) );
@include media-breakpoint-up(xl) {
max-width: calc(100vw - #{$o-side-nav-width});
}
}
@@ -439,13 +440,17 @@ header.o_main_header {
&.o_index {
.o_content_fw_banner {
margin: -3rem -0.75rem 3rem;
padding: 2rem 1rem;
margin: 0 -0.75rem $margin-m;
padding: $padding-m $padding-s;
align-items: center;
@include o-gradient();
@include media-breakpoint-up(lg) {
margin: -3rem -3rem 3rem;
padding: 2rem 3rem;
margin: -#{$margin-m} -#{$margin-m} $margin-m;
padding: $padding-m $padding-m;
}
@include media-breakpoint-up(xl) {
margin: -#{$margin-l} -#{$margin-l} $margin-l;
padding: $padding-l $padding-l;
}
.btn-primary {
@@ -466,7 +471,7 @@ header.o_main_header {
ul {
> li {
position: relative;
padding-bottom: .5rem;
padding-bottom: $padding-xs;
display: flex;
align-items: center;
@@ -490,9 +495,9 @@ header.o_main_header {
display: block;
color: $gray-darker;
@include font-size($h2-font-size);
padding-bottom: .5rem;
padding-bottom: $padding-xs;
border-bottom: 1px solid $gray-light;
margin-bottom: 1rem;
margin-bottom: $margin-s;
}
}
@@ -531,7 +536,7 @@ header.o_main_header {
}
.o_git_link {
right: calc(#{$o-codecol-width} + 2rem);
right: calc(#{$o-codecol-width} + $padding-l);
}
section {
@@ -555,7 +560,7 @@ header.o_main_header {
float: none;
clear: none;
margin-left: 57%;
padding: 1rem;
padding: $padding-s;
blockquote {
font-weight: $fw_semibold;
@@ -606,9 +611,9 @@ header.o_main_header {
.o_git_link {
@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 o-position-absolute($top: 10px, $right: 1rem);
@include o-position-absolute($top: 10px, $right: $margin-s);
}
i {
margin-right: .2rem;
@@ -629,7 +634,7 @@ header.o_main_header {
padding-left: 0;
li {
padding-bottom: .5rem;
padding-bottom: $padding-xs;
}
}
}
@@ -647,26 +652,26 @@ header.o_main_header {
max-width: calc(100% - 120px);
}
+ * {
margin-top: 1rem;
margin-top: $margin-s;
}
}
> h2 {
font-family: $font-family-serif;
color: $gray-darker;
margin-top: 2rem;
margin-bottom: 1rem;
margin-top: $margin-m;
margin-bottom: $margin-s;
padding-bottom: .3rem;
border-bottom: 1px solid $gray-light;
}
> h3 {
margin-top: 2rem;
margin-top: $margin-m;
font-weight: $fw_bold;
}
> h4 {
margin-top: 2rem;
margin-top: $margin-l;
}
> h4, > h5, > h6 {
@@ -964,11 +969,11 @@ header.o_main_header {
//------------------------------------------------------------------------------
footer {
.o_get_help {
padding-top: 3rem;
padding-bottom: 3rem;
padding-top: $padding-l;
padding-bottom: $padding-l;
background: $gray-lighter;
@include media-breakpoint-up(lg) {
padding-left: calc(#{$o-side-nav-width} + 3rem)
padding-left: calc(#{$o-side-nav-width} + #{$padding-l})
}
h5 {