From 91f32ab6000ae0893616286f06371290d7db02ae Mon Sep 17 00:00:00 2001
From: Denis Chiron <chiron.denis@gmail.com>
Date: Mon, 1 Apr 2024 18:12:58 +0200
Subject: [PATCH] Fiche personne (Timeline, Carousel) et autres ajustements
 mobile

---
 src/components/PersonDataCarousel.vue |  34 +++-
 src/components/PersonDataTimeline.vue | 252 ++++++++++++++++++++------
 src/components/PersonPagination.vue   |   2 +-
 src/components/PersonSearchBox.vue    |  18 +-
 src/views/FacSimileView.vue           |   3 +-
 src/views/PersonDataView.vue          |   8 +
 src/views/PersonView.vue              |  12 +-
 7 files changed, 260 insertions(+), 69 deletions(-)

diff --git a/src/components/PersonDataCarousel.vue b/src/components/PersonDataCarousel.vue
index 514a103..dca8c88 100644
--- a/src/components/PersonDataCarousel.vue
+++ b/src/components/PersonDataCarousel.vue
@@ -6,6 +6,7 @@
     </div>
     <div class="box-content">
       <Carousel :itemsToShow="ItemsShowed"
+                :breakpoints="breakpoints"
                 :wrapAround="true"
                 :transition="500">
         <Slide v-for="link in collectaItems" :key="link">
@@ -47,6 +48,20 @@ export default {
   data() {
     return {
       isOpened: true,
+      breakpoints: {
+        300: {
+          itemsToShow: 1.5,
+          itemsToScroll: 1
+        },
+        700: {
+          itemsToShow: 2,
+          itemsToScroll: 2
+        },
+        1024: {
+          itemsToShow: 3,
+          itemsToScroll: 3
+        },
+      },
     }
   },
   computed: {
@@ -103,6 +118,7 @@ export default {
 .box-iconography-collecta.is-opened .box-content {
   background-color: var(--panel-bg-color);
   margin-bottom: var(--right-column-bottom-padding-desktop);
+  width: 100%;
 }
 
 .box-header {
@@ -117,6 +133,7 @@ export default {
   font-style: italic;
   color: #272727;
   margin-bottom: 6px;
+  padding-right: 25px;
 }
 
 .logo-collecta {
@@ -189,14 +206,14 @@ li.carousel__slide a {
 li.carousel__slide a:before {
   content: "";
   display: block;
-  width: 100%;
-  height: 100%;
+  width: 50%;
+  height: 50%;
   background-color: #3b3b3b;
   position: absolute;
-  top: -114px;
-  left: 67px;
-  transform-origin: bottom center;
-  transform: scale(0.4) rotate3d(1, -0.2, 0.4, 25deg);
+  top: 58%;
+  left: 35%;
+  transform-origin: bottom right;
+  transform: translateY(-50%) skewX(-10deg);
   z-index: 1;
 }
 
@@ -274,10 +291,15 @@ li.carousel__slide a::after {
 }
 
 @media screen and (max-width: 1024px) {
+
   .box-iconography-collecta .box-header {
     padding: 0 var(--mobile-side-padding) var(--right-column-bottom-padding-mobile) !important;
   }
 
+  .box-iconography-collecta.is-opened  .box-header {
+    padding: 0 var(--mobile-side-padding) 0 !important;
+  }
+
 }
 
 
diff --git a/src/components/PersonDataTimeline.vue b/src/components/PersonDataTimeline.vue
index c8203af..fd93f74 100644
--- a/src/components/PersonDataTimeline.vue
+++ b/src/components/PersonDataTimeline.vue
@@ -1,61 +1,67 @@
 <template>
-  <div class="timeline-legend">
-    <span class="legend-item"><span class="dot neutral"></span> Cliquer/Survoler pour faire apparaître</span>
-    <span class="legend-item"><span class="dot without-date"></span> Date de l'événement inconnue</span>
-  </div>
-  <button class="button btn-scroll btn-scroll-up" @mousedown="startScroll(-50)" @mouseup="stopScroll"
-          :disabled="isAtTop"></button>
-  <div class="timeline-scroll-container" ref="scrollContainer">
-    <div class="timeline-container">
-      <div v-for="group in groupedEvents" :key="group.date" class="timeline-item" :class="{ 'dot-selected': selectedDate === group.date }">
-        <div @click="togglePopup(group.date)" class="timeline-dot"
-             :class="{ 'without-date': group.date === 'date_inconnue' || group.date === 'Date inconnue' }"></div>
-
-        <div :class="['timeline-date', { active: hover === group.date || clicked === group.date }]"
-             @click="togglePopup(group.date)">
-          {{ formatDate(group.date) }}
-        </div>
-        <div v-if="clicked === group.date" class="popup-group">
-          <div class="popup-group-content">
-
-            <div class="popup-and-navigation"
-                 v-for="(event, index) in group.events"
-                 :key="event._id_endp"
-                 :class="{ 'is-active': activePopupIndex[group.date] === index }">
-              <div class="timeline-popup"
-                   v-show="activePopupIndex[group.date] === index">
-                <div class="popup-content">
-                  <div class="popup-date">{{ event.type }}</div>
-                  <div class="popup-description">
-                <span v-if="event.thesaurus_term_person" class="event-term"><u>{{
-                    event.thesaurus_term_person.topic
-                  }} : </u>{{ event.thesaurus_term_person.term_fr }} ({{ event.thesaurus_term_person.term_la }})</span>
-                    <br v-if="event.thesaurus_term_person">
-                    <span v-if="event.place_term" class="event-place"><u>Lieu</u> : {{
-                        event.place_term.term_fr
-                      }} ({{ event.place_term.term_la }})</span>
-                  </div>
-                  <span v-if="event.image_url"><!--icon book --><i class="fas fa-book"></i>
-                  <router-link :to="`/facsimile/${formatImageIdentifiers(event.image_url)}`" target="_blank"> Aller au Fac-simile</router-link>
-                </span>
+  <div class="timeline-parent" :class="{ 'timeline-collapsed' : isTimelineCollapsed }">
+    <button class="button button-toggle" @click="_collapseTimeline()">VOIR</button>
 
+    <div class="timeline-legend">
+      <span class="legend-item"><span class="dot neutral"></span> Cliquer/Survoler pour faire apparaître</span>
+      <span class="legend-item"><span class="dot without-date"></span> Date de l'événement inconnue</span>
+    </div>
+    <button class="button btn-scroll btn-scroll-up" @mousedown="startScroll(-85)" @mouseup="stopScroll"
+            :disabled="isAtTop"></button>
+    <div class="timeline-scroll-container" ref="scrollContainer">
+      <div class="timeline-container">
+        <div v-for="group in groupedEvents" :key="group.date" class="timeline-item" :class="{ 'dot-selected': selectedDate === group.date }">
+          <div @click="togglePopup(group.date)" class="timeline-dot"
+               :class="{ 'without-date': group.date === 'date_inconnue' || group.date === 'Date inconnue' }"></div>
+
+          <div :class="['timeline-date', { active: hover === group.date || clicked === group.date }]"
+               @click="togglePopup(group.date)">
+            {{ formatDate(group.date) }}
+          </div>
+          <div v-if="clicked === group.date" class="popup-group">
+            <div class="popup-group-content">
+
+              <div class="popup-and-navigation"
+                   v-for="(event, index) in group.events"
+                   :key="event._id_endp"
+                   :class="{ 'is-active': activePopupIndex[group.date] === index }">
+                <div class="timeline-popup"
+                     v-show="activePopupIndex[group.date] === index">
+                  <div class="popup-content">
+                    <div class="popup-date">{{ event.type }}</div>
+                    <div class="popup-description">
+                  <span v-if="event.thesaurus_term_person" class="event-term"><u>{{
+                      event.thesaurus_term_person.topic
+                    }} : </u>{{ event.thesaurus_term_person.term_fr }} ({{ event.thesaurus_term_person.term_la }})</span>
+                      <br v-if="event.thesaurus_term_person">
+                      <span v-if="event.place_term" class="event-place"><u>Lieu</u> : {{
+                          event.place_term.term_fr
+                        }} ({{ event.place_term.term_la }})</span>
+                    </div>
+                    <router-link :to="`/facsimile/${formatImageIdentifiers(event.image_url)}`" target="_blank">
+                      <span v-if="event.image_url"><!--icon book --><i class="fas fa-book"></i></span>
+                      Aller au Fac-simile
+                    </router-link>
+                  </div>
+                </div>
+                <!-- Carousel Navigation: Shown if there's more than one event -->
+                <div v-if="group.events.length > 1" class="popup-navigation" :style="{ zIndex: 101 }">
+                  <button @click="navigateInCarousel(group, -1)" class="button nav-left"/>
+                  <span class="popup-counter">{{ activePopupIndex[group.date] + 1 }}/{{ group.events.length }}</span>
+                  <button @click="navigateInCarousel(group, 1)" class="button nav-right"/>
                 </div>
               </div>
-              <!-- Carousel Navigation: Shown if there's more than one event -->
-              <div v-if="group.events.length > 1" class="popup-navigation" :style="{ zIndex: 101 }">
-                <button @click="navigateInCarousel(group, -1)" class="button nav-left"/>
-                <span class="popup-counter">{{ activePopupIndex[group.date] + 1 }}/{{ group.events.length }}</span>
-                <button @click="navigateInCarousel(group, 1)" class="button nav-right"/>
-              </div>
-            </div>
 
+            </div>
           </div>
         </div>
       </div>
     </div>
+    <button class="button btn-scroll btn-scroll-down" @mousedown="startScroll(85)" @mouseup="stopScroll"
+            :disabled="isAtBottom"></button>
+
+    <button class="button button-toggle button-close" @click="_collapseTimeline()">FERMER</button>
   </div>
-  <button class="button btn-scroll btn-scroll-down" @mousedown="startScroll(50)" @mouseup="stopScroll"
-          :disabled="isAtBottom"></button>
 </template>
 
 <script>
@@ -78,6 +84,7 @@ export default {
       isAtBottom: false,
       activePopupIndex: {},
       selectedDate: null,
+      isTimelineCollapsed: true
     };
   },
   computed: {
@@ -162,7 +169,7 @@ export default {
 
   mounted() {
     this.$refs.scrollContainer.addEventListener('scroll', this.handleScroll);
-    this.$refs.scrollContainer.addEventListener('wheel', this.handleWheel, {passive: false});
+    // this.$refs.scrollContainer.addEventListener('wheel', this.handleWheel, {passive: false});
   }
   ,
   methods: {
@@ -290,6 +297,15 @@ export default {
       }
     }
     ,
+
+    /**
+     * Collapse Timeline on mobile
+     * @returns {void}
+     * @private
+     */
+    _collapseTimeline() {
+      this.isTimelineCollapsed = ! this.isTimelineCollapsed;
+    },
   }
 }
 ;
@@ -355,8 +371,8 @@ export default {
 
 .timeline-item:not(.dot-selected) .timeline-dot:hover {
   transform: translate(-50%, -50%) scale(1.2);
-  background: #BB062D;
-  border: #BB062D;
+  background: #303030;
+  border: #303030;
 }
 
 .timeline-item.dot-selected {
@@ -375,14 +391,30 @@ export default {
 }
 
 .timeline-scroll-container {
-  /*
   max-height: 30rem;
   overflow-y: auto;
-   */
   border-top: 1px solid #A7A7A7;
   border-bottom: 1px solid #A7A7A7;
+
+  scrollbar-width: thin;
+  scrollbar-color: var(--light-brown-alt) #DFDEDE;
 }
 
+.timeline-scroll-container::-webkit-scrollbar {
+  width: 9px;
+}
+
+.timeline-scroll-container::-webkit-scrollbar-track {
+  background: #DFDEDE;
+}
+
+.timeline-scroll-container::-webkit-scrollbar-thumb {
+  background-color: var(--light-brown-alt);
+  border-radius: 3px;
+  border: #303030;
+}
+
+
 .timeline-legend {
   margin-bottom: 32px;
 }
@@ -403,10 +435,14 @@ export default {
   margin-right: 10px;
 }
 
+.button.button-toggle {
+  display: none;
+}
+
 .button.btn-scroll {
   bottom: 0;
   right: 0;
-  left: 50%;
+  left: calc(50% - 4px);
   transform: translateX(-50%);
 
   width: 49px;
@@ -430,6 +466,7 @@ export default {
 .popup-group {
   transform: translateX(-50%) translateY(80px);
   width: 343px;
+  max-width: 90vw;
   margin-bottom: 40px;
 }
 
@@ -490,6 +527,23 @@ export default {
   color: #A53605;
 }
 
+.popup-content a {
+  display: inline-block;
+  margin-top: 2px;
+  font-family: var(--font-secondary);
+  font-size: 20px;
+  color: #000000;
+  text-decoration: none;
+}
+
+.popup-content a:hover {
+  color: #BB062D;
+}
+
+.popup-content .fas {
+  margin-right: 2px;
+}
+
 .nav-left, .nav-right {
   width: 30px;
   height: 30px;
@@ -505,5 +559,95 @@ export default {
   transform-origin: 50% 50%;
 }
 
+@media screen and (max-width: 1024px) {
+
+  .timeline-parent {
+    position: relative;
+  }
+
+  .button.btn-scroll {
+    display: none;
+  }
+
+  .timeline-scroll-container,
+  .timeline-legend {
+    display: none;
+  }
+
+  .timeline-parent {
+    border-top: 1px solid #A7A7A7;
+  }
+
+  .timeline-parent:not(.timeline-collapsed) {
+    margin: 0 -20px;
+    background-color: #F2F2F2;
+    padding: 60px 20px 90px;
+    box-shadow: inset 0px 20px 20px 0 #0000003A;
+  }
+
+  .timeline-parent:not(.timeline-collapsed)::after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: 60px;
+    box-shadow: inset 0px 20px 20px 0 #0000003A;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    transform: rotate(180deg);
+  }
+
+  .timeline-parent:not(.timeline-collapsed) .timeline-legend {
+    display: block;
+  }
+
+  .timeline-parent:not(.timeline-collapsed) .timeline-scroll-container {
+    display: block;
+  }
+
+  .timeline-scroll-container {
+    max-height: unset;
+    overflow-y: unset;
+    border: none;
+  }
+
+  .button.button-toggle {
+    position: absolute;
+    left: 50%;
+    top: -28px;
+    z-index: 10;
+    transform: translateX(-50%);
+
+    display: inline-block;
+    border-radius: 50%;
+    width: 56px;
+    height: 56px;
+    text-align: center;
+    padding: 0;
+    box-shadow: none;
+  }
+
+  .button.button-toggle.button-close {
+    display: none;
+  }
+
+  .timeline-parent:not(.timeline-collapsed) .button.button-toggle.button-close {
+    display: inline-block;
+    top: unset;
+    bottom: -28px;
+  }
+
+  .timeline-parent:not(.timeline-collapsed) .button.button-toggle.button-close,
+  .timeline-parent:not(.timeline-collapsed) .button.button-toggle {
+    text-indent: -9999px;
+    background: #FFFFFF url('~@/assets/images/b_Close_liste.svg') center / 22px auto no-repeat;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .timeline-date {
+    font-size: 16px;
+  }
+}
 
 </style>
\ No newline at end of file
diff --git a/src/components/PersonPagination.vue b/src/components/PersonPagination.vue
index 7b11378..f7ae558 100644
--- a/src/components/PersonPagination.vue
+++ b/src/components/PersonPagination.vue
@@ -244,7 +244,7 @@ nav.pagination {
 @media screen and (max-width: 1024px) {
 
   .pagination-link {
-    min-width: 51px;
+    min-width: 40px;
     height: 58px;
     font-size: 26px;
   }
diff --git a/src/components/PersonSearchBox.vue b/src/components/PersonSearchBox.vue
index 5b27d4f..dec82d1 100644
--- a/src/components/PersonSearchBox.vue
+++ b/src/components/PersonSearchBox.vue
@@ -5,7 +5,7 @@
         <span>Rechercher des personnes</span>
       </p>
     </div>
-    <div class="container-search">
+    <div class="container-search" :class="{'has-button-reset': resetBtn}">
       <div class="control field has-addons">
         <p class="control">
           <input
@@ -286,7 +286,12 @@ input[type="text"]::placeholder {
 @media screen and (max-width: 1024px) {
 
   .container-search {
-    padding-bottom: 150px;
+    padding-bottom: 220px;
+    text-align: center;
+  }
+
+  .container-search.has-button-reset {
+    padding-bottom: 220px;
   }
 
   .container-search > .control {
@@ -308,7 +313,14 @@ input[type="text"]::placeholder {
 
   .control-button {
     position: absolute;
-    bottom: 30px;
+    bottom: 80px;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  .btn-reset {
+    position: absolute;
+    bottom: -176px;
     left: 50%;
     transform: translateX(-50%);
   }
diff --git a/src/views/FacSimileView.vue b/src/views/FacSimileView.vue
index 2dc9529..c749c8c 100644
--- a/src/views/FacSimileView.vue
+++ b/src/views/FacSimileView.vue
@@ -540,6 +540,7 @@ export default {
 }
 
 .card-content a {
+  word-break: break-word;
   color: #303030;
 }
 
@@ -749,7 +750,7 @@ tspan {
   }
 
   .facsimile-columns > .column:last-child > div {
-    padding-top: 30px;
+    padding: 30px 35px 30px 15px;
   }
 
   .card-header-title {
diff --git a/src/views/PersonDataView.vue b/src/views/PersonDataView.vue
index 2054543..d5cce48 100644
--- a/src/views/PersonDataView.vue
+++ b/src/views/PersonDataView.vue
@@ -330,6 +330,11 @@ export default {
   color: #6E6E6E;
 }
 
+.link-list li a:hover {
+  color: #BB062D;
+}
+
+
 .wrapper-db-link {
   position: absolute;
   left: 0;
@@ -393,6 +398,9 @@ export default {
     position: relative;
     padding-bottom: 100px;
     margin-bottom: 100px;
+
+    max-width: 100vw;
+    overflow-x: hidden;
   }
 
   .columns.details-column > .column {
diff --git a/src/views/PersonView.vue b/src/views/PersonView.vue
index 66d8834..ed64632 100644
--- a/src/views/PersonView.vue
+++ b/src/views/PersonView.vue
@@ -366,12 +366,13 @@ h2.subtitle {
     display: block;
     width: 100%;
     height: 68px;
-    background: transparent url('~@/assets/images/b_Open_liste.svg') right 20px top 23px / 25px auto no-repeat;
+    background: transparent url('~@/assets/images/b_Open_liste.svg') right 10px top 23px / 25px auto no-repeat;
     cursor: pointer;
   }
 
   .box-search-person-facets.is-opened .box-search-header {
     background-image: url('~@/assets/images/b_Close_liste.svg');
+    background-position: right 6px top 23px;
   }
 
   .box-search-person-facets:not(.is-opened) .box-search-header {
@@ -379,7 +380,7 @@ h2.subtitle {
   }
 
   .box-search-person-facets .box-content .checkbox-canon {
-    bottom: 88px;
+    bottom: 155px;
     right: 50%;
     transform: translateX(50%);
   }
@@ -394,6 +395,10 @@ h2.subtitle {
     display: none;
   }
 
+  .box-search-person-facets.is-opened .box-content .container-search {
+    position: relative;
+  }
+
   /* Second column */
 
   .column-results-header {
@@ -412,8 +417,7 @@ h2.subtitle {
     padding-top: 30px;
   }
 
-
-    .is-searchbox-opened .column-results-header.is-sticky {
+  .is-searchbox-opened .column-results-header.is-sticky {
     top: 452px;
     padding-top: 20px;
   }