pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website, *: improve the default theme

Browse Source 
*: web, web_editor, portal, theme_default, website_sale

The goal of this commit is to improve the overall style of the default
website theme mostly by overriding Bootstrap variables with a bit of
customization for more advanced changes.

task-3097005

Part-of: odoo/odoo#120302
Co-authored-by: Brieuc-brd <brd@odoo.com>
Co-authored-by: Antoine (anso) <anso@odoo.com>
This commit is contained in:
stefanorigano (SRI)
2023-10-08 10:45:45 +00:00
committed by qsm-odoo
co-authored by Brieuc-brd Antoine
parent 302231a7c1
commit 0d96be06fa
8 changed files with 79 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/portal/static/src/scss/portal.scss
-7
View File
@@ -364,13 +364,6 @@ img, .media_iframe_video, .o_image {
background-repeat: no-repeat;
}
form label {
font-weight: $font-weight-bold;
&.label-optional {
font-weight: $font-weight-normal;
}
}
.o_portal_contact_img {
width: 2.3em;
height: 2.3em;
addons/theme_default/static/description/theme_default_screenshot.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 28 KiB

addons/web/static/src/scss/bootstrap_overridden_frontend.scss
Vendored
-11
View File
@@ -76,17 +76,6 @@ $form-range-thumb-active-bg: $primary !default;
// when used with background classes, it should not be forced to a gray color.
$figure-caption-color: inherit !default;
// Accordion
$accordion-border-width: 0 !default;
$accordion-button-color: inherit !default;
$accordion-button-active-bg: inherit !default;
$accordion-button-active-color: inherit !default;
$accordion-icon-color: $accordion-button-color !default;
$accordion-icon-width: 1rem !default;
$accordion-icon-transform: rotate(0deg) !default;
$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path transform='#{rotate(90, 8, 8)}' fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
// Offcanvas
$offcanvas-border-width: 0 !default;
addons/web_editor/static/src/scss/web_editor.variables.scss
+4 -4
View File
@@ -287,11 +287,11 @@ $o-base-color-palette: (
) !default;
$o-color-palettes: (
'base-1': (
'o-color-1': scale-color($o-enterprise-action-color, $saturation: -50%, $lightness: 20%),
'o-color-2': scale-color($o-enterprise-color, $saturation: -50%),
'o-color-3': #F6F6F6,
'o-color-1': $o-enterprise-color,
'o-color-2': #8595A2,
'o-color-3': #F3F2F2,
'o-color-4': #FFFFFF,
'o-color-5': #383E45,
'o-color-5': #111827,
),
'base-2': (
'o-color-1': #337ab7,
addons/website/static/src/js/tours/homepage.js
+24 -13
View File
@@ -4,40 +4,51 @@ import wTourUtils from "@website/js/tours/tour_utils";
const snippets = [
{
id: 's_cover',
name: 'Cover',
},
{
id: 's_text_image',
name: 'Text - Image',
id: 's_banner',
name: 'Banner',
},
{
id: 's_three_columns',
name: 'Columns',
},
{
id: 's_picture',
name: 'Picture',
id: 's_text_image',
name: 'Image - Text',
},
{
id: 's_quotes_carousel',
name: 'Quotes',
id: 's_masonry_block',
name: 'Masonry',
},
{
id: 's_title',
name: 'Title',
},
{
id: 's_showcase',
name: 'Showcase',
},
{
id: 's_call_to_action',
name: 'Call to Action',
},
{
id: 's_quotes_carousel',
name: 'Quotes',
},
];
wTourUtils.registerThemeHomepageTour('homepage', () => [
wTourUtils.dragNDrop(snippets[0]),
wTourUtils.dragNDrop(snippets[0], 'top'),
wTourUtils.clickOnText(snippets[0], 'h1'),
wTourUtils.goBackToBlocks(),
wTourUtils.dragNDrop(snippets[1]),
wTourUtils.dragNDrop(snippets[2]),
wTourUtils.clickOnSnippet(snippets[2], 'top'),
wTourUtils.changeBackgroundColor(),
wTourUtils.goBackToBlocks(),
wTourUtils.dragNDrop(snippets[3]),
wTourUtils.dragNDrop(snippets[4], 'top'),
wTourUtils.dragNDrop(snippets[5]),
wTourUtils.clickOnSnippet(snippets[5], 'top'),
wTourUtils.changeBackgroundColor(),
wTourUtils.dragNDrop(snippets[6]),
wTourUtils.dragNDrop(snippets[7]),
]);
addons/website/static/src/scss/bootstrap_overridden.scss
Vendored
+33 -7
View File
@@ -72,13 +72,6 @@ $link-hover-color: auto-contrast(darken($link-color, 15%), $body-bg, 'o-cc1-link
$link-decoration: if(o-website-value('link-underline') == 'always', underline, none) !default;
$link-hover-decoration: if(o-website-value('link-underline') != 'never', underline, none) !default;
// Table
$table-striped-bg-factor: .01 !default;
$table-cell-padding-x: .75rem !default;
$table-cell-padding-y: .75rem !default;
$table-cell-padding-x-sm: .3rem !default;
$table-cell-padding-y-sm: .3rem !default;
// Grid
$grid-gutter-width: 30px !default;
@@ -144,6 +137,10 @@ $h6-margin-bottom: o-website-value('h6-margin-bottom') or $headings-margin-botto
$headings-color: o-color('o-cc1-headings') !default;
$lead-font-size: 1.125rem !default;
// Note that we currently load only 700 for Google fonts, we may consider trying
// to load more or this one only instead. Meanwhile, this fallbacks on 700
// if 600 is not available anyway.
$font-weight-bold: 600 !default;
$text-muted: mute-color($body-color) !default;
@@ -151,6 +148,11 @@ $text-muted: mute-color($body-color) !default;
//
// Customizes the `.table` component with basic values, each used across all table variations.
$table-striped-bg-factor: .01 !default;
$table-cell-padding-x: .75rem !default;
$table-cell-padding-y: .75rem !default;
$table-cell-padding-x-sm: .3rem !default;
$table-cell-padding-y-sm: .3rem !default;
$table-border-color: $border-color !default;
$table-group-separator-color: $table-border-color !default;
@@ -240,17 +242,41 @@ $o-btn-outline-border-width-defaults: () !default;
$o-navbar-nav-pills-link-padding-x: if(o-website-value('header-links-style') == 'pills', 1rem * 1.5, null) !default;
$o-navbar-nav-pills-link-border-radius: if(o-website-value('header-links-style') == 'pills', 10rem, null) !default;
// Borders
$border-radius-sm: .3rem !default;
$border-radius: .4rem !default;
$border-radius-lg: .6rem !default;
$border-radius-pill: 50rem !default; // BS Default
// Accordion
$accordion-color: inherit !default;
$accordion-bg: inherit !default;
$accordion-padding-x: 1.5rem !default;
$accordion-border-width: 1px !default;
$accordion-border-color: $border-color !default;
$accordion-button-active-bg: $light !default;
$accordion-button-active-color: color-contrast($light) !default;
$accordion-button-focus-box-shadow: none !default;
$accordion-icon-color: $body-color !default;
$accordion-icon-active-color: $accordion-button-active-color !default;
// Popovers
$popover-bg: $body-bg !default;
$popover-border-color: $border-color !default;
$popover-arrow-color: $body-bg !default;
$popover-arrow-outer-color: $border-color !default;
// Shadows
$box-shadow: 0px 4px 16px rgba($black, 0.12) !default;
$box-shadow-sm: 0px 1px 3px rgba($black, .1) !default;
$box-shadow-lg: 0px 12px 32px rgba($black, .175) !default;
// Cards
$card-border-color: $border-color !default;
// Modals
$modal-header-border-width: 0 !default;
$modal-footer-border-width: 0 !default;
// HR Separator
$hr-color: $border-color !default;
addons/website/static/src/scss/primary_variables.scss
+12 -6
View File
@@ -1983,7 +1983,7 @@ $o-base-website-values-palette: (
'btn-padding-x': null, // Default to BS
'btn-font-size': null, // Default to BS
'btn-padding-y-sm': null, // Default to portal value
'btn-padding-x-sm': null, // Default to portal value
'btn-padding-x-sm': null, // Default to BS
'btn-font-size-sm': null, // Default to BS
'btn-padding-y-lg': null, // Default to BS
'btn-padding-x-lg': null, // Default to BS
@@ -2054,6 +2054,12 @@ $o-website-values-palettes: (
// define in $o-theme-font-configs (for the base one). For the default
// website, we want to specifically use the system fonts.
'font': 'SYSTEM_FONTS',
'btn-padding-x': 1rem,
'btn-padding-x-sm': .5rem,
'btn-padding-y-lg': 1rem,
'btn-padding-x-lg': 2.5rem,
'btn-border-radius-lg': 2rem,
),
) !default;
$o-website-values-palette-number: 1 !default;
@@ -2066,11 +2072,11 @@ $o-user-website-values: () !default;
// Fonts
//------------------------------------------------------------------------------
// Those are BS values, except BS hardcodes them inside the $hx-font-size
// variables directly and don't make them customizable.
$o-theme-h1-font-size-multiplier: 2.5 !default;
$o-theme-h2-font-size-multiplier: 2 !default;
$o-theme-h3-font-size-multiplier: 1.75 !default;
// These variables mirror BS multipliers behavior, except that in BS those are
// hardcoded in '$h[x]-font-size' declarations and are not customizable.
$o-theme-h1-font-size-multiplier: 3 !default;
$o-theme-h2-font-size-multiplier: 2.5 !default;
$o-theme-h3-font-size-multiplier: 2 !default;
$o-theme-h4-font-size-multiplier: 1.5 !default;
$o-theme-h5-font-size-multiplier: 1.25 !default;
$o-theme-h6-font-size-multiplier: 1 !default;
addons/website_sale/views/templates.xml
+6 -6
View File
@@ -509,7 +509,7 @@
<div id="o_wsale_offcanvas_content" class="accordion accordion-flush flex-grow-1 overflow-auto">
<div class="d-block d-lg-none accordion-item" t-if="hasPricelistDropdown">
<h2 id="o_wsale_offcanvas_orderby_header" class="accordion-header mb-0">
<button class="o_wsale_offcanvas_title accordion-button border-top rounded-0 collapsed"
<button class="o_wsale_offcanvas_title accordion-button rounded-0 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#o_wsale_offcanvas_pricelist"
@@ -548,7 +548,7 @@
<t t-if="isSortingBy" t-set="isSortingBy" t-value="isSortingBy[0][1]"/>
<t t-else="" t-set="isSortingBy" t-value="website.shop_default_sort"/>
<h2 id="o_wsale_offcanvas_orderby_header" class="accordion-header mb-0">
<button class="o_wsale_offcanvas_title accordion-button border-top rounded-0 collapsed"
<button class="o_wsale_offcanvas_title accordion-button rounded-0 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#o_wsale_offcanvas_orderby"
@@ -584,7 +584,7 @@
<div t-if="opt_wsale_categories"
class="accordion-item">
<h2 id="o_wsale_offcanvas_categories_header" class="accordion-header mb-0">
<button class="o_wsale_offcanvas_title accordion-button border-top rounded-0 collapsed"
<button class="o_wsale_offcanvas_title accordion-button rounded-0 collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#o_wsale_offcanvas_categories"
@@ -617,9 +617,9 @@
<t t-foreach="a.value_ids" t-as="v" t-if="v.id in attrib_set" t-set="_status" t-value="'active'"/>
<div t-if="a.value_ids and len(a.value_ids) &gt; 1"
t-attf-class="accordion-item {{(_status == 'active') and 'order-1' or 'order-2'}}">
t-attf-class="accordion-item border-top-0 {{(_status == 'active') and 'order-1' or 'order-2'}}">
<h2 class="accordion-header mb-0" t-attf-id="o_wsale_offcanvas_attribute_{{a.id}}_header">
<button t-attf-class="o_wsale_offcanvas_title accordion-button border-top rounded-0 {{ not attrib_values and 'collapsed'}}"
<button t-attf-class="o_wsale_offcanvas_title accordion-button rounded-0 {{ not attrib_values and 'collapsed'}}"
type="button"
t-att-data-status="_status"
data-bs-toggle="collapse"
@@ -846,7 +846,7 @@
<i class="oi oi-close"/>
</a>
<t t-foreach="attributes" t-as="a">
<div class="accordion-item nav-item mb-1" t-if="a.value_ids and len(a.value_ids) &gt; 1">
<div class="accordion-item nav-item mb-1 border-0" t-if="a.value_ids and len(a.value_ids) &gt; 1">
<h6 class="mb-3">
<b class="o_products_attributes_title d-none d-lg-block" t-field="a.name"/>
</h6>