useweb/drizzli
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

static routing fixed

Browse Source
This commit is contained in:
Vincent van der Wal
2026-07-22 18:48:24 +02:00
parent 54dbaeaadc
commit af9bf42d05
7 changed files with 430 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/charts/ChartContainer.svelte
+50 -37
View File
@@ -31,6 +31,8 @@
chartHeight?: number;
/** Extra vertical padding in pixels added to the total min-height (default: 2) */
extraPadding?: number;
/** Minimum chart width in pixels; narrower viewports scroll sideways (default: 560) */
minWidth?: number;
/** Optional CSS class for the outer wrapper */
class?: string;
/** Slot content (charts go here) */
@@ -42,6 +44,7 @@
chartCount = 1,
chartHeight = 300,
extraPadding = 2,
minWidth = 560,
class: className = '',
children
}: Props = $props();
@@ -51,53 +54,63 @@
let minHeight = $derived(chartHeight * chartCount + extraPadding);
</script>
<div class="chart-container relative {className}" style:min-height="{minHeight}px">
<!-- Chart content area -->
<div class="chart-content" in:fade={{ duration: 300 }} out:fade={{ duration: 300 }}>
{#if children}
{@render children()}
{/if}
</div>
<!-- Loading overlay -->
<div class="chart-bleed">
<div
class="loading-overlay absolute inset-0 z-30 flex items-center justify-center rounded-lg bg-background transition-opacity duration-300"
class:pointer-events-none={!loading}
class:opacity-0={!loading}
class:opacity-100={loading}
class="chart-container relative {className}"
style:min-height="{minHeight}px"
style:min-width="{minWidth}px"
>
<div class="flex flex-col items-center gap-3">
<svg
class="lucide lucide-loader-circle animate-spin text-muted-foreground"
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
</svg>
<span class="sr-only">Loading charts...</span>
<!-- Chart content area -->
<div class="chart-content" in:fade={{ duration: 300 }} out:fade={{ duration: 300 }}>
{#if children}
{@render children()}
{/if}
</div>
<!-- Loading overlay -->
<div
class="loading-overlay absolute inset-0 z-30 flex items-center justify-center rounded-lg bg-background transition-opacity duration-300"
class:pointer-events-none={!loading}
class:opacity-0={!loading}
class:opacity-100={loading}
>
<div class="flex flex-col items-center gap-3">
<svg
class="lucide lucide-loader-circle animate-spin text-muted-foreground"
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
</svg>
<span class="sr-only">Loading charts...</span>
</div>
</div>
</div>
</div>
<style>
.chart-container {
/* Negative horizontal margin on mobile to use full width, reset on md+ */
margin-left: -1.5rem;
margin-right: -1.5rem;
.chart-bleed {
/* Bleed exactly into the page padding on mobile (main has p-5 =
1.25rem) for edge-to-edge charts, and a bit past the content
column on md+ (main has 2rem padding) for extra readability.
Charts narrower than their min-width scroll sideways. */
margin-left: -1.25rem;
margin-right: -1.25rem;
overflow-x: auto;
}
@media (min-width: 768px) {
.chart-container {
margin-left: 0;
margin-right: 0;
.chart-bleed {
margin-left: -1.5rem;
margin-right: -1.5rem;
}
}