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 %}
<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 = [] %}
{% if pagename == master_doc %} {# The current page is the homepage #}
{% 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 ?#}
{% endif %}
<main class="{{ ' '.join(main_classes) }}">
<main class="container-fluid {{ ' '.join(main_classes) }}">
<div id="o_content">
{% if pagename == master_doc %}
{# Custom landing page on the root of the documentation #}

View File

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

View File

@ -1,4 +1,4 @@
<div class="o_languages me-2">
<div class="o_languages me-3">
<div class="dropdown">
{% if alternate_languages|length > 0 %}
<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">
<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">

View File

@ -1,8 +1,8 @@
<div class="o_versions row me-2">
<div class="col-4 col-form-label">
<label class="fw_bold small mr-2">Version</label>
<div class="o_versions row gx-2 me-3">
<div class="col col-form-label">
<label class="fw_bold small me-2">Version</label>
</div>
<div class="col-8">
<div class="col">
<div class="dropdown">
{% if alternate_versions|length > 0 %}
<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-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: '#{$icomoon-font-family}' !important;
font-family: 'icomoon' !important;
speak: never;
font-style: 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) {
content: '#{$icon-content}';
font-family: '#{$icomoon-font-family}' !important;
font-family: 'icomoon' !important;
@include font-size($font-size);
font-weight: $font-weight;
vertical-align: $v-align;

View File

@ -6,45 +6,19 @@
// Fonts
//------------------------------------------------------------------------------
@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-family: '#{$icomoon-font-family}';
src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?6i2y1w');
src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?6i2y1w#iefix') format('embedded-opentype'),
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-family: 'icomoon';
src: url('fonts/icomoon.woff2') format('woff2'),
url('fonts/icomoon.woff') format('woff');
font-weight: normal;
font-style: normal;
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{
-webkit-font-smoothing: antialiased;
-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-font-family: "icomoon" !default;
$icomoon-font-path: "fonts" !default;
$i-arrow-up: "\e948";
$i-arrow-down: "\e945";
$i-arrow-left: "\e946";
@ -236,9 +233,15 @@ $doc_cyan: $color-alpha;
// Header
$o-header-height: 90px;
$o-header-white: #ffffff;
// Navigation
$o-side-nav-width: 350px;
$o-on-page-width: 25%;
$o-header-white: #ffffff;
// has_code_col pages
$o-halfpage-width: 54%;
$o-codecol-width: 43%;
// Paths and Prefixes
$website-img-base-url: "../img/";

View File

@ -1,18 +1,11 @@
//
// BS Variables
//
// 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.
/* $enable-responsive-font-sizes: true; */
// Fonts
//
// 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;
$h2-font-size: 1.5rem;
$h3-font-size: 1.125rem;
@ -20,64 +13,12 @@ $h4-font-size: 1rem;
$h5-font-size: 1rem;
$h6-font-size: $font-size-secondary;
$display-line-height: 1;
/* $blockquote-font-size: $font-size-base !default; */
// Buttons
//
// For each of Bootstrap's buttons, define text, background, and border color.
$btn-font-size: $font-size-secondary;
$btn-font-weight: $fw_semibold;
$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
$dropdown-min-width: 4.5rem;

View File

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