responsive: base ok

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')
+      })
     }
   }
 }