added showrooms pages, made page-title color

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

@@ -1174,7 +1174,10 @@ header[role="banner"] {
     header[role="banner"] #block-header ul.menu {
       margin: 0; }
       header[role="banner"] #block-header ul.menu li {
-        padding: 0; }
+        padding: 0;
+        display: inline-block; }
+        header[role="banner"] #block-header ul.menu li:not(:first-of-type) {
+          margin-left: 0.5em; }
   header[role="banner"] #block-languageswitcher {
     text-align: right; }
     header[role="banner"] #block-languageswitcher h2 {
@@ -1221,6 +1224,17 @@ header[role="banner"] {
       font-size: 1.512em;
       text-transform: capitalize;
       font-weight: 300; }
+      body:not(.path-home) header[role="banner"] #block-pagetitle h2 {
+        padding: 0.5em 1em; }
+      body.path-blabla header[role="banner"] #block-pagetitle h2 {
+        color: #fff;
+        background-color: #9458aa; }
+      body.path-showrooms header[role="banner"] #block-pagetitle h2 {
+        color: #fff;
+        background-color: #50aa3c; }
+      body.path-base header[role="banner"] #block-pagetitle h2 {
+        color: #fff;
+        background-color: #69cdcf; }
   header[role="banner"] #block-materiosapisearchblock {
     float: right;
     display: inline-block;
@@ -1390,6 +1404,23 @@ article.node--type-frontpage .node__content > section.home-blabla {
             font-size: 0.756em;
             line-height: 0.9; }
 
+#showrooms {
+  width: calc(100% + 15px); }
+  #showrooms article.showroom {
+    width: 435px;
+    display: inline-block;
+    vertical-align: top;
+    margin: 0 15px 15px 0; }
+    #showrooms article.showroom h1 {
+      margin: 0;
+      font-weight: 4; }
+    #showrooms article.showroom p {
+      margin: 0; }
+    #showrooms article.showroom figure {
+      margin: 0; }
+      #showrooms article.showroom figure img {
+        max-width: 100%; }
+
 .infinite-loading-container .infinite-status-prompt i[class^="loading-"] {
   width: 15px;
   height: 15px; }

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

@@ -55,9 +55,40 @@ import 'theme/assets/styles/main.scss'
     }
 
     function initVRouter(){
-      // we need this to update the title while using history nav
+      // we need this to update the title and body classes while using history nav
       router.beforeEach((to, from, next) => {
+        // console.log('router beforeEach to ', to);
+        // commit new title to store
         store.commit('Common/setPagetitle', to.name != 'home' ? to.name : null)
+
+        // remove all path related body classes
+        let body_classes = document.querySelector('body').classList;
+        let classes_to_rm = [];
+        for (var i = 0; i < body_classes.length; i++) {
+          if(body_classes[i].startsWith('path-')){
+            classes_to_rm.push(body_classes[i]);
+          }
+        }
+        document.querySelector('body').classList.remove(...classes_to_rm);
+        // add new path classes to body
+        let classes = [];
+        if(to.path == '/'){
+          classes.push('path-home');
+        }else{
+          let path_parts = to.path.replace(/^\//, '').split('/');
+          for (var i = 0; i < path_parts.length; i++) {
+            if(i == 0){
+              var c = "path-" + path_parts[i];
+            }else if (path_parts[i] !== ''){
+              var c = classes[i-1] +'-'+ path_parts[i];
+            }
+            classes.push(c)
+          }
+
+        }
+        document.querySelector('body').classList.add(...classes);
+
+        // trigger router
         next();
       })
     }
@@ -157,7 +188,7 @@ import 'theme/assets/styles/main.scss'
           onclick(event){
             // console.log("Clicked on header menu link", event);
             let href = event.target.getAttribute('href');
-            let title = event.target.innerText;
+            // let title = event.target.innerText;
             // console.log("Clicked on header menu link : href", href);
             this.$router.push(href)
             // replaced by router.beforeEach

web/themes/custom/materiotheme/assets/styles/base/_colors.scss

@@ -1 +1,5 @@
 $transparent-bg: rgba(255,255,255, 0.95);
+
+$color-base:#69cdcf;
+$color-showrooms:#50aa3c;
+$color-blabla:#9458aa;

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

@@ -134,6 +134,10 @@ header[role="banner"]{
       margin:0;
       li{
         padding:0;
+        display: inline-block;
+        &:not(:first-of-type){
+          margin-left: 0.5em;
+        }
         a{
           @extend %header-fs;
         }
@@ -204,6 +208,24 @@ header[role="banner"]{
       font-size: 1.512em;
       text-transform: capitalize;
       font-weight: 300;
+
+
+
+      body:not(.path-home) & {
+        padding:0.5em 1em;
+      }
+      body.path-blabla & {
+        color: #fff;
+        background-color: $color-blabla;
+      }
+      body.path-showrooms & {
+        color: #fff;
+        background-color: $color-showrooms;
+      }
+      body.path-base & {
+        color: #fff;
+        background-color: $color-base;
+      }
     }
   }
 
@@ -320,7 +342,7 @@ article.node--type-frontpage{
         @extend %part-centered-layout;
       }
       &.home-database{
-        background-color: #69cdcf;
+        background-color: $color-base;
         @extend %part-columned-layout;
         .field--name-field-a-database{}
         .cards-list-home{
@@ -357,7 +379,7 @@ article.node--type-frontpage{
         }
       }
       &.home-showrooms{
-        background-color: #50aa3c;
+        background-color: $color-showrooms;
         @extend %part-columned-layout;
         .field--name-field-showrooms{
         }
@@ -408,7 +430,7 @@ article.node--type-frontpage{
                 width:100%;
                 box-sizing:border-box;
                 padding:1em 0;
-                background-color:#50aa3c;
+                background-color:$color-showrooms;
                 color: #fff;
                 >*{
                   // display: inline-block;
@@ -424,7 +446,7 @@ article.node--type-frontpage{
         }
       }
       &.home-blabla{
-        background-color: #9458aa;
+        background-color: $color-blabla;
         @extend %part-columned-layout;
 
         .cards-list-home{
@@ -477,6 +499,34 @@ article.node--type-frontpage{
 }
 
 
+
+ //  ___ _
+ // / __| |_  _____ __ ___ _ ___  ___ _ __  ___
+ // \__ \ ' \/ _ \ V  V / '_/ _ \/ _ \ '  \(_-<
+ // |___/_||_\___/\_/\_/|_| \___/\___/_|_|_/__/
+#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;
+    }
+    p{ margin:0; }
+    figure{
+      margin:0;
+      img{
+        max-width: 100%;
+      }
+    }
+  }
+
+}
+
  //   ___             _
  //  / __|__ _ _ _ __| |___
  // | (__/ _` | '_/ _` (_-<

web/themes/custom/materiotheme/materiotheme.info.yml

@@ -11,7 +11,6 @@ libraries:
 regions:
   header: Header
   header_left: 'Header left'
-  header_middle: 'Header middle'
   header_right: 'Header right'
   header_bottom: 'Header bottom'
   content_top: 'Content Top'

web/themes/custom/materiotheme/templates/layout/page.html.twig

@@ -46,12 +46,7 @@
           {{ page.header_left}}
         {% endif %}
       </div>
-      <div class="header-block header-middle col-4">
+      <div class="header-block header-right col-8">
-        {% if page.header_middle %}
-          {{ page.header_middle}}
-        {% endif %}
-      </div>
-      <div class="header-block header-right col-4">
         {% if page.header_right %}
           {{ page.header_right}}
         {% endif %}

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

@@ -0,0 +1,37 @@
+<template>
+  <article class="showroom">
+    <header>
+      <h1 v-html="item.name" />
+    </header>
+    <section class="images">
+      <figure v-html="item.field_visuels"></figure>
+    </section>
+    <section class="content">
+      <address v-html="item.field_public_address" />
+      <div class="phone" v-html="item.field_public_phone" />
+      <div class="email" v-html="item.field_public_email" />
+    </section>
+  </article>
+</template>
+
+<script>
+import { JSONAPI } from 'vuejs/api/json-axios'
+import router from 'vuejs/route'
+
+let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
+
+export default {
+  name: "Showroom",
+  router,
+  props: ['item'],
+  // data(){
+  //   return {
+  //     alias: this.item.view_node.replace(/^.?\/showroom\//g, '')
+  //   }
+  // },
+  // methods:{}
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

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

@@ -155,6 +155,7 @@ export default {
         obj.data.forEach((e) => {
           // get the included values
           let included = inc.find((i) => { return i.id == e.id })
+          if(typeof included != 'undefined'){
             // fill the values
             switch (key) {
               case 'field_visuel':
@@ -174,6 +175,7 @@ export default {
               default:
             }
             this.content[key].push(field)
+          }
         })
       }
 

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

@@ -0,0 +1,48 @@
+<template>
+  <div id="showrooms">
+    <div class="loading" v-if="!items.length">
+      <span>Loading ...</span>
+    </div>
+    <Showroom
+      v-else
+      v-for="item in items"
+      v-bind:key="item.uuid"
+      :item="item"
+    />
+  </div>
+</template>
+
+<script>
+
+import Showroom from 'vuejs/components/Content/Showroom'
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: "Showrooms",
+  // data() {
+  //   return {
+  //     items:[],
+  //     page:0
+  //   }
+  // },
+  computed: {
+    ...mapState({
+      items: state => state.Showrooms.items
+    })
+  },
+  created(){
+    if(!this.items.length)
+      this.getItems()
+  },
+  methods: {
+    ...mapActions({
+      getItems: 'Showrooms/getItems'
+    })
+  },
+  components: {
+    Showroom
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

web/themes/custom/materiotheme/vuejs/route/index.js

@@ -1,10 +1,11 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
-import Home from 'vuejs/components/Content/Home'
+import Home from 'vuejs/components/Pages/Home'
-import Base from 'vuejs/components/Content/Base'
+import Base from 'vuejs/components/Pages/Base'
-import Blabla from 'vuejs/components/Content/Blabla'
+import Blabla from 'vuejs/components/Pages/Blabla'
-import Article from 'vuejs/components/Content/Article'
+import Article from 'vuejs/components/Pages/Article'
+import Showrooms from 'vuejs/components/Pages/Showrooms'
 
 Vue.use(VueRouter)
 
@@ -59,6 +60,12 @@ const routes = [
     path: `${basePath}blabla/:alias`,
     component: Article,
     // meta: { uuid:null }
+  },
+  {
+    name:'showrooms',
+    path: `${basePath}showrooms`,
+    component: Showrooms,
+    // meta: { uuid:null }
   }
   // {
   //   path: '*',

web/themes/custom/materiotheme/vuejs/store/index.js

@@ -4,6 +4,7 @@ import Common from './modules/common'
 import User from './modules/user'
 import Search from './modules/search'
 import Blabla from './modules/blabla'
+import Showrooms from './modules/showrooms'
 
 // https://github.com/vuejs/vuex/tree/dev/examples/shopping-cart
 
@@ -13,6 +14,7 @@ export default new Vuex.Store({
     Common,
     User,
     Search,
-    Blabla
+    Blabla,
+    Showrooms
   }
 })

web/themes/custom/materiotheme/vuejs/store/modules/common.js

@@ -16,7 +16,7 @@ export default {
   // mutations
   mutations : {
     setPagetitle (state, title) {
-      console.log('Common, setPagetitle', title);
+      // console.log('Common, setPagetitle', title);
       state.pagetitle = title
     }
   },

web/themes/custom/materiotheme/vuejs/store/modules/showrooms.js

@@ -0,0 +1,38 @@
+import { JSONAPI } from 'vuejs/api/json-axios'
+import { REST } from 'vuejs/api/rest-axios'
+import { MA } from 'vuejs/api/ma-axios'
+import qs from 'querystring'
+
+export default {
+  namespaced: true,
+
+  // initial state
+  state : {
+    items: [],
+  },
+
+  // getters
+  getters : {},
+
+  // mutations
+  mutations : {
+    setItems (state, items) {
+      state.items = state.items.concat(items)
+    }
+  },
+
+  // actions
+  actions : {
+    getItems({ 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)
+        })
+    }
+  }
+}