#2092 responsive

src/components/Layouts/MainContentLayout.vue

@@ -3,7 +3,7 @@
     :id="id"
     class="full-width med-row large-row main-content-layout"
   >
-    <header class="med-col-3 large-col-3">
+    <header class="med-col-3 large-col-3" :class="{ opened: headeropened }">
       <slot name="header" />
     </header>
 
@@ -35,6 +35,7 @@ export default {
       required: true
     },
     reftoscrollto: { type: String },
+    headeropened: { type: Boolean },
     navopened: { type: Boolean }
   },
   watch: {

src/components/nav/Results.vue

@@ -9,7 +9,7 @@
       <header class="small-col-12 med-col-1 large-col-1">
         <h2>Resultats</h2>
         <div class="results-details">
-          <span class="search-keys">{{ searchedKeys }}</span><br>
+          <span class="search-keys">{{ searchedKeys }}</span>
           <span v-if="resultsQuantity" class="results-count">{{ resultsCount }}</span>
         </div>
         <v-select

src/pages/Edition.vue

@@ -3,13 +3,23 @@
     id="edition"
     :reftoscrollto="reftoscrollto"
     :navopened="navopened"
+    :headeropened="headeropened"
     @onCenterScrolled="onCenterScrolled"
   >
     <!-- <transition name="fade" mode="out-in"> -->
     <template v-if="!corpusLoaded" #header>
       <span class="loading">Chargement ...</span>
     </template>
+
     <template v-else #header>
+      <span
+        class="header-title"
+        @click.prevent="onOpenCloseHeader"
+        @keyup.enter="onOpenCloseHeader"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" role="presentation" class="vs__open-indicator"><path d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z" /></svg>
+        Notice
+      </span>
       <h1>
         <router-link :to="{ name:'edition', params: { id: editionid }}">{{ title }}</router-link>
       </h1>
@@ -207,6 +217,7 @@ export default {
     //
     pagination: null,
     //
+    headeropened: false,
     navopened: false,
     //
     entities_displayed: false
@@ -524,6 +535,16 @@ export default {
     onOpenCloseNav (e) {
       console.log('onOpenCloseNav', e)
       this.navopened = !this.navopened
+      if (this.navopened) {
+        this.headeropened = false
+      }
+    },
+    onOpenCloseHeader (e) {
+      console.log('onOpenCloseHeader', e)
+      this.headeropened = !this.headeropened
+      if (this.headeropened) {
+        this.navopened = false
+      }
     },
     onClickTooltip (e) {
       console.log(`onClickTooltip index: ${e.target.dataset.index}, uuid: ${e.target.dataset.uuid}`)

src/pages/Home.vue

@@ -10,22 +10,27 @@
     <section class="row">
       <div class="col-2" />
       <div class="col-8 teasers">
-        <div v-if="colophonHome.length && colophonHome.length > 0" class="wrapper">
-          <article
-            v-for="page in colophonHome"
-            :key="page.uuid"
-          >
-            <!-- <h1>{{ page.title }}</h1> -->
-            <div v-html="trimedTei(page.tei)" />
-            <a
-              :href="page.url"
-              class="readmore"
-              @click.prevent="onclick(page.uuid)"
-              @keyup.enter="onclick(page.uuid)"
+        <div class="wrapper">
+          <template v-if="!colophonHome || colophonHome.length <= 0">
+            <span class="loading">Chargement ...</span>
+          </template>
+          <template v-else>
+            <article
+              v-for="page in colophonHome"
+              :key="page.uuid"
             >
-              <span>Lire la suite</span>
-            </a>
-          </article>
+              <!-- <h1>{{ page.title }}</h1> -->
+              <div v-html="trimedTei(page.tei)" />
+              <a
+                :href="page.url"
+                class="readmore"
+                @click.prevent="onclick(page.uuid)"
+                @keyup.enter="onclick(page.uuid)"
+              >
+                <span>Lire la suite</span>
+              </a>
+            </article>
+          </template>
         </div>
       </div>
       <div class="col-2" />

src/pages/Static.vue

@@ -7,21 +7,31 @@
       <span v-if="!page" class="loading">Chargement ...</span>
       <template v-else>
         <h1>{{ page.title }}</h1>
-        <nav v-if="toc" class="toc">
-          <ul>
-            <li
-              v-for="(item,index) in toc"
-              :key="index"
-            >
-              <a
-                :href="'#' + item.hash"
-                @click.prevent="onclickTOC"
-                @keyup.enter="onclickTOC"
+        <nav v-if="toc" class="toc" :class="{ opened: sommaireopened }">
+          <span
+            class="sommaire-title"
+            @click.prevent="onOpenCloseSommaire"
+            @keyup.enter="onOpenCloseSommaire"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" role="presentation" class="vs__open-indicator"><path d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z" /></svg>
+            Sommaire
+          </span>
+          <div class="wrapper">
+            <ul>
+              <li
+                v-for="(item,index) in toc"
+                :key="index"
               >
-                {{ item.title }}
-              </a>
-            </li>
-          </ul>
+                <a
+                  :href="'#' + item.hash"
+                  @click.prevent="onclickTOC"
+                  @keyup.enter="onclickTOC"
+                >
+                  {{ item.title }}
+                </a>
+              </li>
+            </ul>
+          </div>
         </nav>
       </template>
     </template>
@@ -45,7 +55,8 @@ export default {
     uuid: null,
     page: null,
     toc: [],
-    reftoscrollto: null
+    reftoscrollto: null,
+    sommaireopened: false
   }),
   computed: {
     ...mapState({
@@ -112,6 +123,10 @@ export default {
         })
       })
     },
+    onOpenCloseSommaire (e) {
+      console.log('onOpenCloseSommaire', e)
+      this.sommaireopened = !this.sommaireopened
+    },
     onclickTOC (e) {
       console.log('onClickTOC', e, e.target.hash)
       this.reftoscrollto = e.target.hash