till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-14 22:21:10 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix(calendar): scroll to current time and show time label on indicator

Browse source 
- Changed scroll behavior to position current time ~1/3 from viewport
  top instead of centering, so the red time indicator line is always
  visible on load
- Added current time label (e.g. "14:30") above the red indicator line
  on the right side

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-03-22 17:52:32 +01:00
parent 79becc971b
commit 6b2b7035cf
1 changed files with 24 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

33
apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte
View file

@ -178,23 +178,24 @@
$effect(() => keyboard.setup());
// Scroll to current hour on mount
// Scroll to current time on mount so the red indicator line is visible
onMount(() => {
if (!timeGridEl) return;
// Use CSS variable for hour height (default 48px)
const hourHeight =
parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--hour-height')) ||
48;
const currentHour = new Date().getHours();
const now = new Date();
const currentMinutesFromMidnight = now.getHours() * 60 + now.getMinutes();
const viewportHeight = timeGridEl.clientHeight;
// Calculate scroll position to center current hour in viewport
// Account for firstVisibleHour (if hour filtering is enabled)
const effectiveHour = Math.max(0, currentHour - firstVisibleHour);
const scrollPosition = effectiveHour * hourHeight - viewportHeight / 2 + hourHeight / 2;
// Calculate pixel position of current time
const effectiveMinutes = Math.max(0, currentMinutesFromMidnight - firstVisibleHour * 60);
const currentTimePixels = (effectiveMinutes / 60) * hourHeight;
// Scroll so current time is ~1/3 from the top of the viewport
const scrollPosition = currentTimePixels - viewportHeight / 3;
// Scroll to position (instant, not smooth, for initial load)
timeGridEl.scrollTo({
top: Math.max(0, scrollPosition),
behavior: 'instant',
@ -587,7 +588,10 @@
<!-- Current time indicator -->
{#if isToday(day)}
<div class="time-indicator" style="top: {currentTimePosition}%"></div>
<div class="time-indicator" style="top: {currentTimePosition}%">
<span class="time-indicator-label">{settingsStore.formatTime(timeIndicator.now)}</span
>
</div>
{/if}
</div>
{/each}
@ -883,6 +887,17 @@
border-radius: 50%;
}
.time-indicator-label {
position: absolute;
right: 4px;
bottom: 3px;
font-size: 0.6rem;
font-weight: 600;
color: hsl(var(--color-error));
line-height: 1;
pointer-events: none;
}
/* Overflow indicators for events outside visible time range */
.overflow-indicator {
position: absolute;