#2092 responsive

assets/css/app.scss

@@ -98,12 +98,14 @@ header[role="banner"]{
 section[role="main-content"]{
   #home{
     header{
+      margin:15vh 0 0;
       text-align: center;
+      padding: 1em 0;
       h1{
         color: $bleuroi;
         font-size: 8em;
         font-weight: 300;
-        margin:15vh 0 0;
+        margin: 0;
       }
       h2{
         color: $or;
@@ -420,12 +422,6 @@ section[role="main-content"]{
     }
   }
 
-  #corpus{
-  }
-
-  .index{
-  }
-
   .index-item{
     header{
       h1{
@@ -631,6 +627,7 @@ section[role="main-content"]{
   #edition{
     >header{
       position: relative;
+      span.header-title{ display:none; }
       h1{
         @include title1blue;
       }
@@ -674,7 +671,59 @@ section[role="main-content"]{
           }
         }
       }
+      
     }
+    // responsive
+    @media only screen and (max-width: $small-bp), (orientation: portrait) {
+      >header{
+        $top: 45px;
+        z-index: 110;
+        position: absolute;
+        top:$top;
+        left:0;
+        background-color: #fff;
+        width:percentage(5/$default_sum);
+        box-sizing: border-box;
+        padding-top: 1em;
+        padding-bottom: 1em;
+        height:calc(100% - #{$top});
+
+        transform: translateX(-100%);
+        transition: transform 0.3s ease-in-out;
+
+        span.header-title{
+          display: block;
+          position: absolute;
+          top:4.5em; right:-1em;
+          transform: rotateZ(-90deg);
+          transform-origin: center;
+          @include fontsans;
+          font-size: 0.600em;
+          cursor: pointer;
+          color: $bleuroi;
+          svg{
+            vertical-align: bottom;
+            transform-origin: center;
+            transform: scale(0.8) rotate(0);
+            transition: transform 0.3s ease-in-out;
+            path{
+              fill: $bleuroi;
+            }
+          }
+        }
+
+        &.opened{
+          box-shadow: 3px 3px 5px $grisclair;
+          transform: translateX(0);
+          span.header-title{
+            svg{
+              transform: scale(0.7) rotate(180deg);
+            }
+          }
+        }
+      }
+    }
+
 
     $pagenum_w:1em;
     >section{
@@ -724,6 +773,7 @@ section[role="main-content"]{
               cursor: pointer;
             }
           }
+          // todo what about touch is hover will work ?
           &:hover .popup{
             display: block;
             opacity: 1;
@@ -1337,6 +1387,7 @@ section[role="main-content"]{
         margin-bottom: $base-line * 0.4;
       }
       nav.toc{
+        span.sommaire-title{ display:none; }
         li{
           a{
             font-size: 1em;
@@ -1344,6 +1395,60 @@ section[role="main-content"]{
             font-weight: 300;
           }
         }
+        // responsive
+        @media only screen and (max-width: $small-bp), (orientation: portrait) {
+          $top: 80px;
+          z-index: 110;
+          position: absolute;
+          top:$top;
+          left:0;
+          background-color: #fff;
+          width:percentage(7/$default_sum);
+          box-sizing: border-box;
+          padding-top: 1em;
+          padding-bottom: 1em;
+          height:calc(100% - #{$top});
+          overflow-y: auto;
+
+          transform: translateX(-100%);
+          transition: transform 0.3s ease-in-out;
+
+          >div.wrapper{
+            padding-right: 2em;
+            height: 100%;
+            overflow-y: auto;
+          }
+          span.sommaire-title{
+            display: block;
+            position: absolute;
+            top:4.5em; right:-2em;
+            transform: rotateZ(-90deg);
+            transform-origin: center;
+            @include fontsans;
+            font-size: 0.600em;
+            cursor: pointer;
+            color: $bleuroi;
+            svg{
+              vertical-align: bottom;
+              transform-origin: center;
+              transform: scale(0.8) rotate(0);
+              transition: transform 0.3s ease-in-out;
+              path{
+                fill: $bleuroi;
+              }
+            }
+          }
+
+          &.opened{
+            box-shadow: 3px 3px 5px $grisclair;
+            transform: translateX(0);
+            span.sommaire-title{
+              svg{
+                transform: scale(0.7) rotate(180deg);
+              }
+            }
+          }
+        }
       }
     }
     >section{
@@ -1483,6 +1588,9 @@ footer[role="tools"]{
 
       div.results-details{
         line-height: $base-line * 0.5;
+        >*{
+          display: block;
+        }
         .search-keys{
           font-size: 0.756em;
           font-weight: 500;
@@ -1537,6 +1645,14 @@ footer[role="tools"]{
           display: inline-block;
           margin-right: 1em;
         }
+        div.results-details{
+          >*{
+            display: inline-block;
+            &:not(:last-child){
+              padding-right: 1em;
+            }
+          }
+        }
         #sorting{
           width:10em;
         }
@@ -1558,6 +1674,7 @@ footer[role="tools"]{
     padding:0 $side-padding;
     @media only screen and (max-width: $small-bp), (orientation: portrait) {
       padding:0 $side-padding/2;
+      flex-wrap: nowrap;
     }
     background-color: $bleuroi;
     &>*{
@@ -1580,6 +1697,9 @@ footer[role="tools"]{
             width: calc(100% + $side-padding);
             margin-left:-$side-padding;
             padding:0.3em 0.5em 0.3em $side-padding;
+            @media only screen and (max-width: $small-bp), (orientation: portrait) {
+              padding: 0.3em 0em 0.3em 2em;
+            }
           }
           &.history .wrapper{
             background-color: $or;

assets/css/base/_layout.scss

@@ -93,6 +93,7 @@ body{
       .main-content-layout{
         display: flex;
         flex-direction: column;
+        flex-wrap: nowrap;
       }
     }
   }

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">
+        <div class="wrapper">
-          <article
+          <template v-if="!colophonHome || colophonHome.length <= 0">
-            v-for="page in colophonHome"
+            <span class="loading">Chargement ...</span>
-            :key="page.uuid"
+          </template>
-          >
+          <template v-else>
-            <!-- <h1>{{ page.title }}</h1> -->
+            <article
-            <div v-html="trimedTei(page.tei)" />
+              v-for="page in colophonHome"
-            <a
+              :key="page.uuid"
-              :href="page.url"
-              class="readmore"
-              @click.prevent="onclick(page.uuid)"
-              @keyup.enter="onclick(page.uuid)"
             >
-              <span>Lire la suite</span>
+              <!-- <h1>{{ page.title }}</h1> -->
-            </a>
+              <div v-html="trimedTei(page.tei)" />
-          </article>
+              <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">
+        <nav v-if="toc" class="toc" :class="{ opened: sommaireopened }">
-          <ul>
+          <span
-            <li
+            class="sommaire-title"
-              v-for="(item,index) in toc"
+            @click.prevent="onOpenCloseSommaire"
-              :key="index"
+            @keyup.enter="onOpenCloseSommaire"
-            >
+          >
-              <a
+            <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>
-                :href="'#' + item.hash"
+            Sommaire
-                @click.prevent="onclickTOC"
+          </span>
-                @keyup.enter="onclickTOC"
+          <div class="wrapper">
+            <ul>
+              <li
+                v-for="(item,index) in toc"
+                :key="index"
               >
-                {{ item.title }}
+                <a
-              </a>
+                  :href="'#' + item.hash"
-            </li>
+                  @click.prevent="onclickTOC"
-          </ul>
+                  @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