[FIX] website_blog: restore latest posts snippet's styles

When the snippet was moved from the theme repository to the community
repository, some scss mixins were badly refactored, making the theme
specific styles not work anymore.

This commit removes the bg color which was added to latest posts
snippet's post elements as it made no sense, appeared broken and was
not possible to remove. It also adds some padding to the snippet by
default.

This commit also reviews the snippet options which seemed to allow post
color edition while it is in fact not possible.

opw-1964485

closes odoo/odoo#33016

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
qsm-odoo
2019-04-29 15:31:20 +00:00
parent f670d4103b
commit 84bb01606a
3 changed files with 20 additions and 19 deletions
@@ -1,5 +1,3 @@
$s-latest-posts-big-picture-figure-bg: null;
@mixin s-latest-posts-js-get-posts-hook {};
@mixin s-latest-posts-figure-hook {};
@@ -262,13 +262,10 @@
}
}
$s-latest-posts-big-picture-figure-bg: $white !default;
.s_latest_posts_big_picture {
.s_latest_posts_post {
position: relative;
height: 250px;
background: $s-latest-posts-big-picture-figure-bg;
text-align: center;
cursor: pointer;
transition: all 300ms;
@@ -281,9 +278,11 @@ $s-latest-posts-big-picture-figure-bg: $white !default;
position: relative;
display: block;
width: 100%;
max-width: 100% !important;
height: 100%;
padding: 0;
opacity: 0.8;
overflow: hidden;
> .o_blog_cover_component {
@include o-position-absolute(0, 0, 0, 0);
@@ -293,15 +292,17 @@ $s-latest-posts-big-picture-figure-bg: $white !default;
background-position: center;
}
}
> div, > div > a {
@include o-position-absolute(0, 0, 0, 0);
padding: 2em;
color: $white;
text-transform: uppercase;
font-size: 1.25em;
backface-visibility: hidden;
&::after, &::before {
pointer-events: none;
> div:not(.o_blog_cover_container):not(.js-loading) {
&, & > a {
@include o-position-absolute(0, $grid-gutter-width/2, 0, $grid-gutter-width/2);
padding: 2em;
color: $white;
text-transform: uppercase;
font-size: 1.25em;
backface-visibility: hidden;
&::after, &::before {
pointer-events: none;
}
}
> a {
@@ -328,7 +329,9 @@ $s-latest-posts-big-picture-figure-bg: $white !default;
@include s-latest-posts-figure-hook;
}
@include s-latest-posts-js-get-posts-hook;
.js_get_posts {
@include s-latest-posts-js-get-posts-hook;
}
}
.s_latest_posts, .s_latest_posts_big_picture {
@@ -589,10 +589,10 @@
</template>
<template id="s_latest_posts" name="Latest Posts - List">
<section class="s_latest_posts">
<section class="s_latest_posts pt16 pb16">
<div class="container">
<h2 class="text-center">Latest Posts</h2>
<div class="row js_get_posts"
<div class="row s_col_no_bgcolor js_get_posts"
data-loading="true"
data-template="website_blog.s_latest_posts_list_template"/>
</div>
@@ -600,10 +600,10 @@
</template>
<template id="s_latest_posts_big_picture" name="Latest Posts - Big Images">
<section class="s_latest_posts_big_picture">
<section class="s_latest_posts_big_picture pt16 pb16">
<div class="container-fluid">
<h2 class="text-center">Latest Posts</h2>
<div class="row js_get_posts"
<div class="row s_col_no_bgcolor js_get_posts"
data-loading="true"
data-template="website_blog.s_latest_posts_big_picture_template"/>
</div>