Merge branch '12.0-one-doc-edi' of github.com:odoo/documentation-user into 12.0-one-doc-edi

This commit is contained in:
Victor Feyens 2021-03-10 14:34:44 +01:00
commit 14ddd35072
13 changed files with 130 additions and 177 deletions

View File

@ -61,7 +61,11 @@
{% block content %} {% block content %}
<div id="wrap"> <div id="wrap">
<nav class="navbar navbar-expand-lg navbar-light d-lg-none" aria-label="Toggle OffCanvas">
<button class="navbar-toggler p-0 border-0" type="button" data-bs-toggle="offcanvas" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
{% set main_classes = [] %} {% set main_classes = [] %}
{% if pagename == master_doc %} {# The current page is the homepage #} {% if pagename == master_doc %} {# The current page is the homepage #}
{% set main_classes = main_classes + ['index'] %} {# TODO ANVFE should be 'o_index' #} {% set main_classes = main_classes + ['index'] %} {# TODO ANVFE should be 'o_index' #}
@ -79,7 +83,7 @@
{% set main_classes = main_classes + ['doc-toc'] %} {# TODO EDI do you use this ?#} {% set main_classes = main_classes + ['doc-toc'] %} {# TODO EDI do you use this ?#}
{% endif %} {% endif %}
<main class="{{ ' '.join(main_classes) }}"> <main class="container-fluid {{ ' '.join(main_classes) }}">
<div id="o_content"> <div id="o_content">
{% if pagename == master_doc %} {% if pagename == master_doc %}
{# Custom landing page on the root of the documentation #} {# Custom landing page on the root of the documentation #}

View File

@ -6,7 +6,7 @@
</a> </a>
</div> </div>
{% include "layout_templates/searchbox.html" %} {% include "layout_templates/searchbox.html" %}
<div class="d-none d-md-flex"> <div class="d-none d-lg-flex">
{#{% if alternate_languages %}#} {#{% if alternate_languages %}#}
{% include "layout_templates/language_switcher.html" %} {% include "layout_templates/language_switcher.html" %}
{#{% endif %}#} {#{% endif %}#}

View File

@ -1,4 +1,4 @@
<div class="o_languages me-2"> <div class="o_languages me-3">
<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 border dropdown-toggle"

View File

@ -1,4 +1,4 @@
<div id="searchbox" class="d-flex flex-grow-1 justify-content-end justify-content-md-start" role="search"> <div id="searchbox" class="d-flex flex-grow-1 justify-content-stretch justify-content-lg-start pe-2" 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">

View File

@ -1,8 +1,8 @@
<div class="o_versions row me-2"> <div class="o_versions row gx-2 me-3">
<div class="col-4 col-form-label"> <div class="col col-form-label">
<label class="fw_bold small mr-2">Version</label> <label class="fw_bold small me-2">Version</label>
</div> </div>
<div class="col-8"> <div class="col">
<div class="dropdown"> <div class="dropdown">
{% if alternate_versions|length > 0 %} {% if alternate_versions|length > 0 %}
<button class="btn border dropdown-toggle" <button class="btn border dropdown-toggle"

Binary file not shown.

View File

@ -43,4 +43,14 @@
} }
}; };
/**
* Mobile: Toggle open/close sidebar on click of nav button (&& on swipe left to right?).
*
*
* `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
* Sidebar receives the `o-mobile-show` class.
*/
})(); })();

View File

@ -4,7 +4,7 @@
[class^="i-"], [class*=" i-"] { [class^="i-"], [class*=" i-"] {
/* use !important to prevent issues with browser extensions that change fonts */ /* use !important to prevent issues with browser extensions that change fonts */
font-family: '#{$icomoon-font-family}' !important; font-family: 'icomoon' !important;
speak: never; speak: never;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;

View File

@ -89,7 +89,7 @@
@mixin inline-icomoon($icon-content, $margin, $v-align: middle, $font-size: 1.5rem, $font-weight: $fw_regular) { @mixin inline-icomoon($icon-content, $margin, $v-align: middle, $font-size: 1.5rem, $font-weight: $fw_regular) {
content: '#{$icon-content}'; content: '#{$icon-content}';
font-family: '#{$icomoon-font-family}' !important; font-family: 'icomoon' !important;
@include font-size($font-size); @include font-size($font-size);
font-weight: $font-weight; font-weight: $font-weight;
vertical-align: $v-align; vertical-align: $v-align;

View File

@ -6,45 +6,19 @@
// Fonts // Fonts
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@font-face { @font-face {
font-family: '#{$icomoon-font-family}'; font-family: 'icomoon';
src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?6i2y1w'); src: url('fonts/icomoon.woff2') format('woff2'),
src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?6i2y1w#iefix') format('embedded-opentype'), url('fonts/icomoon.woff') format('woff');
url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?6i2y1w') format('truetype'),
url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?6i2y1w') format('woff'),
url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?6i2y1w##{$icomoon-font-family}') format('svg');
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
font-display: block; font-display: block;
} }
@font-face {
font-family: 'Inter';
font-weight: 100 900;
font-display: swap;
font-style: normal;
font-named-instance: 'Regular';
src: url("Inter-roman.var.woff2?v=3.15") format("woff2");
}
@font-face {
font-family: 'Inter';
font-weight: 100 900;
font-display: swap;
font-style: italic;
font-named-instance: 'Italic';
src: url("Inter-italic.var.woff2?v=3.15") format("woff2");
}
//------------------------------------------------------------------------------
// Font rendering
//------------------------------------------------------------------------------
html body{ html body{
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
font-family: Inter, Helvetica, sans-serif;
font-weight: 400;
} }
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------

View File

@ -75,9 +75,6 @@ $font-size-secondary: .875rem;
// icomoon icons // icomoon icons
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
$icomoon-font-family: "icomoon" !default;
$icomoon-font-path: "fonts" !default;
$i-arrow-up: "\e948"; $i-arrow-up: "\e948";
$i-arrow-down: "\e945"; $i-arrow-down: "\e945";
$i-arrow-left: "\e946"; $i-arrow-left: "\e946";
@ -236,9 +233,15 @@ $doc_cyan: $color-alpha;
// Header // Header
$o-header-height: 90px; $o-header-height: 90px;
$o-header-white: #ffffff;
// Navigation
$o-side-nav-width: 350px; $o-side-nav-width: 350px;
$o-on-page-width: 25%; $o-on-page-width: 25%;
$o-header-white: #ffffff;
// has_code_col pages
$o-halfpage-width: 54%;
$o-codecol-width: 43%;
// Paths and Prefixes // Paths and Prefixes
$website-img-base-url: "../img/"; $website-img-base-url: "../img/";

View File

@ -1,18 +1,11 @@
// //
// BS Variables // BS Variables
// //
/* $enable-responsive-font-sizes: true; */
// The contrast ratio value that determines when the lightness of color changes from "dark" to "light". Acceptable values are 3 , 4.5 and 7.
/* $min-contrast-ratio: 4.5; */
// Components
//
$enable-shadows : true;
// Define common padding and border radius sizes and more.
// Fonts // Fonts
//
// Font, line-height, and color for body text, headings, and more. // Font, line-height, and color for body text, headings, and more.
$font-family-base: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif !default;
$h1-font-size: 1.875rem; $h1-font-size: 1.875rem;
$h2-font-size: 1.5rem; $h2-font-size: 1.5rem;
$h3-font-size: 1.125rem; $h3-font-size: 1.125rem;
@ -20,64 +13,12 @@ $h4-font-size: 1rem;
$h5-font-size: 1rem; $h5-font-size: 1rem;
$h6-font-size: $font-size-secondary; $h6-font-size: $font-size-secondary;
$display-line-height: 1;
/* $blockquote-font-size: $font-size-base !default; */
// Buttons // Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color. // For each of Bootstrap's buttons, define text, background, and border color.
$btn-font-size: $font-size-secondary; $btn-font-size: $font-size-secondary;
$btn-font-weight: $fw_semibold; $btn-font-weight: $fw_semibold;
$btn-focus-box-shadow: 0 0 0 transparent; $btn-focus-box-shadow: 0 0 0 transparent;
// Badges
/* $badge-font-size: 0.9em; */
// Pagination
$pagination-color: o-color('600');
$pagination-bg: transparent;
$pagination-border-color: o-color('300');
$pagination-hover-color: o-color('o-cc1-link');
$pagination-hover-bg: transparent;
$pagination-hover-border-color: o-color('o-cc1-link');
$pagination-active-color: o-color('900');
$pagination-active-bg: transparent;
$pagination-active-border-color: o-color('900');
// Cards
$card-spacer-y: 15rem / 16;
$card-spacer-x: 15rem / 16;
$card-border-width: 1px;
$card-border-color: rgba(0,0,0,.06);
$card-cap-bg: transparent;
// Tooltips
$tooltip-max-width: 220px;
$tooltip-opacity: 1;
$tooltip-arrow-width: 4rem / 16;
// Popovers
$popover-border-color: transparent;
$popover-arrow-width: 10rem / 16;
// List group
$list-group-border-color: $card-border-color;
$nav-pills-link-active-color: #fff;
$nav-pills-link-active-bg: o-color('o-color-2');
// Dropdowns // Dropdowns
$dropdown-min-width: 4.5rem; $dropdown-min-width: 4.5rem;

View File

@ -38,12 +38,11 @@ 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-right: 3rem;
.o_logo_wrapper {
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
width: $o-side-nav-width; padding-right: 3rem;
padding-left: 3rem; }
margin-right: 3rem; .o_logo_wrapper {
padding: 0 1rem;
> .o_logo { > .o_logo {
img { img {
margin-bottom: -2px; margin-bottom: -2px;
@ -54,12 +53,20 @@ header.o_main_header{
color: $o-violet; color: $o-violet;
} }
} }
@include media-breakpoint-up(xl) {
width: $o-side-nav-width;
}
@include media-breakpoint-up(lg) {
padding-left: 3rem;
margin-right: 3rem;
} }
} }
.o_search { .o_search {
position: relative; position: relative;
width: 90%; width: 100%;
@include media-breakpoint-up(lg) {
max-width: 500px; max-width: 500px;
}
.btn{ .btn{
@include o-position-absolute($top: 50%, $right: 1rem); @include o-position-absolute($top: 50%, $right: 1rem);
@include transform (translateY(-50%)) ; @include transform (translateY(-50%)) ;
@ -78,9 +85,6 @@ header.o_main_header{
@include font-size($font-size-secondary); @include font-size($font-size-secondary);
} }
} }
.o_languages {
width: 120px;
}
} }
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
@ -94,6 +98,10 @@ header.o_main_header{
position: fixed; position: fixed;
top:$o-header-height; top:$o-header-height;
left:-100%; left:-100%;
&.o-mobile-show {
left:0;
width: 100%;
}
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
left:0; left:0;
} }
@ -244,8 +252,10 @@ header.o_main_header{
top: $o-header-height; top: $o-header-height;
right: 0; right: 0;
width: $o-on-page-width; width: $o-on-page-width;
height: calc(100% - #{$o-header-height}); height: 100%;
max-height: calc(100vh - #{$o-header-height});
padding: 3rem 3rem 3rem 0; padding: 3rem 3rem 3rem 0;
overflow-y: auto;
} }
h3 { h3 {
@ -279,8 +289,25 @@ header.o_main_header{
#wrap { #wrap {
margin-top: $o-header-height; margin-top: $o-header-height;
@include media-breakpoint-up(lg) {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
}
code {
display: inline-block;
color: inherit;
background: $doc_code-bg;
padding: 0 .3rem;
margin: 0.1rem;
border: 1px solid $gray-light;
overflow-wrap: anywhere;
}
iframe {
max-width: 100%;
}
main { main {
position: relative; position: relative;
@ -288,13 +315,14 @@ header.o_main_header{
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
left: $o-side-nav-width; left: $o-side-nav-width;
width: calc(100vw - #{$o-side-nav-width} - #{$o-on-page-width}); max-width: calc(100vw - (#{$o-side-nav-width} + var(--bs-gutter-x, 1.5rem)) - #{$o-on-page-width});
padding: 3rem; padding: 3rem;
margin: 0;
} }
&.index, &.doc-toc, &.has_code_col { &.index, &.doc-toc, &.has_code_col {
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
width: calc(100vw - #{$o-side-nav-width} ); max-width: calc(100vw - (#{$o-side-nav-width} + var(--bs-gutter-x, 1.5rem)) );
} }
} }
@ -380,20 +408,10 @@ header.o_main_header{
&.has_code_col { &.has_code_col {
article.doc-body { article.doc-body {
padding-left: 1rem;
padding-right: 1rem;
> *{ > *{
max-width: 100%; max-width: 100%;
} }
section {
position: relative;
display:block;
float: left;
width: 100%;
}
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
width: 100%; width: 100%;
padding-right: 0; padding-right: 0;
@ -405,20 +423,18 @@ header.o_main_header{
.o_git_link { .o_git_link {
top: .5rem; right: calc(#{$o-codecol-width} + 2rem);
right: calc(43% + 1rem);
} }
section { section {
> * { > * {
width: 54.633333%; width: $o-halfpage-width;
/* max-width: 600px; */
float: left; float: left;
clear: left; clear: left;
} }
> h1 { > h1 {
max-width: calc(54% - 120px); max-width: calc(#{$o-halfpage-width} - 120px);
} }
> h1, > h2, > h3, > h4, > h5, > h6 { > h1, > h2, > h3, > h4, > h5, > h6 {
@ -427,7 +443,7 @@ header.o_main_header{
} }
.doc-aside { .doc-aside {
width: 43%; width: $o-codecol-width;
float: none; float: none;
clear: none; clear: none;
margin-left: 57%; margin-left: 57%;
@ -493,16 +509,12 @@ header.o_main_header{
ul { ul {
list-style: none; list-style: none;
} padding-left: 0;
}
code { li {
display: inline-block; padding-bottom: .5rem;
color: inherit; }
background: $doc_code-bg; }
padding: 0 .3rem;
margin: 0.1rem;
border: 1px solid $gray-light;
} }
/* dt { /* dt {
@ -512,7 +524,7 @@ header.o_main_header{
} */ } */
// Search items highlighted // Search items highlighted
dt:target, span.highlighted { dt:target, span.highlighted {
background-color: lighten($color-alpha, 50%); background-color: lighten($warning, 15%);
} }
section { section {
@ -528,7 +540,7 @@ header.o_main_header{
color: $o-violet-dark; color: $o-violet-dark;
font-weight: $fw_bold; font-weight: $fw_bold;
max-width: calc(100% - 120px); max-width: calc(100% - 120px);
+ p { + *:not(h2) {
margin-top: 1rem; margin-top: 1rem;
} }
} }
@ -551,12 +563,42 @@ header.o_main_header{
font-weight: $fw_semibold; font-weight: $fw_semibold;
} }
img:not([alt="green"]):not([alt="orange"]):not([alt="red"]) {
border: 1px solid $gray-lighter;
background: $white;
padding: .5rem;
}
img:not([alt="green"]):not([alt="orange"]):not([alt="red"]), iframe {
margin-bottom: 1rem;
}
p > img {
border: none;
padding: 0;
margin-bottom: 0;
}
.figure {
.caption, .caption-text {
font-weight: $fw_semibold;
color: $gray;
}
.caption, .caption-text, .legend, .legend p{
font-style: italic;
margin: 0 auto;
}
&:not([class^="col"]) .legend {
max-width: 60%;
}
}
a.headerlink { a.headerlink {
text-decoration: none; text-decoration: none;
visibility: hidden !important; visibility: hidden !important;
&:after { &:after {
content: '#{$i-link}'; content: '#{$i-link}';
font-family: $icomoon-font-family !important; font-family: icomoon !important;
@include font-size($font-size-base); @include font-size($font-size-base);
vertical-align: middle; vertical-align: middle;
margin: 0 1rem 0 0; margin: 0 1rem 0 0;
@ -631,13 +673,6 @@ header.o_main_header{
font-weight: 600; font-weight: 600;
} }
img.img-fluid:not([alt="green"]):not([alt="orange"]):not([alt="red"]) {
border: 1px solid $gray-lighter;
background: $white;
margin-bottom: 1rem;
padding: .5rem;
}
.container .container:not([class^="col"]) { .container .container:not([class^="col"]) {
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -647,20 +682,6 @@ header.o_main_header{
text-align: left; text-align: left;
} }
.figure {
.caption, .caption-text {
font-weight: $fw_semibold;
color: $gray;
}
.caption, .caption-text, .legend, .legend p{
font-style: italic;
margin: 0 auto;
}
&:not([class^="col"]) .legend {
max-width: 60%;
}
}
// restyle numbers on lists // restyle numbers on lists
ol { ol {
/* list-style: none; /* list-style: none;