responsive: base ok

package-lock.json

@@ -12020,6 +12020,11 @@
       "resolved": "https://registry.npmjs.org/vue-youtube-embed/-/vue-youtube-embed-2.2.2.tgz",
       "integrity": "sha512-l/EJuFMRK43AN73N+qxJnN0LB3uPl2xAghmr3dCvODWGCRWGjmGfrHaOtD93fu9J4co+CZLv1KP3akAsldC1aw=="
     },
+    "vue2-touch-events": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/vue2-touch-events/-/vue2-touch-events-3.2.1.tgz",
+      "integrity": "sha512-6aQz9tofO1yLSudW7ltISC5lTFKEu0rcBuYNLrega1AApYUosPuRZ8iinzJQ4k5nUncDIVB2JPcz9qJDoSyQVw=="
+    },
     "vuex": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.0.tgz",

package.json

@@ -28,6 +28,7 @@
     "vue-router": "^3.4.9",
     "vue-vimeo-player": "^0.1.0",
     "vue-youtube-embed": "^2.2.2",
+    "vue2-touch-events": "^3.2.1",
     "vuex": "^3.6.0"
   },
   "devDependencies": {

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

@@ -34,6 +34,15 @@ import { i18n, loadLanguageAsync } from 'vuejs/i18n'
 import VueMeta from 'vue-meta'
 Vue.use(VueMeta)
 
+import VueSimpleAccordion from 'vue-simple-accordion'
+Vue.use(VueSimpleAccordion, {
+  // ... Options go here
+})
+import 'vue-simple-accordion/dist/vue-simple-accordion.css'
+
+import Vue2TouchEvents from 'vue2-touch-events'
+Vue.use(Vue2TouchEvents)
+
 import VUserBlock from 'vuejs/components/Block/UserBlock'
 import VMainContent from 'vuejs/components/Content/MainContent'
 import VSearchBlock from 'vuejs/components/Block/SearchBlock'
@@ -47,13 +56,6 @@ import 'vue-cool-lightbox/dist/vue-cool-lightbox.min.css'
 import 'theme/assets/styles/main.scss'
 import 'theme/assets/styles/print.scss'
 
-import VueSimpleAccordion from 'vue-simple-accordion';
-import 'vue-simple-accordion/dist/vue-simple-accordion.css';
-
-Vue.use(VueSimpleAccordion, {
-  // ... Options go here
-});
-
 import { MA } from 'vuejs/api/ma-axios'
 
 (function (Drupal, drupalSettings, drupalDecoupled) {

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

@@ -34,6 +34,9 @@ $mdi-font-path: './mdi/fonts/';
       @content;
     }
   }
+	&.tapped{
+		@content;
+	}
 }
 
 aside.messages{
@@ -524,6 +527,9 @@ header[role="banner"]{
 			  display: none;
 	    }
 			padding: 1em 0 0;
+			h2{
+				padding: 0.5em 1em 0!important;
+			}
 		}
     h2{
       margin:0;
@@ -1228,9 +1234,11 @@ article.node--type-frontpage{
 			>li{
 				flex: 0 1 48%;
 				margin:0 0 0.5em 0;
+				filter: drop-shadow(0 0 3px #aaa);
 				>article{
 					width:100%;
 					height:auto;
+					box-shadow: none;
 					>section.images{
 						height: auto;
 						>figure{
@@ -1417,6 +1425,16 @@ article.card{
 
       }
     }
+
+		@include col-mediaquery-max(3){
+			width:23px;
+			>*{
+				>span.btn, >a{
+					font-size:1.2em;
+				}
+			}
+		}
+
     .tool.flags{
       .tool-content{
         ul{
@@ -1526,6 +1544,18 @@ article.card{
     >.col{
       flex-basis: 50%;
     }
+		@include col-mediaquery-max(3){
+			flex-flow: column;
+			width: 100%;
+			height: 100%;
+			overflow-y: auto;
+			>.col-right{
+				flex:0 0 auto;
+			}
+			>.col-left{
+				flex:0 0 100%;
+			}
+		}
     section.col-right{
       >*:not(nav.tools){
         position: relative;
@@ -1610,7 +1640,11 @@ article.card{
         }
         div.tool-content{
           min-width: $column_width *2 - $navtool_width - 10px;
+					@include col-mediaquery-max(3){
+						min-width: 80vw;
+					}
         }
+
       }
       section.tool.samples{
         div.tool-content{
@@ -1708,6 +1742,20 @@ article.card{
   }
 }
 
+// vuejs-modale hack as maxWidth and maxHeight does not work :(
+@include col-mediaquery-min(3){
+	.vm--modale-card{
+		max-width: 850px;
+		max-height: 610px;
+	  left: 50% !important;
+	  top: 50% !important;
+	  transform: translate(-50%, -50%) !important;
+	}
+}
+.vm--overlay{
+	background: rgba(0, 0, 0, 0.5)!important;
+}
+
 //  _____ _                   _   _
 // |_   _| |_  ___ _ __  __ _| |_(_)__ _ _  _ ___
 //   | | | ' \/ -_) '  \/ _` |  _| / _` | || / -_)

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');