responsive: base ok

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

@@ -205,9 +205,14 @@ export default {
           },
           {
             name: `modal-${this.item.id}`,
-            draggable: true,
-            width: '850px',
-            height: '610px'
+            draggable: false,
+            classes: "vm--modale-card",
+            // this does not work
+            // adaptative: true,
+            // maxWidth: 850,
+            // maxHeight: 610,
+            width: '95%',
+            height: '95%'
           }
         )
       }

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

@@ -67,8 +67,10 @@ export default {
           {
             name: `modal-${this.item.id}`,
             draggable: false,
-            width: '850px',
-            height: '610px'
+            maxWidth: 850,
+            maxHeight: 610,
+            width: '95%',
+            height: '95%'
           }
         )
       }

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

@@ -2,14 +2,19 @@
   <div class="loading" v-if="!material || loading">
     <span>Loading ...</span>
   </div>
-  <article v-else class="card modal-card">
+  <article
+    v-else
+    class="card modal-card"
+    v-touch="onTapCard"
+    v-touch:swipe="onSwipeCard"
+  >
     <section class="col col-right">
       <header>
         <h1>{{ material.title }}</h1>
         <h4>{{ material.short_description }}</h4>
         <span class="ref">{{ material.reference }}</span>
       </header>
-      <nav class="tools">
+      <nav ref="tools" class="tools">
         <section class="tool close">
           <span
             class="btn mdi mdi-close"
@@ -17,7 +22,10 @@
           />
         </section>
         <section class="tool flags">
-          <span class="btn mdi mdi-folder-outline"/>
+          <span
+            class="btn mdi mdi-folder-outline"
+            v-touch.prevent.stop="onTapTool"
+          />
           <div class="tool-content">
             <span class="label">{{ $t("materio.My folders") }}</span>
             <ul>
@@ -49,7 +57,10 @@
           </div>
         </section>
         <section class="tool samples" v-if="item.samples && item.samples.length">
-          <span class="btn mdi mdi-beaker-outline"/>
+          <span
+            class="btn mdi mdi-beaker-outline"
+            v-touch.prevent.stop="onTapTool"
+          />
           <div class="tool-content">
             <span class="label">{{ $t("materio.Samples") }}</span>
             <ul>
@@ -63,8 +74,16 @@
           </div>
         </section>
         <section class="tool note">
-          <span v-if="note_nid" class="btn mdi mdi-note"/>
-          <span v-else class="btn mdi mdi-note-outline"/>
+          <span
+            v-if="note_nid"
+            class="btn mdi mdi-note"
+            v-touch.prevent.stop="onTapTool"
+          />
+          <span
+            v-else
+            class="btn mdi mdi-note-outline"
+            v-touch.prevent.stop="onTapTool"
+          />
           <div class="tool-content">
             <textarea spellcheck="false" v-model="note" name="note"/>
           </div>
@@ -418,6 +437,10 @@ export default {
       // this.$modal.hideAll()
       this.$modal.hide(`modal-${this.item.id}`)
     },
+    onSwipeCard (e) {
+      console.log('onSwipeCard', e)
+      this.$modal.hide(`modal-${this.item.id}`)
+    },
     prettyFileSize(bytes){
       return prettyBytes(parseInt(bytes))
     },
@@ -476,6 +499,23 @@ export default {
         .catch(error => {
           console.warn('Issue with createNote', error)
         })
+    },
+    onTapTool (e) {
+      console.log('ontapTool', e)
+      let tools = e.target.parentNode.parentNode.querySelectorAll('section.tool')
+      tools.forEach((item, i) => {
+        item.classList.remove('tapped')
+      })
+      e.target.parentNode.classList.add('tapped')
+    },
+    onTapCard (e) {
+      console.log('ontapCard', e)
+      let tools = this.$refs['tools'].querySelectorAll('section.tool')
+      // console.log();
+      tools.forEach((item, i) => {
+        console.log('item', item)
+        item.classList.remove('tapped')
+      })
     }
   }
 }