better modalCard, integrated i18n with vuejs-i18n and drupal's strings_i18n_json_export

remain to automaticly export jsons and updated json files with webpack
and to understand how to access nested translations

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

@@ -1771,9 +1771,28 @@ article.card {
     height: 610px; }
     article.card.modal-card > .col {
       flex-basis: 50%; }
-    article.card.modal-card section.col-right header {
+    article.card.modal-card section.col-right > *:not(nav.tools) {
       position: relative;
+      padding: 0.5em;
+      box-sizing: border-box;
+      width: 100%; }
+    article.card.modal-card section.col-right header {
       bottom: auto; }
+    article.card.modal-card section.col-right section.samples ul {
+      display: flex;
+      flex-flow: row wrap;
+      font-size: 0.882em;
+      font-weight: 300; }
+      article.card.modal-card section.col-right section.samples ul span.showroom {
+        font-weight: 500; }
+    article.card.modal-card section.col-right section.body p {
+      font-size: 0.882em;
+      font-weight: 300;
+      line-height: 1.35; }
+    article.card.modal-card section.col-right nav.tools {
+      opacity: 1; }
+      article.card.modal-card section.col-right nav.tools section.close span.btn.mdi-close {
+        cursor: pointer; }
 
 #main-content > article.article div.cols {
   display: grid;

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

@@ -26,6 +26,11 @@ Vue.use(VModal)
 import store from 'vuejs/store'
 import router from 'vuejs/route'
 
+// import VueI18n from 'vue-i18n'
+// Vue.use(VueI18n)
+// import * as Locales from 'assets/i18n/locales.json'
+import i18n from 'vuejs/i18n'
+
 import VUserBlock from 'vuejs/components/Block/UserBlock'
 import VMainContent from 'vuejs/components/Content/MainContent'
 import VSearchBlock from 'vuejs/components/Block/SearchBlock'
@@ -43,9 +48,10 @@ import 'theme/assets/styles/main.scss'
       _v_pagetitle_block, _v_search_block,
       _v_main_content, _v_left_content
     const _is_front = drupalSettings.path.isFront
-
     console.log('drupalSettings', drupalSettings)
 
+    // let _I18n
+
     //  ___      _ _
     // |_ _|_ _ (_) |_
     //  | || ' \| |  _|
@@ -70,6 +76,8 @@ import 'theme/assets/styles/main.scss'
     function initVues () {
       // only launch views if we are not in commerce pages
       if (!checkNoVuePages()) {
+        initVi18n()
+        initVStore()
         initVRouter()
         initVSiteBrandingBlock()
         initVPagetitleBlock()
@@ -81,6 +89,23 @@ import 'theme/assets/styles/main.scss'
       initVUserBlock()
     }
 
+    function initVi18n () {
+      i18n.locale = drupalDecoupled.lang_code
+      console.log('i18n.messages', i18n.messages)
+    //   const locales = {
+    //     ...Locales
+    //   }
+    //   _I18n = new VueI18n({
+    //     locale: drupalDecoupled.lang_code,
+    //     locales
+    //   })
+    //   console.log('_I18n', _I18n)
+    }
+
+    function initVStore () {
+      store.dispatch('Showrooms/getItems')
+    }
+
     function initVRouter () {
       // we need this to update the title and body classes while using history nav
       router.beforeEach((to, from, next) => {
@@ -136,6 +161,7 @@ import 'theme/assets/styles/main.scss'
     function initVSiteBrandingBlock () {
       _v_sitebranding_block = new Vue({
         store,
+        i18n,
         router,
         el: '#block-sitebranding',
         methods: {
@@ -165,6 +191,7 @@ import 'theme/assets/styles/main.scss'
       // create the vue
       _v_pagetitle_block = new Vue({
         store,
+        i18n,
         router,
         el: $blk,
         computed: {
@@ -195,6 +222,7 @@ import 'theme/assets/styles/main.scss'
 
       _v_user_block = new Vue({
         store,
+        i18n,
         // computed: {
         //   ...mapState({
         //     isloggedin: state => state.User.isloggedin
@@ -223,6 +251,7 @@ import 'theme/assets/styles/main.scss'
 
       _v_header_menu = new Vue({
         store,
+        i18n,
         router,
         el: '#block-header',
         methods: {
@@ -246,6 +275,7 @@ import 'theme/assets/styles/main.scss'
       const main_html = $main_content.innerHTML
       _v_main_content = new Vue({
         store,
+        i18n,
         render: h => h(VMainContent, { props: { id: id, html: main_html, isfront: drupalSettings.path.isFront } })
       }).$mount('#' + id)
     }
@@ -271,6 +301,7 @@ import 'theme/assets/styles/main.scss'
       // in any case create the vue
       _v_search_block = new Vue({
         store,
+        i18n,
         render: h => h(VSearchBlock, { props: { blockid: id, formhtml: formhtml } })
       }).$mount('#' + id)
     }
@@ -280,6 +311,7 @@ import 'theme/assets/styles/main.scss'
       // in any case create the vue
       _v_left_content = new Vue({
         store,
+        i18n,
         render: h => h(VLeftContent, { props: { id: id } })
       }).$mount('#' + id)
     }

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

@@ -867,10 +867,41 @@ article.card{
       flex-basis: 50%;
     }
     section.col-right{
-      header{
+      >*:not(nav.tools){
         position: relative;
+        padding: 0.5em;
+        box-sizing: border-box;
+        width: 100%;
+      }
+      header{
         bottom: auto;
       }
+      section.samples{
+        ul{
+          display: flex;
+          flex-flow: row wrap;
+          font-size: 0.882em;
+          font-weight: 300;
+          // line-height: 1.35;
+          span.showroom{ font-weight: 500; }
+        }
+      }
+      section.body{
+        p{
+          font-size: 0.882em;
+          font-weight: 300;
+          line-height: 1.35;
+        }
+
+      }
+      nav.tools{
+        opacity: 1;
+        section.close{
+          span.btn.mdi-close{
+            cursor:pointer;
+          }
+        }
+      }
     }
   }
 }