going on with home display: shworooms

2019-07-16 17:01:18 +02:00
parent f6f70033ae
commit 53209dbca1
15 changed files with 408 additions and 87 deletions
--- a/web/themes/custom/materiotheme/assets/dist/main.css
+++ b/web/themes/custom/materiotheme/assets/dist/main.css
@@ -1310,6 +1310,36 @@ article.node--type-frontpage .node__content > section.home-database {

 article.node--type-frontpage .node__content > section.home-showrooms {
  background-color: #50aa3c; }
+  article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr; }
+    article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item {
+      grid-column: 1;
+      grid-row: 1; }
+      article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term {
+        position: relative;
+        width: 100%;
+        height: 100%; }
+        article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term div.visuel {
+          width: 100%;
+          padding-bottom: 10em; }
+          article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term div.visuel img {
+            max-width: 100%; }
+        article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term section.text {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          box-sizing: border-box;
+          padding: 1em 0;
+          background-color: #50aa3c;
+          color: #fff; }
+          article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term section.text > * {
+            font-size: 0.9em; }
+          article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term section.text h2, article.node--type-frontpage .node__content > section.home-showrooms .field--name-computed-showrooms-reference > .field__item .taxonomy-term section.text p {
+            margin: 0; }

 article.node--type-frontpage .node__content > section.home-blabla {
  background-color: #9458aa; }
@@ -1342,37 +1372,6 @@ article.node--type-frontpage .node__content > section.home-blabla {
            font-size: 0.756em;
            line-height: 0.9; }

-article.node--type-frontpage .node__content .field--name-field-what-is-materio:not(:nth-child(1)),
-article.node--type-frontpage .node__content .field--name-field-a-database:not(:nth-child(1)),
-article.node--type-frontpage .node__content .field--name-field-showrooms:not(:nth-child(1)),
-article.node--type-frontpage .node__content .field--name-field-blabla:not(:nth-child(1)),
-article.node--type-frontpage .node__content .field--name-field-pricing:not(:nth-child(1)) {
-  margin-top: 1em; }
-
-article.node--type-frontpage .node__content .field--name-field-what-is-materio .field__label,
-article.node--type-frontpage .node__content .field--name-field-a-database .field__label,
-article.node--type-frontpage .node__content .field--name-field-showrooms .field__label,
-article.node--type-frontpage .node__content .field--name-field-blabla .field__label,
-article.node--type-frontpage .node__content .field--name-field-pricing .field__label {
-  font-size: 2.2em;
-  font-weight: bold; }
-
-article.node--type-frontpage .node__content .field--name-computed-showrooms-reference,
-article.node--type-frontpage .node__content .field--name-computed-articles-reference {
-  margin: 0;
-  padding: 0;
-  width: calc(100% + 15px); }
-  article.node--type-frontpage .node__content .field--name-computed-showrooms-reference .field__item,
-  article.node--type-frontpage .node__content .field--name-computed-articles-reference .field__item {
-    display: inline-block;
-    vertical-align: top;
-    width: 210px;
-    margin: 0 15px 15px 0;
-    padding: 0; }
-    article.node--type-frontpage .node__content .field--name-computed-showrooms-reference .field__item p,
-    article.node--type-frontpage .node__content .field--name-computed-articles-reference .field__item p {
-      margin: 0; }
-
 .infinite-loading-container .infinite-status-prompt i[class^="loading-"] {
  width: 15px;
  height: 15px; }
--- a/web/themes/custom/materiotheme/assets/styles/main.scss
+++ b/web/themes/custom/materiotheme/assets/styles/main.scss
@@ -343,6 +343,47 @@ article.node--type-frontpage{
        .field--name-field-showrooms{
        }
        .field--name-computed-showrooms-reference{
+          position:relative;
+          // height:550px;
+          display: grid;
+          grid-template-columns: 1fr;
+          grid-template-rows: 1fr;
+          >.field__item{
+            // position: absolute;
+            // top:0; left:0;
+            // width:100%; height:100%;
+            // overflow: hidden;
+            grid-column: 1;
+            grid-row: 1;
+            .taxonomy-term{
+              position: relative;
+              width:100%; height:100%;
+              div.visuel{
+                width:100%;
+                padding-bottom: 10em;
+                img{
+                  max-width: 100%;
+                }
+              }
+              section.text{
+                position: absolute;
+                bottom:0; left:0;
+                width:100%;
+                box-sizing:border-box;
+                padding:1em 0;
+                background-color:#50aa3c;
+                color: #fff;
+                >*{
+                  // display: inline-block;
+                  font-size: 0.9em;
+                }
+                h2,p{
+                  margin:0;
+                }
+
+              }
+            }
+          }
        }
      }
      &.home-blabla{
@@ -387,39 +428,6 @@ article.node--type-frontpage{

      }
    }
-
-    .field--name-field-what-is-materio,
-    .field--name-field-a-database,
-    .field--name-field-showrooms,
-    .field--name-field-blabla,
-    .field--name-field-pricing{
-      &:not(:nth-child(1)){
-        margin-top: 1em;
-      }
-      .field__label{
-        font-size: 2.2em;
-        font-weight: bold;
-      }
-    }
-
-    // .field--name-computed-materials-reference,
-    .field--name-computed-showrooms-reference,
-    .field--name-computed-articles-reference{
-      // outline: 1px green solid;
-      margin:0; padding:0;
-      width: calc(100% + #{$column_goutiere});
-
-      .field__item{
-        display: inline-block;
-        vertical-align: top;
-        width:210px;
-        margin:0 $column_goutiere $column_goutiere 0; padding:0;
-        p{
-          margin:0;
-        }
-      }
-    }
-
  }
 }

--- a/web/themes/custom/materiotheme/materiotheme.theme
+++ b/web/themes/custom/materiotheme/materiotheme.theme
@@ -138,3 +138,15 @@ function materiotheme_form_user_login_form_alter(&$form, FormStateInterface $for
 //   //   $vars['links'][$lang_code]['link']['#title'] = $lang_code;
 //   // }
 // }
+
+
+function materiotheme_theme_suggestions_taxonomy_term_alter(&$suggestions, &$vars){
+  // ksm($suggestions);
+  // ksm($vars);
+  $original = $vars['theme_hook_original'];
+  $bundle = $vars['elements']['#taxonomy_term']->bundle();
+  $viewmode = $vars['elements']["#view_mode"];
+  $suggestions[] = $original.'__'.$bundle.'__'.$viewmode;
+
+  // dsm($suggestions);
+}
--- a/web/themes/custom/materiotheme/templates/content/taxonomy-term--showroom--home.html.twig
+++ b/web/themes/custom/materiotheme/templates/content/taxonomy-term--showroom--home.html.twig
@@ -0,0 +1,40 @@
+{#
+/**
+ * @file
+ * Theme override to display a taxonomy term.
+ *
+ * Available variables:
+ * - url: URL of the current term.
+ * - name: Name of the current term.
+ * - content: Items for the content of the term (fields and description).
+ *   Use 'content' to print them all, or print a subset such as
+ *   'content.description'. Use the following code to exclude the
+ *   printing of a given child element:
+ *   @code
+ *   {{ content|without('description') }}
+ *   @endcode
+ * - attributes: HTML attributes for the wrapper.
+ * - page: Flag for the full page state.
+ * - term: The taxonomy term entity, including:
+ *   - id: The ID of the taxonomy term.
+ *   - bundle: Machine name of the current vocabulary.
+ * - view_mode: View mode, e.g. 'full', 'teaser', etc.
+ *
+ * @see template_preprocess_taxonomy_term()
+ */
+#}
+{%
+  set classes = [
+    'taxonomy-term',
+    'vocabulary-' ~ term.bundle|clean_class,
+  ]
+%}
+<div{{ attributes.setAttribute('id', 'taxonomy-term-' ~ term.id).addClass(classes) }}>
+  <div class="visuel">
+    {{ content.field_visuels }}
+  </div>
+  <section class="text">
+    <h2><a href="{{ url }}">{{ name }}</a></h2>
+    {{ content|without('field_visuels') }}
+  </section>
+</div>