JCEEE/famdone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update some minor ux issues

Browse Source
This commit is contained in:
JCEEE
2026-08-31 15:33:17 +01:00
parent 5165c59494
commit 035dbb829a
8 changed files with 100 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/[fam]/[username]/+page.svelte
+41 -43
View File
@@ -9,7 +9,7 @@
import {
checkCircleIcon,
revokeIcon,
todoIcon,
circleIcon,
targetIcon,
sunIcon,
calendarIcon,
@@ -19,6 +19,7 @@
handCoinsIcon,
moneyIcon,
coinsIcon,
walletIcon,
chevronLeftIcon,
chevronRightIcon
} from '$lib/components/icons';
@@ -578,6 +579,9 @@
function headDay(): number {
return headDate().getDate();
}
function headWeekday(): string {
return headDate().toLocaleDateString(undefined, { weekday: 'long' });
}
function headMonth(): string {
const d = headDate();
return `${MONTHS[d.getMonth()]} ${d.getFullYear()}`;
@@ -1078,6 +1082,7 @@
</div>
<div class="hero-date">
<span class="hero-day">{headDay()}</span>
<span class="hero-weekday">{headWeekday()}</span>
<span class="hero-month">{headMonth()}</span>
</div>
</div>
@@ -1259,7 +1264,7 @@
{:else}
{#each dailyPending as chore}
<button class="chore" onclick={() => toggle(chore)} disabled={!!togglingIds}>
<span class="checkbox empty"></span>
<span class="checkbox">{@html circleIcon}</span>
<span class="chore-name">{choreName(chore)}</span>
<span class="chore-value">{chore.value} {chore.type}</span>
</button>
@@ -1276,7 +1281,7 @@
{:else}
{#each weeklyPending as chore}
<button class="chore" onclick={() => toggle(chore)} disabled={!!togglingIds}>
<span class="checkbox empty"></span>
<span class="checkbox">{@html circleIcon}</span>
<span class="chore-name">{choreName(chore)}</span>
<span class="chore-value">{chore.value} {chore.type}</span>
</button>
@@ -1284,28 +1289,30 @@
{#each memberTodos.filter((t) => !isTodoDone(t.id)) as todo}
{@const urgency = todoUrgency(todo)}
{#if todo.type === 'emoji'}
<div
class="chore todo-chore todo-display"
<button
class="chore todo-chore"
class:todo-blue={urgency === 'blue'}
class:todo-green={urgency === 'green'}
class:todo-orange={urgency === 'orange'}
class:todo-red={urgency === 'red'}
class:todo-black={urgency === 'black'}
onclick={() => toggle(todo)}
disabled={!!togglingIds}
>
<span class="checkbox">{@html todoIcon}</span>
<span class="checkbox">{@html circleIcon}</span>
<span class="todo-main">
<span class="chore-name">{todo.customName || 'Todo'}</span>
{#if todo.completeBy}
{#if todo.completeBy === todayChild}
<span class="todo-due due-today">DUE TODAY!</span>
{:else}
<span class="todo-due">due {formatHumanDate(todo.completeBy)}</span>
{#if todo.completeBy}
{#if todo.completeBy === todayChild}
<span class="todo-due due-today">DUE TODAY!</span>
{:else}
<span class="todo-due">due {formatHumanDate(todo.completeBy)}</span>
{/if}
{/if}
{/if}
</span>
<span class="todo-label">todo</span>
<span class="chore-value">{todo.emoji || '🎯'}</span>
</div>
</button>
{:else}
<button
class="chore todo-chore"
@@ -1317,16 +1324,16 @@
onclick={() => toggle(todo)}
disabled={!!togglingIds}
>
<span class="checkbox">{@html todoIcon}</span>
<span class="checkbox">{@html circleIcon}</span>
<span class="todo-main">
<span class="chore-name">{todo.customName || 'Todo'}</span>
{#if todo.completeBy}
{#if todo.completeBy === todayChild}
<span class="todo-due due-today">DUE TODAY!</span>
{:else}
<span class="todo-due">due {formatHumanDate(todo.completeBy)}</span>
{#if todo.completeBy}
{#if todo.completeBy === todayChild}
<span class="todo-due due-today">DUE TODAY!</span>
{:else}
<span class="todo-due">due {formatHumanDate(todo.completeBy)}</span>
{/if}
{/if}
{/if}
</span>
<span class="todo-label">todo</span>
<span class="chore-value">
@@ -1350,7 +1357,11 @@
<button class="chore done" onclick={() => toggle(chore)} disabled={!!togglingIds}>
<span class="checkbox">{@html checkCircleIcon}</span>
<span class="chore-name">{choreName(chore)}</span>
<span class="chore-value">{chore.value} {chore.type}</span>
{#if chore.type === 'emoji'}
<span class="chore-value">{chore.emoji || '🎯'}</span>
{:else}
<span class="chore-value">{chore.value} {chore.type}</span>
{/if}
</button>
{/if}
{/each}
@@ -1362,7 +1373,7 @@
<!-- WALLET / CLAIMS -->
<div class="wallet">
<div class="wallet-top">
<span class="wallet-lbl">{@html moneyIcon} Wallet</span>
<span class="wallet-lbl">{@html walletIcon} Wallet</span>
{#if allTimeCash > 0 || allTimePoints > 0}
<span class="wallet-total">
<span class="wallet-cash">£{allTimeCash.toFixed(2)}</span>
@@ -1906,6 +1917,11 @@
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
}
.hero-weekday {
font-size: 0.85rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
}
.hero-progress {
display: flex;
align-items: center;
@@ -2018,8 +2034,9 @@
}
.hero-nav-btn.cur {
flex: 1;
background: #fff;
color: #6d28d9;
background: transparent;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.5);
}
/* ── Kanban scroll for parent view cards ── */
@@ -2334,17 +2351,6 @@
opacity: 0.55;
}
}
.todo-display {
cursor: default;
opacity: 0.85;
}
.todo-display:hover {
transform: none;
box-shadow: none;
border-top-color: #e5e7eb;
border-right-color: #e5e7eb;
border-bottom-color: #e5e7eb;
}
.chore:disabled {
opacity: 0.5;
cursor: not-allowed;
@@ -2364,14 +2370,6 @@
display: inline-block;
vertical-align: -0.2em;
}
.checkbox.empty {
display: inline-block;
width: 1.15em;
height: 1.15em;
border: 2px solid currentColor;
border-radius: 4px;
vertical-align: -0.2em;
}
.chore-name {
flex: 1;
min-width: 0;