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

compact member card

Browse Source
This commit is contained in:
JCEEE
2026-09-22 20:35:50 +01:00
parent 66ed9750e9
commit fa1bf1e09d
1 changed files with 58 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/routes/[fam]/+page.svelte
+58 -51
View File
@@ -473,52 +473,16 @@
<span class="donut-label">Overall</span>
</div>
</div>
<div class="member-stats">
<div class="stat-group-lbl">This week</div>
<div class="stat-row">
<span class="stat-lbl">Points</span>
<span class="stat-val pts">{s.pointsEarned}</span>
<div class="member-stats compact">
<div class="mstat" title="Points this week: {s.pointsEarned} · Cash: £{Number(s.moneyEarned || 0).toFixed(2)} · Pocket money: {pocketMoneyByMember.get(s.memberId) ?? 0}">
<span class="mstat-tag">Week</span>
<span class="mstat-main"><b class="pts">{s.pointsEarned}</b> pts · <b class="cash">£{Number(s.moneyEarned || 0).toFixed(2)}</b> · {wkDone}/{wkTotal}</span>
{#if (goals?.count ?? 0) > 0}<span class="mstat-goals" title={goals?.names.join(' · ')}>🎉{goals?.count}</span>{/if}
</div>
<div class="stat-row">
<span class="stat-lbl">Cash</span>
<span class="stat-val cash">£{Number(s.moneyEarned || 0).toFixed(2)}</span>
</div>
<div class="stat-row">
<span class="stat-lbl">Done</span>
<span class="stat-val">{wkDone}/{wkTotal}</span>
</div>
<div class="stat-row">
<span class="stat-lbl">Goals 🎉</span>
<span class="stat-val goals" title={goals?.names.join(' · ')}
>{goals?.count ?? 0}</span
>
</div>
<div class="stat-row">
<span class="stat-lbl">Pocket Money</span>
<span class="stat-val pm">{pocketMoneyByMember.get(s.memberId) ?? 0}</span>
</div>
<div class="stat-group-lbl">All time</div>
<div class="stat-row">
<span class="stat-lbl">Points</span>
<span class="stat-val pts">{at?.points ?? s.pointsEarned}</span>
</div>
<div class="stat-row">
<span class="stat-lbl">Cash</span>
<span class="stat-val cash">£{Number(at?.cash ?? s.moneyEarned ?? 0).toFixed(2)}</span>
</div>
<div class="stat-row">
<span class="stat-lbl">Done</span>
<span class="stat-val">{sc.done}/{sc.total}</span>
</div>
<div class="stat-row">
<span class="stat-lbl">Goals 🎉</span>
<span class="stat-val goals" title={goalsAll?.names.join(' · ')}
>{goalsAll?.count ?? 0}</span
>
</div>
<div class="stat-row">
<span class="stat-lbl">Pocket Money</span>
<span class="stat-val pm">{pocketMoneyAllTimeByMember.get(s.memberId) ?? 0}</span>
<div class="mstat dim" title="Points all time: {at?.points ?? s.pointsEarned} · Cash: £{Number(at?.cash ?? s.moneyEarned ?? 0).toFixed(2)} · Pocket money: {pocketMoneyAllTimeByMember.get(s.memberId) ?? 0}">
<span class="mstat-tag">All time</span>
<span class="mstat-main"><b>{at?.points ?? s.pointsEarned}</b> pts · <b>£{Number(at?.cash ?? s.moneyEarned ?? 0).toFixed(2)}</b> · {sc.done}/{sc.total}</span>
{#if (goalsAll?.count ?? 0) > 0}<span class="mstat-goals" title={goalsAll?.names.join(' · ')}>🎉{goalsAll?.count}</span>{/if}
</div>
</div>
</div>
@@ -777,18 +741,18 @@
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.85rem;
margin: 3rem 0;
gap: 0.6rem;
margin: 0.9rem 0 0.7rem;
}
.donut-wrap {
position: relative;
width: 62px;
height: 62px;
width: 54px;
height: 54px;
flex-shrink: 0;
}
.donut-wrap canvas {
max-width: 62px;
max-height: 62px;
max-width: 54px;
max-height: 54px;
}
.donut-center {
position: absolute;
@@ -819,6 +783,49 @@
gap: 0.3rem;
margin-bottom: 0.5rem;
}
.member-stats.compact .mstat {
display: flex;
align-items: baseline;
gap: 0.4rem;
font-size: 0.76rem;
color: #374151;
background: rgba(255, 255, 255, 0.65);
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 0.28rem 0.5rem;
white-space: nowrap;
overflow: hidden;
}
.member-stats.compact .mstat.dim {
opacity: 0.75;
}
.mstat-tag {
font-size: 0.6rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #9ca3af;
flex-shrink: 0;
}
.mstat-main {
overflow: hidden;
text-overflow: ellipsis;
}
.mstat-main b {
font-weight: 800;
}
.mstat-main b.pts {
color: #7c3aed;
}
.mstat-main b.cash {
color: #059669;
}
.mstat-goals {
margin-left: auto;
flex-shrink: 0;
font-weight: 700;
color: #059669;
}
.stat-row {
display: flex;
justify-content: space-between;