refactored modale : accordion

package-lock.json

@@ -8401,6 +8401,12 @@
       "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=",
       "dev": true
     },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
     "lodash.template": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
@@ -11901,6 +11907,15 @@
         }
       }
     },
+    "vue-simple-accordion": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/vue-simple-accordion/-/vue-simple-accordion-0.1.0.tgz",
+      "integrity": "sha512-y5oovH55smiNkEZ4lWLpE7H9t0TTYofN/zo4/NTap6Va/Ob+WlU7eRA2nzbFIaJUqk4cXHPJbLUblxU1jAL98g==",
+      "dev": true,
+      "requires": {
+        "lodash.merge": "^4.6.2"
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",

package.json

@@ -71,6 +71,7 @@
     "vue-loader": "^15.9.5",
     "vue-meta": "^2.4.0",
     "vue-server-renderer": "^2.6.12",
+    "vue-simple-accordion": "^0.1.0",
     "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.6.12",
     "vuex-extensions": "^1.1.5",

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

@@ -45,15 +45,12 @@ import { mapState } from 'vuex'
 import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
 import 'theme/assets/styles/main.scss'
 
-// import prettyBytes from 'vuejs/plugins/prettyBytes'
+import VueSimpleAccordion from 'vue-simple-accordion';
-// Vue.use(prettyBytes)
+import 'vue-simple-accordion/dist/vue-simple-accordion.css';
-
-// Vue.filter('prettyBytes', function (value) {
-//   if (!value) return ''
-//   value = value.toString()
-//   return value + 'Mb'
-// })
 
+Vue.use(VueSimpleAccordion, {
+  // ... Options go here
+});
 
 (function (Drupal, drupalSettings, drupalDecoupled) {
   const MaterioTheme = function () {

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

@@ -1,6 +1,8 @@
 $transparent-bg: rgba(255,255,255, 0.95);
 $transparent-bg-blk: rgba(0,0,0, 0.75);
 
+$color-main-text: #1A1A1A;
+
 $color-base:#69cdcf;
 $color-showrooms:#50aa3c;
 $color-blabla:#9458aa;

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

@@ -1,5 +1,6 @@
 body {
 	background: white;
+	color:$color-main-text;
 }
 
 a{

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

@@ -1180,6 +1180,35 @@ article.card{
         }
 
       }
+      .vsa-list{
+        padding:0;
+        border: none;
+        --vsa-heading-padding: 0 0;
+        --vsa-content-padding: 0 0 0.5em;
+        --vsa-default-icon-size: 0.2;
+        --vsa-border-width: 0;
+        --vsa-text-color: #{$color-main-text};
+        --vsa-highlight-color: #fff;
+        --vsa-bg-color: #fff;
+
+        .vsa-item__trigger:focus .vsa-item__trigger__icon--is-default::after, .vsa-item__trigger:focus .vsa-item__trigger__icon--is-default::before, .vsa-item__trigger:hover .vsa-item__trigger__icon--is-default::after, .vsa-item__trigger:hover .vsa-item__trigger__icon--is-default::before {
+            background-color: var(--vsa-text-color);
+        }
+        .vsa-item{
+          .vsa-item__heading{
+            button.vsa-item__trigger{
+              height:2em;
+              &:hover,
+              &:focus{
+                  color: var(--vsa-text-color);
+              }
+            }
+          }
+          .vsa-item__content{
+
+          }
+        }
+      }
       section.linked-materials{
         >ul{
           display: flex;
@@ -1220,8 +1249,25 @@ article.card{
           }
         }
       }
-      section.tool.industriels{
+      // section.tool.industriels{
-        div.tool-content{
+      //   div.tool-content{
+      //     display: flex;
+      //     flex-flow: row;
+      //     >section{
+      //       flex: 0 0 50%;
+      //       h2{
+      //         margin:0;
+      //         font-size: 1em;
+      //         line-height: 0.6;
+      //       }
+      //       p{
+      //         margin: 0;
+      //         font-size: 0.882em;
+      //       }
+      //     }
+      //   }
+      // }
+      section.industriels{
           display: flex;
           flex-flow: row;
           >section{
@@ -1237,7 +1283,6 @@ article.card{
             }
           }
       }
-      }
       section.attachments{
         a{
           margin:0;

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

@@ -50,7 +50,7 @@
             </ul>
           </div>
         </section>
-        <section class="tool industriels"  v-if="material.manufacturer || material.distributor">
+        <!-- <section class="tool industriels"  v-if="material.manufacturer || material.distributor">
           <span class="btn mdi mdi-factory"/>
           <div class="tool-content">
             <section v-if="material.distributor">
@@ -78,11 +78,65 @@
               </ul>
             </section>
           </div>
-        </section>
+        </section> -->
       </nav>
       <section class="body" v-html="material.body"/>
-      <section v-if="material.attachments" class="attachments">
+      <vsa-list>
+        <vsa-item v-if="material.linked_materials">
+          <vsa-heading>
+            <span class="label">{{ $t("materio.Linked materials") }}</span>
+          </vsa-heading>
+          <vsa-content>
+            <section class="linked-materials">
+              <ul>
+                <li v-for="m in material.linked_materials" v-bind:key="m.id">
+                  <LinkedMaterialCard :item="m"/>
+                </li>
+              </ul>
+            </section>
+          </vsa-content>
+        </vsa-item>
+
+        <vsa-item  v-if="material.manufacturer || material.distributor">
+          <vsa-heading>
+            <span class="label">{{ $t("default.Contact") }}</span>
+          </vsa-heading>
+          <vsa-content>
+            <section class="industriels">
+              <section v-if="material.distributor">
+                <span class="label">{{ $t("materio.Distributor") }}</span>
+                <ul>
+                  <li v-for="distrib in material.distributor" v-bind:key="distrib.id">
+                    <h2>{{ distrib.name }}</h2>
+                    <p v-if="distrib.website">
+                      <a target="_blank" :href="distrib.website.url">distrib.website.url</a>
+                    </p>
+                    <p v-if="distrib.email"><a :href="'mailto:'+distrib.email">{{ distrib.email }}</a></p>
+                  </li>
+                </ul>
+              </section>
+              <section v-if="material.manufacturer">
+                <span class="label">{{ $t("materio.Manufacturer") }}</span>
+                <ul>
+                  <li v-for="manu in material.manufacturer" v-bind:key="manu.id">
+                    <h2>{{ manu.name }}</h2>
+                    <p v-if="manu.website">
+                      <a target="_blank" :href="manu.website.url">manu.website.url</a>
+                    </p>
+                    <p v-if="manu.email"><a :href="'mailto:'+manu.email">{{ manu.email }}</a></p>
+                  </li>
+                </ul>
+              </section>
+            </section>
+          </vsa-content>
+        </vsa-item>
+
+        <vsa-item v-if="material.attachments && material.attachments.length">
+          <vsa-heading>
             <span class="label">{{ $t("materio.Attachments") }}</span>
+          </vsa-heading>
+          <vsa-content>
+            <section class="attachments">
               <ul>
                 <li
                   v-for="attachmt in material.attachments" :key="attachmt.file.fid"
@@ -92,14 +146,9 @@
                 </li>
               </ul>
             </section>
-      <section v-if="material.linked_materials" class="linked-materials">
+          </vsa-content>
-        <span class="label">{{ $t("materio.Linked materials") }}</span>
+        </vsa-item>
-        <ul>
+      </vsa-list>
-          <li v-for="m in material.linked_materials" v-bind:key="m.id">
-            <LinkedMaterialCard :item="m"/>
-          </li>
-        </ul>
-      </section>
     </section>
     <section class="col col-left images" v-switcher>
       <figure