From f0b6a79bc7ea99d4dcd61d99d481081fb8131510 Mon Sep 17 00:00:00 2001
From: Bachir Soussi Chiadmi <bachir@figureslibres.io>
Date: Tue, 21 Jul 2020 17:38:27 +0200
Subject: [PATCH] transversal links to nav history #786, restored scrolls

---
 assets/css/app.scss                    | 137 +++++++++++++------------
 src/components/Content/HistoryItem.vue |  33 +++---
 src/components/Content/Occurence.vue   |  21 +++-
 src/components/Content/ResultItem.vue  |  14 ++-
 src/components/nav/Search.vue          |   2 +-
 src/store/modules/history.js           |  14 +--
 6 files changed, 133 insertions(+), 88 deletions(-)

diff --git a/assets/css/app.scss b/assets/css/app.scss
index 44c2800..9c97766 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -6,6 +6,25 @@
 @import './base/fonts';
 @import './base/transitions';
 
+/* The emerging W3C standard
+that is currently Firefox-only */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: $grisclair rgba(255,255,255,0);
+}
+
+/* Works on Chrome/Edge/Safari */
+*::-webkit-scrollbar {
+  width: 12px;
+}
+*::-webkit-scrollbar-track {
+  background: rgba(255,255,255,0);
+}
+*::-webkit-scrollbar-thumb {
+  background-color: $grisclair;
+  border-radius: 20px;
+  border: none;
+}
 
 body{
   color: #1a1a1a;
@@ -479,8 +498,48 @@ section[role="main-content"]{
 
 
 }
+
 footer[role="tools"]{
-  $list-item-h: 5.3em;
+  $list-item-h: 5em;
+
+  @mixin resultItem{
+    box-sizing: border-box;
+    // we are only on 10 colls as 2 are occupied by sides
+    flex-basis: percentage(2/($default_sum - 2));
+    height: $list-item-h;
+    overflow: hidden;
+    padding-bottom: 1em;
+    padding-right: $default_gap;
+    article{
+      max-height: 100%;
+      overflow: hidden;
+    }
+    article.item{
+        h1{
+          @include title3black;
+          font-weight: 600;
+          max-width: 95%;
+        }
+        h2{
+          @include title3black;
+          text-transform: none;
+        }
+        span{
+          font-size: 0.882em;
+        }
+      // .preview{
+      //   font-size: 0.882em;
+      //   margin:0;
+      //   code{
+      //     @include fontserif;
+      //     background-color: lighten(desaturate($rouge,20%), 20%);
+      //     padding:0 0.2em;
+      //   }
+      // }
+    }
+
+  }
+
   #history{
     z-index: 8;
     background-color: $or;
@@ -496,7 +555,7 @@ footer[role="tools"]{
         height:100%;
         // hidding the scrollbar
         overflow-y: auto;
-        width:calc(100% + 1em);
+        // width:calc(100% + 1em);
         padding-right: 1em;
         >ul{
           padding:0;
@@ -506,35 +565,7 @@ footer[role="tools"]{
         }
       }
       li.item{
-        box-sizing: border-box;
-        // we are only on 10 colls as 2 are occupied by sides
-        flex-basis: percentage(2/($default_sum - 2));
-        height: $list-item-h;
-        overflow: hidden;
-        padding-bottom: 1em;
-        padding-right: $default_gap;
-        article{
-          max-height: 100%;
-          overflow: hidden;
-        }
-      }
-      article.history.item{
-        header{
-          h1{
-            font-size: 0.882em;
-            font-weight: normal;
-            margin:0 0 0.5em 0;
-          }
-        }
-        .extract{
-          p{
-            font-size: 0.882em;
-            margin:0;
-          }
-          code{
-            background-color: lighten(desaturate($rouge,20%), 20%);
-          }
-        }
+        @include resultItem;
       }
     }
   }
@@ -560,7 +591,7 @@ footer[role="tools"]{
         height:100%;
         // hidding the scrollbar
         overflow-y: auto;
-        width:calc(100% + 1em);
+        // width:calc(100% + 1em);
         padding-right: 1em;
         >ul{
           padding:0;
@@ -570,39 +601,7 @@ footer[role="tools"]{
         }
       }
       li.result{
-        box-sizing: border-box;
-        // we are only on 10 colls as 2 are occupied by sides
-        flex-basis: percentage(2/($default_sum - 2));
-        height: $list-item-h;
-        overflow: hidden;
-        padding-bottom: 1em;
-        padding-right: $default_gap;
-        article{
-          max-height: 100%;
-          overflow: hidden;
-        }
-      }
-      article.result.item{
-          h1{
-            @include title3black;
-            font-weight: 600;
-          }
-          h2{
-            @include title3black;
-            text-transform: none;
-          }
-          span{
-            font-size: 0.882em;
-          }
-        // .preview{
-        //   font-size: 0.882em;
-        //   margin:0;
-        //   code{
-        //     @include fontserif;
-        //     background-color: lighten(desaturate($rouge,20%), 20%);
-        //     padding:0 0.2em;
-        //   }
-        // }
+        @include resultItem;
       }
       .infinite-loading-container{
         // TODO: how to center the loading
@@ -652,12 +651,18 @@ footer[role="tools"]{
       color: #fff;
       background-color: $bleuroi;
       form{
-        // padding: 0.7em;
+        padding: 0;
+        // display: flex;
+        // flex-direction: row;
+        // flex-wrap: wrap;
         fieldset{
           padding:0.7em 1em;
           border: none;
+          box-sizing:border-box;
           // width correction as row is not the same width as others in the page
+          // flex-basis: percentage(2/($default_sum - 1));
           flex-basis: 17.667%;
+          // flex-basis: percentage(2 / 11);
           &:not(:first-of-type){
             border-left: 1px solid $grisclair;
           }
diff --git a/src/components/Content/HistoryItem.vue b/src/components/Content/HistoryItem.vue
index 2ce84af..0d80621 100644
--- a/src/components/Content/HistoryItem.vue
+++ b/src/components/Content/HistoryItem.vue
@@ -1,16 +1,25 @@
 <template>
-  <article class="history item">
-    <header>
-      <h1>
-        <a
-          :href="item.url"
-          @click.prevent="onclick"
-          @keyup.enter="onclick"
-          v-html="item.textId"
-        />
-      </h1>
-    </header>
-    <div class="extract" v-html="item.extract" />
+  <article class="result item">
+    <h1>
+      <a
+        :href="'/edition/'+item.textId+'/'+item.uuid"
+        @click.prevent="onclick"
+        @keyup.enter="onclick"
+        v-html="item.title"
+      />
+    </h1>
+    <h2>
+      <a
+        :href="'/edition/'+item.textId+'/'+item.uuid"
+        @click.prevent="onclick"
+        @keyup.enter="onclick"
+        v-html="item.editionTitle"
+      />
+    </h2>
+    <!-- <p v-if="preview" class="preview" v-html="preview" /> -->
+    <aside>
+      <span>Pagination</span> | <span>Nbr mots</span>
+    </aside>
   </article>
 </template>
 
diff --git a/src/components/Content/Occurence.vue b/src/components/Content/Occurence.vue
index f3d8fe8..f6a700a 100644
--- a/src/components/Content/Occurence.vue
+++ b/src/components/Content/Occurence.vue
@@ -37,6 +37,7 @@
 <script>
 
 import { REST } from 'api/rest-axios'
+import { mapState, mapActions } from 'vuex'
 
 export default {
   name: 'Occurence',
@@ -49,6 +50,14 @@ export default {
     isopened: false,
     tei: ''
   }),
+  computed: {
+    ...mapState({
+      editionsbyuuid: state => state.Corpus.editionsbyuuid
+    }),
+    editionTitle () {
+      return this.editionsbyuuid[this.ed.item].title
+    }
+  },
   created () {
     console.log('occurence beforeCreate')
     REST.get(`${window.apipath}/items/` + this.oc.uuid, {})
@@ -66,9 +75,19 @@ export default {
       })
   },
   methods: {
+    ...mapActions({
+      addHistoryItem: 'History/addItem'
+    }),
     onGoToText (e) {
-      console.log('clicked on text occurence', e)
+      console.log('clicked on text occurence', e, this.oc.title, this.ed)
+
       if (e.target.getAttribute('eduuid')) {
+        this.addHistoryItem({
+          id: e.target.getAttribute('eduuid'),
+          textid: e.target.getAttribute('uuid'),
+          title: this.oc.title,
+          editionTitle: this.editionTitle
+        })
         this.$router.push({
           name: `editiontext`,
           params: {
diff --git a/src/components/Content/ResultItem.vue b/src/components/Content/ResultItem.vue
index bcf7b35..be65f0d 100644
--- a/src/components/Content/ResultItem.vue
+++ b/src/components/Content/ResultItem.vue
@@ -60,7 +60,19 @@ export default {
     }),
     onclick () {
       console.log('clicked on result item', this.result)
-      this.addHistoryItem(this.result)
+      this.addHistoryItem({
+        id: this.result.textId,
+        textid: this.result.uuid,
+        title: this.result.title[0],
+        editionTitle: this.editionTitle
+      })
+      this.$router.push({
+        name: `editiontext`,
+        params: {
+          id: this.result.textId,
+          textid: this.result.uuid
+        }
+      })
     }
   }
 }
diff --git a/src/components/nav/Search.vue b/src/components/nav/Search.vue
index 12b1b57..8ac8200 100644
--- a/src/components/nav/Search.vue
+++ b/src/components/nav/Search.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="search" class="col-11">
     <form class="search-form row">
-      <fieldset class="search col-2">
+      <fieldset class="search">
         <div>
           <label for="keys">Search</label>
           <input
diff --git a/src/store/modules/history.js b/src/store/modules/history.js
index 62ce34e..b7b1545 100644
--- a/src/store/modules/history.js
+++ b/src/store/modules/history.js
@@ -29,13 +29,13 @@ export default {
       console.log('history add item', item, router)
       commit('addItem', item)
       commit('setOpened', true)
-      router.push({
-        name: `editiontext`,
-        params: {
-          id: item.textId,
-          textid: item.uuid
-        }
-      })
+      // router.push({
+      //   name: `editiontext`,
+      //   params: {
+      //     id: item.textId,
+      //     textid: item.uuid
+      //   }
+      // })
     },
     navigateToItem ({ dispatch, commit, state }, item) {
       console.log('history navigate to item', item, router)