From e764572d37223e8069533a572304ffc059f72e7f Mon Sep 17 00:00:00 2001 From: Denis Chiron Date: Fri, 19 Apr 2024 12:49:17 +0200 Subject: [PATCH] Fixesx : scroll Timeline, text align justify to left, ... --- src/components/AppFooter.vue | 1 - src/components/MetaWorkflowSchema.vue | 2 +- src/components/PersonDataTimeline.vue | 69 +++++++++++++++++++++------ src/views/ContactView.vue | 2 +- src/views/CreditView.vue | 2 +- src/views/FacSimileView.vue | 5 +- 6 files changed, 59 insertions(+), 22 deletions(-) diff --git a/src/components/AppFooter.vue b/src/components/AppFooter.vue index e0254be..dcde626 100644 --- a/src/components/AppFooter.vue +++ b/src/components/AppFooter.vue @@ -168,7 +168,6 @@ footer .columns .column:last-child { font-weight: 400; line-height: 30px; color: #FFFFFF; - text-align: justify; } .footer-links { diff --git a/src/components/MetaWorkflowSchema.vue b/src/components/MetaWorkflowSchema.vue index 97ae557..1593ab9 100644 --- a/src/components/MetaWorkflowSchema.vue +++ b/src/components/MetaWorkflowSchema.vue @@ -950,7 +950,7 @@ rect:hover { button.toggle-btn-wrapper { position: absolute; - bottom: 0; + bottom: 8px; right: 5px; border: none; diff --git a/src/components/PersonDataTimeline.vue b/src/components/PersonDataTimeline.vue index f2239e9..b94c569 100644 --- a/src/components/PersonDataTimeline.vue +++ b/src/components/PersonDataTimeline.vue @@ -19,14 +19,15 @@ {{ formatDate(group.date) }}
-
+
+ v-show="activePopupIndex[group.date] === index" + >
{{ event.type }}
@@ -170,12 +171,7 @@ export default { }, mounted() { - 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}); - + this.initScroll(); document.body.addEventListener("click", this._deselectDate); }, unmounted() { @@ -191,7 +187,7 @@ export default { */ navigateInCarousel(group, direction) { //console.log(group) - console.log('navigateInCarousel', group.events); + // console.log('navigateInCarousel', group.events); const totalEvents = group.events.length; let currentIndex = this.activePopupIndex[group.date] || 0; let newIndex = currentIndex + direction; @@ -202,6 +198,12 @@ export default { } this.activePopupIndex[group.date] = newIndex; this.activePopupIndex = {...this.activePopupIndex}; + + this.$nextTick(() => { + this.initScroll(); + this.scrollIfPopUpOverflow(); + this.handleScroll(); + }); } , /** @@ -226,12 +228,41 @@ export default { } , + /** + * Initialize the scroll event + */ + initScroll() { + this.hasNoScroll = Math.abs(this.$refs.scrollContainer.scrollHeight - this.$refs.scrollContainer.clientHeight) < 1; + + if (! this.hasNoScroll) this.$refs.scrollContainer.addEventListener('scroll', this.handleScroll) + else this.$refs.scrollContainer.removeEventListener('scroll', this.handleScroll) + + // this.$refs.scrollContainer.addEventListener('wheel', this.handleWheel, {passive: false}); + } + , + /** * Handle the scroll event to know if the user is at the top or bottom of the timeline */ handleScroll() { - this.isAtTop = this.$refs.scrollContainer.scrollTop === 0; + this.isAtTop = this.$refs.scrollContainer.scrollTop < 1; this.isAtBottom = this.$refs.scrollContainer.scrollHeight - this.$refs.scrollContainer.scrollTop === this.$refs.scrollContainer.clientHeight; + console.log(this.isAtTop); + } + , + + /** + * Scroll if the popup is partially hidden at bottom + */ + scrollIfPopUpOverflow() { + if (this.$refs.timelinePopup.length) { + const timelinePopupRect = this.$refs.timelinePopup[0].getBoundingClientRect() + const scrollContainerRect = this.$refs.scrollContainer.getBoundingClientRect(); + const overflow = timelinePopupRect.bottom - scrollContainerRect.bottom; + if (overflow > 0) { + this.scroll(overflow + 100, 'instant'); + } + } } , @@ -266,10 +297,10 @@ export default { * Scroll the timeline * @param amount */ - scroll(amount) { + scroll(amount, behavior = 'smooth') { const container = this.$refs.scrollContainer; if (container) { - container.scrollBy({top: amount, behavior: 'smooth'}); + container.scrollBy({top: amount, behavior}); } } , @@ -314,6 +345,12 @@ export default { this.selectedDate = date; // Sélectionne le nouveau dot this.activePopupIndex[date] = this.activePopupIndex[date] || 0; } + + this.$nextTick(() => { + this.initScroll(); + this.scrollIfPopUpOverflow(); + this.handleScroll(); + }); } , @@ -422,7 +459,8 @@ export default { } .timeline-scroll-container { - max-height: 30rem; + min-height: 160px; + max-height: min( 50rem, calc(100vh - 200px)); overflow-y: auto; border-top: 1px solid #A7A7A7; border-bottom: 1px solid #A7A7A7; @@ -447,7 +485,7 @@ export default { .timeline-legend { - margin-bottom: 32px; + margin-bottom: 15px; } .legend-item { @@ -473,7 +511,7 @@ export default { .button.btn-scroll { bottom: 0; right: 0; - left: calc(50% - 4px); + left: 50%; transform: translateX(-50%); width: 49px; @@ -641,6 +679,7 @@ export default { } .timeline-scroll-container { + min-height: unset; max-height: unset; overflow-y: unset; border: none; diff --git a/src/views/ContactView.vue b/src/views/ContactView.vue index 0ec23ad..615bc73 100644 --- a/src/views/ContactView.vue +++ b/src/views/ContactView.vue @@ -104,7 +104,7 @@ p, li { .container-text { - text-align: justify; + text-align: left; } .rgpd-info { diff --git a/src/views/CreditView.vue b/src/views/CreditView.vue index 6289a22..086d71f 100644 --- a/src/views/CreditView.vue +++ b/src/views/CreditView.vue @@ -112,7 +112,7 @@ ul li { } .container-text { - text-align: justify; + text-align: left; } @media screen and (max-width: 1024px) { diff --git a/src/views/FacSimileView.vue b/src/views/FacSimileView.vue index 52d8613..ca778b5 100644 --- a/src/views/FacSimileView.vue +++ b/src/views/FacSimileView.vue @@ -128,7 +128,7 @@ export default { canvasID: null, }, metadataCardsState: { - card1: true, + card1: false, card2: false, card3: false, }, @@ -558,8 +558,7 @@ export default { .card-content span.card-content-label, .warning { color: var(--light-brown-alt); - /* justify the text */ - text-align: justify; + text-align: left; } .raw-prediction-text {