[FIX] website: restore css loading for website elements
For some reason, with the recent changes and reverts with the editor, some CSS ended up lazy loaded even though it was needed straight ahead (switch, customize modal, etc). This commit restores the assets structure that worked before. Note: the website.edit_mode.scss file is however kept in the lazy loaded css even though it was not like that before. The part that should not be lazy loaded in it is moved to another file. task-2064157 closes odoo/odoo#36368 Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
qsm-odoo
@@ -1,226 +1,4 @@
|
||||
|
||||
@each $url in $o-theme-font-urls {
|
||||
@if $url {
|
||||
@import url("https://fonts.googleapis.com/css?family=#{unquote($url)}");
|
||||
}
|
||||
}
|
||||
|
||||
.modal.o_theme_customize_modal {
|
||||
.modal-dialog {
|
||||
@include o-position-absolute(0, 2%);
|
||||
width: 96%;
|
||||
max-width: 550px;
|
||||
}
|
||||
.modal-header {
|
||||
background-color: $o-brand-odoo;
|
||||
color: white;
|
||||
border-radius: 0;
|
||||
|
||||
* {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.close:hover, .close:focus {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav {
|
||||
padding: 0;
|
||||
|
||||
.nav-item {
|
||||
background-color: $o-brand-lightsecondary;
|
||||
|
||||
.nav-link {
|
||||
color: $o-main-text-color;
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
background-color: white;
|
||||
border: 1px solid #d9d7d7;
|
||||
border-left: 1px solid #333333;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: static !important;
|
||||
transform: none !important;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.o_theme_customize_option {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
|
||||
+ label {
|
||||
@include o-position-absolute(0, 0, 0, 0);
|
||||
width: auto;
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 24px;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover::after {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
@include o-position-absolute(0, 0, 0, 0);
|
||||
background-color: rgba(0, 32, 64, 0.03);
|
||||
}
|
||||
|
||||
&.o_switch {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
&:not(.dropdown-item) label {
|
||||
border: 2px solid transparent;
|
||||
background-color: $o-brand-lightsecondary;
|
||||
|
||||
&.checked {
|
||||
border-color: $o-brand-odoo;
|
||||
color: $o-brand-odoo;
|
||||
}
|
||||
}
|
||||
|
||||
&.o_theme_customize_with_widget {
|
||||
label {
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
|
||||
&.checked {
|
||||
border-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o_theme_customize_color {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
margin-left: auto;
|
||||
border: 1px solid black;
|
||||
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
@include o-position-absolute(0, 0, 0, 0);
|
||||
}
|
||||
&::before {
|
||||
background-image: url('/web_editor/static/src/img/transparent.png');
|
||||
}
|
||||
&::after {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.o_theme_customize_input {
|
||||
flex: 1 1 auto;
|
||||
text-align: right;
|
||||
|
||||
.fa-edit {
|
||||
visibility: hidden;
|
||||
color: $o-brand-primary;
|
||||
}
|
||||
}
|
||||
.o_theme_customize_option:hover .o_theme_customize_input .fa-edit {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.o_theme_customize_active_input {
|
||||
@include o-position-absolute(0, 0, 0, 0);
|
||||
width: auto;
|
||||
padding: 3px;
|
||||
|
||||
> * {
|
||||
height: 100% !important;
|
||||
|
||||
&.form-control {
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
&.form-control, .btn {
|
||||
padding: 2px 8px !important;
|
||||
text-align: right !important;
|
||||
font-size: $font-size-sm !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o_theme_customize_option_input {
|
||||
position: absolute;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.o_theme_customize_option_list {
|
||||
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.o_theme_customize_dropdown_btn {
|
||||
background-color: $o-brand-lightsecondary;
|
||||
}
|
||||
|
||||
$i: 1;
|
||||
@each $font in $o-theme-fonts {
|
||||
.o_theme_customize_option_font_#{$i} {
|
||||
font-family: if($font, $font, $font-family-base);
|
||||
|
||||
&.o_theme_customize_option > label > span,
|
||||
&.dropdown-toggle {
|
||||
&::before {
|
||||
content: nth($o-theme-font-names, $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
|
||||
.o_theme_customize_delete_google_font {
|
||||
@include o-position-absolute(1px, 1px, 1px, auto);
|
||||
padding: 0 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.o_homepage_editor_welcome_message {
|
||||
padding-top: 128px;
|
||||
padding-bottom: 128px;
|
||||
font-family: Roboto, $font-family-sans-serif;
|
||||
|
||||
.o_tooltip_container {
|
||||
transition: opacity 1s linear;
|
||||
|
||||
> .o_tooltip {
|
||||
@include o-position-absolute;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0 8px;
|
||||
opacity: 1;
|
||||
z-index: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o_editable {
|
||||
&:not(:empty), &[data-oe-type] {
|
||||
&:not([data-oe-model="ir.ui.view"]):not([data-oe-type="html"]):hover {
|
||||
|
||||
@@ -1,3 +1,224 @@
|
||||
@each $url in $o-theme-font-urls {
|
||||
@if $url {
|
||||
@import url("https://fonts.googleapis.com/css?family=#{unquote($url)}");
|
||||
}
|
||||
}
|
||||
|
||||
.modal.o_theme_customize_modal {
|
||||
.modal-dialog {
|
||||
@include o-position-absolute(0, 2%);
|
||||
width: 96%;
|
||||
max-width: 550px;
|
||||
}
|
||||
.modal-header {
|
||||
background-color: $o-brand-odoo;
|
||||
color: white;
|
||||
border-radius: 0;
|
||||
|
||||
* {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.close:hover, .close:focus {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav {
|
||||
padding: 0;
|
||||
|
||||
.nav-item {
|
||||
background-color: $o-brand-lightsecondary;
|
||||
|
||||
.nav-link {
|
||||
color: $o-main-text-color;
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
background-color: white;
|
||||
border: 1px solid #d9d7d7;
|
||||
border-left: 1px solid #333333;
|
||||
}
|
||||
&:hover, &:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
position: static !important;
|
||||
transform: none !important;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.o_theme_customize_option {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
> img {
|
||||
width: 100%;
|
||||
|
||||
+ label {
|
||||
@include o-position-absolute(0, 0, 0, 0);
|
||||
width: auto;
|
||||
background: transparent !important;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
min-height: 24px;
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover::after {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
@include o-position-absolute(0, 0, 0, 0);
|
||||
background-color: rgba(0, 32, 64, 0.03);
|
||||
}
|
||||
|
||||
&.o_switch {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
&:not(.dropdown-item) label {
|
||||
border: 2px solid transparent;
|
||||
background-color: $o-brand-lightsecondary;
|
||||
|
||||
&.checked {
|
||||
border-color: $o-brand-odoo;
|
||||
color: $o-brand-odoo;
|
||||
}
|
||||
}
|
||||
|
||||
&.o_theme_customize_with_widget {
|
||||
label {
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
|
||||
&.checked {
|
||||
border-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o_theme_customize_color {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
margin-left: auto;
|
||||
border: 1px solid black;
|
||||
|
||||
&::before, &::after {
|
||||
content: "";
|
||||
@include o-position-absolute(0, 0, 0, 0);
|
||||
}
|
||||
&::before {
|
||||
background-image: url('/web_editor/static/src/img/transparent.png');
|
||||
}
|
||||
&::after {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.o_theme_customize_input {
|
||||
flex: 1 1 auto;
|
||||
text-align: right;
|
||||
|
||||
.fa-edit {
|
||||
visibility: hidden;
|
||||
color: $o-brand-primary;
|
||||
}
|
||||
}
|
||||
.o_theme_customize_option:hover .o_theme_customize_input .fa-edit {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.o_theme_customize_active_input {
|
||||
@include o-position-absolute(0, 0, 0, 0);
|
||||
width: auto;
|
||||
padding: 3px;
|
||||
|
||||
> * {
|
||||
height: 100% !important;
|
||||
|
||||
&.form-control {
|
||||
background: white !important;
|
||||
}
|
||||
|
||||
&.form-control, .btn {
|
||||
padding: 2px 8px !important;
|
||||
text-align: right !important;
|
||||
font-size: $font-size-sm !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o_theme_customize_option_input {
|
||||
position: absolute;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.o_theme_customize_option_list {
|
||||
box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.o_theme_customize_dropdown_btn {
|
||||
background-color: $o-brand-lightsecondary;
|
||||
}
|
||||
|
||||
$i: 1;
|
||||
@each $font in $o-theme-fonts {
|
||||
.o_theme_customize_option_font_#{$i} {
|
||||
font-family: if($font, $font, $font-family-base);
|
||||
|
||||
&.o_theme_customize_option > label > span,
|
||||
&.dropdown-toggle {
|
||||
&::before {
|
||||
content: nth($o-theme-font-names, $i);
|
||||
}
|
||||
}
|
||||
}
|
||||
$i: $i + 1;
|
||||
}
|
||||
|
||||
.o_theme_customize_delete_google_font {
|
||||
@include o-position-absolute(1px, 1px, 1px, auto);
|
||||
padding: 0 8px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.o_homepage_editor_welcome_message {
|
||||
padding-top: 128px;
|
||||
padding-bottom: 128px;
|
||||
font-family: Roboto, $font-family-sans-serif;
|
||||
|
||||
.o_tooltip_container {
|
||||
transition: opacity 1s linear;
|
||||
|
||||
> .o_tooltip {
|
||||
@include o-position-absolute;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0 8px;
|
||||
opacity: 1;
|
||||
z-index: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// INPUTS
|
||||
.o_switch {
|
||||
display: flex;
|
||||
|
||||
@@ -94,7 +94,6 @@
|
||||
<link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden.scss"/>
|
||||
</t>
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.wysiwyg.scss"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.editor.ui.scss"/>
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.edit_mode.scss"/>
|
||||
|
||||
<script type="text/javascript" src="/website/static/src/js/editor/editor.js"/>
|
||||
@@ -109,6 +108,8 @@
|
||||
<template id="website.assets_editor" name="Website Editor Assets (used in website editor)">
|
||||
<t t-call="web._assets_helpers"/>
|
||||
|
||||
<link rel="stylesheet" type="text/scss" href="/website/static/src/scss/website.editor.ui.scss"/>
|
||||
|
||||
<script type="text/javascript" src="/website/static/src/js/editor/editor_menu.js"/>
|
||||
<script type="text/javascript" src="/website/static/src/js/editor/editor_menu_translate.js"/>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user