stan/website
1
0
Fork 0
Code Issues 21 Pull Requests Actions Packages Projects Releases Wiki Activity

add icons to lists and solve money tracker bugs
All checks were successful
Test and deploy staging / staging (push) Successful in 2m30s
Details

Browse Source
This commit is contained in:
Stan Runge
2026-09-24 19:24:09 +00:00
parent a10585a4d2
commit c757d0882a
18 changed files with 1358 additions and 731 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/+page.server.ts
View File

@@ -6,7 +6,7 @@ import type { PageServerLoad } from './$types';
export const load: PageServerLoad = async ({ locals }) => {
const lists = await db.query.lists.findMany({
columns: { id: true, name: true, slug: true, isProgress: true },
columns: { id: true, name: true, slug: true, isProgress: true, pictureUrl: true },
with: { items: { columns: { id: true } } },
orderBy: { id: 'desc' }
});

12
src/routes/+page.svelte
View File

@@ -138,7 +138,17 @@
class="block py-4 hover:text-[var(--site-muted)]"
>
<span class="flex flex-wrap items-center justify-between gap-x-6 gap-y-1">
<span>{list.name}</span>
<span class="flex items-center gap-3">
{#if list.pictureUrl}<img
src={list.pictureUrl}
alt=""
loading="lazy"
width="40"
height="40"
class="h-10 w-10 rounded bg-[var(--site-surface)] object-cover"
/>{/if}
<span>{list.name}</span>
</span>
<span class="inline-flex items-center gap-1 text-base text-[var(--site-muted)]">
{#if list.isProgress && data.user}
{list.total ? Math.round((list.checked / list.total) * 100) : 0}% · {list.checked}/{list.total}

9
src/routes/lists/+page.server.ts
View File

@@ -2,6 +2,7 @@ import { db } from '$lib/server/db';
import { listItemCompletions, lists } from '$lib/server/db/schema';
import { requireAdmin } from '$lib/server/authorization';
import { uniqueListSlug } from '$lib/server/slugify';
import { listImageUrl } from '$lib/server/r2';
import { eq } from 'drizzle-orm';
import { fail, redirect } from '@sveltejs/kit';
import type { Actions, PageServerLoad } from './$types';
@@ -36,12 +37,18 @@ export const actions: Actions = {
const form = await event.request.formData();
const name = String(form.get('name') ?? '').trim();
const type = String(form.get('type') ?? '');
const pictureKey = String(form.get('pictureKey') ?? '').trim();
const picture = form.get('picture');
if (!name || name.length > 200)
return fail(400, { message: 'Enter a list name of 1–200 characters.' });
if (type !== 'normal' && type !== 'progress')
return fail(400, { message: 'Choose a list type.' });
if (picture instanceof File && picture.size > 0)
return fail(400, { message: 'Enable JavaScript to upload an image.' });
const pictureUrl = pictureKey ? listImageUrl(pictureKey) : null;
if (pictureKey && !pictureUrl) return fail(400, { message: 'Invalid uploaded picture.' });
const slug = await uniqueListSlug(name);
await db.insert(lists).values({ name, slug, isProgress: type === 'progress' });
await db.insert(lists).values({ name, slug, isProgress: type === 'progress', pictureUrl });
redirect(303, `/lists/${slug}`);
}
};

52
src/routes/lists/+page.svelte
View File

@@ -2,8 +2,42 @@
import { enhance } from '$app/forms';
import { resolve } from '$app/paths';
import ProgressBar from '$lib/components/ProgressBar.svelte';
import ListPictureDropzone from '$lib/components/ListPictureDropzone.svelte';
import type { SubmitFunction } from '@sveltejs/kit';
import type { PageProps } from './$types';
let { data, form }: PageProps = $props();
let uploadError = $state('');
let uploading = $state(false);
const uploadPicture: SubmitFunction = async ({ formData, cancel }) => {
uploadError = '';
const picture = formData.get('picture');
formData.delete('picture');
if (!(picture instanceof File) || !picture.size) return;
if (!['image/jpeg', 'image/png', 'image/webp'].includes(picture.type)) {
uploadError = 'Choose a JPEG, PNG, or WebP image.';
cancel();
return;
}
if (picture.size > 5 * 1024 * 1024) {
uploadError = 'Images must be 5 MB or smaller.';
cancel();
return;
}
uploading = true;
try {
const body = new FormData();
body.set('picture', picture);
const response = await fetch(resolve('/lists/api/upload'), { method: 'POST', body });
if (!response.ok) throw new Error('Could not upload the image. Please try again.');
const { key } = await response.json();
formData.set('pictureKey', key);
} catch (cause) {
uploadError = cause instanceof Error ? cause.message : 'Image upload failed.';
cancel();
} finally {
uploading = false;
}
};
</script>
<div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 sm:py-16">
@@ -14,7 +48,8 @@
<form
method="POST"
action="?/newList"
use:enhance
enctype="multipart/form-data"
use:enhance={uploadPicture}
class="absolute top-full right-0 z-10 mt-3 w-80 max-w-[calc(100vw-2rem)] space-y-3 rounded-lg border border-[var(--site-border)] bg-[var(--site-surface)] p-4 shadow-lg"
>
<label class="block"
@@ -33,7 +68,9 @@
></select
></label
>
<ListPictureDropzone label="List picture (optional)" />
<button
disabled={uploading}
class="rounded bg-[var(--site-text)] px-4 py-2 font-semibold text-[var(--site-bg)]"
>create list</button
>
@@ -41,6 +78,7 @@
</details>{/if}
</div>
{#if form?.message}<p role="alert" class="mb-5 text-red-500">{form.message}</p>{/if}
{#if uploadError}<p role="alert" class="mb-5 text-red-500">{uploadError}</p>{/if}
<ul>
{#each data.lists as list (list.id)}
<li class="border-t border-[var(--site-border)]">
@@ -49,7 +87,17 @@
class="block py-5 hover:text-[var(--site-muted)]"
>
<span class="flex flex-wrap items-center justify-between gap-x-6 gap-y-1">
<span class="text-lg font-medium">{list.name}</span>
<span class="flex items-center gap-3">
{#if list.pictureUrl}<img
src={list.pictureUrl}
alt=""
loading="lazy"
width="48"
height="48"
class="h-12 w-12 rounded bg-[var(--site-surface)] object-cover"
/>{/if}
<span class="text-lg font-medium">{list.name}</span>
</span>
<span class="text-base text-[var(--site-muted)]">
{#if list.isProgress && data.user}
{list.total ? Math.round((list.checked / list.total) * 100) : 0}% · {list.checked}/{list.total}

24
src/routes/lists/[slug]/+page.server.ts
View File

@@ -1,4 +1,5 @@
import { db } from '$lib/server/db';
import { env } from '$env/dynamic/private';
import { lists, listItems, listItemCompletions } from '$lib/server/db/schema';
import { requireAdmin, requireUser } from '$lib/server/authorization';
import { deleteObject, listImageKey, listImageUrl } from '$lib/server/r2';
@@ -13,6 +14,8 @@ async function currentList(slug: string) {
return list;
}
async function removeStoredPicture(url: string | null) {
// Development and staging may reference pictures copied from production.
if (env.ORIGIN !== 'https://stanrunge.dev') return;
const key = url ? listImageKey(url) : null;
if (!key) return;
try {
@@ -79,7 +82,9 @@ export const actions: Actions = {
.from(listItems)
.where(eq(listItems.listId, list.id));
await db.delete(lists).where(eq(lists.id, list.id));
await Promise.all(pictures.map((item) => removeStoredPicture(item.pictureUrl)));
await Promise.all(
[...pictures.map((item) => item.pictureUrl), list.pictureUrl].map(removeStoredPicture)
);
redirect(303, '/lists');
},
updateList: async (event) => {
@@ -90,12 +95,21 @@ export const actions: Actions = {
.trim()
.toLowerCase();
const type = String(form.get('type') ?? '');
const pictureKey = String(form.get('pictureKey') ?? '').trim();
const removePicture = form.get('removePicture') === 'on';
const picture = form.get('picture');
if (!name || name.length > 200)
return fail(400, { message: 'Enter a name of 1–200 characters' });
if (type !== 'normal' && type !== 'progress')
return fail(400, { message: 'Choose a list type.' });
if (!validSlug(slug))
return fail(400, { message: 'Use a lowercase slug with letters, numbers, and hyphens.' });
if (picture instanceof File && picture.size > 0)
return fail(400, { message: 'Enable JavaScript to upload an image.' });
if (pictureKey && removePicture)
return fail(400, { message: 'Choose a new picture or remove the old one.' });
const pictureUrl = pictureKey ? listImageUrl(pictureKey) : null;
if (pictureKey && !pictureUrl) return fail(400, { message: 'Invalid uploaded picture.' });
const current = await currentList(event.params.slug);
const duplicate = await db
.select({ id: lists.id })
@@ -104,10 +118,16 @@ export const actions: Actions = {
if (duplicate.length) return fail(409, { message: 'That list slug is already in use.' });
const [list] = await db
.update(lists)
.set({ name, slug, isProgress: type === 'progress' })
.set({
name,
slug,
isProgress: type === 'progress',
...(pictureKey ? { pictureUrl } : removePicture ? { pictureUrl: null } : {})
})
.where(eq(lists.id, current.id))
.returning();
if (!list) error(404, 'List not found');
if (list.pictureUrl !== current.pictureUrl) await removeStoredPicture(current.pictureUrl);
if (slug !== event.params.slug) redirect(303, `/lists/${slug}`);
return { saved: true };
},

194
src/routes/lists/[slug]/+page.svelte
View File

@@ -12,11 +12,28 @@
let uploadError = $state('');
let uploading = $state(false);
let managing = $state(false);
let search = $state('');
let editingItem = $state<(typeof data.list.items)[number] | null>(null);
let visibleItems = $derived(
data.list.items.filter((item) =>
`${item.name} ${item.description ?? ''}`.toLowerCase().includes(search.trim().toLowerCase())
)
);
const uploadPicture: SubmitFunction = async ({ formData, cancel }) => {
const finish = async ({
result,
update
}: {
result: { type: string };
update: () => Promise<void>;
}) => {
await update();
if (result.type === 'success') editingItem = null;
};
uploadError = '';
const picture = formData.get('picture');
formData.delete('picture');
if (!(picture instanceof File) || picture.size === 0) return;
if (!(picture instanceof File) || picture.size === 0) return finish;
if (!['image/jpeg', 'image/png', 'image/webp'].includes(picture.type)) {
uploadError = 'Choose a JPEG, PNG, or WebP image.';
cancel();
@@ -44,9 +61,16 @@
} finally {
uploading = false;
}
return finish;
};
</script>
<svelte:window
onkeydown={(event) => {
if (event.key === 'Escape') editingItem = null;
}}
/>
<section class="mx-auto max-w-4xl space-y-6 px-4 py-10 sm:px-6 sm:py-14">
<a
href={resolve('/lists')}
@@ -54,12 +78,21 @@
><ArrowLeft size={16} aria-hidden="true" /> lists</a
>
<div class="flex flex-wrap items-end justify-between gap-4">
<div>
<h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">{data.list.name}</h1>
<p class="mt-2 text-base text-[var(--site-muted)]">
{data.total}
{data.total === 1 ? 'item' : 'items'}
</p>
<div class="flex items-center gap-4">
{#if data.list.pictureUrl}<img
src={data.list.pictureUrl}
alt=""
width="96"
height="96"
class="h-20 w-20 rounded-lg bg-[var(--site-surface)] object-cover sm:h-24 sm:w-24"
/>{/if}
<div>
<h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">{data.list.name}</h1>
<p class="mt-2 text-base text-[var(--site-muted)]">
{data.total}
{data.total === 1 ? 'item' : 'items'}
</p>
</div>
</div>
{#if data.isAdmin}<button
type="button"
@@ -96,7 +129,8 @@
<form
method="POST"
action="?/updateList"
use:enhance
enctype="multipart/form-data"
use:enhance={uploadPicture}
class="grid gap-3 sm:grid-cols-2 sm:items-end"
>
<label
@@ -124,7 +158,15 @@
<option value="progress" selected={data.list.isProgress}>Progress</option>
</select></label
>
<button class="rounded border p-2">Save list</button>
<div class="sm:col-span-2">
<ListPictureDropzone label="List picture (optional)" />
{#if data.list.pictureUrl}<label class="mt-2 block text-sm"
><input type="checkbox" name="removePicture" /> Remove current picture</label
>{/if}
</div>
<button disabled={uploading} class="rounded border p-2 disabled:opacity-50"
>Save list</button
>
</form>
<details class="border-t border-[var(--site-border)] pt-4">
<summary class="cursor-pointer font-medium text-red-700">Delete this list</summary>
@@ -148,8 +190,17 @@
</div>
</details>
{/if}
<label class="block">
<span class="sr-only">Search list items</span>
<input
type="search"
bind:value={search}
placeholder="Search list items"
class="w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2"
/>
</label>
<ul class="divide-y divide-[var(--site-border)] border-t border-[var(--site-border)]">
{#each data.list.items as item (item.id)}
{#each visibleItems as item (item.id)}
<li class="py-4">
<div class="flex items-start gap-4">
{#if item.pictureUrl}<img
@@ -180,56 +231,85 @@
</button>
</form>
{/if}
{#if data.isAdmin && managing}<button
type="button"
onclick={() => (editingItem = item)}
class="shrink-0 rounded border border-[var(--site-border)] px-3 py-1 text-sm hover:bg-[var(--site-surface)]"
aria-label={`Edit ${item.name}`}>Edit</button
>{/if}
</div>
{#if data.isAdmin && managing}
<details class="mt-3 border-t border-[var(--site-border)] pt-3">
<summary class="cursor-pointer text-base underline">edit item</summary>
<form
method="POST"
action="?/updateItem"
enctype="multipart/form-data"
use:enhance={uploadPicture}
class="mt-3 grid gap-3"
>
<input type="hidden" name="itemId" value={item.id} />
<label
>Name<input
name="name"
value={item.name}
required
maxlength="500"
class="block w-full rounded border p-2"
/></label
>
<ListPictureDropzone label="Replace picture (optional)" />
{#if item.pictureUrl}<label class="text-sm"
><input type="checkbox" name="removePicture" /> Remove current picture</label
>{/if}
<label
>Description (optional)<textarea
name="description"
maxlength="5000"
rows="3"
class="block w-full rounded border p-2">{item.description ?? ''}</textarea
></label
>
<button
disabled={uploading}
class="justify-self-start rounded bg-gray-900 px-4 py-2 text-white disabled:opacity-50"
>Save item</button
>
</form>
<form method="POST" action="?/removeItem" use:enhance class="mt-3">
<input type="hidden" name="itemId" value={item.id} />
<button class="text-sm text-red-700 underline" aria-label={`Remove ${item.name}`}
>Remove item</button
>
</form>
</details>
{/if}
</li>
{:else}<li class="py-5 text-[var(--site-muted)]">no items yet</li>{/each}
{:else}<li class="py-5 text-[var(--site-muted)]">
{search ? 'No matching items' : 'no items yet'}
</li>{/each}
</ul>
{#if data.isAdmin && managing && editingItem}
<div class="fixed inset-0 z-40 bg-black/60"></div>
<div class="fixed inset-0 z-50 overflow-y-auto p-4 sm:p-8">
<div
role="dialog"
aria-modal="true"
aria-label={`Edit ${editingItem.name}`}
class="mx-auto max-w-xl rounded-lg bg-[var(--site-bg)] p-5 shadow-xl"
>
<div class="mb-4 flex items-center justify-between gap-4">
<h2 class="text-xl font-semibold">Edit item</h2>
<button type="button" onclick={() => (editingItem = null)} class="underline">Close</button
>
</div>
<form
method="POST"
action="?/updateItem"
enctype="multipart/form-data"
use:enhance={uploadPicture}
class="grid gap-3"
>
<input type="hidden" name="itemId" value={editingItem.id} />
<label
>Name<input
name="name"
value={editingItem.name}
required
maxlength="500"
class="block w-full rounded border p-2"
/></label
>
<ListPictureDropzone label="Replace picture (optional)" />
{#if editingItem.pictureUrl}<label class="text-sm"
><input type="checkbox" name="removePicture" /> Remove current picture</label
>{/if}
<label
>Description (optional)<textarea
name="description"
maxlength="5000"
rows="3"
class="block w-full rounded border p-2">{editingItem.description ?? ''}</textarea
></label
>
<button
disabled={uploading}
class="justify-self-start rounded bg-gray-900 px-4 py-2 text-white disabled:opacity-50"
>Save item</button
>
</form>
<form
method="POST"
action="?/removeItem"
use:enhance={() =>
async ({ result, update }) => {
await update();
if (result.type === 'success') editingItem = null;
}}
class="mt-5 border-t border-[var(--site-border)] pt-4"
>
<input type="hidden" name="itemId" value={editingItem.id} />
<button class="text-sm text-red-700 underline" aria-label={`Remove ${editingItem.name}`}
>Remove item</button
>
</form>
</div>
</div>
{/if}
{#if data.isAdmin && managing}
<details class="border-t border-[var(--site-border)] pt-5">
<summary class="cursor-pointer font-medium">add item</summary>

9
src/routes/projects/money-tracker/+page.server.ts
View File

@@ -117,19 +117,24 @@ export const actions: Actions = {
const name = textField(form, 'name', 80);
const openingBalanceCents = cents(form.get('openingBalance'));
const kind = String(form.get('kind') ?? 'spendable');
const colorRaw = String(form.get('color') ?? '').trim();
const color = colorRaw ? colorRaw.toLowerCase() : null;
if (!name || openingBalanceCents == null || !['spendable', 'investment'].includes(kind))
return invalid('Enter an account name and a valid opening balance.');
if (color && !/^#[0-9a-f]{6}$/.test(color)) return invalid('Choose a valid account color.');
const id = recordId(form);
try {
if (id) {
const [row] = await db
.update(moneyAccounts)
.set({ name, openingBalanceCents, kind })
.set({ name, openingBalanceCents, kind, color })
.where(and(eq(moneyAccounts.id, id), eq(moneyAccounts.userId, user.id)))
.returning({ id: moneyAccounts.id });
if (!row) error(404, 'Account not found');
} else
await db.insert(moneyAccounts).values({ userId: user.id, name, openingBalanceCents, kind });
await db
.insert(moneyAccounts)
.values({ userId: user.id, name, openingBalanceCents, kind, color });
} catch (cause) {
if (typeof cause === 'object' && cause && 'code' in cause && cause.code === '23505')
return invalid('An account with that name already exists.');

822
src/routes/projects/money-tracker/+page.svelte
View File

File diff suppressed because it is too large Load Diff

421
src/routes/projects/money-tracker/money-tracker.css
View File

@@ -40,7 +40,6 @@
}
.money-app .button.secondary:hover,
.money-dialog .button.secondary:hover,
.money-app .tabs button:hover,
.money-app .subtabs button:hover {
background: var(--site-hover);
}
@@ -55,8 +54,7 @@
align-items: end;
justify-content: space-between;
gap: 24px;
border-bottom: 1px solid var(--site-border);
padding-bottom: 30px;
margin-bottom: 20px;
}
.money-app h1 {
margin: 2px 0 8px;
@@ -70,84 +68,43 @@
flex-wrap: wrap;
gap: 8px;
}
.money-app .tabs {
display: flex;
gap: 2px;
overflow-x: auto;
border-bottom: 1px solid var(--site-border);
margin-bottom: 32px;
}
.money-app .tabs button {
border-bottom: 2px solid transparent;
color: var(--site-muted);
white-space: nowrap;
padding: 14px 16px 12px;
font-size: 13px;
}
.money-app .tabs button.current {
color: var(--site-text);
border-color: var(--site-text);
font-weight: 600;
}
.money-app .overview-grid {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(250px, 0.8fr);
border: 1px solid var(--site-border);
border-radius: 10px;
overflow: hidden;
margin-bottom: 28px;
}
.money-app .net-worth {
padding: 32px;
min-width: 0;
}
.money-app .net-value {
font-size: clamp(2.5rem, 6vw, 4rem);
line-height: 1.2;
font-weight: 600;
letter-spacing: -0.055em;
overflow-wrap: anywhere;
margin: 8px 0;
}
.money-app .overview-side {
border-left: 1px solid var(--site-border);
display: grid;
grid-template-rows: 1fr 1fr;
}
.money-app .overview-side > div {
padding: 22px 26px;
}
.money-app .overview-side > div + div {
border-top: 1px solid var(--site-border);
}
.money-app .side-value {
font-size: 1.5rem;
font-weight: 600;
letter-spacing: -0.04em;
margin-top: 7px;
}
.money-app .projection-note {
margin-top: 14px;
line-height: 1.5;
}
.money-app .projection-totals {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 18px;
}
.money-app .projection-totals > div {
display: grid;
gap: 4px;
padding: 12px 14px;
border: 1px solid var(--site-border);
border-radius: 7px;
}
.money-app .projection-totals strong {
font-size: 16px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.money-app .wish-tier-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
border: 1px solid var(--site-border);
border-radius: 8px;
overflow: hidden;
grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
gap: 6px;
}
.money-app .wish-tier-grid > div {
display: grid;
gap: 5px;
padding: 15px;
gap: 3px;
padding: 9px 11px;
min-width: 0;
}
.money-app .wish-tier-grid > div + div {
border-left: 1px solid var(--site-border);
border: 1px solid var(--site-border);
border-radius: 7px;
}
.money-app .wish-tier-grid strong {
font-size: 17px;
font-size: 14px;
font-weight: 600;
overflow-wrap: anywhere;
}
@@ -167,21 +124,20 @@
font-size: 13px;
}
.money-app .panel {
margin-bottom: 28px;
border: 1px solid var(--site-border);
border-radius: 10px;
padding: 24px;
padding: 20px;
min-width: 0;
}
.money-app .panel-heading {
display: flex;
align-items: start;
justify-content: space-between;
gap: 20px;
margin-bottom: 22px;
gap: 16px;
margin-bottom: 16px;
}
.money-app .panel-heading h2 {
font-size: 20px;
font-size: 17px;
font-weight: 600;
letter-spacing: -0.035em;
}
@@ -196,32 +152,12 @@
text-underline-offset: 3px;
white-space: nowrap;
}
.money-app .two-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.money-app .summary-list li {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
border-top: 1px solid var(--site-border);
padding: 12px 0;
font-size: 13px;
}
.money-app .summary-list strong {
font-weight: 500;
}
.money-app .summary-list small {
display: block;
color: var(--site-muted);
font-size: 11px;
margin-top: 2px;
}
.money-app .negative {
color: #e5484d;
}
.money-app .positive {
color: #46a758;
}
.money-app .empty {
color: var(--site-muted);
font-size: 13px;
@@ -262,12 +198,12 @@
text-align: left;
font-weight: 500;
border-bottom: 1px solid var(--site-border);
padding: 10px 12px;
padding: 8px 10px;
white-space: nowrap;
}
.money-app td {
border-bottom: 1px solid var(--site-border);
padding: 11px 12px;
padding: 8px 10px;
vertical-align: top;
}
.money-app tbody tr:hover {
@@ -314,35 +250,11 @@
display: flex;
gap: 8px;
}
.money-app .planning-intro {
display: flex;
align-items: end;
justify-content: space-between;
gap: 32px;
border-bottom: 1px solid var(--site-border);
padding: 8px 0 30px;
margin-bottom: 28px;
}
.money-app .planning-intro > p {
max-width: 370px;
}
.money-app .large-value {
font-size: clamp(1.6rem, 4vw, 2.5rem);
font-weight: 600;
letter-spacing: -0.05em;
margin: 6px 0;
}
.money-app .large-value span {
font-size: 16px;
color: var(--site-muted);
font-weight: 400;
letter-spacing: 0;
}
.money-app .subtabs {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 24px;
margin-bottom: 16px;
}
.money-app .subtabs button {
border: 1px solid var(--site-border);
@@ -356,20 +268,223 @@
color: var(--site-bg);
border-color: var(--site-text);
}
.money-app .utility-top {
.money-app .stat-strip {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding-bottom: 16px;
}
.money-app .utility-note {
grid-template-columns: repeat(6, minmax(0, 1fr));
border: 1px solid var(--site-border);
border-radius: 10px;
overflow: hidden;
margin-bottom: 16px;
}
.money-app .utility-actions {
.money-app .stat {
padding: 16px 18px;
min-width: 0;
}
.money-app .stat + .stat {
border-left: 1px solid var(--site-border);
}
.money-app .stat-value {
margin-top: 4px;
font-size: 1.35rem;
font-weight: 600;
letter-spacing: -0.04em;
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.money-app .stat.net .stat-value {
font-size: 1.75rem;
}
.money-app .dashboard {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 16px;
align-items: start;
}
.money-app .span-8 {
grid-column: span 8;
}
.money-app .span-4 {
grid-column: span 4;
}
.money-app .stack {
display: grid;
gap: 16px;
min-width: 0;
}
.money-app .swatch {
display: inline-block;
flex: none;
width: 10px;
height: 10px;
border-radius: 50%;
box-shadow: 0 0 0 1px var(--site-border);
}
.money-app .account-cell {
display: inline-flex;
align-items: center;
gap: 7px;
}
.money-app .nowrap {
white-space: nowrap;
}
.money-app tr.future {
color: var(--site-muted);
}
.money-app .chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 12px;
}
.money-app .chips button {
display: inline-flex;
align-items: center;
gap: 7px;
border: 1px solid var(--site-border);
border-radius: 999px;
padding: 5px 11px;
color: var(--site-muted);
font-size: 12px;
}
.money-app .chips button:hover {
background: var(--site-hover);
}
.money-app .chips button.current {
color: var(--site-text);
border-color: var(--site-text);
background: var(--site-surface);
}
.money-app .item-list li {
display: flex;
align-items: center;
gap: 10px;
border-top: 1px solid var(--site-border);
padding: 8px 0;
font-size: 13px;
}
.money-app .item-list.scroll {
max-height: 360px;
overflow-y: auto;
}
.money-app .item-list li.selected {
background: var(--site-surface);
box-shadow: inset 2px 0 0 var(--site-text);
}
.money-app .item-main {
display: flex;
align-items: center;
gap: 9px;
flex: 1;
min-width: 0;
text-align: left;
padding-left: 4px;
}
.money-app .item-main > span:last-child {
min-width: 0;
}
.money-app .item-main strong {
display: block;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.money-app .item-main small {
display: block;
color: var(--site-muted);
font-size: 11px;
margin-top: 1px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.money-app .item-amount {
font-weight: 500;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.money-app .item-list .actions button {
width: 26px;
height: 26px;
}
.money-app .tier {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 20px;
height: 20px;
border: 1px solid var(--site-border);
border-radius: 5px;
color: var(--site-muted);
font-size: 11px;
}
.money-app .mini-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
padding-top: 16px;
margin-bottom: 12px;
}
.money-app .mini-stats > div {
display: grid;
gap: 3px;
min-width: 0;
}
.money-app .mini-stats strong {
font-size: 15px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.money-app .mini-stats small {
color: var(--site-muted);
font-weight: 400;
}
.money-app .utility-settings {
display: block;
margin: 10px 0 6px;
}
.money-app .utility-note {
margin-top: 12px;
font-size: 12px;
}
@media (max-width: 1180px) {
.money-app .span-8,
.money-app .span-4 {
grid-column: span 12;
}
.money-app .dashboard > .span-4:nth-last-child(-n + 3) {
grid-column: span 6;
}
.money-app .dashboard > .span-4:last-child {
grid-column: span 12;
}
.money-app .stat-strip {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.money-app .stat:nth-child(4) {
border-left: 0;
}
.money-app .stat:nth-child(n + 4) {
border-top: 1px solid var(--site-border);
}
}
@media (max-width: 760px) {
.money-app .dashboard > .span-4:nth-last-child(-n + 3) {
grid-column: span 12;
}
.money-app .stat-strip {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.money-app .stat.net {
grid-column: span 2;
}
.money-app .stat + .stat {
border-left: 0;
border-top: 1px solid var(--site-border);
}
.money-app .stat:nth-child(odd):not(.net) {
border-left: 1px solid var(--site-border);
}
}
.money-dialog {
width: min(440px, calc(100% - 28px));
@@ -452,49 +567,13 @@
color: #e5484d;
font-size: 13px;
}
@media (max-width: 760px) {
.money-app .overview-grid,
.money-app .two-columns {
grid-template-columns: 1fr;
}
.money-app .overview-side {
border-left: 0;
border-top: 1px solid var(--site-border);
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.money-app .overview-side > div + div {
border-top: 0;
border-left: 1px solid var(--site-border);
}
.money-app .utility-top {
grid-template-columns: 1fr;
gap: 8px;
}
.money-app .wish-tier-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.money-app .wish-tier-grid > div {
border-left: 0 !important;
border-top: 1px solid var(--site-border);
}
.money-app .planning-intro {
display: block;
}
.money-app .planning-intro > p {
margin-top: 16px;
}
}
@media (max-width: 520px) {
.money-app .projection-totals {
grid-template-columns: 1fr;
}
.money-app .panel {
padding: 16px;
}
.money-app .net-worth {
padding: 22px;
}
.money-app .overview-side > div {
padding: 16px;
}
.money-app .filters {
flex-direction: column;
}