yusiboyz/platform
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

wip: bento card layout + zinc/emerald tokens (in progress)

Browse Source 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Yusuf Suleman
2026-03-30 21:10:07 -05:00
parent 3704687793
commit 1a9ec9d0e4
6 changed files with 188 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
frontend-v2/src/routes/(app)/+page.svelte
View File

@@ -157,8 +157,8 @@
<TaskSlideOver bind:open={taskPanelOpen} onclose={() => { taskPanelOpen = false; loadTasks(); }} />
<!-- Action cards -->
<div class="action-cards stagger">
<!-- Bento row 1: Budget (wide) + Inventory (narrow) -->
<div class="bento-row stagger">
<DashboardActionCard
title="{budgetUncatCount} uncategorized transactions"
description="{budgetSpending} spent &middot; {budgetIncome} income"
@@ -168,12 +168,16 @@
href="/budget"
/>
<DashboardActionCard
title="{inventoryIssueCount} issue{inventoryIssueCount !== 1 ? 's' : ''} · {inventoryReviewCount} needs review"
title="{inventoryIssueCount} issue{inventoryIssueCount !== 1 ? 's' : ''} &middot; {inventoryReviewCount} needs review"
description="{inventoryIssueCount + inventoryReviewCount} items need attention"
action="View"
variant="inventory"
href="/inventory"
/>
</div>
<!-- Bento row 2: Calories + Fitness detail -->
<div class="bento-row-2 stagger">
<DashboardActionCard
title="{fitnessCalRemaining.toLocaleString()} calories remaining today"
description="{fitnessCalLogged.toLocaleString()} cal logged &middot; {fitnessProtein}g protein &middot; {fitnessCarbs}g carbs"
@@ -181,15 +185,13 @@
variant="fitness"
href="/fitness"
/>
<FitnessModule />
</div>
<!-- Modules -->
<!-- Modules: Budget detail (wide) + Issues (narrow) -->
<div class="modules-grid">
<BudgetModule />
<div class="right-stack">
<FitnessModule />
<IssuesModule />
</div>
<IssuesModule />
</div>
</div>
</div>
@@ -310,28 +312,29 @@
color: var(--accent);
}
/* ── Action cards ── */
.action-cards {
display: flex;
flex-direction: column;
gap: var(--sp-2);
margin-bottom: var(--section-gap);
/* ── Bento grids ── */
.bento-row {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 10px;
margin-bottom: 10px;
}
.bento-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 10px;
}
/* ── Modules grid ── */
.modules-grid {
display: grid;
grid-template-columns: 1.3fr 0.7fr;
gap: var(--module-gap);
grid-template-columns: 7fr 3fr;
gap: 10px;
align-items: start;
}
.right-stack {
display: flex;
flex-direction: column;
gap: var(--module-gap);
}
/* ── Mobile ── */
@media (max-width: 900px) {
.dash-header {
@@ -348,9 +351,13 @@
}
@media (max-width: 768px) {
.bento-row,
.bento-row-2,
.modules-grid {
grid-template-columns: 1fr;
}
.bento-row > :global(*),
.bento-row-2 > :global(*),
.modules-grid > :global(*) {
min-width: 0;
max-width: 100%;