From 8e2e50c0f7817f70319aefb3f4b6b657a92d9711 Mon Sep 17 00:00:00 2001 From: Denis Chiron Date: Fri, 12 Apr 2024 19:02:33 +0200 Subject: [PATCH] Corrections dont : timeline, pages ressources, exception scrolltop facsimile --- src/App.vue | 7 ++- src/components/AppFooter.vue | 9 ++- src/components/FacSimileNavigation.vue | 6 +- src/components/PersonDataTimeline.vue | 69 ++++++++++++++++------- src/components/RegisterCardNavigation.vue | 32 +++++++++-- src/views/ContactView.vue | 17 ++++++ src/views/CreditView.vue | 17 ++++++ src/views/HomeView.vue | 4 +- src/views/PersonView.vue | 2 +- src/views/RegisterView.vue | 2 +- src/views/RessourcesView.vue | 18 +++++- src/views/TermsOfServiceView.vue | 17 ++++++ 12 files changed, 162 insertions(+), 38 deletions(-) diff --git a/src/App.vue b/src/App.vue index 74d6a6f..2e43fe0 100644 --- a/src/App.vue +++ b/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(() => { diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue index 1a137a4..2d63b38 100644 --- a/src/components/AppFooter.vue +++ b/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 { diff --git a/src/components/FacSimileNavigation.vue b/src/components/FacSimileNavigation.vue index c19dca2..7017458 100644 --- a/src/components/FacSimileNavigation.vue +++ b/src/components/FacSimileNavigation.vue @@ -287,7 +287,8 @@ 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; @@ -295,7 +296,7 @@ li.register .is-highlighted, .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; } diff --git a/src/components/PersonDataTimeline.vue b/src/components/PersonDataTimeline.vue index cdcf54b..469a8a4 100644 --- a/src/components/PersonDataTimeline.vue +++ b/src/components/PersonDataTimeline.vue @@ -6,16 +6,16 @@ Cliquer/Survoler pour faire apparaître Date de l'événement inconnue -
-
+ @click="togglePopup($event, group.date)"> {{ formatDate(group.date) }}
@@ -56,8 +56,8 @@
- +
@@ -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 { diff --git a/src/components/RegisterCardNavigation.vue b/src/components/RegisterCardNavigation.vue index 58762b9..57611b6 100644 --- a/src/components/RegisterCardNavigation.vue +++ b/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; + } + +} + + \ No newline at end of file diff --git a/src/views/ContactView.vue b/src/views/ContactView.vue index 9de5350..0ec23ad 100644 --- a/src/views/ContactView.vue +++ b/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; } } diff --git a/src/views/CreditView.vue b/src/views/CreditView.vue index c845c28..6a12177 100644 --- a/src/views/CreditView.vue +++ b/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; } } diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 2648f76..f248b17 100644 --- a/src/views/HomeView.vue +++ b/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 { diff --git a/src/views/PersonView.vue b/src/views/PersonView.vue index 7dd396f..950e137 100644 --- a/src/views/PersonView.vue +++ b/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); } diff --git a/src/views/RegisterView.vue b/src/views/RegisterView.vue index d00ca3b..3c3d1e3 100644 --- a/src/views/RegisterView.vue +++ b/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 { diff --git a/src/views/RessourcesView.vue b/src/views/RessourcesView.vue index 2803d21..6060bb2 100644 --- a/src/views/RessourcesView.vue +++ b/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; } } diff --git a/src/views/TermsOfServiceView.vue b/src/views/TermsOfServiceView.vue index 91a71b0..8cdf16b 100644 --- a/src/views/TermsOfServiceView.vue +++ b/src/views/TermsOfServiceView.vue @@ -376,6 +376,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; } }