From 805963677041e426b2f8c50d9217b2de3c3048f0 Mon Sep 17 00:00:00 2001
From: Pirmin Mattmann <pimattmann@gmail.com>
Date: Tue, 15 Oct 2024 21:23:46 +0200
Subject: [PATCH] Scroll to today

---
 frontend/src/locales/de.json          |  1 +
 frontend/src/locales/en.json          |  1 +
 frontend/src/locales/fr.json          |  1 +
 frontend/src/locales/it.json          |  1 +
 frontend/src/views/camp/Dashboard.vue | 28 +++++++++++++++++++++------
 5 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index ed66fb486b..c69a671ecb 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -682,6 +682,7 @@
           "title": "Titel"
         },
         "noEntries": "Keine Aktivitäten gefunden. Versuche die Filter zu entfernen oder lade die Seite neu.",
+        "today": "Heute",
         "welcome": "Willkommen in deinem neuen Lager. Es sind noch keine Aktivitäten erfasst. "
       },
       "invitation": {
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 81e655985f..50e3338bfc 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -677,6 +677,7 @@
           "title": "Title"
         },
         "noEntries": "No activities found. Try clearing the selection filters and/or reloading the page.",
+        "today": "Today",
         "welcome": "Welcome to your new camp. There aren't any activities defined yet."
       },
       "invitation": {
diff --git a/frontend/src/locales/fr.json b/frontend/src/locales/fr.json
index c4474fe01c..275ccced6d 100644
--- a/frontend/src/locales/fr.json
+++ b/frontend/src/locales/fr.json
@@ -621,6 +621,7 @@
           "title": "Titre"
         },
         "noEntries": "Aucune activité trouvée. Essaie d'effacer les filtres de sélection et/ou de recharger la page.",
+        "today": "Aujourd'hui",
         "welcome": "Bienvenue dans ton nouveau camp. Il n'y a pas encore d'activités définies."
       },
       "invitation": {
diff --git a/frontend/src/locales/it.json b/frontend/src/locales/it.json
index a4e750c1a4..839cdab188 100644
--- a/frontend/src/locales/it.json
+++ b/frontend/src/locales/it.json
@@ -601,6 +601,7 @@
           "title": "Titolo"
         },
         "noEntries": "Non sono state trovate attività. Prova a cancellare i filtri di selezione e/o a ricaricare la pagina.",
+        "today": "Oggi",
         "welcome": "Benvenuto nel tuo nuovo campo. Non ci sono ancora attività definite."
       },
       "invitation": {
diff --git a/frontend/src/views/camp/Dashboard.vue b/frontend/src/views/camp/Dashboard.vue
index e6520a0aa9..5780266188 100644
--- a/frontend/src/views/camp/Dashboard.vue
+++ b/frontend/src/views/camp/Dashboard.vue
@@ -2,8 +2,9 @@
   <content-card :title="$tc('views.camp.dashboard.activities')" toolbar>
     <template #title-actions>
       <v-spacer />
-      <v-btn v-if="today !== null" :icon="true" @click="scrollToToday">
-        <v-icon>mdi-calendar-today</v-icon>
+      <v-btn v-if="today !== null" text @click="scrollToToday">
+        <v-icon left>mdi-calendar-today</v-icon>
+        {{ $tc('views.camp.dashboard.today') }}
       </v-btn>
     </template>
     <div class="d-flow-root">
@@ -61,10 +62,11 @@
           <template v-if="!periods[uri].days()._meta.loading">
             <tbody
               v-for="(dayScheduleEntries, dayUri) in periodDays"
+              :id="days[dayUri].id"
               :key="dayUri"
               :aria-labelledby="dayUri + 'th'"
             >
-              <tr :ref="days[dayUri].id" class="day-header__row">
+              <tr class="day-header__row">
                 <th :id="dayUri + 'th'" colspan="5" scope="colgroup" class="day-header">
                   <div class="day-header__inner">
                     {{ dateLong(days[dayUri].start) }}
@@ -290,9 +292,23 @@ export default {
       this.$router.replace({ query }).catch((err) => console.warn(err))
     },
     scrollToToday() {
-      const refs = this.$refs[this.today.id]
-      if (refs.length > 0) {
-        refs[0].scrollIntoView({ behavior: 'smooth' })
+      const element = document.getElementById(this.today.id)
+      if (element) {
+        const elementPosition = element.getBoundingClientRect().top
+
+        let offsetPosition = elementPosition
+        if (this.$vuetify.breakpoint.mdAndUp) {
+          offsetPosition = offsetPosition - 50
+        } else if (this.$vuetify.breakpoint.smAndUp) {
+          offsetPosition = offsetPosition + 14
+        } else {
+          offsetPosition = offsetPosition - 34
+        }
+
+        window.scrollTo({
+          top: offsetPosition,
+          behavior: 'smooth',
+        })
       }
     },
   },