home products css display

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

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

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);

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; }

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);

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;
+              }
+            }
+          }
+        }
       }
     }
   }