Corrections dont : timeline, pages ressources, exception scrolltop fa…

…csimile

src/App.vue

@@ -28,9 +28,12 @@ const toggleMobileMenu = function($event) {
 }
 
 const route = useRoute();
-watch(route, () => {
+watch(route, (nextRoute, previousRoute) => {
   isMobileMenuOpen.value = false;
-  window.scrollTo(0,0);
+  console.log(nextRoute.name, previousRoute.name);
+  if (nextRoute.name !== "facsimile" || previousRoute.name !== "facsimile") {
+    window.scrollTo(0,0);
+  }
 });
 
 const isHome = computed(() => {

src/components/AppFooter.vue

@@ -193,14 +193,13 @@ footer .columns .column:last-child {
 
 .footer-links li:not(:last-child):after {
   content: "";
-  position: absolute;
+  position: relative;
   top: 0;
-  right: 0;
-  display: inline-block;
+  right: -9px;
+  display: inline;
   width: 1px;
-  height: 80%;
+  font-size: 80%;
   border-right: solid #ffffff 1px;
-  transform: translateY(2px);
 }
 
 .footer-links li a {

src/components/FacSimileNavigation.vue

@@ -287,15 +287,16 @@ li.register .is-highlighted,
 }
 
 .fac-simile__toc > ul {
-  max-height: 60vh;
+  min-height: 100vh;
+  max-height: 100vh;
   overflow-y: scroll;
   margin: 0;
   padding: 30px 0;
 }
 
 .main__title__toc {
   display: block;
-  margin: 21px 0 10px;
+  margin: 28px 0 10px;
 
   font-size: 24px;
   font-weight: 400;
@@ -396,6 +397,7 @@ nav menu, nav ul {
   }
 
   .fac-simile__toc > ul {
+    min-height: 200px;
     max-height: unset;
     overflow-y: unset;
   }

src/components/PersonDataTimeline.vue

@@ -6,16 +6,16 @@
       <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"
+    <button class="button btn-scroll btn-scroll-up" @mousedown="startScroll(-100)" @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"
+          <div @click="togglePopup($event, 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)">
+               @click="togglePopup($event, group.date)">
             {{ formatDate(group.date) }}
           </div>
           <div v-if="clicked === group.date" class="popup-group">
@@ -56,8 +56,8 @@
         </div>
       </div>
     </div>
-    <button class="button btn-scroll btn-scroll-down" @mousedown="startScroll(85)" @mouseup="stopScroll"
-            :disabled="isAtBottom"></button>
+    <button class="button btn-scroll btn-scroll-down" @mousedown="startScroll(100)" @mouseup="stopScroll"
+            :disabled="isAtBottom || hasNoScroll"></button>
 
     <button class="button button-toggle button-close" @click="_collapseTimeline()">FERMER</button>
   </div>
@@ -82,6 +82,7 @@ export default {
       scrollInterval: null,
       isAtTop: true,
       isAtBottom: false,
+      hasNoScroll: false,
       activePopupIndex: {},
       selectedDate: null,
       isTimelineCollapsed: true
@@ -169,10 +170,17 @@ export default {
   },
 
   mounted() {
-    this.$refs.scrollContainer.addEventListener('scroll', this.handleScroll);
+    this.hasNoScroll = this.$refs.scrollContainer.scrollHeight === this.$refs.scrollContainer.clientHeight;
+    if (!this.hasNoScroll) {
+      this.$refs.scrollContainer.addEventListener('scroll', this.handleScroll);
+    }
     // this.$refs.scrollContainer.addEventListener('wheel', this.handleWheel, {passive: false});
-  }
-  ,
+
+    document.body.addEventListener("click", this._deselectDate);
+  },
+  unmounted() {
+    document.body.removeEventListener("click", this._deselectDate);
+  },
   methods: {
     spaceAroundCommas,
     /**
@@ -228,13 +236,21 @@ export default {
     ,
 
     /**
-     * Toggle the popup of an event
+     * Start scrolling
      * @param amount
      */
     startScroll(amount) {
       this.stopScroll();
       this.scroll(amount);
-      this.scrollInterval = setInterval(() => this.scroll(amount), 100);
+      this.scrollInterval = setInterval(() => {
+        console.log(amount, this.isAtTop, this.isAtBottom)
+        if ((this.isAtTop && amount < 0) || (this.isAtBottom && amount > 0)) {
+          this.stopScroll();
+        } else {
+          this.scroll(amount)
+        }
+
+      }, 100);
     }
     ,
 
@@ -288,7 +304,8 @@ export default {
      * Toggle the popup of an event
      * @param date
      */
-    togglePopup(date) {
+    togglePopup($event, date) {
+      $event.stopPropagation();
       if (this.clicked === date) {
         this.clicked = null; // Ferme le groupe si déjà ouvert
         this.selectedDate = null; // Désélectionne le dot
@@ -308,6 +325,19 @@ export default {
     _collapseTimeline() {
       this.isTimelineCollapsed = ! this.isTimelineCollapsed;
     },
+
+    /**
+     * Deselect active date
+     * @returns {void}
+     * @private
+     */
+    _deselectDate($event) {
+      if (!$event.target.closest('.popup-group')) {
+        this.selectedDate = null;
+        this.clicked = null
+      }
+    },
+
   }
 }
 ;
@@ -382,7 +412,6 @@ export default {
 }
 
 .timeline-item.dot-selected .popup-group-content {
-  padding-bottom: 40px;
 }
 
 .timeline-item.dot-selected .timeline-dot {
@@ -394,18 +423,16 @@ export default {
 
 .timeline-scroll-container {
   max-height: 30rem;
-  overflow-y: hidden;
+  overflow-y: auto;
   border-top: 1px solid #A7A7A7;
   border-bottom: 1px solid #A7A7A7;
 
-  /*
-  scrollbar-width: thin;
-  scrollbar-color: var(--light-brown-alt) #DFDEDE;
-   */
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none;  /* IE 10+
 }
 
 .timeline-scroll-container::-webkit-scrollbar {
-  width: 9px;
+  background: transparent; /* Chrome/Safari/Webkit */
 }
 
 .timeline-scroll-container::-webkit-scrollbar-track {
@@ -465,13 +492,17 @@ export default {
 
 .button.btn-scroll[disabled] {
   opacity: 0.25;
+  cursor: default;
 }
 
 .popup-group {
   transform: translateX(-50%) translateY(80px);
   width: 343px;
   max-width: 90vw;
-  margin-bottom: 40px;
+}
+
+.popup-group-content {
+  margin-bottom: 80px;
 }
 
 .timeline-popup {

src/components/RegisterCardNavigation.vue

@@ -325,11 +325,6 @@ hr,
     margin-bottom: 12px;
   }
 
-
-  .available-ressources {
-    flex-direction: column;
-  }
-
   .available-ressources > div:first-child > div[data-v-572ca977]:first-child {
     padding-left: 0;
   }
@@ -340,4 +335,31 @@ hr,
 
 }
 
+
+@media screen and (max-width: 640px) {
+
+  .available-ressources[data-v-572ca977] {
+    gap: 20px;
+  }
+
+  .available-ressources > div {
+    font-size: 18px;
+  }
+
+  .available-ressources .icon[data-v-572ca977] {
+    padding-left: 5px;
+    padding-right: 32px;
+  }
+
+}
+
+@media screen and (max-width: 360px) {
+
+  .available-ressources > div {
+    font-size: 16px;
+  }
+
+}
+
+
 </style>

src/views/ContactView.vue

@@ -125,6 +125,23 @@ p, li {
 
   .column {
     padding: 40px 20px;
+    line-height: 1.35;
+  }
+
+  ul {
+    padding-left: 0;
+  }
+
+  ul li[data-v-3485ec17] {
+    margin-left: 0;
+  }
+
+  p {
+    margin-bottom: 15px;
+  }
+
+  a {
+    word-break: break-word;
   }
 
 }

src/views/CreditView.vue

@@ -129,6 +129,23 @@ ul li {
 
   .column {
     padding: 40px 20px;
+    line-height: 1.35;
+  }
+
+  ul {
+    padding-left: 0;
+  }
+
+  ul li[data-v-3485ec17] {
+    margin-left: 0;
+  }
+
+  p {
+    margin-bottom: 15px;
+  }
+
+  a {
+    word-break: break-word;
   }
 
 }

src/views/HomeView.vue

@@ -145,7 +145,7 @@ h1.title .period {
 }
 
 .columns > .container.column:last-child {
-  padding-bottom: 875px;
+  padding-bottom: 400px;
 }
 
 nav li {
@@ -236,7 +236,7 @@ nav a .icon {
   }
 
   .columns > .container.column:last-child {
-    padding-bottom: 500px;
+    padding-bottom: 400px;
   }
 
   nav {

src/views/PersonView.vue

@@ -315,7 +315,7 @@ export default {
   top:52px;
   z-index: 1;
   width: 100%;
-  height: 232px;
+  height: 222px;
   padding-top: 20px;
   background-color: var(--panel-bg-color);
 }

src/views/RegisterView.vue

@@ -672,7 +672,7 @@ export default {
   }
 
   .columns.facets-box-collapsed .column-results-header {
-    height: 350px;
+    height: 228px;
   }
 
   .columns:not(.facets-box-collapsed) .column-results-header {

src/views/RessourcesView.vue

@@ -253,7 +253,6 @@ p, li {
 ul {
   list-style-type: "•";
   padding-left: 50px;
-
 }
 
 ul li {
@@ -308,6 +307,23 @@ ul li {
 
   .column {
     padding: 40px 20px;
+    line-height: 1.35;
+  }
+
+  ul {
+    padding-left: 0;
+  }
+
+  ul li[data-v-3485ec17] {
+    margin-left: 0;
+  }
+
+  p {
+    margin-bottom: 15px;
+  }
+
+  a {
+    word-break: break-word;
   }
 
 }