improved index lists #1259

assets/css/app.scss

@@ -194,46 +194,74 @@ section[role="main-content"]{
   }
 
   #list-corpus, .index{
-    >header>h1{
-      font-family: "noto_sans";
-      color: $rouge;
-      font-weight: 400;
+    >header{
+
+      &>h1{
+        @include titleSansRed;
+        margin: 0;
+      }
     }
 
     article.item{
-      margin: 2em 0 0;
-      header h1{
-        font-size: 1.512em;
-        color: $bleuroi;
-        font-weight: 400;
+      // margin: 2em 0 0;
+
+      header{
         margin:0;
-      }
+        h1{
+          margin:0;
+          span.title{
+            @include title1black;
+            color: $bleuroi;
+          }
+          span.quantity{
+            @include title4black;
+          }
+        }
+      } 
+    }
+    &:not(#list-corpus){
+      ul.item-list{
+        li{
+          // margin: 0 0 2em 0;
+          max-height: $base-line * 3;
+          opacity: 1;
+          transition: all 0.3s ease-in-out;
+          &.hidden {
+            // display: none;
+            max-height: 0.01px;
+            opacity: 0;
+          }
+        }
+      }  
     }
     ul.item-list{
       li{
-        margin: 0 0 2em 0;
+        // margin: 0 0 2em 0;
         header{
           h2{
             @include title1blue;
-            margin:0.4em 0 0.2em;
+            // margin:0.4em 0 0.2em;
+            margin-bottom: $base-line / 2;
           }
           h3{
-            margin:0.2em 0;
+            margin:0;
             @include fontsans;
             font-size: 0.756em;
             font-weight: 500;
+            line-height: $base-line / 2;
           }
-          margin-bottom: 0.3em;
+          margin-bottom: $base-line / 2;
         }
 
         h4{
-          margin:0.1em 0;
+          margin:0;
           font-weight: 300;
           @include fontsans;
           font-size: 0.756em;
+          line-height: $base-line / 2;
           &.texts-quantity{
             color: $rouge;
-            margin: 0.3em 0 0;
+            // margin: 0.3em 0 0;
           }
         }
         section.editions{
@@ -253,17 +281,19 @@ section[role="main-content"]{
           ul.texts-list{
             padding: 0 0 0 1em;
             li{
-              margin: 0;
+              margin-bottom: $base-line / 2;
             }
             h3{
               @include title2black;
-              margin: 0.7em 0 0.3em;
+              // margin: 0.7em 0 0.3em;
+              line-height: $base-line / 2;
             }
             p{
               font-weight: 300;
               @include fontsans;
               font-size: 0.756em;
               margin: 0;
+              line-height: $base-line / 2;
             }
           }
         }
@@ -280,6 +310,25 @@ section[role="main-content"]{
         }
       }
     }
+
+    .abc{
+      ul{
+        li{
+          opacity: 1;
+          transition: opacity 0.3s ease-in-out;
+          &.inactive{
+            opacity: 0.4;
+          }
+          span{
+            @include fontcaption;
+            font-variant: small-caps;
+            font-size: 1em;
+            cursor: pointer;
+            line-height: $base-line / 2;
+          }
+        }
+      }
+    }
   }
 
   #corpus{

assets/css/base/_fonts.scss

@@ -43,6 +43,7 @@ footer[role="tools"] .row>nav{
   color: $grisfonce;
   font-weight: 400;
   margin:0;
+  line-height: $base-line;
 }
 
 @mixin title2black {
@@ -69,6 +70,7 @@ footer[role="tools"] .row>nav{
   color: $grisfonce;
   font-weight: 400;
   margin:0;
+  line-height: $base-line / 2;
 }
 
 @mixin title4grey {
@@ -100,6 +102,13 @@ footer[role="tools"] .row>nav{
   line-height: $base-line;
 }
 
+@mixin titleSansRed {
+  font-family: "noto_sans";
+  color: $rouge;
+  font-weight: 400;
+  line-height: $base-line;
+}
+
 @mixin fontcaption {
   @include fontsans;
   font-size: 0.643em;

src/components/Content/LocorumItem.vue

@@ -6,10 +6,10 @@
           :href="item.url"
           @click.prevent="onclick"
           @keyup.enter="onclick"
-          v-html="item.title"
-        />
+        >
+          <span class="title" v-html="item.title" /> <span class="quantity">[{{ item.texts.length }}]</span>
+        </a>
       </h1>
-      <p>{{ item.type }}</p>
     </header>
   </article>
 </template>

src/components/Content/NominumItem.vue

@@ -6,12 +6,10 @@
           :href="item.url"
           @click.prevent="onclick"
           @keyup.enter="onclick"
-          v-html="item.title"
-        />
+        >
+          <span class="title" v-html="item.title" /> <span class="quantity">[{{ item.texts.length }}]</span>
+        </a>
       </h1>
-      <p v-if="item.birth && item.death">
-        <span>{{ item.birth }}</span> -- <span>{{ item.death }}</span>
-      </p>
     </header>
   </article>
 </template>

src/components/Content/OperumItem.vue

@@ -9,7 +9,7 @@
           @click.prevent="onclick"
           @keyup.enter="onclick"
         >
-          {{ item.title }}
+          <span class="title" v-html="item.title" /> <span class="quantity">[{{ item.texts.length }}]</span>
         </a>
         <span v-else class="red">
           {{ item.title }}

src/pages/IndexLocorum.vue

@@ -6,12 +6,37 @@
     </template>
 
     <ul v-if="items.length" class="item-list">
-      <li v-for="item in items" :key="item.uuid">
+      <li
+        v-for="item in items"
+        :key="item.uuid"
+        :class="{ hidden: activeLetter && item.letter !== activeLetter }"
+      >
         <LocorumItem :item="item" />
       </li>
     </ul>
 
-    <template v-slot:nav />
+    <template v-slot:nav>
+      <div v-if="items.length" class="abc">
+        <ul>
+          <li :class="{ inactive: activeLetter }">
+            <span
+              @click.prevent="onClickLetter(null)"
+              @keyup.enter="onClickLetter(null)"
+            >tout</span>
+          </li>
+          <li
+            v-for="l in letters" :key="l"
+            :class="{ inactive: activeLetter && l !== activeLetter }"
+          >
+            <span
+              @click.prevent="onClickLetter(l)"
+              @keyup.enter="onClickLetter(l)"
+            >{{ l }}</span>
+          </li>
+        </ul>
+
+      </div>
+    </template>
   </MainContentLayout>
 </template>
 
@@ -31,20 +56,44 @@ export default {
     MainContentLayout
   },
   data: () => ({
-    items: []
+    items: [],
+    letters: [],
+    activeLetter: null
   }),
   beforeCreate () {
     REST.get(`${window.apipath}/indexLocorum`, {})
       .then(({ data }) => {
         console.log('index locorum REST: data', data)
         if (data.content.length) {
-          this.items = data.content
+          this.items = data.content.sort((a, b) => {
+            let Aletter = a.letter.toLowerCase()
+            let Bletter = b.letter.toLowerCase()
+            if (Aletter < Bletter) {
+              return -1
+            } else if (Aletter > Bletter) {
+              return 1
+            } else {
+              return 0
+            }
+          })
         }
+        for (let i = 0; i < this.items.length; i++) {
+          if (this.letters.indexOf(this.items[i].letter.toLowerCase()) === -1) {
+            this.letters.push(this.items[i].letter.toLowerCase())
+          }
+        }
+        this.letters = this.letters.sort()
       })
       .catch((error) => {
         console.warn('Issue with index locorum', error)
         Promise.reject(error)
       })
+  },
+  methods: {
+    onClickLetter (l) {
+      this.activeLetter = l
+      // console.log('activeLetter', this.activeLetter)
+    }
   }
 }
 </script>

src/pages/IndexNominum.vue

@@ -6,12 +6,37 @@
     </template>
 
     <ul v-if="items.length" class="item-list">
-      <li v-for="item in items" :key="item.url">
+      <li
+        v-for="item in items"
+        :key="item.url"
+        :class="{ hidden: activeLetter && item.letter !== activeLetter }"
+      >
         <NominumItem :item="item" />
       </li>
     </ul>
 
-    <template v-slot:nav />
+    <template v-slot:nav>
+      <div v-if="items.length" class="abc">
+        <ul>
+          <li :class="{ inactive: activeLetter }">
+            <span
+              @click.prevent="onClickLetter(null)"
+              @keyup.enter="onClickLetter(null)"
+            >tout</span>
+          </li>
+          <li
+            v-for="l in letters" :key="l"
+            :class="{ inactive: activeLetter && l !== activeLetter }"
+          >
+            <span
+              @click.prevent="onClickLetter(l)"
+              @keyup.enter="onClickLetter(l)"
+            >{{ l }}</span>
+          </li>
+        </ul>
+
+      </div>
+    </template>
   </MainContentLayout>
 </template>
 
@@ -31,8 +56,9 @@ export default {
     MainContentLayout
   },
   data: () => ({
-    items: []
-
+    items: [],
+    letters: [],
+    activeLetter: null
   }),
   beforeCreate () {
     // items/gdpLeMaire1685T01BodyFr01.003.016
@@ -41,13 +67,35 @@ export default {
       .then(({ data }) => {
         console.log('index nominum REST: data', data)
         if (data.content.length) {
-          this.items = data.content
+          this.items = data.content.sort((a, b) => {
+            let Aletter = a.letter.toLowerCase()
+            let Bletter = b.letter.toLowerCase()
+            if (Aletter < Bletter) {
+              return -1
+            } else if (Aletter > Bletter) {
+              return 1
+            } else {
+              return 0
+            }
+          })
         }
+        for (let i = 0; i < this.items.length; i++) {
+          if (this.letters.indexOf(this.items[i].letter.toLowerCase()) === -1) {
+            this.letters.push(this.items[i].letter.toLowerCase())
+          }
+        }
+        this.letters = this.letters.sort()
       })
       .catch((error) => {
         console.warn('Issue with index nominum', error)
         Promise.reject(error)
       })
+  },
+  methods: {
+    onClickLetter (l) {
+      this.activeLetter = l
+      // console.log('activeLetter', this.activeLetter)
+    }
   }
 }
 </script>

src/pages/IndexOperum.vue

@@ -6,12 +6,39 @@
     </template>
 
     <ul v-if="items.length" class="item-list">
-      <li v-for="item in items" :key="item.uuid">
+      <li
+        v-for="item in items"
+        :key="item.uuid"
+        :class="{ hidden: activeLetter && item.letter !== activeLetter }"
+      >
+
         <OperumItem :item="item" />
       </li>
     </ul>
 
-    <template v-slot:nav />
+    <template v-slot:nav>
+      <div v-if="items.length" class="abc">
+        <ul>
+          <li :class="{ inactive: activeLetter }">
+            <span
+              @click.prevent="onClickLetter(null)"
+              @keyup.enter="onClickLetter(null)"
+            >tout</span>
+          </li>
+          <li
+            v-for="l in letters" :key="l"
+            :class="{ inactive: activeLetter && l !== activeLetter }"
+          >
+            <span
+              @click.prevent="onClickLetter(l)"
+              @keyup.enter="onClickLetter(l)"
+            >{{ l }}</span>
+          </li>
+        </ul>
+
+      </div>
+    </template>
+
   </MainContentLayout>
 </template>
 
@@ -31,20 +58,44 @@ export default {
     MainContentLayout
   },
   data: () => ({
-    items: []
+    items: [],
+    letters: [],
+    activeLetter: null
   }),
   beforeCreate () {
     REST.get(`${window.apipath}/indexOperum`, {})
       .then(({ data }) => {
         console.log('index operum REST: data', data)
         if (data.content.length) {
-          this.items = data.content
+          this.items = data.content.sort((a, b) => {
+            let Aletter = a.letter.toLowerCase()
+            let Bletter = b.letter.toLowerCase()
+            if (Aletter < Bletter) {
+              return -1
+            } else if (Aletter > Bletter) {
+              return 1
+            } else {
+              return 0
+            }
+          })
+        }
+        for (let i = 0; i < this.items.length; i++) {
+          if (this.letters.indexOf(this.items[i].letter.toLowerCase()) === -1) {
+            this.letters.push(this.items[i].letter.toLowerCase())
+          }
         }
+        this.letters = this.letters.sort()
       })
       .catch((error) => {
         console.warn('Issue with index operum', error)
         Promise.reject(error)
       })
+  },
+  methods: {
+    onClickLetter (l) {
+      this.activeLetter = l
+      // console.log('activeLetter', this.activeLetter)
+    }
   }
 }
 </script>

src/pages/ListCorpus.vue

@@ -36,7 +36,7 @@
               </h3>
               <p
                 class="biblio"
-                v-html="text.biblio"
+                v-html="text.biblio.description"
               />
             </li>
           </ul>