refactored showrooms page

web/themes/custom/materiotheme/assets/dist/module-showrooms.ea51a71e33e126273a2e.bundle.js

@@ -0,0 +1 @@
+(self.webpackChunkmaterio_com=self.webpackChunkmaterio_com||[]).push([[204],{281:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>u});var o=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{attrs:{id:"showrooms"}},[e.items.length?e._l(e.items,(function(e){return s("Showroom",{key:e.uuid,attrs:{item:e}})})):s("div",{staticClass:"loading"},[s("span",[e._v(e._s(e.$t("default.Loading…")))])])],2)};o._withStripped=!0;var i=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("article",{staticClass:"showroom"},[s("section",{directives:[{name:"switcher",rawName:"v-switcher"}],staticClass:"images"},e._l(e.item.images,(function(t,o){return s("figure",{directives:[{name:"lazy",rawName:"v-lazy",value:o,expression:"index"}],key:t.url,staticClass:"lazy"},[s("img",{attrs:{"data-src":t.style_showroomhome.url},on:{click:function(t){return e.setLightBox(o)}}})])})),0),e._v(" "),s("section",{staticClass:"content"},[s("header",[s("h1",[e._v(e._s(e.item.name))])]),e._v(" "),s("section",{staticClass:"description",domProps:{innerHTML:e._s(e.item.description)}}),e._v(" "),s("address",[e.item.address.organization?s("span",[e._v(e._s(e.item.address.organization)),s("br")]):e._e(),e._v(" "),e.item.address.address_line1?s("span",[e._v(e._s(e.item.address.address_line1)),s("br")]):e._e(),e._v(" "),e.item.address.locality?s("span",[e._v(e._s(e.item.address.locality)),s("br")]):e._e(),e._v(" "),e.item.country.country_name?s("span",[e._v(e._s(e.item.country.country_name))]):e._e()]),e._v(" "),s("div",{staticClass:"phone",domProps:{innerHTML:e._s(e.item.phone)}}),e._v(" "),s("a",{staticClass:"email",attrs:{href:"mailto:"+e.item.email},domProps:{innerHTML:e._s(e.item.email)}}),e._v(" "),s("div",{staticClass:"website"},[s("a",{attrs:{_target:"_blank",href:e.item.website.url}},[e._v(e._s(e.item.website.title))])])])])};i._withStripped=!0;var r=s(629),a=s(4408),n=s(8357);drupalSettings.path.baseUrl,drupalSettings.path.pathPrefix;const m={name:"Showroom",router:a.Z,mixins:[n.Z],props:["item"],computed:{...(0,r.rn)({coolLightBoxItems:e=>e.Common.coolLightBoxItems,coolLightBoxIndex:e=>e.Common.coolLightBoxIndex})},methods:{...(0,r.nv)({setcoolLightBoxItems:"Common/setcoolLightBoxItems",setcoolLightBoxIndex:"Common/setcoolLightBoxIndex"}),setLightBox(e){this.setcoolLightBoxItems(this.item.images),this.setcoolLightBoxIndex(e)}}};var l=s(1900),c=(0,l.Z)(m,i,[],!1,null,"695652b0",null);c.options.__file="web/themes/custom/materiotheme/vuejs/components/Content/Showroom.vue";const h=c.exports,d={name:"Showrooms",computed:{...(0,r.rn)({items:e=>e.Showrooms.items})},created(){this.items.length||this.getShowrooms()},methods:{...(0,r.nv)({getShowrooms:"Showrooms/getShowrooms"})},components:{Showroom:h}};var _=(0,l.Z)(d,o,[],!1,null,"7566e5fe",null);_.options.__file="web/themes/custom/materiotheme/vuejs/components/Pages/Showrooms.vue";const u=_.exports}}]);

web/themes/custom/materiotheme/assets/dist/module-showrooms.f4e99dc6af9efd6ef724.bundle.js

@@ -1 +0,0 @@
-(self.webpackChunkmaterio_com=self.webpackChunkmaterio_com||[]).push([[204],{281:(e,t,s)=>{"use strict";s.r(t),s.d(t,{default:()=>p});var o=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("div",{attrs:{id:"showrooms"}},[e.items.length?e._l(e.items,(function(e){return s("Showroom",{key:e.uuid,attrs:{item:e}})})):s("div",{staticClass:"loading"},[s("span",[e._v(e._s(e.$t("default.Loading…")))])])],2)};o._withStripped=!0;var i=function(){var e=this,t=e.$createElement,s=e._self._c||t;return s("article",{staticClass:"showroom"},[s("header",[s("h1",{domProps:{innerHTML:e._s(e.item.name)}})]),e._v(" "),s("section",{staticClass:"images"},[s("figure",{domProps:{innerHTML:e._s(e.item.field_visuels)}})]),e._v(" "),s("section",{staticClass:"content"},[s("address",{domProps:{innerHTML:e._s(e.item.field_public_address)}}),e._v(" "),s("div",{staticClass:"phone",domProps:{innerHTML:e._s(e.item.field_public_phone)}}),e._v(" "),s("a",{staticClass:"email",attrs:{href:"mailto:"+e.item.field_public_email},domProps:{innerHTML:e._s(e.item.field_public_email)}}),e._v(" "),s("div",{staticClass:"website",domProps:{innerHTML:e._s(e.item.field_website)}})])])};i._withStripped=!0;var r=s(4408);drupalSettings.path.baseUrl,drupalSettings.path.pathPrefix;const n={name:"Showroom",router:r.Z,props:["item"]};var m=s(1900),a=(0,m.Z)(n,i,[],!1,null,"695652b0",null);a.options.__file="web/themes/custom/materiotheme/vuejs/components/Content/Showroom.vue";const l=a.exports;var c=s(629);const _={name:"Showrooms",computed:{...(0,c.rn)({items:e=>e.Showrooms.items})},created(){this.items.length||this.getItems()},methods:{...(0,c.nv)({getItems:"Showrooms/getItems"})},components:{Showroom:l}};var d=(0,m.Z)(_,o,[],!1,null,"7566e5fe",null);d.options.__file="web/themes/custom/materiotheme/vuejs/components/Pages/Showrooms.vue";const p=d.exports}}]);

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

@@ -140,7 +140,7 @@ export let _v_sitebranding_block, _v_user_block, _v_header_menu,
     }
 
     function initVStore () {
-      store.dispatch('Showrooms/getItems')
+      store.dispatch('Showrooms/getShowrooms')
     }
 
     function initVRouter () {

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

@@ -2306,22 +2306,57 @@ article.card{
 #showrooms{
   width: calc(100% + #{$column_goutiere});
   article.showroom{
-    width: $column_width * 2 + $column_goutiere;
-    display: inline-block;
-    vertical-align: top;
-    margin: 0 $column_goutiere $column_goutiere 0;
-
-    h1{
-      margin:0;
-      font-weight: 4;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 1em;
+    section.images{
+      flex:0 0 auto;
     }
-    p{ margin:0; }
-    figure{
-      margin:0;
-      img{
-        max-width: 100%;
+    section.content{
+      flex:0 0 100%;
+      padding: 0 1em;
+    }
+    section.images{
+      position: relative;
+      width: 800px;
+      height: 450px;
+      *{width: 100%; height:100%;}
+      figure{
+        cursor: pointer;
+        margin:0;
+        position: absolute;
+        top:0; left:0;
+        background-color: #fff;
+        // width: 100%; height:100%;
+        &:first-of-type{
+          z-index:5
+        }
+        transition: opacity 0.2s ease-in-out;
+        &.show{opacity: 1; z-index:6;}
+        &.hide{opacity: 0;}
+  
+        img{
+          // width: 100%; height:100%;
+          &.blank{
+            position: absolute;
+            top:0; left:0;
+            z-index: 20;
+          }
+        }
       }
     }
+    section.content{
+
+      h1{
+        margin:0;
+        font-weight: 4;
+      }
+      p{ 
+        margin:0 0 1em 0!important;
+        max-width: 30em;
+      }
+      
+    }
   }
 
 }