campbellwireless/trips
3
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

Update dashboard header and map styling (#56)
All checks were successful
Build and Push Image / docker-build-and-push (push) Successful in 2m18s
Details

Browse Source 
Reviewed-on: #56
Co-authored-by: AI Agent <ai-agent@campbellwireless.net>
Co-committed-by: AI Agent <ai-agent@campbellwireless.net>
This commit was merged in pull request #56.
This commit is contained in:
AI Agent
2026-02-24 22:25:10 +00:00
committed by shaun
parent ebc8f80bb5
commit 894535b555
3 changed files with 876 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
e2e/dashboard.test.ts
View File

@@ -32,6 +32,7 @@ test.beforeEach(async ({ context }) => {
}); });
test('dashboard surfaces map stops, stats, and trip status', async ({ page }) => { test('dashboard surfaces map stops, stats, and trip status', async ({ page }) => {
const screenshotPath = test.info().outputPath('dashboard.png');
const suffix = uniqueSuffix(); const suffix = uniqueSuffix();
const pastStart = formatDate(-18); const pastStart = formatDate(-18);
const pastEnd = formatDate(-15); const pastEnd = formatDate(-15);
@@ -72,4 +73,6 @@ test('dashboard surfaces map stops, stats, and trip status', async ({ page }) =>
await expect(page.getByTestId('stat-past-trips')).toHaveText('1'); await expect(page.getByTestId('stat-past-trips')).toHaveText('1');
await expect(page.getByTestId('stat-countries')).toHaveText('1'); await expect(page.getByTestId('stat-countries')).toHaveText('1');
await page.screenshot({ path: screenshotPath, fullPage: true });
}); });

55
src/routes/(protected)/dashboard/+page.svelte
View File

@@ -79,26 +79,16 @@
<svelte:head> <svelte:head>
<title>Dashboard — Trips</title> <title>Dashboard — Trips</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Fraunces:wght@600;700&family=Manrope:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
</svelte:head> </svelte:head>
<div class="dashboard-shell space-y-8"> <div class="dashboard-shell space-y-8">
<header class="relative overflow-hidden rounded-3xl border border-slate-200 bg-gradient-to-br from-amber-50 via-white to-sky-50 p-6"> <header class="rounded-3xl bg-white p-6 shadow-sm">
<div class="absolute -right-10 top-6 h-32 w-32 rounded-full bg-sky-200/40 blur-3xl"></div>
<div class="absolute -left-12 bottom-6 h-40 w-40 rounded-full bg-amber-200/40 blur-3xl"></div>
<div class="relative">
<p class="text-xs uppercase tracking-[0.2em] text-slate-500">Overview</p> <p class="text-xs uppercase tracking-[0.2em] text-slate-500">Overview</p>
<h1 class="display mt-2 text-3xl text-slate-900 sm:text-4xl">Dashboard</h1> <h1 class="display mt-2 text-3xl text-slate-900 sm:text-4xl">Dashboard</h1>
<p class="mt-2 text-sm text-slate-600"> <p class="mt-2 text-sm text-slate-600">
Welcome back, {data.session.user?.name ?? data.session.user?.email}. Here’s a quick pulse on Welcome back, {data.session.user?.name ?? data.session.user?.email}. Here’s a quick pulse on your
your travel story. travel story.
</p> </p>
</div>
</header> </header>
<section class="grid gap-6 lg:grid-cols-[1.6fr,1fr]"> <section class="grid gap-6 lg:grid-cols-[1.6fr,1fr]">
@@ -106,23 +96,15 @@
class="relative overflow-hidden rounded-3xl border border-slate-200 bg-slate-950/90 p-6 text-white" class="relative overflow-hidden rounded-3xl border border-slate-200 bg-slate-950/90 p-6 text-white"
data-testid="trip-map" data-testid="trip-map"
> >
<div class="absolute inset-0 map-grid opacity-30"></div> <div class="absolute inset-0 map-grid opacity-15"></div>
<div class="absolute -left-20 top-10 h-48 w-48 rounded-full bg-emerald-400/20 blur-3xl"></div> <div class="absolute -left-20 top-10 h-48 w-48 rounded-full bg-emerald-400/15 blur-3xl"></div>
<div class="absolute right-0 bottom-0 h-56 w-56 rounded-full bg-sky-400/20 blur-3xl"></div> <div class="absolute right-0 bottom-0 h-56 w-56 rounded-full bg-sky-400/15 blur-3xl"></div>
<svg <img
class="absolute inset-0 h-full w-full opacity-70" class="map-base absolute inset-0 h-full w-full object-cover"
viewBox="0 0 1000 500" src="{base}/world-map.svg"
preserveAspectRatio="xMidYMid slice" alt=""
aria-hidden="true" aria-hidden="true"
> />
<rect width="1000" height="500" fill="none" />
<polygon class="map-land" points="110,140 220,90 330,120 360,200 290,260 170,240" />
<polygon class="map-land" points="260,260 330,260 370,320 340,430 260,400 230,320" />
<polygon class="map-land" points="420,120 520,110 560,150 520,190 450,170" />
<polygon class="map-land" points="450,200 560,210 610,320 550,420 470,340" />
<polygon class="map-land" points="580,120 760,110 880,200 780,270 620,220" />
<polygon class="map-land" points="740,320 830,330 860,400 800,440 720,380" />
</svg>
<div class="relative"> <div class="relative">
<div class="flex items-start justify-between gap-4"> <div class="flex items-start justify-between gap-4">
<div> <div>
@@ -325,24 +307,15 @@
</div> </div>
<style> <style>
.dashboard-shell {
font-family: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
}
.display {
font-family: 'Fraunces', 'Times New Roman', serif;
}
.map-grid { .map-grid {
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px), background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px); linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
background-size: 48px 48px; background-size: 48px 48px;
} }
.map-land { .map-base {
fill: rgba(148, 163, 184, 0.25); opacity: 0.45;
stroke: rgba(148, 163, 184, 0.35); filter: invert(1) grayscale(1);
stroke-width: 2;
} }
.map-marker { .map-marker {

855
static/world-map.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 83 KiB