From 9fc5f144690372d5b6cabfa1475a20afc77b5a92 Mon Sep 17 00:00:00 2001 From: Samuel Degueldre Date: Thu, 2 Jan 2020 08:59:58 +0000 Subject: [PATCH] [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 --- addons/website/views/snippets/snippets.xml | 1 + .../src/img/s_latest_posts_horizontal.jpg | Bin 0 -> 4544 bytes .../static/src/scss/primary_variables.scss | 3 - .../src/snippets/s_latest_posts/000.scss | 276 +++++++++++++++++- .../views/snippets/s_latest_posts.xml | 37 +++ .../website_blog/views/snippets/snippets.xml | 3 + .../views/website_blog_templates.xml | 6 - 7 files changed, 314 insertions(+), 12 deletions(-) create mode 100644 addons/website_blog/static/src/img/s_latest_posts_horizontal.jpg delete mode 100644 addons/website_blog/static/src/scss/primary_variables.scss diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml index 5903fb58ebb..04dd0f00ae8 100644 --- a/addons/website/views/snippets/snippets.xml +++ b/addons/website/views/snippets/snippets.xml @@ -71,6 +71,7 @@ + diff --git a/addons/website_blog/static/src/img/s_latest_posts_horizontal.jpg b/addons/website_blog/static/src/img/s_latest_posts_horizontal.jpg new file mode 100644 index 0000000000000000000000000000000000000000..1e992e6182824fd3113e535b55b265c0b11c69e5 GIT binary patch literal 4544 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 literal 0 HcmV?d00001 diff --git a/addons/website_blog/static/src/scss/primary_variables.scss b/addons/website_blog/static/src/scss/primary_variables.scss deleted file mode 100644 index c8b936b59f1..00000000000 --- a/addons/website_blog/static/src/scss/primary_variables.scss +++ /dev/null @@ -1,3 +0,0 @@ - -@mixin s-latest-posts-js-get-posts-hook {}; -@mixin s-latest-posts-figure-hook {}; diff --git a/addons/website_blog/static/src/snippets/s_latest_posts/000.scss b/addons/website_blog/static/src/snippets/s_latest_posts/000.scss index 49f0b68dbc8..06a2906b447 100644 --- a/addons/website_blog/static/src/snippets/s_latest_posts/000.scss +++ b/addons/website_blog/static/src/snippets/s_latest_posts/000.scss @@ -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; + } } } diff --git a/addons/website_blog/views/snippets/s_latest_posts.xml b/addons/website_blog/views/snippets/s_latest_posts.xml index e362ee2035a..5bfd47394b1 100644 --- a/addons/website_blog/views/snippets/s_latest_posts.xml +++ b/addons/website_blog/views/snippets/s_latest_posts.xml @@ -22,6 +22,12 @@ + + + + diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml index dfe07876f64..b2321cf55a8 100644 --- a/addons/website_blog/views/website_blog_templates.xml +++ b/addons/website_blog/views/website_blog_templates.xml @@ -1,12 +1,6 @@ - -