From 9013e85ff0e2f318c2bfef98d204aafa315e39c1 Mon Sep 17 00:00:00 2001
From: Hornwitser <code@hornwitser.no>
Date: Wed, 16 Jul 2025 19:58:01 +0200
Subject: [PATCH] Scroll the now line into view on navigation

When displaying the schedule, scroll it such that the now line is on the
left to make what is displayed by default the most immediately useful
information.
---
 components/Timetable.vue | 11 +++++++++++
 pages/schedule.vue       |  6 +++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/components/Timetable.vue b/components/Timetable.vue
index 78742f9..07ce65d 100644
--- a/components/Timetable.vue
+++ b/components/Timetable.vue
@@ -77,6 +77,7 @@
 					<td :colSpan="totalColumns">
 						<div
 							v-if="nowOffset !== undefined"
+							ref="nowLine"
 							class="now"
 							:style="` --now-offset: ${nowOffset}`"
 						>
@@ -677,6 +678,16 @@ const nowOffset = computed(() => {
 		offset += group.width;
 	}
 });
+
+const nowLine = useTemplateRef("nowLine"); // If I name the ref now, the element disappears?!
+function scrollToNow() {
+	if (nowLine.value) {
+		nowLine.value.scrollIntoView({ behavior: "smooth", inline: "start", block: "nearest" });
+	}
+}
+defineExpose({
+	scrollToNow,
+});
 </script>
 
 <style scoped>
diff --git a/pages/schedule.vue b/pages/schedule.vue
index 393abaf..b9f4389 100644
--- a/pages/schedule.vue
+++ b/pages/schedule.vue
@@ -44,7 +44,7 @@
 				</optgroup>
 			</select>
 		</label>
-		<Timetable :schedule :eventSlotFilter :shiftSlotFilter />
+		<Timetable ref="timetable" :schedule :eventSlotFilter :shiftSlotFilter />
 		<h2>Events</h2>
 		<label>
 			Hide past events
@@ -157,4 +157,8 @@ const eventSlots = computed(() => {
 	return slots.map(slot => ({ slot, event: schedule.value.events.get(slot.eventId!) }));
 });
 
+const timetable = useTemplateRef("timetable");
+onMounted(() => {
+	timetable.value?.scrollToNow();
+});
 </script>