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

[IMP] website, *: introduce new classes to color snippets

Browse Source 
*: web, web_editor, website_blog, website_event

New o_cc${xxx} classes where ${xxx} is a number [1-5] to style snippets:
they come with a background color, a text color, headings colors, a
link color, primary button colors and secondary button colors which
will later be possible to customize by the user.

The classes are made so that they are working on two levels. So if a
column receives a color class and the snippet too, everything will work
fine. More than 2 levels are not supported and the editor is made so
those cases should not appear. See o_colored_level class.

Part of https://github.com/odoo/odoo/pull/45856
task-2197038
This commit is contained in:
qsm-odoo
2020-06-02 09:42:19 +00:00
parent 6aa93a9c06
commit 69190959ce
22 changed files with 401 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/scss/bootstrap_overridden_frontend.scss
Vendored
+12
View File
@@ -3,3 +3,15 @@
// Font, line-height, and color for body text, headings, and more.
$font-size-base: (14 / 16) * 1rem !default;
// Inherit color for blockquote-footer, use text-muted on top of it if you want
// a muted one. This is defined here to be consistent in the whole frontend, as
// when used with background classes, it should not be forced to a gray color.
$blockquote-small-color: inherit !default;
// Figures
// Inherit color for figure-caption, use text-muted on top of it if you want
// a muted one. This is defined here to be consistent in the whole frontend, as
// when used with background classes, it should not be forced to a gray color.
$figure-caption-color: inherit !default;
addons/web/static/src/scss/bs_mixins_overrides.scss
+21 -7
View File
@@ -14,19 +14,33 @@ $enable-deprecation-messages: false !default;
@return o-get-most-contrast($color, $light, $dark, $background, $threshold, $cross-mix);
}
@mixin o-bg-color($color, $text-color: null, $with-muted: true) {
// This placeholder regroups the rules that will apply on all elements with a
// bg-* class (see o-bg-color, bg-variant). The optimized-css way would be to
// have a common class for them all.
%o-bg-color-component-color-reset {
h1, h2, h3, h4, h5, h6 {
color: inherit;
}
}
$o-color-extras-nesting-selector: '&' !default;
@mixin o-bg-color($color, $text-color: null, $with-extras: true, $important: true, $nesting-selector: $o-color-extras-nesting-selector) {
@if ($color) {
$-yiq-color: if($text-color, $text-color, color-yiq($color));
background-color: $color !important;
background-color: $color#{if($important, ' !important', '')};
color: $-yiq-color; // not important so that text utilities still work
@if ($with-muted) {
.text-muted {
color: scale-color($-yiq-color, $alpha: -30%) !important;
@if $with-extras {
#{$nesting-selector} {
@extend %o-bg-color-component-color-reset;
.text-muted {
// Always important since the basic BS rule is important
color: scale-color($-yiq-color, $alpha: -30%) !important;
}
}
}
@include o-bg-color-extension($color, $text-color, $with-muted);
}
}
addons/web/static/src/scss/utils.scss
-3
View File
@@ -197,9 +197,6 @@
@return $-with-support-font;
}
// Mixin which allows to extend the BS4 bg-variant mixin
@mixin o-bg-color-extension($color, $text-color, $with-muted) {}
// Function to remove all null values of a map
@function o-map-omit($map) {
$-map: ();
addons/web_editor/static/src/js/editor/snippets.options.js
+38
View File
@@ -2273,6 +2273,44 @@ const registry = {};
//::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
/**
* Marks color levels of any element that may get or has a color classes. This
* is done for the specific main colorpicker option so that those are marked on
* snippet drop (so that base snippet definition do not need to care about that)
* and on first focus (for compatibility).
*/
registry.MainColorpicker = SnippetOptionWidget.extend({
/**
* @override
*/
start: function () {
this._markColorLevel();
return this._super(...arguments);
},
/**
* @override
*/
onBuilt: function () {
this._markColorLevel();
},
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* Adds a specific class indicating the element is colored so that nested
* color classes work (we support one-level). Removing it is not useful,
* technically the class can be added on anything that *may* receive a color
* class: this does not come with any CSS rule.
*
* @private
*/
_markColorLevel: function () {
this.$target.addClass('o_colored_level');
},
});
registry.sizing = SnippetOptionWidget.extend({
/**
* @override
addons/web_editor/static/src/js/wysiwyg/widgets/link_dialog.js
+13 -1
View File
@@ -60,7 +60,19 @@ var LinkDialog = Dialog.extend({
this.needLabel = !r || (r.sc === r.ec && r.so === r.eo);
if (this.data.range) {
this.data.iniClassName = $(this.data.range.sc).filter("a").attr("class") || "";
const $link = $(this.data.range.sc).filter("a");
this.data.iniClassName = $link.attr("class") || "";
this.colorCombinationClass = false;
let $node = $link;
while ($node.length && !$node.is('body')) {
const className = $node.attr('class') || '';
const m = className.match(/\b(o_cc\d+)\b/g);
if (m) {
this.colorCombinationClass = m[0];
break;
}
$node = $node.parent();
}
this.data.className = this.data.iniClassName.replace(/(^|\s+)btn(-[a-z0-9_-]*)?/gi, ' ');
var is_link = this.data.range.isOnAnchor();
addons/web_editor/static/src/scss/bootstrap_overridden.scss
Vendored
+11 -3
View File
@@ -3,16 +3,22 @@ $yiq-contrasted-threshold: false !default;
// Automatically update bootstrap colors map (unused by BS itself)
$colors: () !default;
$colors: map-merge($o-color-palette, $colors);
@each $name, $color in $o-color-palette {
$colors: map-merge(('#{$name}': o-color($color)), $colors);
}
// Automatically extend bootstrap to create theme background/text/button classes
$theme-colors: () !default;
$theme-colors: map-merge($o-theme-color-palette, $theme-colors);
@each $name, $color in $o-theme-color-palette {
$theme-colors: map-merge(('#{$name}': o-color($color)), $theme-colors);
}
// Automatically extend bootstrap gray palette (the theme palette is supposed to
// at least declare white and black)
$grays: () !default;
$grays: map-merge($o-gray-color-palette, $grays);
@each $name, $color in $o-gray-color-palette {
$grays: map-merge(('#{$name}': o-color($color)), $grays);
}
// Bootstrap use standard variables to define individual colors which are then
// placed into a map which is then used to get the value of each individual
@@ -55,3 +61,5 @@ $gray-700: gray('700') !default;
$gray-800: gray('800') !default;
$gray-900: gray('900') !default;
$black: gray('black') !default;
$o-color-system-initialized: true;
addons/web_editor/static/src/scss/secondary_variables.scss
+61 -8
View File
@@ -6,9 +6,6 @@
// Colors
$o-color-palette: nth($o-color-palettes, $o-color-palette-number) !default;
$o-color-palette: map-merge($o-base-color-palette, o-map-omit($o-color-palette));
@function palette-color($key) {
@return map-get($o-color-palette, $key);
}
// Theme colors
$o-theme-color-palette: nth($o-theme-color-palettes, $o-theme-color-palette-number) !default;
@@ -27,9 +24,6 @@ $o-theme-color-palette: map-merge((
'dark': darken(desaturate($-main-color, 80%), min(70%, max(0%, $-main-color-lightness - 10%))), // Does not lower under 10% lightness
), o-map-omit($o-theme-color-palette));
$o-theme-color-palette: map-merge($o-base-theme-color-palette, o-map-omit($o-theme-color-palette));
@function palette-theme-color($key) {
@return map-get($o-theme-color-palette, $key);
}
// Gray colors
// Extend grays with transparent ones (for some reason, BS4 create black-50 and
@@ -37,6 +31,65 @@ $o-theme-color-palette: map-merge($o-base-theme-color-palette, o-map-omit($o-the
$o-gray-color-palette: nth($o-gray-color-palettes, $o-gray-color-palette-number) !default;
$o-gray-color-palette: map-merge($o-transparent-grays, o-map-omit($o-gray-color-palette));
$o-gray-color-palette: map-merge($o-base-gray-color-palette, o-map-omit($o-gray-color-palette));
@function palette-gray($key) {
@return map-get($o-gray-color-palette, $key);
// Color combinations
$o-color-combinations: nth($o-color-combinations-presets, $o-color-combinations-preset-number) !default;
$o-color-system-initialized: false;
// Returns:
// - true if the given name is a css color or null
// - false if a potential valid color name
// - throws an error if the given arg cannot reference a color
@function check-color-identifier-type($name) {
$-type: type-of($name);
@if $-type == 'color' or $-type == 'null' {
@return true;
} @else if $-type != 'string' {
@error "Color name '#{$name}' is of unsupported type '#{$-type}'";
}
@return false;
}
// Looks up for the color related to the given name in the related odoo palettes
// following redirection a maximum number of time (by default none).
@function o-related-color($name, $max-recursions: 0, $original-name: $name) {
@if $max-recursions < 0 or check-color-identifier-type($name) {
@return $name;
}
$-value: null;
@if map-has-key($o-color-palette, $name) {
$-value: map-get($o-color-palette, $name);
} @else if map-has-key($o-theme-color-palette, $name) {
$-value: map-get($o-theme-color-palette, $name);
} @else if map-has-key($o-gray-color-palette, $name) {
$-value: map-get($o-gray-color-palette, $name);
}
@return o-related-color($-value, $max-recursions - 1, $original-name);
}
// Function which allows to retrieve a color value from a name, the color being
// either in $theme-colors, $grays or $colors maps. If those maps are not
// initialized yet, it will look up the color in the related odoo palettes.
@function o-color($name) {
@if check-color-identifier-type($name) {
@return $name;
}
// When the system is initialized, it means that the bootstrap maps have
// been configured and contain a direct mapping between color name -> css
// value. We can thus search in those.
@if $o-color-system-initialized {
@if map-has-key($colors, $name) {
@return color($name);
}
@if map-has-key($theme-colors, $name) {
@return theme-color($name);
}
@if map-has-key($grays, $name) {
@return gray($name);
}
}
// If not initialized, search the css color value in selected color palettes
@return o-related-color($name, $max-recursions: 10);
}
addons/web_editor/static/src/scss/web_editor.common.scss
+125
View File
@@ -517,3 +517,128 @@ blockquote {
border-left: 5px solid $gray-300;
font-style: italic
}
// Bg/text color classes generation
.o_cc {
#{$o-color-extras-nesting-selector} {
// Re-force dropdown-item colors inside presets otherwise the presets
// 'link' colors take over.
.dropdown-menu .dropdown-item { // Need to add +1 priority thanks to
// .dropdown-menu to counter a:not(.btn)
&, h6 { // Quick fix: sometimes we use h6 in dropdowns
color: $dropdown-link-color;
@include hover-focus {
color: $dropdown-link-hover-color;
}
}
&.disabled,
&:disabled {
&, h6 { // Quick fix: sometimes we use h6 in dropdowns
color: $dropdown-link-disabled-color;
}
}
}
}
}
@for $index from 1 through length($o-color-combinations) {
$config: nth($o-color-combinations, $index);
$-bg: map-get($config, 'bg');
$-text: map-get($config, 'text');
$-headings: map-get($config, 'headings');
$-h2: map-get($config, 'h2');
$-h3: map-get($config, 'h3');
$-h4: map-get($config, 'h4');
$-h5: map-get($config, 'h5');
$-h6: map-get($config, 'h6');
$-link: map-get($config, 'link');
$-btn-primary: map-get($config, 'btn-primary');
$-btn-primary-border: map-get($config, 'btn-primary-border');
$-btn-secondary: map-get($config, 'btn-secondary');
$-btn-secondary-border: map-get($config, 'btn-secondary-border');
// Those color classes color multiple elements when applied on a snippet.
// Those rules are not important so that they can be overridden through
// bg and text utility classes. **
.o_cc#{$index} {
// Background & Text
@include o-bg-color(o-color($-bg), o-color($-text), $important: false);
#{$o-color-extras-nesting-selector} {
// Headings
h1, h2, h3, h4, h5, h6 {
// 'inherit' comes from the o-bg-color mixin
color: o-color($-headings);
}
h2, h3, h4, h5, h6 {
color: o-color($-h2);
}
h3, h4, h5, h6 {
color: o-color($-h3);
}
h4, h5, h6 {
color: o-color($-h4);
}
h5, h6 {
color: o-color($-h5);
}
h6 {
color: o-color($-h6);
}
// Links
$-link-color: if($-link, o-color($-link), theme-color('primary'));
$-link-hover-color: darken($-link-color, 15%);
a:not(.btn), .btn-link {
color: $-link-color;
@include hover {
color: $-link-hover-color;
}
}
// Buttons
// Primary
$-btn-primary-color: if($-btn-primary, o-color($-btn-primary), theme-color('primary'));
$-btn-primary-border-color: if($-btn-primary-border, o-color($-btn-primary-border), $-btn-primary-color);
.btn-fill-primary {
@include button-variant($-btn-primary-color, $-btn-primary-border-color);
}
.btn-outline-primary {
@include button-outline-variant($-btn-primary-border-color);
}
// Secondary
$-btn-secondary-color: if($-btn-secondary, o-color($-btn-secondary), theme-color('secondary'));
$-btn-secondary-border-color: if($-btn-secondary-border, o-color($-btn-secondary-border), $-btn-secondary-color);
.btn-fill-secondary {
@include button-variant($-btn-secondary-color, $-btn-secondary-border-color);
}
.btn-outline-secondary {
@include button-outline-variant($-btn-secondary-border-color);
}
// 'Active' states. Note: this only emulates very common components
// used in snippets. This might need to be more complex the day we
// can apply color combinations anywhere (page-item, ...).
.nav-pills {
.nav-link.active,
.show > .nav-link {
background-color: $-btn-primary-color;
color: color-yiq($-btn-primary-color);
}
}
.dropdown-menu .dropdown-item { // Need to add +1 priority thanks to
// .dropdown-menu (see .o_cc).
&.active,
&:active {
&, h6 { // Quick fix: sometimes we use h6 in dropdowns
@include gradient-bg($-btn-primary-color);
color: color-yiq($-btn-primary-color);
}
}
}
}
}
}
addons/web_editor/static/src/scss/web_editor.variables.scss
+56 -1
View File
@@ -338,7 +338,7 @@ $o-theme-color-palette-number: 1 !default;
// Greyscale transparent colours
// Note: BS values are forced by default in every palette as the values can
// be used in bootstrap_overridden.scss files through the palette-gray function.
// be used in bootstrap_overridden.scss files through the o-color function.
// Also, all of the gray colors generates bg- classes in Odoo so black and white
// are added for the same reason.
@@ -370,6 +370,61 @@ $o-gray-color-palettes: (
) !default;
$o-gray-color-palette-number: 1 !default;
// Color combinations
$o-color-combinations-presets: (
(
(
'bg': #FFFFFF,
'text': null,
'headings': null,
'link': null,
'btn-primary': null,
'btn-secondary': null,
),
(
'bg': 'gamma',
'text': null,
'headings': 'alpha',
'link': null,
'btn-primary': null,
'btn-secondary': null,
),
(
'bg': 'beta',
'text': null,
'headings': null,
'link': null,
'btn-primary': null,
'btn-secondary': 'gamma',
),
(
'bg': 'alpha',
'text': null,
'headings': null,
'link': 'epsilon',
'btn-primary': 'epsilon',
'btn-secondary': 'gamma',
),
(
'bg': 'epsilon',
'text': null,
'headings': 'delta',
'link': null,
'btn-primary': null,
'btn-secondary': 'gamma',
),
),
) !default;
$o-color-combinations-preset-number: 1;
// Translations
$o-we-content-to-translate-color: rgb(255, 255, 90) !default;
$o-we-translated-content-color: rgb(120, 215, 110) !default;
// We allow snippets to be colored and elements like card and columns to be
// colored as well. We need components targeted by those colored classes to
// use the deepest coloring element config. We only allow here for this to
// work for one level of nesting. Note: snippets which can contain other
// snippets will have problem because of this; this is a limitation of the
// system until a better solution is found.
$o-color-extras-nesting-selector: '&, .o_colored_level &';
addons/web_editor/static/src/xml/wysiwyg.xml
+11 -8
View File
@@ -461,13 +461,15 @@
<div class="form-group row">
<label class="col-form-label col-md-3">Type</label>
<div class="col-md-9 d-flex align-items-center">
<t t-foreach="widget.colorsData" t-as="colorData">
<label role="button" class="m-0 mr-2">
<input type="radio" name="link_style_color" class="d-none link-style" t-att-value="colorData.type"/>
<span t-esc="colorData.label"
t-attf-class="o_btn_preview btn btn-sm btn-#{colorData.btnPreview} #{colorData.type ? '' : 'px-0'}"/>
</label>
</t>
<div t-attf-class="#{widget.colorCombinationClass ? ('p-2 ' + widget.colorCombinationClass) : ''}">
<t t-foreach="widget.colorsData" t-as="colorData">
<label role="button" class="m-0 mr-2">
<input type="radio" name="link_style_color" class="d-none link-style" t-att-value="colorData.type"/>
<span t-esc="colorData.label"
t-attf-class="o_btn_preview btn btn-sm btn-#{colorData.btnPreview} #{colorData.type ? '' : 'px-0'}"/>
</label>
</t>
</div>
</div>
</div>
<div id="o_link_dialog_button_opts_collapse" class="collapse">
@@ -509,7 +511,8 @@
<div class="col-lg-4 o_link_dialog_preview">
<div class="form-group text-center">
<label>Preview</label>
<div style="overflow-x: auto; max-width: 100%; max-height: 200px;">
<div t-attf-class="#{widget.colorCombinationClass ? ('p-2 ' + widget.colorCombinationClass) : ''}"
style="overflow-x: auto; max-width: 100%; max-height: 200px;">
<a href="#" id="link-preview" aria-label="Preview" title="Preview"/>
</div>
</div>
addons/website/models/mixins.py
+1 -1
View File
@@ -105,7 +105,7 @@ class WebsiteCoverPropertiesMixin(models.AbstractModel):
def _default_cover_properties(self):
return {
"background_color_class": "bg-secondary",
"background_color_class": "o_cc3",
"background-image": "none",
"opacity": "0.2",
"resize_class": "o_half_screen_height",
addons/website/static/src/js/editor/snippets.options.js
+2 -2
View File
@@ -1824,8 +1824,8 @@ options.registry.CoverProperties = options.Class.extend({
});
const color = colorPickerWidget._value;
const isCSSColor = ColorpickerWidget.isCSSColor(color);
this.$target[0].dataset.bgColorClass = isCSSColor ? '' : 'bg-' + color;
this.$target[0].dataset.bgColorStyle = isCSSColor ? `background-color:${color};` : '';
this.$target[0].dataset.bgColorClass = isCSSColor ? '' : weUtils.computeColorClasses([color])[0];
this.$target[0].dataset.bgColorStyle = isCSSColor ? `background-color: ${color};` : '';
},
//--------------------------------------------------------------------------
addons/website/static/src/scss/bootstrap_overridden.scss
Vendored
+9 -9
View File
@@ -7,19 +7,19 @@
// depending on its contrast. Themes should be careful if they decide to
// override those values. This would be simplified by giving the user the choice
// for its dark *and* light text colors.
$-light: if(palette-gray('white') != null, palette-gray('white'), #FFFFFF);
$-dark: if(palette-gray('900') != null, palette-gray('900'), #212529);
$-text: if(palette-color('text') != null, palette-color('text'), $-dark);
$-is-light: (o-get-most-contrast($-text, $-light, $-dark, palette-color('body'), $cross-mix: false) == $-dark);
$yiq-text-light: if($-is-light, palette-color('text'), null) !default;
$yiq-text-dark: if($-is-light, null, palette-color('text')) !default;
$-light: if(o-color('white') != null, o-color('white'), #FFFFFF);
$-dark: if(o-color('900') != null, o-color('900'), #212529);
$-text: if(o-color('text') != null, o-color('text'), $-dark);
$-is-light: (o-get-most-contrast($-text, $-light, $-dark, o-color('body'), $cross-mix: false) == $-dark);
$yiq-text-light: if($-is-light, o-color('text'), null) !default;
$yiq-text-dark: if($-is-light, null, o-color('text')) !default;
// Body
//
// Settings for the `<body>` element.
$body-bg: palette-color('body') !default;
$body-color: palette-color('text') !default;
$body-bg: o-color('body') !default;
$body-color: o-color('text') !default;
// Links
//
@@ -44,7 +44,7 @@ $h5-font-size: $font-size-base * $o-theme-h5-font-size-multiplier !default;
$h6-font-size: $font-size-base * $o-theme-h6-font-size-multiplier !default;
$headings-font-family: $o-theme-headings-font !default;
$headings-color: palette-color('h1') !default;
$headings-color: o-color('h1') !default;
// Jumbotron
addons/website/views/snippets/s_blockquote.xml
+1 -1
View File
@@ -6,7 +6,7 @@
<i class="fa fa-quote-left fa-1x bg-beta rounded-0 s_blockquote_icon"/>
<div class="s_blockquote_content">
<p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p>
<footer class="blockquote-footer">
<footer class="blockquote-footer text-muted">
<img src="/web/image/website.s_blockquote_default_image" class="s_blockquote_avatar img rounded-circle mr-2" alt=""/>
John DOE • CEO of MyCompany
</footer>
addons/website/views/snippets/s_picture.xml
+1 -1
View File
@@ -11,7 +11,7 @@
<div class="col-lg-10 offset-lg-1 pb24" style="text-align: center;">
<figure class="figure">
<img src="/web/image/website.s_picture_default_image" class="figure-img img-thumbnail padding-large" alt=""/>
<figcaption class="figure-caption py-3">Add a caption to enhance the meaning of this image.</figcaption>
<figcaption class="figure-caption text-muted py-3">Add a caption to enhance the meaning of this image.</figcaption>
</figure>
</div>
</div>
addons/website/views/snippets/s_quotes_carousel.xml
+1 -1
View File
@@ -47,7 +47,7 @@
<div class="row content">
<blockquote class="col-lg-6 offset-lg-6 bg-white">
<p>Odoo provides essential platform for our project management. Things are better organized and more visible with it.</p>
<footer class="blockquote-footer">
<footer class="blockquote-footer text-muted">
<img class="img" src="/web/image/website.s_quotes_carousel_demo_image_5" alt=""/>
<span>— Jane DOE, CEO of <b>MyCompany</b></span>
</footer>
addons/website/views/snippets/snippets.xml
+16 -1
View File
@@ -216,6 +216,13 @@
<div data-js="Carousel"
data-selector="section"
data-target="> .carousel">
<!-- Dedicated colorpicker so that there is not 3 level of
o_colored_level. Use inline-style color for the same reason. -->
<we-colorpicker string="Background Color"
data-select-style="true"
data-css-property="background-color"
data-color-prefix="bg-"
data-css-compatible="true"/>
<we-select string="Transition">
<we-button data-select-class="slide">Slide</we-button>
<we-button data-select-class="carousel-fade slide">Fade</we-button>
@@ -315,8 +322,16 @@
<!-- Background Color -->
<div id="so_main_colorpicker"
data-js="MainColorpicker"
data-selector="section, .carousel-item, section .row > div, .o_record_cover_container"
data-exclude=".parallax, .o_gallery .carousel-item, .s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div">
data-exclude=".parallax, .o_gallery .carousel-item, .s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .o_gallery .row > div, .s_carousel_wrapper, .s_tabs .oe_structure > *">
<we-select data-trigger="bg_color_opt" data-trigger-value="">
<we-button data-select-class="o_cc o_cc1">Color combinations 1</we-button>
<we-button data-select-class="o_cc o_cc2">Color combinations 2</we-button>
<we-button data-select-class="o_cc o_cc3">Color combinations 3</we-button>
<we-button data-select-class="o_cc o_cc4">Color combinations 4</we-button>
<we-button data-select-class="o_cc o_cc5">Color combinations 5</we-button>
</we-select>
<we-colorpicker string="Background Color"
data-name="bg_color_opt"
data-select-style="true"
addons/website/views/website_templates.xml
+1 -1
View File
@@ -573,7 +573,7 @@
t-att-data-use_text_align="use_text_align"
t-att-data-res-model="request.env.user.has_group('website.group_website_publisher') and _record._name"
t-att-data-res-id="request.env.user.has_group('website.group_website_publisher') and _record.id"
t-attf-class="o_record_cover_container d-flex flex-column h-100 #{_cp.get('background_color_class')} #{use_size and _cp.get('resize_class')} #{use_text_align and _cp.get('text_align_class')} #{additionnal_classes}">
t-attf-class="o_record_cover_container d-flex flex-column h-100 o_cc #{_cp.get('background_color_class')} #{use_size and _cp.get('resize_class')} #{use_text_align and _cp.get('text_align_class')} #{additionnal_classes}">
<div t-attf-class="o_record_cover_component o_record_cover_image #{snippet_autofocus and 'o_we_snippet_autofocus'}" t-attf-style="background-image: #{_cp.get('background-image')};"/>
<div t-if="use_filters" t-attf-class="o_record_cover_component o_record_cover_filter oe_black" t-attf-style="opacity: #{_cp.get('opacity', 0.0)};"/>
<t t-raw="0"/>
addons/website_blog/data/website_blog_demo.xml
+17 -17
View File
@@ -46,18 +46,18 @@
<p>Another unique feature of Copper Canyon is the presence of the Tarahumara Indian culture. These semi-nomadic people live in cave dwellings. Their livelihood chiefly depends on farming and cattle ranching.</p>
<figure class="mt-2 mb-4">
<img src="/website_blog/static/src/img/content_1_1.jpg" class="img-fluid w-100"/>
<figcaption class="figure-caption">Photo by PoloX Hernandez, @elpolox</figcaption>
<figcaption class="figure-caption text-muted">Photo by PoloX Hernandez, @elpolox</figcaption>
</figure>
<blockquote class="blockquote my-5">
<em class="h4 my-0">Apart from the native population, the local wildlife is also a major crowd puller.</em>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
<footer class="blockquote-footer text-muted">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<p>Several migratory and native birds, mammals and reptiles call Copper Canyon their home. The exquisite fauna in this near-pristine land is also worth checking out.</p>
<figure class="mt-2 mb-4">
<img src="/website_blog/static/src/img/content_1_2.jpg" class="img-fluid w-100"/>
<figcaption class="figure-caption">Photo by Boris Smokrovic, @borisworkshop</figcaption>
<figcaption class="figure-caption text-muted">Photo by Boris Smokrovic, @borisworkshop</figcaption>
</figure>
<p>A traveler may choose to explore the area by hiking around the canyon or venturing into it. Detailed planning is required for those who wish to venture into the depths of the canyon. There are a number of travel companies that specialize in organizing tours to the region. Visitors can fly to Copper Canyon using a tourist visa, which is valid for 180 days. Travelers can also drive from anywhere in the United States and acquire a visa at the Mexican customs station at the border.</p>
@@ -85,7 +85,7 @@
<div class="col-12 col-md-auto">
<figure>
<img src="/website_blog/static/src/img/content_2_1.jpg" class="img-fluid" style="max-height:450px"/>
<figcaption class="figure-caption">Photo by Jon Ly, @jonatron</figcaption>
<figcaption class="figure-caption text-muted">Photo by Jon Ly, @jonatron</figcaption>
</figure>
</div>
</div>
@@ -94,7 +94,7 @@
<h2 class="mt-5">East Maui</h2>
<figure class="mt-2 mb-4">
<img src="/website_blog/static/src/img/content_2_2.jpg" class="img-fluid w-100"/>
<figcaption class="figure-caption">Photo by Anton Repponen, @repponen</figcaption>
<figcaption class="figure-caption text-muted">Photo by Anton Repponen, @repponen</figcaption>
</figure>
<p>East Maui helicopter tours will give you a view of the ten thousand foot volcano, Haleakala or House of the sun. This volcano is dormant and last erupted in 1790. You will be able to see the crater of the volcano and the dry, arid earth surrounding the south side of the volcano’s slop with Maui helicopter tours.</p>
@@ -104,7 +104,7 @@
<h2 class="mt-5">Molokai Maui </h2>
<figure class="mt-2 mb-4">
<img src="/website_blog/static/src/img/content_2_3.jpg" class="img-fluid w-100"/>
<figcaption class="figure-caption">Photo by Denys Nevozhai, @dnevozhai</figcaption>
<figcaption class="figure-caption text-muted">Photo by Denys Nevozhai, @dnevozhai</figcaption>
</figure>
<p>Molokai Maui helicopter tours will take you to a different island but one that is only nine miles away and easily accessible by air. This island has a very small population with a different culture and scenery. The entire coast of the northeast is lined with cliffs and remote beaches. They are completely inaccessible by any other means of transportation than air.
People who live on the island have never even seen this remarkable scenery unless they have taken Maui helicopter tours to view it. When the weather has been rainy and there is a lot of rainfall for he season you will see many astounding waterfalls.</p>
@@ -131,12 +131,12 @@ People who live on the island have never even seen this remarkable scenery unles
<blockquote>
<em class="h4 my-0">The more reviews you read, the more you notice how they tend to cluster at the extremes of opinion.</em>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
<footer class="blockquote-footer text-muted">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<figure class="mt-2 mb-4">
<img src="/website_blog/static/src/img/content_3_1.jpg" class="img-fluid w-100"/>
<figcaption class="figure-caption">Photo by Jason Briscoe, @jbriscoe</figcaption>
<figcaption class="figure-caption text-muted">Photo by Jason Briscoe, @jbriscoe</figcaption>
</figure>
<p>Then there’s the problem of the reviewer’s motivation. The more reviews you read, the more you notice how they tend to cluster at the extremes of opinion. On one end, you have angry reviewers with axes to grind; at the other, you have delighted guests who lavish praise beyond belief. You’ll not be surprised to learn that hotels sometimes post their own glowing reviews, or that competitor’s line up for the chance to lambaste the competition with bad reviews. It makes sense to consider what is really important to you when selecting a hotel. You should then choose an online hotel directory that gives up-to-date, independent, impartial information that really matters.
@@ -182,14 +182,14 @@ People who live on the island have never even seen this remarkable scenery unles
<blockquote class="blockquote my-5">
<em class="h4 my-0">That “Wow” moment is what astrology is all about.</em>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
<footer class="blockquote-footer text-muted">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<p>So it might be that once a year vacation to a camping spot or a trip to a relative’s house out in the country that we find ourselves outside when the spender of the night sky suddenly decides to put on it’s spectacular show. If you have had that kind of moment when you were literally struck breathless by the spender the night sky can show to us, you can probably remember that exact moment when you could say little else but “wow” at what you saw.</p>
<figure class="mt-2 mb-4">
<img src="/website_blog/static/src/img/content_4_1.jpg" class="img-fluid w-100"/>
<figcaption class="figure-caption">Photo by Arto Marttinen, @wandervisions</figcaption>
<figcaption class="figure-caption text-muted">Photo by Arto Marttinen, @wandervisions</figcaption>
</figure>
<p>That “Wow” moment is what astrology is all about. For some, that wow moment becomes a passion that leads to a career studying the stars. For a lucky few, that wow moment because an all consuming obsession that leads to them traveling to the stars in the space shuttle or on one of our early space missions. But for most of us astrology may become a pastime or a regular hobby. But we carry that wow moment with us for the rest of our lives and begin looking for ways to look deeper and learn more about the spectacular universe we see in the millions of stars above us each night.</p>
@@ -222,14 +222,14 @@ People who live on the island have never even seen this remarkable scenery unles
<blockquote class="blockquote my-5">
<em class="h4 my-0">There is something timeless about the cosmos.</em>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
<footer class="blockquote-footer text-muted">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<p>There is something timeless about the cosmos. The fact that the planets and the moon and the stars beyond them have been there for ages does something to our sense of our place in the universe. In fact, many of the stars we “see” with our naked eye are actually light that came from that star hundreds of thousands of years ago. That light is just now reaching the earth. So in a very real way, looking up is like time travel.</p>
<figure class="mt-2 mb-4">
<img src="/website_blog/static/src/img/content_5_1.jpg" class="img-fluid w-100"/>
<figcaption class="figure-caption">Photo by SpaceX, @spacex</figcaption>
<figcaption class="figure-caption text-muted">Photo by SpaceX, @spacex</figcaption>
</figure>
<p>While anyone can look up and fall in love with the stars at any time, the fun of astronomy is learning how to become more and more skilled and equipped in star gazing that you see and understand more and more each time you look up. Here are some steps you can take to make the moments you can devote to your hobby of astronomy much more enjoyable.</p>
@@ -267,7 +267,7 @@ People who live on the island have never even seen this remarkable scenery unles
<blockquote class="blockquote my-5">
<em class="h4 my-0">It is critically important that you get just the right telescope.</em>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
<footer class="blockquote-footer text-muted">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<p>So to select just the right kind of telescope, your objectives in using the telescope are important. To really understand the strengths and weaknesses not only of the lenses and telescope design but also in how the telescope performs in various star gazing situations, it is best to do some homework up front and get exposure to the different kinds. So before you make your first purchase…</p>
@@ -280,7 +280,7 @@ People who live on the island have never even seen this remarkable scenery unles
<figure class="mt-2 mb-4">
<img src="/website_blog/static/src/img/content_6_1.jpg" class="img-fluid w-100"/>
<figcaption class="figure-caption">Photo by Teddy Kelley, @teddykelley</figcaption>
<figcaption class="figure-caption text-muted">Photo by Teddy Kelley, @teddykelley</figcaption>
</figure>
<p>There are other considerations to factor into your final purchase decision.</p>
@@ -309,7 +309,7 @@ Naturally, as you grow in your love of astronomy, you will find many celestial b
<blockquote class="blockquote my-5">
<em class="h4 my-0">Your study of the moon, like anything else, can go from the simple to the very complex.</em>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
<footer class="blockquote-footer text-muted">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<p>To gaze at the moon with the naked eye, making yourself familiar with the lunar map will help you pick out the seas, craters and other geographic phenomenon that others have already mapped to make your study more enjoyable. Moon maps can be had from any astronomy shop or online and they are well worth the investment.</p>
@@ -319,7 +319,7 @@ Naturally, as you grow in your love of astronomy, you will find many celestial b
<figure class="mt-2 mb-4">
<img src="/website_blog/static/src/img/content_7_1.jpg" class="img-fluid w-100"/>
<figcaption class="figure-caption">Photo by Patrick Brinksma, @patrickbrinksma</figcaption>
<figcaption class="figure-caption text-muted">Photo by Patrick Brinksma, @patrickbrinksma</figcaption>
</figure>
<p>To kick it up a notch, a good pair of binoculars can do wonders for the detail you will see on the lunar surface. For best results, get a good wide field in the binocular settings so you can take in the lunar landscape in all its beauty. And because it is almost impossible to hold the binoculars still for the length of time you will want to gaze at this magnificent body in space, you may want to add to your equipment arsenal a good tripod that you can affix the binoculars to so you can study the moon in comfort and with a stable viewing platform.</p>
@@ -327,7 +327,7 @@ Naturally, as you grow in your love of astronomy, you will find many celestial b
<figure class="mt-2 mb-4">
<img src="/website_blog/static/src/img/content_7_2.jpg" class="img-fluid w-100"/>
<figcaption class="figure-caption">Photo by Greg Rakozy, @grakozy</figcaption>
<figcaption class="figure-caption text-muted">Photo by Greg Rakozy, @grakozy</figcaption>
</figure>
<p>To take it to a natural next level, you may want to take advantage of partnerships with other astronomers or by visiting one of the truly great telescopes that have been set up by professionals who have invested in better techniques for eliminating atmospheric interference to see the moon even better. The internet can give you access to the Hubble and many of the huge telescopes that are pointed at the moon all the time. Further, many astronomy clubs are working on ways to combine multiple telescopes, carefully synchronized with computers for the best view of the lunar landscape.</p>
addons/website_blog/static/src/scss/website_blog.scss
-1
View File
@@ -285,7 +285,6 @@ $o-wblog-loader-size: 50px;
body.editor_enable & {
// Make empty covers visible in edit mode
.o_record_cover_container.o_wblog_post_page_cover:not(.o_record_has_cover) {
background-color: $gray-100;
padding: 30px 0;
}
addons/website_event/static/src/scss/website_event.scss
+1 -1
View File
@@ -1,7 +1,7 @@
.o_wevent_index_topbar_filters {
.dropdown-toggle {
border: $border-width solid gray('400');
@include o-bg-color(gray('white'), $with-muted: false);
@include o-bg-color(gray('white'), $with-extras: false);
@include border-radius($dropdown-border-radius);
@include hover-focus {
border-color: theme-color('primary');
addons/website_event/views/event_templates.xml
+3 -3
View File
@@ -309,13 +309,13 @@
<a href="/event">
<figure class="o_wevent_sidebar_block o_wevent_sidebar_figure figure">
<img class="figure-img img-fluid rounded" src="/website_event/static/src/img/event_past_0.jpg" alt=""/>
<figcaption class="figure-caption">A past event</figcaption>
<figcaption class="figure-caption text-muted">A past event</figcaption>
</figure>
</a>
<a href="/event">
<figure class="o_wevent_sidebar_block o_wevent_sidebar_figure figure">
<img class="figure-img img-fluid rounded" src="/website_event/static/src/img/event_training_0.jpg" alt=""/>
<figcaption class="figure-caption">Our Trainings</figcaption>
<figcaption class="figure-caption text-muted">Our Trainings</figcaption>
</figure>
</a>
</xpath>
@@ -328,7 +328,7 @@
<div class="card-body">
<blockquote class="blockquote mb-0">
<p><em>Write here a quote from one of your attendees. It gives confidence in your events.</em></p>
<footer class="blockquote-footer">Author</footer>
<footer class="blockquote-footer text-muted">Author</footer>
</blockquote>
</div>
</div>