[IMP] website_blog, *: make theme-specific snippet and options standard
* website This commit moves the theme specific options from theme_avantgarde and theme_graphene standard, namely: - Big picture "list style" (hover effect) - Big picture "First is bigger" option - Latest posts horizontal task-2152188 PR: odoo/odoo#42466
This commit is contained in:
Samuel Degueldre
committed by
qsm-odoo
qsm-odoo
parent
f4c7c0bef5
commit
9fc5f14469
@@ -71,6 +71,7 @@
|
||||
<t id="sale_product_search_section_hook"/>
|
||||
<t id="blog_latest_posts_list_hook"/>
|
||||
<t id="blog_latest_posts_big_hook"/>
|
||||
<t id="blog_latest_posts_horizontal_hook"/>
|
||||
<t id="event_local_events_hook"/>
|
||||
<t id="snippet_google_map_hook"/>
|
||||
<t id="mass_mailing_newsletter_block_hook"/>
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
@@ -1,3 +0,0 @@
|
||||
|
||||
@mixin s-latest-posts-js-get-posts-hook {};
|
||||
@mixin s-latest-posts-figure-hook {};
|
||||
@@ -55,11 +55,281 @@
|
||||
margin-bottom: 0.5em;
|
||||
word-spacing: -0.15em;
|
||||
}
|
||||
|
||||
@include s-latest-posts-figure-hook;
|
||||
}
|
||||
|
||||
.js_get_posts {
|
||||
@include s-latest-posts-js-get-posts-hook;
|
||||
.s_latest_posts_post > div:not(.o_record_cover_container):not(.js-loading) p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.effect-dexter .s_latest_posts_post {
|
||||
&::before {
|
||||
content: "";
|
||||
@include o-position-absolute(0, $grid-gutter-width/2, 0, $grid-gutter-width/2);
|
||||
background: linear-gradient(to bottom, darken(theme-color('beta'), 10%) 0%,darken(theme-color('beta'), 30%) 100%);
|
||||
}
|
||||
.thumb {
|
||||
transition: opacity 0.35s;
|
||||
}
|
||||
> div:not(.o_record_cover_container):not(.js-loading) {
|
||||
padding: 3em;
|
||||
text-align: left;
|
||||
&:after {
|
||||
@include o-position-absolute(auto, 2em, 2em, 2em);
|
||||
height: calc(50% - 2em);
|
||||
border: 2px solid #fff;
|
||||
content: "";
|
||||
transition: transform 0.35s;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
p {
|
||||
@include o-position-absolute(auto, 60px, 60px, 60px);
|
||||
opacity: 0;
|
||||
transition: e( "opacity 0.35s linear 0s, transform 0.35s linear 0s");
|
||||
-webkit-transform: translate3d(0,-100px,0);
|
||||
transform: translate3d(0,-100px,0);
|
||||
}
|
||||
&:hover {
|
||||
.thumb {
|
||||
opacity: 0.4!important;
|
||||
}
|
||||
> div:not(.o_record_cover_container):not(.js-loading)::after {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
p {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.effect-chico {
|
||||
.o_record_cover_image {
|
||||
transition: opacity 0.35s, transform 0.35s;
|
||||
transform: scale(1.12);
|
||||
}
|
||||
.s_latest_posts_post > div:not(.o_record_cover_container):not(.js-loading) {
|
||||
padding: 3em;
|
||||
&::before {
|
||||
@include o-position-absolute(7%, 7%, 7%, 7%);
|
||||
border: 1px solid #fff;
|
||||
content: "";
|
||||
transform: scale(1.1);
|
||||
opacity: 0;
|
||||
transition: opacity 0.35s, transform 0.35s;
|
||||
}
|
||||
}
|
||||
p {
|
||||
opacity: 0;
|
||||
transition: opacity 0.35s, transform 0.35s;
|
||||
margin: 10% auto 0 !important;
|
||||
max-width: 200px;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
h2 {
|
||||
padding: 0;
|
||||
}
|
||||
.s_latest_posts_post:hover {
|
||||
.o_record_cover_image {
|
||||
transform: scale(1);
|
||||
}
|
||||
> div:not(.o_record_cover_container):not(.js-loading)::before, p {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.effect-marley {
|
||||
.s_latest_posts_post > div:not(.o_record_cover_container):not(.js-loading) {
|
||||
text-align: right;
|
||||
h2, p {
|
||||
@include o-position-absolute(auto, 30px, auto, 30px);
|
||||
padding: 10px 0;
|
||||
}
|
||||
p {
|
||||
bottom: 30px;
|
||||
line-height: 1.5;
|
||||
-webkit-transform: translate3d(0,100%,0);
|
||||
transform: translate3d(0,100%,0);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
||||
transition: opacity 0.35s, transform 0.35s;
|
||||
}
|
||||
h2 {
|
||||
top: 30px;
|
||||
-webkit-transition: -webkit-transform 0.35s;
|
||||
transition: transform 0.35s;
|
||||
-webkit-transform: translate3d(0,20px,0);
|
||||
transform: translate3d(0,20px,0);
|
||||
&:after {
|
||||
@include o-position-absolute(100%, auto, auto, 0);
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: #fff;
|
||||
content: "";
|
||||
-webkit-transform: translate3d(0,40px,0);
|
||||
transform: translate3d(0,40px,0);
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
|
||||
transition: opacity 0.35s, transform 0.35s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.s_latest_posts_post:hover > div:not(.o_record_cover_container):not(.js-loading) {
|
||||
h2 {
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
h2::after, p {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.effect-steve .s_latest_posts_post {
|
||||
z-index: auto;
|
||||
&::before {
|
||||
content: "";
|
||||
@include o-position-absolute(0, $grid-gutter-width/2, 0, $grid-gutter-width/2);
|
||||
background: #000;
|
||||
}
|
||||
> div:not(.o_record_cover_container):not(.js-loading) {
|
||||
z-index: 1;
|
||||
}
|
||||
.thumb {
|
||||
opacity: 1;
|
||||
transition: transform 0.35s;
|
||||
transform: perspective(1000px) translate3d(0,0,0);
|
||||
}
|
||||
h2, p {
|
||||
background: #fff;
|
||||
color: #2d434e;
|
||||
}
|
||||
h2 {
|
||||
position: relative;
|
||||
margin-top: 0.1em;
|
||||
padding: 0.25em;
|
||||
&:before {
|
||||
box-shadow: 0 1px 10px rgba(0,0,0,0.5);
|
||||
}
|
||||
}
|
||||
p {
|
||||
margin-top: 1em !important;
|
||||
padding: 0.5em;
|
||||
font-weight: 800;
|
||||
opacity: 0;
|
||||
transition: opacity 0.35s, transform 0.35s;
|
||||
transform: scale3d(0.9,0.9,1);
|
||||
}
|
||||
&:hover {
|
||||
h2:before {
|
||||
opacity: 0;
|
||||
}
|
||||
.thumb {
|
||||
transform: perspective(1000px) translate3d(0,0,21px);
|
||||
}
|
||||
p {
|
||||
opacity: 1;
|
||||
transform: scale3d(1,1,1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.first_is_big .s_latest_posts_post:first-child {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s_latest_posts_big_orizontal {
|
||||
.o_record_cover_container {
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.js_get_posts {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
text-align: left;
|
||||
.s_latest_posts_post {
|
||||
//display: table-cell;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
figcaption:after {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
content: "";
|
||||
display: block;
|
||||
}
|
||||
h4 {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
padding-right: 5%;
|
||||
&:before {
|
||||
content: "";
|
||||
z-index: 0;
|
||||
display: inline;
|
||||
float: left;
|
||||
width: 20%;
|
||||
position: absolute;
|
||||
top: 49%;
|
||||
left: 0;
|
||||
border-bottom: 1px solid $body-color;
|
||||
}
|
||||
a {
|
||||
z-index: 1;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
padding-left: 25%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
h5 {
|
||||
padding-left: 24%;
|
||||
}
|
||||
> a {
|
||||
bottom: 0;
|
||||
display: block;
|
||||
background: theme-color('alpha');
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
> div {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transform-origin: 50%;
|
||||
transition: all 400ms;
|
||||
backface-visibility: hidden;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: inline-block;
|
||||
margin-bottom: 2em;
|
||||
width: 50%;
|
||||
}
|
||||
@media only screen and (max-width : 480px) { // FIXME
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-down(sm) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,6 +22,12 @@
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<template id="s_latest_posts_big_orizontal" name="Latest Posts Horizontal">
|
||||
<section class="s_latest_posts_big_orizontal">
|
||||
<div class="js_get_posts container-fluid" data-loading="true" data-template="website_blog.s_latest_posts_big_orizontal_template"/>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<template id="s_latest_posts_list_template">
|
||||
<div t-foreach="posts" t-as="p" class="d-flex col-12 mt-3 s_latest_posts_post">
|
||||
<a class="s_latest_posts_post_cover flex-grow-0 flex-shrink-0 align-self-baseline position-relative" t-attf-href="/blog/#{p.blog_id.id}/post/#{p.id}" t-att-title="'Read' + p.name">
|
||||
@@ -64,6 +70,23 @@
|
||||
</figure>
|
||||
</template>
|
||||
|
||||
<template id="s_latest_posts_big_orizontal_template">
|
||||
<t t-foreach="posts" t-as="p">
|
||||
<figure class="post s_latest_posts_post">
|
||||
<figcaption>
|
||||
<h4 class="mb0"><a t-att-href="'/blog/%s/post/%s' % (p.blog_id.id, p.id)"><t t-esc="p.name"/></a></h4>
|
||||
<h5 class="mt0 mb4" t-field="p.write_date" t-field-options='{"format": "dd/MM"}' />
|
||||
</figcaption>
|
||||
<a t-att-href="'/blog/%s/post/%s' % (p.blog_id.id, p.id)">
|
||||
<t t-call="website.record_cover">
|
||||
<t t-set="_record" t-value="p"/>
|
||||
<t t-set="additionnal_classes" t-value="'loading_container thumb'"/>
|
||||
</t>
|
||||
</a>
|
||||
</figure>
|
||||
</t>
|
||||
</template>
|
||||
|
||||
<!-- Options -->
|
||||
<template id="s_latest_posts_options" inherit_id="website.snippet_options">
|
||||
<xpath expr="//div[@data-js='background']" position="before">
|
||||
@@ -88,6 +111,20 @@
|
||||
<we-button data-select-data-attribute="10">10 posts max</we-button>
|
||||
</we-select>
|
||||
</div>
|
||||
|
||||
<div data-js='s_latest_posts_style' data-selector=".s_latest_posts_big_picture .js_get_posts">
|
||||
<we-select string="List Style">
|
||||
<we-button data-select-class="">Default</we-button>
|
||||
<we-button data-select-class="effect-marley">Marley</we-button>
|
||||
<we-button data-select-class="effect-dexter">Dexter</we-button>
|
||||
<we-button data-select-class="effect-chico">Silly-Chico</we-button>
|
||||
<we-button data-select-class="effect-steve">Lonely Steve</we-button>
|
||||
</we-select>
|
||||
</div>
|
||||
|
||||
<div data-js='s_latest_posts_options' data-selector=".s_latest_posts_big_picture .js_get_posts">
|
||||
<we-checkbox string="First is bigger" data-select-class="first_is_big"/>
|
||||
</div>
|
||||
</xpath>
|
||||
<xpath expr="//div[@data-js='layout_column']" position="attributes">
|
||||
<attribute name="data-exclude" add=".s_latest_posts, .s_latest_posts_big_picture" separator=","/>
|
||||
|
||||
@@ -8,6 +8,9 @@
|
||||
<xpath expr="//t[@id='blog_latest_posts_big_hook']" position="replace">
|
||||
<t t-snippet="website_blog.s_latest_posts_big_picture" t-thumbnail="/website_blog/static/src/img/s_latest_posts_big_picture.jpg"/>
|
||||
</xpath>
|
||||
<xpath expr="//t[@id='blog_latest_posts_horizontal_hook']" position="replace">
|
||||
<t t-snippet="website_blog.s_latest_posts_big_orizontal" t-thumbnail="/website_blog/static/src/img/s_latest_posts_horizontal.jpg"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
</odoo>
|
||||
|
||||
@@ -1,12 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<odoo>
|
||||
|
||||
<template id="_assets_primary_variables" inherit_id="web._assets_primary_variables">
|
||||
<xpath expr="//link[last()]" position="after">
|
||||
<link rel="stylesheet" type="text/scss" href="/website_blog/static/src/scss/primary_variables.scss"/>
|
||||
</xpath>
|
||||
</template>
|
||||
|
||||
<template id="assets_wysiwyg" inherit_id="website.assets_wysiwyg" name="Blog posts snippet options">
|
||||
<xpath expr="." position="inside">
|
||||
<script type="text/javascript" src="/website_blog/static/src/snippets/s_latest_posts/options.js"/>
|
||||
|
||||
Reference in New Issue
Block a user