blabla: click on whole article card open it

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

@@ -1849,6 +1849,8 @@ article.card {
   article.card.article {
     width: 423px;
     height: 295px; }
+    article.card.article section.images a {
+      display: block; }
   article.card.minicard {
     height: 100px;
     width: 170px;

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

@@ -1087,7 +1087,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 _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n// import { JSONAPI } from 'vuejs/api/json-axios'\nvar basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;\nvar _default = {\n  name: \"ArticleCard\",\n  router: _route.default,\n  props: ['item'],\n  data: function data() {\n    return {\n      alias: this.item.view_node.replace(/^.*\\/blabla\\//g, '')\n    };\n  },\n  methods: {\n    onclick: function onclick() {\n      console.log('clicked on article', this.alias);\n      this.$router.push({\n        name: \"article\",\n        params: {\n          alias: this.alias,\n          id: this.item.nid\n        } // query: { nid: this.item.nid }\n        // meta: { uuid:this.item.uuid },\n\n      });\n    }\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.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 _route = _interopRequireDefault(__webpack_require__(/*! vuejs/route */ \"./web/themes/custom/materiotheme/vuejs/route/index.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n// import { JSONAPI } from 'vuejs/api/json-axios'\nvar basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;\nvar _default = {\n  name: \"ArticleCard\",\n  router: _route.default,\n  props: ['item'],\n  data: function data() {\n    return {\n      alias: this.item.view_node.replace(/^.*\\/blabla\\//g, '')\n    };\n  },\n  methods: {\n    onclick: function onclick() {\n      console.log('clicked on article', this.alias);\n      this.$router.push({\n        name: \"article\",\n        params: {\n          alias: this.alias,\n          id: this.item.nid\n        } // query: { nid: this.item.nid }\n        // meta: { uuid:this.item.uuid },\n\n      });\n    }\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
 
 /***/ }),
 
@@ -3436,7 +3436,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"render\": () => /* binding */ render,\n/* harmony export */   \"staticRenderFns\": () => /* binding */ staticRenderFns\n/* harmony export */ });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"article\", { staticClass: \"card article\" }, [\n    _c(\"header\", [\n      _c(\"h1\", [\n        _c(\"a\", {\n          attrs: { href: _vm.item.view_node },\n          domProps: { innerHTML: _vm._s(_vm.item.title) },\n          on: {\n            click: function($event) {\n              $event.preventDefault()\n              return _vm.onclick($event)\n            }\n          }\n        })\n      ]),\n      _vm._v(\" \"),\n      _c(\"aside\", { domProps: { innerHTML: _vm._s(_vm.item.created) } }),\n      _vm._v(\" \"),\n       false\n        ? 0\n        : _vm._e()\n    ]),\n    _vm._v(\" \"),\n    _c(\"section\", { staticClass: \"images\" }, [\n      _c(\"figure\", { domProps: { innerHTML: _vm._s(_vm.item.field_visuel) } })\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   \"render\": () => /* binding */ render,\n/* harmony export */   \"staticRenderFns\": () => /* binding */ staticRenderFns\n/* harmony export */ });\nvar render = function() {\n  var _vm = this\n  var _h = _vm.$createElement\n  var _c = _vm._self._c || _h\n  return _c(\"article\", { staticClass: \"card article\" }, [\n    _c(\"header\", [\n      _c(\"h1\", [\n        _c(\"a\", {\n          attrs: { href: _vm.item.view_node },\n          domProps: { innerHTML: _vm._s(_vm.item.title) },\n          on: {\n            click: function($event) {\n              $event.preventDefault()\n              return _vm.onclick($event)\n            }\n          }\n        })\n      ]),\n      _vm._v(\" \"),\n      _c(\"aside\", { domProps: { innerHTML: _vm._s(_vm.item.created) } })\n    ]),\n    _vm._v(\" \"),\n    _c(\"section\", { staticClass: \"images\" }, [\n      _c(\n        \"a\",\n        {\n          attrs: { href: _vm.item.view_node },\n          on: {\n            click: function($event) {\n              $event.preventDefault()\n              return _vm.onclick($event)\n            }\n          }\n        },\n        [\n          _c(\"figure\", {\n            domProps: { innerHTML: _vm._s(_vm.item.field_visuel) }\n          })\n        ]\n      )\n    ])\n  ])\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\n\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib/index.js??vue-loader-options");
 
 /***/ }),
 

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

@@ -956,7 +956,13 @@ article.card{
   width:$column_width; height:$card_height;
   &.article{
     width:$column_width*2 + $column_goutiere; height:$card_height;
+    section.images{
+      a{
+        display:block;
+      }
+    }
   }
+
   &.minicard{
     height:100px;
     width:$minicard_width;

web/themes/custom/materiotheme/vuejs/components/Content/ArticleCard.vue

@@ -9,10 +9,15 @@
         ></a>
       </h1>
       <aside v-html="item.created"></aside>
-      <h4 v-if="false" class="body" v-html="item.body"></h4>
+      <!-- <h4 class="body" v-html="item.body"></h4> -->
     </header>
     <section class="images">
-      <figure v-html="item.field_visuel"></figure>
+      <a
+        :href="item.view_node"
+        @click.prevent="onclick"
+      >
+        <figure v-html="item.field_visuel"/>
+      </a>
     </section>
   </article>
 </template>