From 01bf726cca7813d5bbab7c5c23ffc4261be0225f Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Sun, 27 Dec 2020 19:22:21 +0100 Subject: [PATCH] home products css display --- ...materio_product_variation_type.summary.yml | 2 +- ...ty_view_display.node.frontpage.default.yml | 6 +-- .../ComputedProdVariationsReferences.php | 2 +- .../custom/materiotheme/assets/dist/main.css | 37 +++++++++++++++- .../assets/styles/base/_colors.scss | 1 + .../materiotheme/assets/styles/main.scss | 43 ++++++++++++++++++- 6 files changed, 83 insertions(+), 8 deletions(-) diff --git a/config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.summary.yml b/config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.summary.yml index e087bb9..fba4666 100644 --- a/config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.summary.yml +++ b/config/sync/core.entity_view_display.commerce_product_variation.materio_product_variation_type.summary.yml @@ -35,7 +35,7 @@ content: region: content label: hidden settings: - link_to_entity: true + link_to_entity: false third_party_settings: { } hidden: billing_schedule: true diff --git a/config/sync/core.entity_view_display.node.frontpage.default.yml b/config/sync/core.entity_view_display.node.frontpage.default.yml index bedba17..adcf944 100644 --- a/config/sync/core.entity_view_display.node.frontpage.default.yml +++ b/config/sync/core.entity_view_display.node.frontpage.default.yml @@ -253,8 +253,8 @@ content: weight: 6 region: content settings: - link: true - view_mode: default + view_mode: summary + link: false third_party_settings: { } type: entity_reference_entity_view computed_showrooms_reference: @@ -324,7 +324,7 @@ content: region: content field_pricing: weight: 5 - label: hidden + label: above settings: { } third_party_settings: { } type: text_default diff --git a/web/modules/custom/materio_home/src/Plugin/Field/FieldType/ComputedProdVariationsReferences.php b/web/modules/custom/materio_home/src/Plugin/Field/FieldType/ComputedProdVariationsReferences.php index 61bb553..9516360 100644 --- a/web/modules/custom/materio_home/src/Plugin/Field/FieldType/ComputedProdVariationsReferences.php +++ b/web/modules/custom/materio_home/src/Plugin/Field/FieldType/ComputedProdVariationsReferences.php @@ -37,7 +37,7 @@ class ComputedProdVariationsReferences extends EntityReferenceFieldItemList protected function computeValue() { $query = \Drupal::entityQuery('commerce_product_variation') ->condition('status', 1) - ->sort('created', 'DESC') + ->sort('created', 'ASC') // ->exists('field_visuel') // ->condition('type', 'article') ->range(0,12); diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css index fcef9f3..8c99f85 100644 --- a/web/themes/custom/materiotheme/assets/dist/main.css +++ b/web/themes/custom/materiotheme/assets/dist/main.css @@ -1497,11 +1497,11 @@ aside.messages { #content-left .flag-collection > ul > li article.card.minicard > nav.tools .mdi.unflag { cursor: pointer; } -article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__label { +article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-title { font-size: 3.5em; line-height: 1; } -article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__item { +article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__item, article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-field-description { font-size: 0.9em; line-height: 1.3; } @@ -1690,6 +1690,39 @@ article.node--type-frontpage .node__content > section.home-blabla { font-size: 0.756em; line-height: 0.9; } +article.node--type-frontpage .node__content > section.home-pricing .field--name-field-pricing { + padding: 2em 0; } + +article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference { + display: flex; + flex-flow: row nowrap; } + article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item { + flex: 0 0 50%; + text-align: center; + padding: 2em 0; + color: #fff; + position: relative; + height: 18em; } + article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item:nth-child(1) { + background-color: #69cdcf; } + article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item:nth-child(2) { + background-color: #ff9f50; } + article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item > div { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); } + article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-title { + font-weight: 600; + line-height: 0.7; + padding-bottom: 0.5em; + text-align: center; + word-spacing: 30000px; } + article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-field-description { + padding: 0.5em; } + article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-field-description p { + margin: 0; } + .infinite-loading-container .infinite-status-prompt i[class^="loading-"] { width: 15px; height: 15px; } diff --git a/web/themes/custom/materiotheme/assets/styles/base/_colors.scss b/web/themes/custom/materiotheme/assets/styles/base/_colors.scss index 6ef4e6c..0835e90 100644 --- a/web/themes/custom/materiotheme/assets/styles/base/_colors.scss +++ b/web/themes/custom/materiotheme/assets/styles/base/_colors.scss @@ -4,6 +4,7 @@ $transparent-bg-blk: rgba(0,0,0, 0.75); $color-base:#69cdcf; $color-showrooms:#50aa3c; $color-blabla:#9458aa; +$color-webshowroom:rgb(255, 159, 80); $alpha: 0.90; $color-base-transparent: change-color($color-base, $alpha: $alpha); $color-showrooms-transparent: change-color($color-showrooms, $alpha: $alpha); diff --git a/web/themes/custom/materiotheme/assets/styles/main.scss b/web/themes/custom/materiotheme/assets/styles/main.scss index 0e76f54..9e78f74 100644 --- a/web/themes/custom/materiotheme/assets/styles/main.scss +++ b/web/themes/custom/materiotheme/assets/styles/main.scss @@ -808,7 +808,48 @@ article.node--type-frontpage{ } &.home-pricing{ @extend %part-centered-layout; - + .field--name-field-pricing{ + padding:2em 0; + } + .field--name-computed-products-reference{ + display: flex; + flex-flow: row nowrap; + // TODO: mediaQuery column + >.field__item{ + flex:0 0 50%; + text-align: center; + padding: 2em 0; + &:nth-child(1){ + background-color: $color-base + } + &:nth-child(2){ + background-color: $color-webshowroom; + } + color: #fff; + position: relative; + height:18em; + >div{ + position: absolute; + top:50%; left:50%; + transform: translate(-50%, -50%); + } + .field--name-title{ + @extend %front-col-field__label; + font-weight: 600; + line-height: 0.7; + padding-bottom: 0.5em; + text-align: center; + word-spacing: 30000px; + } + .field--name-field-description{ + @extend %front-col-descritpion; + padding:0.5em; + p{ + margin: 0; + } + } + } + } } } }