refactored home database materials

config/sync/core.entity_view_display.node.frontpage.default.yml

@@ -242,7 +242,7 @@ content:
     weight: 9
     region: content
     settings:
-      view_mode: card_medium
+      view_mode: card_home
       link: false
     third_party_settings: {  }
     type: entity_reference_entity_view

config/sync/core.entity_view_display.node.materiau.card_home.yml

@@ -0,0 +1,81 @@
+uuid: 33a2fcb7-0ab3-4cce-a9ae-4b9c8160b5f8
+langcode: en
+status: true
+dependencies:
+  config:
+    - core.entity_view_mode.node.card_home
+    - field.field.node.materiau.body
+    - field.field.node.materiau.field_attachments
+    - field.field.node.materiau.field_distributor
+    - field.field.node.materiau.field_famille
+    - field.field.node.materiau.field_index
+    - field.field.node.materiau.field_linked_articles
+    - field.field.node.materiau.field_linked_materials
+    - field.field.node.materiau.field_localisation_old
+    - field.field.node.materiau.field_manufacturer
+    - field.field.node.materiau.field_materiau_images
+    - field.field.node.materiau.field_memo
+    - field.field.node.materiau.field_migration
+    - field.field.node.materiau.field_reference
+    - field.field.node.materiau.field_samples
+    - field.field.node.materiau.field_short_description
+    - field.field.node.materiau.field_tags
+    - field.field.node.materiau.field_thesaurus
+    - field.field.node.materiau.field_video
+    - field.field.node.materiau.field_workflow
+    - image.style.card_small
+    - node.type.materiau
+  module:
+    - image_delta_formatter
+    - user
+id: node.materiau.card_home
+targetEntityType: node
+bundle: materiau
+mode: card_home
+content:
+  field_materiau_images:
+    weight: 11
+    label: hidden
+    settings:
+      deltas: '0'
+      image_style: card_small
+      image_link: ''
+      deltas_reversed: 0
+    third_party_settings: {  }
+    type: image_delta_formatter
+    region: content
+  field_short_description:
+    weight: 8
+    label: hidden
+    settings:
+      link_to_entity: false
+    third_party_settings: {  }
+    type: string
+    region: content
+hidden:
+  body: true
+  field_attachments: true
+  field_distributor: true
+  field_famille: true
+  field_index: true
+  field_linked_articles: true
+  field_linked_materials: true
+  field_localisation_old: true
+  field_manufacturer: true
+  field_memo: true
+  field_migration: true
+  field_reference: true
+  field_samples: true
+  field_tags: true
+  field_thesaurus: true
+  field_video: true
+  field_workflow: true
+  flag_admintest: true
+  flag_dossier: true
+  flag_flag_list_template_1: true
+  flag_projet_1: true
+  flag_projet_2: true
+  langcode: true
+  links: true
+  search_api_excerpt: true
+  title: true

config/sync/core.entity_view_display.node.materiau.default.yml

@@ -192,6 +192,31 @@ content:
     third_party_settings: {  }
     type: list_default
     region: content
+  flag_admintest:
+    weight: 10
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  flag_dossier:
+    weight: 10
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  flag_flag_list_template_1:
+    weight: 10
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  flag_projet_1:
+    weight: 10
+    region: content
+    settings: {  }
+    third_party_settings: {  }
+  flag_projet_2:
+    weight: 10
+    region: content
+    settings: {  }
+    third_party_settings: {  }
   links:
     weight: 100
     region: content

config/sync/core.entity_view_mode.node.card_home.yml

@@ -0,0 +1,10 @@
+uuid: 77910894-9056-4143-a9f1-3340357690ca
+langcode: en
+status: true
+dependencies:
+  module:
+    - node
+id: node.card_home
+label: card-home
+targetEntityType: node
+cache: true

web/modules/custom/materio_home/src/Plugin/Field/FieldType/ComputedMaterialsReferences.php

@@ -45,7 +45,7 @@ class ComputedMaterialsReferences extends EntityReferenceFieldItemList
         ->sort('created', 'DESC')
         ->range(0,200);
     $results = $query->execute();
-    $nids = array_rand($results, 30);
+    $nids = array_rand($results, 70);
     foreach ($nids as $key => $nid) {
       $this->list[$key] = $this->createItem($key, $nid);
     }

web/themes/custom/materiotheme/assets/dist/main.css

@@ -1513,15 +1513,18 @@ article.node--type-frontpage .node__content > section.home-intro, article.node--
     text-align: center; }
 
 article.node--type-frontpage .node__content > section.home-database, article.node--type-frontpage .node__content > section.home-showrooms, article.node--type-frontpage .node__content > section.home-blabla {
-  display: grid;
+  display: flex;
-  grid-template-columns: 300px 1fr;
+  flex-direction: row;
-  grid-column-gap: 2em;
+  flex-wrap: nowrap; }
-  padding: 2em 1em; }
   article.node--type-frontpage .node__content > section.home-database > div:nth-child(1), article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1), article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) {
-    color: #fff;
+    flex: 0 0 423px;
-    grid-column: 1; }
+    box-sizing: border-box;
+    padding: 1em;
+    color: #fff; }
   article.node--type-frontpage .node__content > section.home-database > div:nth-child(2), article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(2), article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(2) {
-    grid-column: 2; }
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    padding: 1em 0.5em; }
 
 article.node--type-frontpage > h2 {
   display: none; }
@@ -1549,28 +1552,23 @@ article.node--type-frontpage .node__content > section.home-database {
       width: 100%;
       margin: 0;
       padding: 0;
-      display: grid;
+      display: flex;
-      grid-template-columns: repeat(auto-fill, minmax(50px, 130px));
+      flex-flow: row wrap;
-      grid-template-rows: 1fr;
+      justify-content: space-between; }
-      grid-gap: 1em;
-      justify-content: start; }
       article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li {
         position: relative;
         list-style: none;
         margin: 0;
-        padding: 0;
+        padding: 0 0 6.5px 0;
-        padding-top: 140%; }
+        box-sizing: border-box;
+        width: 102.5px;
+        height: 147.5px; }
         article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li .card {
-          position: absolute;
+          width: 100%;
-          top: 0;
+          height: 100%; }
-          bottom: 0;
-          left: 0;
-          right: 0;
-          width: auto;
-          height: auto; }
           article.node--type-frontpage .node__content > section.home-database .cards-list-home ul li .card .field--name-field-short-description {
-            font-size: 0.756em;
+            font-size: 0.656em;
-            line-height: 0.9; }
+            line-height: 1.2; }
 
 article.node--type-frontpage .node__content > section.home-showrooms {
   background-color: #50aa3c; }

web/themes/custom/materiotheme/assets/dist/main.js

@@ -1190,7 +1190,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n  props: ['html'],\n  // get the html from parent with props\n  data: function data() {\n    return {\n      template: null // compiled template from html used in render\n\n    };\n  },\n  beforeMount: function beforeMount() {\n    var _this = this;\n\n    // console.log('Home beforeMount');\n    // compile the html src (coming from parent with props or from ajax call)\n    if (this.html) {\n      // console.log('html', this.html);\n      this.template = _vue.default.compile(this.html);\n      this.$options.staticRenderFns = [];\n      this._staticTrees = [];\n      this.template.staticRenderFns.map(function (fn) {\n        return _this.$options.staticRenderFns.push(fn);\n      });\n    }\n  },\n  render: function render(h) {\n    if (!this.template) {\n      return h('span', 'Loading ...');\n    } else {\n      return this.template.render.call(this);\n    }\n  },\n  methods: {\n    onClickLink: function onClickLink(e) {\n      console.log(\"onClickLink\", e, this.$router);\n      var path = null;\n      this.$router.options.routes.forEach(function (route) {\n        // console.log('route.path', route.path);\n        if (route.path == e.originalTarget.pathname) {\n          path = e.originalTarget.pathname; // TODO: check if path is current\n          // TODO: as we can't break forEach is not the good method here\n        }\n      }, this);\n\n      if (path) {\n        this.$router.push({\n          path: path\n        });\n      }\n    }\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n  props: ['html'],\n  // get the html from parent with props\n  data: function data() {\n    return {\n      template: null // compiled template from html used in render\n\n    };\n  },\n  beforeMount: function beforeMount() {\n    var _this = this;\n\n    // console.log('Home beforeMount');\n    // compile the html src (coming from parent with props or from ajax call)\n    if (this.html) {\n      // console.log('html', this.html);\n      this.template = _vue.default.compile(this.html);\n      this.$options.staticRenderFns = [];\n      this._staticTrees = [];\n      this.template.staticRenderFns.map(function (fn) {\n        return _this.$options.staticRenderFns.push(fn);\n      });\n    }\n  },\n  render: function render(h) {\n    if (!this.template) {\n      return h('span', 'Loading ...');\n    } else {\n      return this.template.render.call(this);\n    }\n  },\n  methods: {\n    onClickLink: function onClickLink(e) {\n      console.log(\"onClickLink\", e, this.$router, this.$route);\n      var path = null; // find existing router route compared with link href\n\n      for (var i = 0; i < this.$router.options.routes.length; i++) {\n        if (this.$router.options.routes[i].path == e.originalTarget.pathname) {\n          if (e.originalTarget.pathname !== this.$route.path) {\n            path = e.originalTarget.pathname;\n          }\n\n          break;\n        }\n      }\n\n      if (path) {\n        this.$router.push({\n          path: path\n        });\n      }\n    }\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
 
 /***/ }),
 

web/themes/custom/materiotheme/assets/styles/main.scss

@@ -510,14 +510,35 @@ article.node--type-frontpage{
     }
   }
 
+  // %part-columned-layout{
+  //   display:grid;
+  //   grid-template-columns: 300px 1fr;
+  //   grid-column-gap: 2em;
+  //   padding:2em 1em;
+  //   >div:nth-child(1){
+  //     color: #fff;
+  //     grid-column: 1;
+  //     .field__label{
+  //       @extend %front-col-field__label;
+  //     }
+  //     .field__item{
+  //       @extend %front-col-descritpion;
+  //     }
+  //   }
+  //   >div:nth-child(2){
+  //     grid-column: 2;
+  //   }
+  // }
+
   %part-columned-layout{
-    display:grid;
+    display:flex;
-    grid-template-columns: 300px 1fr;
+    flex-direction: row;
-    grid-column-gap: 2em;
+    flex-wrap: nowrap;
-    padding:2em 1em;
     >div:nth-child(1){
+      flex: 0 0 $column_width * 2 + $column_goutiere;
+      box-sizing: border-box;
+      padding: 1em;
       color: #fff;
-      grid-column: 1;
       .field__label{
         @extend %front-col-field__label;
       }
@@ -526,7 +547,9 @@ article.node--type-frontpage{
       }
     }
     >div:nth-child(2){
-      grid-column: 2;
+      flex: 1 1 auto;
+      box-sizing: border-box;
+      padding: 1em 0.5em;
     }
   }
 
@@ -574,25 +597,32 @@ article.node--type-frontpage{
           ul{
             width:100%;
             margin:0; padding:0;
-            display: grid;
+            // display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(50px, 130px));
+            // grid-template-columns: repeat(auto-fill, minmax(50px, 130px));
-            grid-template-rows: 1fr;
+            // grid-template-rows: 1fr;
-            grid-gap: 1em;
+            // grid-gap: 1em;
-            justify-content:start;
+            // justify-content:start;
+            display: flex;
+            flex-flow: row wrap;
+            justify-content: space-between;
             li{
               position: relative;
               list-style: none;
-              margin:0; padding:0;
+              margin:0;
-              padding-top: 140%;
+              padding:0 0 $column_goutiere / 2 0;
+              box-sizing: border-box;
+              // padding-top: 140%;
+              width: $column_width / 2;
+              height: $card_height / 2;
               .card{
-                position:absolute;
+                // position:absolute;
-                top:0; bottom:0;
+                // top:0; bottom:0;
-                left:0; right:0;
+                // left:0; right:0;
-                width: auto;
+                width: 100%;
-                height: auto;
+                height: 100%;
                 .field--name-field-short-description{
-                  font-size: 0.756em;
+                  font-size: 0.656em;
-                  line-height: 0.9;
+                  line-height: 1.2;
                 }
               }
             }

web/themes/custom/materiotheme/templates/content/node--materiau--card-home.html.twig

@@ -0,0 +1,95 @@
+{#
+/**
+ * @file
+ * Default theme implementation to display a node.
+ *
+ * Available variables:
+ * - node: The node entity with limited access to object properties and methods.
+ *   Only method names starting with "get", "has", or "is" and a few common
+ *   methods such as "id", "label", and "bundle" are available. For example:
+ *   - node.getCreatedTime() will return the node creation timestamp.
+ *   - node.hasField('field_example') returns TRUE if the node bundle includes
+ *     field_example. (This does not indicate the presence of a value in this
+ *     field.)
+ *   - node.isPublished() will return whether the node is published or not.
+ *   Calling other methods, such as node.delete(), will result in an exception.
+ *   See \Drupal\node\Entity\Node for a full list of public properties and
+ *   methods for the node object.
+ * - label: (optional) The title of the node.
+ * - content: All node items. Use {{ content }} to print them all,
+ *   or print a subset such as {{ content.field_example }}. Use
+ *   {{ content|without('field_example') }} to temporarily suppress the printing
+ *   of a given child element.
+ * - author_picture: The node author user entity, rendered using the "compact"
+ *   view mode.
+ * - metadata: Metadata for this node.
+ * - date: (optional) Themed creation date field.
+ * - author_name: (optional) Themed author name field.
+ * - url: Direct URL of the current node.
+ * - display_submitted: Whether submission information should be displayed.
+ * - attributes: HTML attributes for the containing element.
+ *   The attributes.class element may contain one or more of the following
+ *   classes:
+ *   - node: The current template type (also known as a "theming hook").
+ *   - node--type-[type]: The current node type. For example, if the node is an
+ *     "Article" it would result in "node--type-article". Note that the machine
+ *     name will often be in a short form of the human readable label.
+ *   - node--view-mode-[view_mode]: The View Mode of the node; for example, a
+ *     teaser would result in: "node--view-mode-teaser", and
+ *     full: "node--view-mode-full".
+ *   The following are controlled through the node publishing options.
+ *   - node--promoted: Appears on nodes promoted to the front page.
+ *   - node--sticky: Appears on nodes ordered above other non-sticky nodes in
+ *     teaser listings.
+ *   - node--unpublished: Appears on unpublished nodes visible only to site
+ *     admins.
+ * - title_attributes: Same as attributes, except applied to the main title
+ *   tag that appears in the template.
+ * - content_attributes: Same as attributes, except applied to the main
+ *   content tag that appears in the template.
+ * - author_attributes: Same as attributes, except applied to the author of
+ *   the node tag that appears in the template.
+ * - title_prefix: Additional output populated by modules, intended to be
+ *   displayed in front of the main title tag that appears in the template.
+ * - title_suffix: Additional output populated by modules, intended to be
+ *   displayed after the main title tag that appears in the template.
+ * - view_mode: View mode; for example, "teaser" or "full".
+ * - teaser: Flag for the teaser state. Will be true if view_mode is 'teaser'.
+ * - page: Flag for the full page state. Will be true if view_mode is 'full'.
+ * - readmore: Flag for more state. Will be true if the teaser content of the
+ *   node cannot hold the main body content.
+ * - logged_in: Flag for authenticated user status. Will be true when the
+ *   current user is a logged-in member.
+ * - is_admin: Flag for admin user status. Will be true when the current user
+ *   is an administrator.
+ *
+ * @see template_preprocess_node()
+ *
+ * @todo Remove the id attribute (or make it a class), because if that gets
+ *   rendered twice on a page this is invalid CSS for example: two lists
+ *   in different view modes.
+ *
+ * @ingroup themeable
+ */
+#}
+{%
+  set classes = [
+    'node',
+    'node--type-' ~ node.bundle|clean_class,
+    node.isPromoted() ? 'node--promoted',
+    node.isSticky() ? 'node--sticky',
+    not node.isPublished() ? 'node--unpublished',
+    view_mode ? view_mode|clean_class,
+    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
+    'card'
+  ]
+%}
+
+<article{{ attributes.addClass(classes) }}>
+  <header>
+    {{ content.field_short_description }}
+  </header>
+  <section class="images">
+    {{ content.field_materiau_images }}
+  </section>
+</article>

web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue

@@ -29,17 +29,17 @@ export default {
   },
   methods: {
     onClickLink(e){
-      console.log("onClickLink", e, this.$router);
+      console.log("onClickLink", e, this.$router, this.$route);
       let path = null;
-
+      // find existing router route compared with link href
-      this.$router.options.routes.forEach(route => {
+      for (var i = 0; i < this.$router.options.routes.length; i++) {
-        // console.log('route.path', route.path);
+        if (this.$router.options.routes[i].path == e.originalTarget.pathname) {
-        if (route.path == e.originalTarget.pathname) {
+          if (e.originalTarget.pathname !== this.$route.path) {
             path = e.originalTarget.pathname
-          // TODO: check if path is current
-          // TODO: as we can't break forEach is not the good method here
           }
-      }, this)
+          break;
+        }
+      }
 
       if (path) {
         this.$router.push({