Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Today quick-navigate button to nutrition and period tracker
CI / update (push) Successful in 3m36s
Details

Browse Source 
Shows a Today button when not viewing current date/month. Nutrition
page button appears right-aligned in the date nav. Period tracker
button appears top-right of the calendar header with centered
month title and chevrons.
This commit is contained in:
Alexander Bocken
2026-04-08 20:46:55 +02:00
parent aaeb0d1083
commit b287affeb2
2 changed files with 44 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/fitness/PeriodTracker.svelte
+23 -1
View File
@@ -662,6 +662,9 @@
<button class="cal-nav" onclick={() => calendarOffset++} disabled={calendarOffset >= 12}> <button class="cal-nav" onclick={() => calendarOffset++} disabled={calendarOffset >= 12}>
<ChevronRight size={16} /> <ChevronRight size={16} />
</button> </button>
{#if calendarOffset !== 0}
<button class="go-today-btn" onclick={() => calendarOffset = 0}>{lang === 'de' ? 'Heute' : 'Today'}</button>
{/if}
</div> </div>
<div class="cal-weekdays"> <div class="cal-weekdays">
{#each weekDays as wd} {#each weekDays as wd}
@@ -1064,9 +1067,28 @@
} }
.cal-header { .cal-header {
display: flex; display: flex;
justify-content: space-between; justify-content: center;
align-items: center; align-items: center;
gap: 0.25rem;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
position: relative;
}
.go-today-btn {
position: absolute;
right: 0;
font-size: 0.65rem;
font-weight: 600;
color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
padding: 0.15rem 0.5rem;
border-radius: 5px;
cursor: pointer;
transition: background 0.15s;
-webkit-tap-highlight-color: transparent;
}
.go-today-btn:hover {
background: color-mix(in srgb, var(--color-primary) 20%, transparent);
} }
.cal-title { .cal-title {
font-size: 0.85rem; font-size: 0.85rem;
src/routes/fitness/[nutrition=fitnessNutrition]/+page.svelte
+21 -1
View File
@@ -930,6 +930,9 @@
<button class="date-btn" onclick={() => navigateDate(1)} aria-label="Next day"> <button class="date-btn" onclick={() => navigateDate(1)} aria-label="Next day">
<ChevronRight size={20} /> <ChevronRight size={20} />
</button> </button>
{#if !isToday}
<button class="go-today-btn" onclick={goToday}>{t('today', lang)}</button>
{/if}
</div> </div>
<div class="sidebar-col"> <div class="sidebar-col">
@@ -1677,7 +1680,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.25rem; gap: 0.25rem;
position: relative;
} }
.date-btn { .date-btn {
background: none; background: none;
@@ -1722,6 +1725,23 @@
padding: 0.15rem 0.4rem; padding: 0.15rem 0.4rem;
border-radius: 4px; border-radius: 4px;
} }
.go-today-btn {
position: absolute;
right: 0;
font-size: 0.7rem;
font-weight: 600;
color: var(--color-primary);
background: color-mix(in srgb, var(--color-primary) 10%, transparent);
border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
padding: 0.25rem 0.6rem;
border-radius: 6px;
cursor: pointer;
transition: background 0.15s;
-webkit-tap-highlight-color: transparent;
}
.go-today-btn:hover {
background: color-mix(in srgb, var(--color-primary) 20%, transparent);
}
/* ── Daily Summary Card ── */ /* ── Daily Summary Card ── */
.daily-summary { .daily-summary {