aksdb/wotra
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: responsive day chips via CSS container queries

Browse Source 
Wrap each DayChip in a container-query context so the chip layout
responds to the actual space available rather than the viewport width.

Breakpoints (per-chip width):
- < 72px  (mobile, 7 chips in ~320px): compact — label + date + progress bar + badges only
- ≥ 72px  (tablet+): show worked duration text below the date number; slightly larger padding/font
- ≥ 100px (desktop, 7 chips in ~750px wide main): larger date number, bigger worked label

The .chip-slot div in week/+page.svelte is the flex child (flex: 1,
min-width: 2.8rem) that feeds width into the container; .chip-wrap
inside DayChip carries container-type: inline-size and fills the slot.
This commit is contained in:
Andreas Schneider
2026-05-01 13:29:07 +02:00
parent bf2c4a3301
commit f602e08b5a
2 changed files with 110 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
web/src/lib/components/DayChip.svelte
View File

@@ -32,6 +32,8 @@
// Progress bar fill: clamp to [0,1]. Non-workdays have expectedMs=0 → no bar.
const progress = $derived(expectedMs > 0 ? Math.min(workedMs / expectedMs, 1) : 0);
const workedLabel = $derived(workedMs > 0 ? formatDurationShort(workedMs) : null);
// Kind icons (emoji-free: text labels used for kind badges)
const KIND_ICON: Record<string, string> = {
holiday: 'H',
@@ -40,39 +42,56 @@
};
</script>
<button
class="day-chip"
class:today={isToday}
class:selected
class:weekend={!isWorkday}
class:closed
role="tab"
aria-selected={selected}
tabindex={selected ? 0 : -1}
{onclick}
>
<span class="wd-label">{weekdayLabel}</span>
<span class="date-num">{dateNum}</span>
<!-- container query context wraps the button -->
<div class="chip-wrap">
<button
class="day-chip"
class:today={isToday}
class:selected
class:weekend={!isWorkday}
class:closed
role="tab"
aria-selected={selected}
tabindex={selected ? 0 : -1}
{onclick}
>
<span class="wd-label">{weekdayLabel}</span>
<span class="date-num">{dateNum}</span>
{#if expectedMs > 0}
<div class="progress-track" title="{formatDurationShort(workedMs)} / {formatDurationShort(expectedMs)}">
<div class="progress-fill" class:over={workedMs > expectedMs} style="width: {progress * 100}%"></div>
{#if expectedMs > 0}
<div class="progress-track" title="{formatDurationShort(workedMs)} / {formatDurationShort(expectedMs)}">
<div class="progress-fill" class:over={workedMs > expectedMs} style="width: {progress * 100}%"></div>
</div>
{:else}
<div class="progress-track weekend-track"></div>
{/if}
<!-- shown only in wide mode via container query -->
{#if workedLabel}
<span class="worked-label">{workedLabel}</span>
{/if}
<div class="badges">
{#if kind && kind !== 'work'}
<span class="kind-badge" data-kind={kind}>{KIND_ICON[kind]}</span>
{/if}
{#if closed}
<span class="closed-badge" title="Closed">✓</span>
{/if}
</div>
{:else}
<div class="progress-track weekend-track"></div>
{/if}
<div class="badges">
{#if kind && kind !== 'work'}
<span class="kind-badge" data-kind={kind}>{KIND_ICON[kind]}</span>
{/if}
{#if closed}
<span class="closed-badge" title="Closed">✓</span>
{/if}
</div>
</button>
</button>
</div>
<style>
/* Container query context: each chip slot is the container */
.chip-wrap {
container-type: inline-size;
flex: 1;
min-width: 2.8rem;
scroll-snap-align: start;
display: flex;
}
.day-chip {
display: flex;
flex-direction: column;
@@ -83,10 +102,8 @@
border-radius: 8px;
background: #fff;
cursor: pointer;
min-width: 2.8rem;
flex: 1;
width: 100%;
transition: border-color 0.15s, box-shadow 0.15s;
scroll-snap-align: start;
font-family: inherit;
}
@@ -155,6 +172,55 @@
background: #f39c12;
}
/* Worked duration text — hidden by default, shown when chip is wide */
.worked-label {
display: none;
font-size: 0.7rem;
font-weight: 600;
color: #495057;
line-height: 1;
}
.weekend .worked-label {
color: #adb5bd;
}
/* Wide chip (≥ 72px): show worked duration */
@container (min-width: 72px) {
.worked-label {
display: block;
}
.day-chip {
padding: 0.55rem 0.5rem;
gap: 0.25rem;
}
.wd-label {
font-size: 0.7rem;
}
.date-num {
font-size: 1.15rem;
}
}
/* Very wide chip (≥ 100px): bigger text, more padding */
@container (min-width: 100px) {
.day-chip {
padding: 0.7rem 0.6rem;
gap: 0.3rem;
}
.date-num {
font-size: 1.3rem;
}
.worked-label {
font-size: 0.8rem;
}
}
.badges {
display: flex;
gap: 0.15rem;