admin/gw-svelte
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add skeleton, updates to client email formatting

Browse Source
This commit is contained in:
ponzischeme89
2026-05-04 16:30:05 +12:00
parent d1dd103a6e
commit bf9331bb5b
10 changed files with 875 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/RouteSkeleton.svelte
+730
View File
@@ -0,0 +1,730 @@
<script lang="ts">
export let pathname = '/';
const serviceRoutes = new Set(['/pack-walks', '/dog-walking', '/puppy-visits']);
const legalRoutes = new Set(['/terms-and-conditions', '/privacy-policy']);
const heroLines = [0, 1, 2];
const shortLines = [0, 1];
const cardTriplet = [0, 1, 2];
const cardQuartet = [0, 1, 2, 3];
const doubleStack = [0, 1];
function getVariant(path: string) {
if (path === '/') return 'home';
if (serviceRoutes.has(path)) return 'service';
if (path === '/about' || path === '/about-us') return 'about';
if (path === '/our-pricing') return 'pricing';
if (path === '/contact-us') return 'contact';
if (legalRoutes.has(path)) return 'legal';
return 'generic';
}
$: variant = getVariant(pathname);
</script>
<div class="route-skeleton" data-skeleton-variant={variant}>
<div class="skeleton-shell">
<header class="skeleton-header">
<div class="skeleton-inner skeleton-nav">
<div class="skeleton-row skeleton-nav-links" aria-hidden="true">
{#each cardQuartet as _}
<span class="skeleton-pill skeleton-shimmer"></span>
{/each}
</div>
<span class="skeleton-logo skeleton-shimmer" aria-hidden="true"></span>
<div class="skeleton-row skeleton-nav-actions" aria-hidden="true">
<span class="skeleton-circle skeleton-shimmer"></span>
<span class="skeleton-button skeleton-shimmer"></span>
</div>
</div>
</header>
{#if variant === 'home'}
<main class="skeleton-main">
<section class="skeleton-section skeleton-home-hero">
<div class="skeleton-inner skeleton-home-hero-grid">
<div class="skeleton-copy">
<span class="skeleton-kicker skeleton-shimmer"></span>
<span class="skeleton-title skeleton-title-lg skeleton-shimmer"></span>
<span class="skeleton-title skeleton-title-md skeleton-shimmer"></span>
{#each heroLines as _}
<span class="skeleton-line skeleton-shimmer"></span>
{/each}
<div class="skeleton-row skeleton-hero-actions">
<span class="skeleton-button skeleton-button-wide skeleton-shimmer"></span>
<span class="skeleton-button skeleton-button-outline skeleton-shimmer"></span>
</div>
</div>
<div class="skeleton-media skeleton-media-hero skeleton-shimmer"></div>
</div>
</section>
<section class="skeleton-section">
<div class="skeleton-inner">
<div class="skeleton-strip skeleton-shimmer"></div>
</div>
</section>
<section class="skeleton-section">
<div class="skeleton-inner">
<div class="skeleton-section-heading skeleton-section-heading-left">
<span class="skeleton-title skeleton-title-sm skeleton-shimmer"></span>
{#each shortLines as _}
<span class="skeleton-line skeleton-line-short skeleton-shimmer"></span>
{/each}
</div>
<div class="skeleton-grid skeleton-grid-3">
{#each cardTriplet as _}
<article class="skeleton-card skeleton-shimmer"></article>
{/each}
</div>
</div>
</section>
<section class="skeleton-section">
<div class="skeleton-inner">
<div class="skeleton-section-heading">
<span class="skeleton-title skeleton-title-sm skeleton-shimmer"></span>
<span class="skeleton-line skeleton-line-short skeleton-shimmer"></span>
</div>
<div class="skeleton-grid skeleton-grid-2">
{#each doubleStack as _}
<article class="skeleton-quote-card skeleton-shimmer">
<span class="skeleton-line skeleton-line-medium"></span>
<span class="skeleton-line"></span>
<span class="skeleton-line skeleton-line-medium"></span>
</article>
{/each}
</div>
</div>
</section>
<section class="skeleton-section skeleton-section-last">
<div class="skeleton-inner">
<div class="skeleton-booking">
<div class="skeleton-booking-header">
<span class="skeleton-title skeleton-title-sm skeleton-shimmer"></span>
<div class="skeleton-row skeleton-stepper">
<span class="skeleton-chip skeleton-shimmer"></span>
<span class="skeleton-chip skeleton-shimmer"></span>
</div>
</div>
<div class="skeleton-grid skeleton-grid-2">
<article class="skeleton-form-card skeleton-shimmer"></article>
<article class="skeleton-form-card skeleton-shimmer"></article>
</div>
</div>
</div>
</section>
</main>
{:else if variant === 'service'}
<main class="skeleton-main">
<section class="skeleton-section skeleton-service-hero">
<div class="skeleton-inner skeleton-home-hero-grid">
<div class="skeleton-copy">
<span class="skeleton-kicker skeleton-shimmer"></span>
<span class="skeleton-title skeleton-title-lg skeleton-shimmer"></span>
{#each heroLines as _}
<span class="skeleton-line skeleton-shimmer"></span>
{/each}
</div>
<div class="skeleton-media skeleton-media-hero skeleton-shimmer"></div>
</div>
</section>
<section class="skeleton-section">
<div class="skeleton-inner">
<div class="skeleton-section-heading">
<span class="skeleton-title skeleton-title-sm skeleton-shimmer"></span>
<span class="skeleton-line skeleton-line-short skeleton-shimmer"></span>
</div>
<div class="skeleton-grid skeleton-grid-3">
{#each cardTriplet as _}
<article class="skeleton-plan-card skeleton-shimmer"></article>
{/each}
</div>
</div>
</section>
<section class="skeleton-section">
<div class="skeleton-inner">
<div class="skeleton-grid skeleton-grid-3">
{#each cardTriplet as _}
<article class="skeleton-card skeleton-card-short skeleton-shimmer"></article>
{/each}
</div>
</div>
</section>
<section class="skeleton-section skeleton-section-last">
<div class="skeleton-inner">
<div class="skeleton-booking skeleton-shimmer"></div>
</div>
</section>
</main>
{:else if variant === 'about'}
<main class="skeleton-main">
<section class="skeleton-section skeleton-about-hero">
<div class="skeleton-inner skeleton-centered-heading">
<span class="skeleton-title skeleton-title-lg skeleton-shimmer"></span>
</div>
</section>
{#each doubleStack as index}
<section class="skeleton-section">
<div class:skeleton-about-grid-reverse={index % 2 === 1} class="skeleton-inner skeleton-about-grid">
<div class="skeleton-copy">
<span class="skeleton-title skeleton-title-sm skeleton-shimmer"></span>
{#each heroLines as _}
<span class="skeleton-line skeleton-shimmer"></span>
{/each}
</div>
<div class="skeleton-media skeleton-media-tall skeleton-shimmer"></div>
</div>
</section>
{/each}
<section class="skeleton-section">
<div class="skeleton-inner">
<div class="skeleton-section-heading">
<span class="skeleton-title skeleton-title-sm skeleton-shimmer"></span>
</div>
<div class="skeleton-grid skeleton-grid-3">
{#each cardTriplet as _}
<article class="skeleton-card skeleton-shimmer"></article>
{/each}
</div>
</div>
</section>
<section class="skeleton-section skeleton-section-last">
<div class="skeleton-inner">
<div class="skeleton-contact-card skeleton-shimmer"></div>
</div>
</section>
</main>
{:else if variant === 'pricing'}
<main class="skeleton-main">
<section class="skeleton-section skeleton-about-hero">
<div class="skeleton-inner skeleton-centered-heading">
<span class="skeleton-title skeleton-title-lg skeleton-shimmer"></span>
<span class="skeleton-line skeleton-line-short skeleton-shimmer"></span>
</div>
</section>
{#each doubleStack as _}
<section class="skeleton-section">
<div class="skeleton-inner">
<div class="skeleton-section-heading skeleton-section-heading-left">
<span class="skeleton-title skeleton-title-sm skeleton-shimmer"></span>
<span class="skeleton-line skeleton-line-short skeleton-shimmer"></span>
</div>
<div class="skeleton-grid skeleton-grid-3">
{#each cardTriplet as _}
<article class="skeleton-plan-card skeleton-shimmer"></article>
{/each}
</div>
</div>
</section>
{/each}
<section class="skeleton-section skeleton-section-last">
<div class="skeleton-inner">
<div class="skeleton-booking skeleton-shimmer"></div>
</div>
</section>
</main>
{:else if variant === 'contact'}
<main class="skeleton-main">
<section class="skeleton-section skeleton-about-hero">
<div class="skeleton-inner skeleton-centered-heading">
<span class="skeleton-title skeleton-title-lg skeleton-shimmer"></span>
<span class="skeleton-line skeleton-line-short skeleton-shimmer"></span>
</div>
</section>
<section class="skeleton-section skeleton-section-last">
<div class="skeleton-inner">
<div class="skeleton-booking">
<div class="skeleton-booking-header">
<span class="skeleton-title skeleton-title-sm skeleton-shimmer"></span>
<div class="skeleton-row skeleton-stepper">
<span class="skeleton-chip skeleton-shimmer"></span>
<span class="skeleton-chip skeleton-shimmer"></span>
</div>
</div>
<div class="skeleton-grid skeleton-grid-2">
<article class="skeleton-form-card skeleton-shimmer"></article>
<article class="skeleton-form-card skeleton-shimmer"></article>
</div>
</div>
</div>
</section>
</main>
{:else}
<main class="skeleton-main">
<section class="skeleton-section skeleton-about-hero">
<div class="skeleton-inner skeleton-centered-heading">
<span class="skeleton-title skeleton-title-lg skeleton-shimmer"></span>
<span class="skeleton-line skeleton-line-short skeleton-shimmer"></span>
</div>
</section>
<section class="skeleton-section skeleton-section-last">
<div class="skeleton-inner">
<div class="skeleton-legal-card skeleton-shimmer">
{#each cardQuartet as _}
<span class="skeleton-line skeleton-line-long"></span>
{/each}
{#each heroLines as _}
<span class="skeleton-line"></span>
{/each}
</div>
</div>
</section>
</main>
{/if}
<footer class="skeleton-footer">
<div class="skeleton-inner skeleton-footer-grid">
<article class="skeleton-footer-card skeleton-shimmer"></article>
<article class="skeleton-footer-card skeleton-shimmer"></article>
<article class="skeleton-footer-card skeleton-shimmer"></article>
</div>
</footer>
</div>
</div>
<style>
.route-skeleton {
min-height: 100vh;
background:
radial-gradient(circle at top left, rgba(229, 214, 194, 0.45), transparent 34%),
linear-gradient(180deg, #fcfaf6 0%, #f7f3eb 100%);
color: transparent;
}
.skeleton-shell {
min-height: 100vh;
}
.skeleton-header {
position: sticky;
top: 0;
z-index: 1;
backdrop-filter: blur(14px);
background: rgba(252, 250, 246, 0.84);
border-bottom: 1px solid rgba(33, 48, 33, 0.08);
}
.skeleton-main,
.skeleton-footer {
padding: 0 0 40px;
}
.skeleton-section {
padding: 32px 0 0;
}
.skeleton-section-last {
padding-bottom: 20px;
}
.skeleton-inner {
max-width: var(--max-w);
margin: 0 auto;
padding: 0 50px;
}
.skeleton-nav,
.skeleton-row,
.skeleton-home-hero-grid,
.skeleton-about-grid,
.skeleton-footer-grid,
.skeleton-booking-header,
.skeleton-grid {
display: grid;
gap: 22px;
}
.skeleton-nav {
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
min-height: 92px;
}
.skeleton-row {
display: flex;
align-items: center;
}
.skeleton-nav-links {
gap: 14px;
}
.skeleton-nav-actions {
gap: 14px;
justify-content: end;
}
.skeleton-logo {
display: block;
width: 188px;
height: 46px;
border-radius: 18px;
}
.skeleton-pill,
.skeleton-circle,
.skeleton-button,
.skeleton-logo,
.skeleton-kicker,
.skeleton-title,
.skeleton-line,
.skeleton-media,
.skeleton-strip,
.skeleton-card,
.skeleton-plan-card,
.skeleton-quote-card,
.skeleton-chip,
.skeleton-form-card,
.skeleton-booking,
.skeleton-contact-card,
.skeleton-legal-card,
.skeleton-footer-card {
display: block;
position: relative;
overflow: hidden;
background: rgba(33, 48, 33, 0.08);
}
.skeleton-shimmer::after {
content: '';
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.58) 50%,
rgba(255, 255, 255, 0) 100%
);
animation: skeleton-shimmer 1.25s ease-in-out infinite;
}
.skeleton-pill {
width: 88px;
height: 14px;
border-radius: 999px;
}
.skeleton-circle {
width: 40px;
height: 40px;
border-radius: 999px;
}
.skeleton-button {
width: 148px;
height: 48px;
border-radius: 999px;
}
.skeleton-button-wide {
width: 182px;
}
.skeleton-button-outline {
width: 154px;
}
.skeleton-home-hero,
.skeleton-service-hero,
.skeleton-about-hero {
padding-top: 52px;
}
.skeleton-home-hero-grid,
.skeleton-about-grid {
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
align-items: center;
}
.skeleton-about-grid-reverse {
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}
.skeleton-copy {
display: grid;
gap: 16px;
align-content: start;
}
.skeleton-kicker {
width: 96px;
height: 14px;
border-radius: 999px;
}
.skeleton-title {
border-radius: 18px;
}
.skeleton-title-lg {
width: min(540px, 100%);
height: 64px;
}
.skeleton-title-md {
width: min(460px, 88%);
height: 54px;
}
.skeleton-title-sm {
width: min(320px, 70%);
height: 44px;
}
.skeleton-line {
width: min(620px, 100%);
height: 16px;
border-radius: 999px;
}
.skeleton-line-short {
width: min(420px, 72%);
}
.skeleton-line-medium {
width: 86%;
}
.skeleton-line-long {
width: 100%;
}
.skeleton-hero-actions {
gap: 16px;
margin-top: 10px;
}
.skeleton-media {
border-radius: 30px;
}
.skeleton-media-hero {
min-height: 500px;
}
.skeleton-media-tall {
min-height: 360px;
}
.skeleton-strip {
height: 112px;
border-radius: 30px;
}
.skeleton-section-heading {
display: grid;
gap: 16px;
justify-items: center;
margin-bottom: 30px;
}
.skeleton-section-heading-left {
justify-items: start;
}
.skeleton-centered-heading {
display: grid;
gap: 16px;
justify-items: center;
}
.skeleton-grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.skeleton-grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.skeleton-card,
.skeleton-plan-card,
.skeleton-quote-card,
.skeleton-form-card {
border-radius: 30px;
min-height: 220px;
}
.skeleton-card-short {
min-height: 180px;
}
.skeleton-plan-card {
min-height: 280px;
}
.skeleton-quote-card {
min-height: 190px;
padding: 28px;
display: grid;
align-content: start;
gap: 16px;
}
.skeleton-booking {
padding: 30px;
border-radius: 34px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(33, 48, 33, 0.08);
box-shadow: 0 16px 38px rgba(33, 48, 33, 0.06);
}
.skeleton-booking-header {
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
margin-bottom: 26px;
}
.skeleton-stepper {
gap: 12px;
}
.skeleton-chip {
width: 108px;
height: 38px;
border-radius: 999px;
}
.skeleton-form-card {
min-height: 260px;
}
.skeleton-contact-card {
min-height: 220px;
border-radius: 36px;
}
.skeleton-legal-card {
min-height: 420px;
border-radius: 36px;
padding: 36px;
display: grid;
align-content: start;
gap: 18px;
}
.skeleton-footer {
padding-top: 12px;
}
.skeleton-footer-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.skeleton-footer-card {
min-height: 210px;
border-radius: 30px;
}
@keyframes skeleton-shimmer {
100% {
transform: translateX(100%);
}
}
@media (prefers-reduced-motion: reduce) {
.skeleton-shimmer::after {
animation: none;
}
}
@media (max-width: 1024px) {
.skeleton-home-hero-grid,
.skeleton-about-grid,
.skeleton-about-grid-reverse,
.skeleton-grid-3,
.skeleton-footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.skeleton-home-hero-grid,
.skeleton-about-grid,
.skeleton-about-grid-reverse {
align-items: start;
}
}
@media (max-width: 768px) {
.skeleton-inner {
padding: 0 24px;
}
.skeleton-nav {
grid-template-columns: 1fr auto;
gap: 16px;
min-height: 78px;
}
.skeleton-nav-links {
display: none;
}
.skeleton-nav-actions .skeleton-circle {
display: none;
}
.skeleton-home-hero,
.skeleton-service-hero,
.skeleton-about-hero {
padding-top: 28px;
}
.skeleton-home-hero-grid,
.skeleton-about-grid,
.skeleton-about-grid-reverse,
.skeleton-grid-2,
.skeleton-grid-3,
.skeleton-footer-grid,
.skeleton-booking-header {
grid-template-columns: 1fr;
}
.skeleton-title-lg {
height: 46px;
}
.skeleton-title-md,
.skeleton-title-sm {
height: 34px;
}
.skeleton-media-hero {
min-height: 320px;
}
.skeleton-media-tall,
.skeleton-card,
.skeleton-quote-card,
.skeleton-plan-card,
.skeleton-form-card,
.skeleton-footer-card {
min-height: 180px;
}
.skeleton-strip {
height: 80px;
}
.skeleton-booking,
.skeleton-legal-card {
padding: 24px;
}
}
</style>