responsive almost done

src/components/Content/EdText.vue

@@ -77,6 +77,9 @@ export default {
               ` @keyup.enter="onClickRef"` +
               ` @mouseover="onHoverLink"` +
               ` @mouseleave="onLeaveLink"` +
+              // prevent click on this one
+              ` v-touch:tap.prevent="onTapLink"` +
+              ` v-touch-class="'tapped'"` +
               `>${linkparts[4]}` +
               `<sup class="mdi mdi-message-text-outline" />` +
               `</a>`
@@ -114,10 +117,12 @@ export default {
     // },
     onClickRef (e) {
       console.log('onClickRef(e)', e)
-      this.$router.push({
-        name: e.target.dataset.index,
-        params: { id: e.target.dataset.uuid }
-      })
+      if (e.target.classList.contains('tapped')) {
+        this.$router.push({
+          name: e.target.dataset.index,
+          params: { id: e.target.dataset.uuid }
+        })
+      }
     },
     onHoverLink (e) {
       console.log('EdText onHoverLink(e)', e)
@@ -127,6 +132,14 @@ export default {
         rect: e.target.getBoundingClientRect()
       })
     },
+    onTapLink (e) {
+      console.log('EdText onTapLink(e)', e)
+      this.$emit('onHoverLink', {
+        uuid: e.target.dataset.uuid,
+        index: e.target.dataset.index,
+        rect: e.target.getBoundingClientRect()
+      })
+    },
     onLeaveLink (e) {
       // console.log('EdText onLeaveLink(e)', e)
       this.$emit('onLeaveLink')

src/components/Layouts/MainContentLayout.vue

@@ -1,17 +1,17 @@
 <template>
   <div
     :id="id"
-    class="full-width row main-content-layout"
+    class="full-width med-row large-row main-content-layout"
   >
-    <header class="col-3">
+    <header class="med-col-3 large-col-3">
       <slot name="header" />
     </header>
 
-    <section ref="scrollablecenter" class="col-6" @scroll.passive="onScrollCenter">
+    <section ref="scrollablecenter" class="med-col-6 large-col-6" @scroll.passive="onScrollCenter">
       <slot />
     </section>
 
-    <nav class="col-3">
+    <nav class="med-col-3 large-col-3" :class="{ opened: navopened }">
       <slot name="nav" />
     </nav>
 
@@ -26,7 +26,8 @@ export default {
       type: String,
       required: true
     },
-    reftoscrollto: { type: String }
+    reftoscrollto: { type: String },
+    navopened: { type: Boolean }
   },
   watch: {
     reftoscrollto: function (newref, oldref) {

src/components/nav/HeaderMenu.vue

@@ -2,8 +2,13 @@
   <nav id="header-menu">
     <ul v-if="corpusLoaded">
       <li><router-link to="/corpus">Corpus</router-link></li>
-      <li>
-        <span>Indexs</span>
+      <li :class="{ opened: indexOpened }">
+        <span
+          @click.prevent="onClickIndex"
+          @keyup.enter="onClickIndex"
+        >
+          Indexs
+        </span>
         <ul>
           <li><router-link to="/nominum">Personnes</router-link></li>
           <li><router-link to="/locorum">Lieux</router-link></li>
@@ -28,12 +33,18 @@ import { mapState } from 'vuex'
 export default {
   name: 'HeaderMenu',
   data: () => ({
-
+    indexOpened: false
   }),
   computed: {
     ...mapState({
       corpusLoaded: state => state.Corpus.corpusLoaded
     })
+  },
+  methods: {
+    onClickIndex (e) {
+      console.log('onClickIndex')
+      this.indexOpened = !this.indexOpened
+    }
   }
 }
 

src/components/nav/Results.vue

@@ -6,9 +6,9 @@
       class="row"
       :class="{ loading: isloading }"
     >
-      <header class="col-1">
+      <header class="small-col-12 med-col-1 large-col-1">
         <h2>Resultats</h2>
-        <span class="search-keys">{{ searchedKeys }}</span><br>
+        <span class="search-keys">{{ searchedKeys }}</span>
         <span v-if="resultsQuantity" class="results-count">{{ resultsCount }}</span>
         <v-select
           id="sorting"
@@ -21,7 +21,7 @@
           @input="onSortingSelected"
         />
       </header>
-      <section class="col-10 results-list">
+      <section class="small-col-12 med-col-10 large-col-10 results-list">
         <div class="wrapper">
           <ul v-if="results.length">
             <li v-for="result in results" :key="result.uuid" class="result">

src/components/nav/Search.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="search" class="col-11" :class="{ loading: isloading }">
     <form class="search-form row">
-      <fieldset class="search">
+      <fieldset class="search small-col-10 med-col-2 large-col-2">
         <div>
           <label for="keys">Search</label>
           <input
@@ -37,7 +37,7 @@
           title="chargement"
         />
       </fieldset>
-      <fieldset v-if="filters.persons.length" class="filters filters-nominum col-2">
+      <fieldset v-if="filters.persons.length" class="filters filters-nominum small-col-4 med-col-2 large-col-2">
         <v-select
           id="filters-nominum"
           type="select"
@@ -50,7 +50,7 @@
           @input="onFiltersNominumSelected"
         />
       </fieldset>
-      <fieldset v-if="filters.places.length" class="filters filters-locorum col-2">
+      <fieldset v-if="filters.places.length" class="filters filters-locorum small-col-4 med-col-2 large-col-2">
         <v-select
           id="filters-locorum"
           type="select"
@@ -63,7 +63,7 @@
           @input="onFiltersLocorumSelected"
         />
       </fieldset>
-      <fieldset v-if="filters.objects.length" class="filters filters-operum col-2">
+      <fieldset v-if="filters.objects.length" class="filters filters-operum small-col-4 med-col-2 large-col-2">
         <v-select
           id="filters-operum"
           type="select"