From 5691b071a116dc7b7cac29d99116f0a54300f86c Mon Sep 17 00:00:00 2001
From: Bachir Soussi Chiadmi <bachir@figureslibres.io>
Date: Mon, 6 Jul 2020 15:03:02 +0200
Subject: [PATCH] misc, text & toc display

---
 assets/css/app.scss                | 153 +++++++++++++++++++----------
 assets/css/base/_fonts.scss        |  16 +++
 assets/css/base/_layout.scss       |   4 +-
 src/components/Content/EdText.vue  |   2 +-
 src/components/Content/EdToc.vue   |  33 +++++++
 src/components/Content/TocItem.vue |  15 ++-
 src/pages/EditionToc.vue           |  27 ++---
 src/pages/ListCorpus.vue           |  43 ++++----
 8 files changed, 203 insertions(+), 90 deletions(-)
 create mode 100644 src/components/Content/EdToc.vue

diff --git a/assets/css/app.scss b/assets/css/app.scss
index 0c08a57..e54d156 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -159,44 +159,44 @@ section[role="main-content"]{
         margin: 0 0 2em 0;
         header{
           h2{
-            margin:0.4em 0;
-            font-size: 1.512em;
-            color: $bleuroi;
-            font-weight: 400;
+            margin:0.4em 0 0.2em;
+            @include title1blue;
           }
           h3{
             margin:0.2em 0;
             @include fontsans;
-            font-size: 0.753em;
+            font-size: 0.756em;
             font-weight: 500;
           }
-          h4{
-            margin:0.1em 0;
-            font-weight: 300;
-            @include fontsans;
-            font-size: 0.753em;
-            &.editions-quantity{
-              color: $rouge;
-              &:after{
-                content: ">>";
-                margin:0 0 0 0.5em;
-              }
-            }
-          }
-          section.editions{
-            div.editions{
-              ol{
-                padding:0;
-                li{
-                  margin:0.7em 1em;
-                }
+          margin-bottom: 0.3em;
+        }
+        section.editions{
+          div.editions{
+            ol{
+              padding:0;
+              li{
+                margin:0.7em 1em;
               }
             }
           }
         }
+        h4{
+          margin:0.1em 0;
+          font-weight: 300;
+          @include fontsans;
+          font-size: 0.756em;
+          &.texts-quantity{
+            color: $rouge;
+            // &:after{
+            //   content: ">>";
+            //   margin:0 0 0 0.5em;
+            // }
+          }
+        }
+
         ul {
           li{
-            margin:0;
+            margin:0 0 0 1em;
             h3{
               margin: 0.5em 0;
               font-weight: 400;
@@ -215,36 +215,87 @@ section[role="main-content"]{
   }
 
   #edition-toc{
-    ul{
-      li{
-        ul{
-          // padding-left: 1em;
-          border-left: 1px dotted $or;
-          // min-height: 1em;
-          margin-bottom: 0.5em;
-          li{
-            // min-height: 1em;
-            // border-left: 1px solid red;
-            padding:0 0 0.2em 1em;
+    max-height: 100%;
+    >header,
+    >section,
+    >nav{
+      max-height: 100%;
+      padding-top:1em;
+      padding-bottom:1em;
+    }
+
+    >section,
+    >nav{
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+
+    header{
+      h1{
+        @include title2black;
+      }
+    }
+
+    >section{
+      div#text{
+        // >h1{
+        //   @include title1blue;
+        // }
+        div.tei{
+          // >h1{display: none;}
+          >h1{@include title1blue;}
+          span.placeName,
+          span.objectName,
+          span.persName{
+            font-weight: 600;
           }
         }
       }
     }
-    .toc-title{
-      color: $bleuroi;
-      font-weight: 400;
-      margin:0;
-    }
-    h2.toc-title{font-size: 1.3em;}
-    h3.toc-title{font-size: 1.2em;}
-    h4.toc-title{font-size: 1.1em;}
-    h5.toc-title{font-size: 1.0em;}
-    h6.toc-title{font-size: 0.9em;}
 
-    span.placeName,
-    span.objectName,
-    span.persName{
-      font-weight: 600;
+    >nav{
+      >section{
+        padding:0 0 0 1.5em;
+        >ul{
+          ul{
+            li{
+              ul{
+                overflow: hidden;
+                &:not(.opened){
+                  height:0;
+                }
+                // &.opened{
+                //   border: 1px solid red;
+                // }
+                // padding-left: 1em;
+                border-left: 0.5px solid $gris;
+                // min-height: 1em;
+                margin-bottom: 0em;
+                li{
+                  // min-height: 1em;
+                  // border-left: 1px solid red;
+                  padding:0 0 0.2em 1em;
+                }
+              }
+            }
+          }
+          .toc-title{
+            color: $gris;
+            font-weight: 400;
+            margin:0;
+            &.active,
+            &:hover{
+              color:$grisfonce;
+            }
+          }
+          h2.toc-title{font-size: 0.882em;}
+          h3.toc-title{font-size: 0.882em;}
+          h4.toc-title{font-size: 0.882em;}
+          h5.toc-title{font-size: 0.882em;}
+          h6.toc-title{font-size: 0.882em;}
+        }
+      }
+
     }
   }
 
diff --git a/assets/css/base/_fonts.scss b/assets/css/base/_fonts.scss
index 98ad0e4..2fe586e 100644
--- a/assets/css/base/_fonts.scss
+++ b/assets/css/base/_fonts.scss
@@ -27,3 +27,19 @@ footer[role="tools"] .row>header,
 footer[role="tools"] .row>nav{
   @include fontsans;
 }
+
+@mixin title1blue {
+  @include fontserif;
+  font-size: 2.268em;
+  color: $bleuroi;
+  font-weight: 400;
+  margin:0;
+}
+
+@mixin title2black {
+  @include fontserif;
+  font-size: 1.134em;
+  color: $grisfonce;
+  font-weight: 400;
+  margin:0;
+}
diff --git a/assets/css/base/_layout.scss b/assets/css/base/_layout.scss
index 5d13be0..c418906 100644
--- a/assets/css/base/_layout.scss
+++ b/assets/css/base/_layout.scss
@@ -34,8 +34,8 @@ body{
     overflow: hidden;
     >.wrapper{
       padding:0 $side-padding 0 $side-padding;
-      height:100%;
-      overflow-y: auto;
+      height:100%; max-height:100%;
+      overflow-y: hidden;
       overflow-x: hidden;
     }
   }
diff --git a/src/components/Content/EdText.vue b/src/components/Content/EdText.vue
index dfcdf17..bfdf4cf 100644
--- a/src/components/Content/EdText.vue
+++ b/src/components/Content/EdText.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="text">
-    <h1>{{ textdata.content.title }}</h1>
+    <!-- <h1>{{ textdata.meta.title }}</h1> -->
     <div class="tei" v-html="textdata.content.tei" />
   </div>
 </template>
diff --git a/src/components/Content/EdToc.vue b/src/components/Content/EdToc.vue
new file mode 100644
index 0000000..31a0b8b
--- /dev/null
+++ b/src/components/Content/EdToc.vue
@@ -0,0 +1,33 @@
+<template>
+  <section>
+    <ul>
+      <li
+        v-for="item in content"
+        :key="item.uuid"
+      >
+        <TocItem :item="item" :level="1" :editionid="$route.params.id" />
+      </li>
+    </ul>
+  </section>
+</template>
+
+<script>
+
+import TocItem from './TocItem'
+
+export default {
+  name: 'EdToc',
+  components: {
+    TocItem
+  },
+  props: {
+    content: Object
+  },
+  data: () => ({
+
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/components/Content/TocItem.vue b/src/components/Content/TocItem.vue
index bb08620..892ea14 100644
--- a/src/components/Content/TocItem.vue
+++ b/src/components/Content/TocItem.vue
@@ -8,6 +8,7 @@
       v-if="title"
       class="toc-title"
       :uuid="item.uuid"
+      v-bind:class="{active: isActive}"
     >
       <a
         :href="'/edition/'+editionid+'/'+item.uuid"
@@ -18,7 +19,11 @@
         {{ title }}
       </a>
     </component>
-    <ul v-if="children.length">
+    <ul
+      v-if="children.length"
+      class="toc-list"
+      v-bind:class="{opened: isOpened}"
+    >
       <li v-for="child in children" :key="child.uuid">
         <TocItem :item="child" :level="nextLevel" :editionid="editionid" />
       </li>
@@ -62,6 +67,14 @@ export default {
     },
     nextLevel () {
       return this.level + 1
+    },
+    isActive () {
+      // console.log('Active', this.$route.params.textid, this.item.uuid)
+      return this.$route.params.textid === this.item.uuid
+    },
+    isOpened () {
+      // console.log('opened', this.$route.params.textid.indexOf(this.item.uuid) >= 0)
+      return this.$route.params.textid.indexOf(this.item.uuid) >= 0
     }
   },
   // beforeCreate () {
diff --git a/src/pages/EditionToc.vue b/src/pages/EditionToc.vue
index 54bcd79..b921048 100644
--- a/src/pages/EditionToc.vue
+++ b/src/pages/EditionToc.vue
@@ -1,25 +1,18 @@
 <template>
   <MainContentLayout id="edition-toc">
-    <template v-if="!content" v-slot:header>
+    <template v-if="!content" #header>
       <span>Loading ...</span>
     </template>
-    <template v-if="meta" v-slot:header>
-      <h1>{{ meta.title }}</h1>
-      <section>
-        <ul>
-          <li
-            v-for="item in content"
-            :key="item.uuid"
-          >
-            <TocItem :item="item" :level="1" :editionid="$route.params.id" />
-          </li>
-        </ul>
-      </section>
+    <template v-if="meta" #header>
+      <h1>{{ meta.author }}</h1>
     </template>
 
+    <!-- default slot -->
     <EdText v-if="textdata" :textdata="textdata" />
 
-    <template v-slot:nav />
+    <template #nav>
+      <EdToc  :content="content" />
+    </template>
   </MainContentLayout>
 </template>
 
@@ -27,15 +20,15 @@
 
 import { REST } from 'api/rest-axios'
 import MainContentLayout from '../components/Layouts/MainContentLayout'
-import TocItem from '../components/Content/TocItem'
 import EdText from '../components/Content/EdText'
+import EdToc from '../components/Content/EdToc'
 
 export default {
   name: 'EditionToc',
   components: {
     MainContentLayout,
-    TocItem,
-    EdText
+    EdText,
+    EdToc
   },
   data: () => ({
     content: null,
diff --git a/src/pages/ListCorpus.vue b/src/pages/ListCorpus.vue
index f79a809..7a440b8 100644
--- a/src/pages/ListCorpus.vue
+++ b/src/pages/ListCorpus.vue
@@ -10,25 +10,32 @@
         <header>
           <h2>{{ corpus.author.title }}</h2>
           <h3>{{ corpus.author.date }}</h3>
-          <section class="editions">
-            <h4 class="editions-quantity">{{ corpus.author.editionsQuantity }}</h4>
-            <div v-if="corpus.author.editions" class="editions" v-html="corpus.author.editions"/>
-          </section>
-          <h4 class="texts-quantity">{{ corpus.author.textsQuantity }}</h4>
         </header>
-        <ul class="texts-list">
-          <li v-for="text in corpus.editions.content" :key="text.uuid">
-            <h3>
-              <a
-                :href="text.url"
-                :uuid="text.uuid"
-                @click.prevent="onclick"
-                @keyup.enter="onclick"
-                v-html="text.title"
-              />
-            </h3>
-          </li>
-        </ul>
+        <section class="editions">
+          <h4 class="editions-quantity">
+            {{ corpus.author.editionsQuantity.quantity }} {{ corpus.author.editionsQuantity.unit }}
+          </h4>
+          <!-- <div v-if="corpus.author.editions" class="editions" v-html="corpus.author.editions"/> -->
+        </section>
+        <section class="texts">
+          <h4 class="texts-quantity">
+            {{ corpus.author.textsQuantity.quantity }}
+            {{ corpus.author.textsQuantity.unit }}
+          </h4>
+          <ul class="texts-list">
+            <li v-for="text in corpus.editions.content" :key="text.uuid">
+              <h3>
+                <a
+                  :href="text.url"
+                  :uuid="text.uuid"
+                  @click.prevent="onclick"
+                  @keyup.enter="onclick"
+                  v-html="text.title"
+                />
+              </h3>
+            </li>
+          </ul>
+        </section>
         <!-- <CorpusItem :item="item" /> -->
       </li>
     </ul>