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

web/themes/custom/materiotheme/vuejs/components/Form/SearchForm.vue

@@ -14,6 +14,7 @@ export default {
       template: null,
       typed: null,
       autocomplete: null,
+      $input: null
       // basePath: drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix
     }
   },
@@ -25,7 +26,9 @@ export default {
   },
   methods: {
     submit() {
-      console.log("search submited", this.typed, this.autocomplete);
+      console.log("search submited", this.typed, this.autocomplete)
+      // unfocus the text input to hide the keyboard on mobile device
+      this.$input.blur()
       // New search is triggered by Base.vue with router (which will also fill the store)
       this.$router.push({name:'base', query:{keys:this.typed,term:this.autocomplete}})
       // this.$router.push({
@@ -52,7 +55,8 @@ export default {
     focus: {
       // directive definition
       inserted: function (el) {
-        el.focus()
+        // do not focus the input as it popup the keyboard on mobile device
+        // el.focus()
       }
     }
   },
@@ -90,11 +94,11 @@ export default {
     // console.log('SearchForm mounted');
     Drupal.attachBehaviors(this.$el);
     // get the search input
-    let $input = this.$el.querySelector('#edit-search')
+    this.$input = this.$el.querySelector('#edit-search')
     // // focus on input
     // $input.focus()
     // Catch the jquery ui events for autocmplete widget
-    jQuery($input).on('autocompleteselect', this.onAutoCompleteSelect);
+    jQuery(this.$input).on('autocompleteselect', this.onAutoCompleteSelect);
   },
   render(h) {
     // console.log('searchForm render');