refactored showrooms page
This commit is contained in:
File diff suppressed because one or more lines are too long
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
1
web/themes/custom/materiotheme/assets/dist/module-showrooms.ea51a71e33e126273a2e.bundle.js
vendored
Normal file
1
web/themes/custom/materiotheme/assets/dist/module-showrooms.ea51a71e33e126273a2e.bundle.js
vendored
Normal file
@@ -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}}]);
|
||||
BIN
web/themes/custom/materiotheme/assets/dist/module-showrooms.ea51a71e33e126273a2e.bundle.js.gz
vendored
Normal file
BIN
web/themes/custom/materiotheme/assets/dist/module-showrooms.ea51a71e33e126273a2e.bundle.js.gz
vendored
Normal file
Binary file not shown.
@@ -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}}]);
|
||||
Binary file not shown.
@@ -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 () {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
fragment ShowroomFields on Showroom {
|
||||
uuid
|
||||
id
|
||||
name
|
||||
description
|
||||
images {
|
||||
alt
|
||||
id
|
||||
style_showroomhome {
|
||||
height
|
||||
url
|
||||
width
|
||||
}
|
||||
style_showroomhome_url
|
||||
url
|
||||
}
|
||||
website {
|
||||
title
|
||||
url
|
||||
}
|
||||
phone
|
||||
email
|
||||
country {
|
||||
country_code
|
||||
country_name
|
||||
}
|
||||
address {
|
||||
additional_name
|
||||
address_line1
|
||||
address_line2
|
||||
administrative_area
|
||||
dependent_locality
|
||||
country_code
|
||||
family_name
|
||||
given_name
|
||||
langcode
|
||||
locality
|
||||
organization
|
||||
postal_code
|
||||
sorting_code
|
||||
}
|
||||
}
|
||||
@@ -1,36 +1,76 @@
|
||||
<template>
|
||||
<article class="showroom">
|
||||
<header>
|
||||
<h1 v-html="item.name" />
|
||||
</header>
|
||||
<section class="images">
|
||||
<figure v-html="item.field_visuels"></figure>
|
||||
<section class="images" v-switcher>
|
||||
|
||||
<!-- <figure v-html="item.field_visuels"></figure> -->
|
||||
<figure
|
||||
v-for="(img, index) in item.images"
|
||||
:key="img.url"
|
||||
class="lazy"
|
||||
v-lazy="index"
|
||||
>
|
||||
<img
|
||||
:data-src="img.style_showroomhome.url"
|
||||
@click="setLightBox(index)"
|
||||
/>
|
||||
</figure>
|
||||
</section>
|
||||
<section class="content">
|
||||
<address v-html="item.field_public_address" />
|
||||
<div class="phone" v-html="item.field_public_phone" />
|
||||
<a class="email" :href="'mailto:'+item.field_public_email" v-html="item.field_public_email" />
|
||||
<div class="website" v-html="item.field_website" />
|
||||
<header>
|
||||
<h1>{{item.name}}</h1>
|
||||
</header>
|
||||
<section class="description" v-html="item.description" />
|
||||
<address>
|
||||
<span v-if="item.address.organization">{{ item.address.organization }}</br></span>
|
||||
<span v-if="item.address.address_line1">{{ item.address.address_line1 }}</br></span>
|
||||
<span v-if="item.address.locality">{{ item.address.locality }}</br></span>
|
||||
<span v-if="item.country.country_name">{{ item.country.country_name }}</span>
|
||||
</address>
|
||||
<div class="phone" v-html="item.phone" />
|
||||
<a class="email" :href="'mailto:'+item.email" v-html="item.email" />
|
||||
<div class="website">
|
||||
<a _target="_blank" :href="item.website.url">{{ item.website.title }}</a>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState, mapActions } from 'vuex'
|
||||
|
||||
// import JSONAPI from 'vuejs/api/json-axios'
|
||||
import router from 'vuejs/route'
|
||||
|
||||
import cardMixins from 'vuejs/components/cardMixins'
|
||||
|
||||
let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
|
||||
|
||||
export default {
|
||||
name: "Showroom",
|
||||
router,
|
||||
mixins: [cardMixins],
|
||||
props: ['item'],
|
||||
// data(){
|
||||
// return {
|
||||
// alias: this.item.view_node.replace(/^.?\/showroom\//g, '')
|
||||
// }
|
||||
// },
|
||||
// methods:{}
|
||||
computed: {
|
||||
...mapState({
|
||||
coolLightBoxItems: state => state.Common.coolLightBoxItems,
|
||||
coolLightBoxIndex: state => state.Common.coolLightBoxIndex
|
||||
}),
|
||||
},
|
||||
methods:{
|
||||
...mapActions({
|
||||
setcoolLightBoxItems: 'Common/setcoolLightBoxItems',
|
||||
setcoolLightBoxIndex: 'Common/setcoolLightBoxIndex'
|
||||
}),
|
||||
setLightBox (index) {
|
||||
this.setcoolLightBoxItems(this.item.images)
|
||||
this.setcoolLightBoxIndex(index)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -32,11 +32,11 @@ export default {
|
||||
},
|
||||
created(){
|
||||
if(!this.items.length)
|
||||
this.getItems()
|
||||
this.getShowrooms()
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
getItems: 'Showrooms/getItems'
|
||||
getShowrooms: 'Showrooms/getShowrooms'
|
||||
})
|
||||
},
|
||||
components: {
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
// import JSONAPI from 'vuejs/api/json-axios'
|
||||
import REST from 'vuejs/api/rest-axios'
|
||||
// import REST from 'vuejs/api/rest-axios'
|
||||
// import MA from 'vuejs/api/ma-axios'
|
||||
// import qs from 'querystring-es3'
|
||||
import MGQ from 'vuejs/api/graphql-axios'
|
||||
import { print } from 'graphql/language/printer'
|
||||
import gql from 'graphql-tag'
|
||||
import ShowroomFields from 'vuejs/api/gql/showroom.fragment.gql'
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
@@ -20,7 +24,7 @@ export default {
|
||||
setItems (state, items) {
|
||||
state.items = items
|
||||
items.forEach((item, i) => {
|
||||
state.showrooms_by_tid[item.tid] = item
|
||||
state.showrooms_by_tid[item.id] = item
|
||||
})
|
||||
// console.log('Showroom setitems', state.showrooms_by_tid)
|
||||
}
|
||||
@@ -28,14 +32,30 @@ export default {
|
||||
|
||||
// actions
|
||||
actions: {
|
||||
getItems ({ dispatch, commit, state }) {
|
||||
REST.get('/showrooms_rest?_format=json', {})
|
||||
.then(({ data }) => {
|
||||
console.log('showrooms REST: data', data)
|
||||
commit('setItems', data)
|
||||
getShowrooms ({ dispatch, commit, state }) {
|
||||
// REST.get('/showrooms_rest?_format=json', {})
|
||||
// .then(({ data }) => {
|
||||
// console.log('showrooms REST: data', data)
|
||||
// commit('setItems', data)
|
||||
// })
|
||||
// .catch((error) => {
|
||||
// console.warn('Issue with showrooms', error)
|
||||
// Promise.reject(error)
|
||||
// })
|
||||
const ast = gql`{
|
||||
allshowrooms(lang: "${drupalDecoupled.lang_code}") {
|
||||
...ShowroomFields
|
||||
}
|
||||
}
|
||||
${ShowroomFields}
|
||||
`
|
||||
MGQ.post('', { query: print(ast) })
|
||||
.then(({ data: { data: { allshowrooms } } }) => {
|
||||
console.log('loadshowrooms showrooms loaded', allshowrooms)
|
||||
commit('setItems', allshowrooms)
|
||||
})
|
||||
.catch((error) => {
|
||||
console.warn('Issue with showrooms', error)
|
||||
.catch(error => {
|
||||
console.warn('Issue with getShowrooms', error)
|
||||
Promise.reject(error)
|
||||
})
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user