popertots/Crussell
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix mobile toast, theming

Browse Source
This commit is contained in:
popertots
2025-10-19 18:18:15 +01:00
parent 9630afe00d
commit 37fd41dce5
9 changed files with 55 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app.css
+3 -5
View File
@@ -12,15 +12,15 @@
--card-foreground: oklch(0.129 0.042 264.695);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.129 0.042 264.695);
--primary: oklch(0.208 0.042 265.755);
--primary: oklch(0.28 0.04 260);
--primary-foreground: oklch(0.984 0.003 247.858);
--secondary: oklch(0.968 0.007 247.896);
--secondary: oklch(0.97 0.01 248);
--secondary-foreground: oklch(0.208 0.042 265.755);
--muted: oklch(0.968 0.007 247.896);
--muted-foreground: oklch(0.554 0.046 257.417);
--accent: oklch(0.968 0.007 247.896);
--accent-foreground: oklch(0.208 0.042 265.755);
--destructive: oklch(0.577 0.245 27.325);
--destructive: oklch(0.64 0.21 25);
--border: oklch(0.929 0.013 255.508);
--input: oklch(0.929 0.013 255.508);
--ring: oklch(0.704 0.04 256.788);
@@ -121,12 +121,10 @@
}
}
/* Add this to your app.css or global styles */
.calendar-container {
z-index: 49 !important;
}
/* Or target the specific calendar component if needed */
[data-calendar] {
z-index: 49 !important;
}
frontend/src/lib/components/layout/NavBar.svelte
+1 -1
View File
@@ -46,7 +46,7 @@
class:frosty-nav={!mobileMenuOpen}
class:bg-background={mobileMenuOpen}
>
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="mx-auto max-w-7xl px-4 md:px-6 lg:px-8">
<div class="flex h-16 items-center justify-between">
<!-- Left: Social Icons -->
<div class="flex items-center space-x-4">
frontend/src/lib/components/ui/alert-dialog/alert-dialog-content.svelte
+4 -4
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
import { cn, type WithoutChild, type WithoutChildrenOrChild } from "$lib/utils.js";
import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
import AlertDialogOverlay from './alert-dialog-overlay.svelte';
import { cn, type WithoutChild, type WithoutChildrenOrChild } from '$lib/utils.js';
let {
ref = $bindable(null),
@@ -19,7 +19,7 @@
bind:ref
data-slot="alert-dialog-content"
class={cn(
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 mm:max-w-lg fixed left-[50%] top-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200',
className
)}
{...restProps}
frontend/src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte
+3 -3
View File
@@ -1,6 +1,6 @@
<script lang="ts">
import { cn, type WithElementRef } from "$lib/utils.js";
import type { HTMLAttributes } from "svelte/elements";
import { cn, type WithElementRef } from '$lib/utils.js';
import type { HTMLAttributes } from 'svelte/elements';
let {
ref = $bindable(null),
@@ -13,7 +13,7 @@
<div
bind:this={ref}
data-slot="alert-dialog-footer"
class={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
class={cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
{...restProps}
>
{@render children?.()}
frontend/src/lib/components/ui/calendar/calendar.svelte
+1 -1
View File
@@ -52,7 +52,7 @@ get along, so we shut typescript up by casting `value` to `never`.
class={cn(
'group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
// Add fuchsia theme styles for selected date
'[&_[data-selected]]:border-primary [&_[data-selected]]:text-primary [&_[data-selected]]:rounded-md [&_[data-selected]]:bg-fuchsia-200 [&_[data-selected]]:shadow-sm',
'[&_[data-selected]]:border-primary [&_[data-selected]]:text-primary [&_[data-selected]]:rounded-md [&_[data-selected]]:bg-fuchsia-100 [&_[data-selected]]:shadow-sm',
'[&_[data-selected]:hover]:bg-fuchsia-50',
// Ensure today indicator works with fuchsia theme
'[&_[data-today]:not([data-selected])]:bg-accent [&_[data-today]:not([data-selected])]:text-accent-foreground',
frontend/src/routes/+layout.svelte
+23 -1
View File
@@ -4,9 +4,31 @@
import NavBar from '$lib/components/layout/NavBar.svelte';
import { Toaster } from '$lib/components/ui/sonner/index.js';
import { authStore } from '$lib/stores/auth.svelte';
import { onMount } from 'svelte';
let { children } = $props();
// Default to 'top-center' (mobile-first approach)
let toasterPosition = $state<'top-center' | 'bottom-center'>('top-center');
function updateToasterPosition() {
// Use 640px (Tailwind's 'sm' breakpoint) to differentiate desktop and mobile
if (typeof window !== 'undefined' && window.innerWidth >= 768) {
toasterPosition = 'bottom-center';
} else {
toasterPosition = 'top-center';
}
console.log('Toaster position:', toasterPosition);
}
onMount(() => {
updateToasterPosition();
window.addEventListener('resize', updateToasterPosition);
return () => {
window.removeEventListener('resize', updateToasterPosition);
};
});
// Verify email address
async function verify_email() {
alert('Verifying email address...');
@@ -27,7 +49,7 @@
</svelte:head>
<NavBar />
<Toaster position="bottom-center" />
<Toaster position={toasterPosition} />
<main class="pt-16">
{#if authStore.currentUser?.role === 'unverified_email'}
frontend/src/routes/admin/+page.svelte
+4 -4
View File
@@ -1028,7 +1028,7 @@
<div
class="rounded p-2 text-xs {result.error
? 'bg-red-100 text-red-800'
: 'bg-green-100 text-green-800'}"
: 'bg-emerald-100 text-emerald-800'}"
>
{result.name}: {result.error
? `Failed: ${result.error}`
@@ -1210,7 +1210,7 @@
<td class="py-2">
<span
class="text-sm font-medium {row.is_open
? 'text-green-600'
? 'text-emerald-600'
: 'text-red-600'}"
>
{row.is_open ? 'Open' : 'Closed'}
@@ -1317,7 +1317,7 @@
<td class="py-3 text-center">
<span
class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {service.is_active
? 'bg-green-100 text-green-800'
? 'bg-emerald-100 text-emerald-800'
: 'bg-red-100 text-red-800'}"
>
{service.is_active ? 'Active' : 'Inactive'}
@@ -1381,7 +1381,7 @@
<h3 class="font-medium">{service.name}</h3>
<span
class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {service.is_active
? 'bg-green-100 text-green-800'
? 'bg-emerald-100 text-emerald-800'
: 'bg-red-100 text-red-800'}"
>
{service.is_active ? 'Active' : 'Inactive'}
frontend/src/routes/book/+page.svelte
+4 -4
View File
@@ -738,7 +738,7 @@
class="focus:ring-primary cursor-pointer rounded-lg p-4 text-left shadow-sm transition-colors hover:bg-fuchsia-50 {isServiceSelected(
service
)
? 'bg-fuchsia-200'
? 'bg-fuchsia-100'
: 'border-ring'}"
onclick={() => toggleService(service)}
>
@@ -849,7 +849,7 @@
selectedTime = slot.startTime;
}}
class={`w-full hover:bg-fuchsia-50 ${
slot.startTime === selectedTime ? 'bg-fuchsia-200' : ''
slot.startTime === selectedTime ? 'bg-fuchsia-100' : ''
}`}
>
{formatTime(slot.startTime)}
@@ -881,7 +881,7 @@
</Card.Content>
<!-- Mobile appointment summary - shown only on mobile -->
<div class="border-t px-6 py-4 text-center text-sm sm:hidden">
<div class="border-t px-6 py-4 text-center text-sm md:hidden">
{#if selectedDate && selectedTime}
Appointment for
<span class="font-medium">
@@ -901,7 +901,7 @@
<Button variant="outline" onclick={prevStep}>Back</Button>
<div class="flex items-center space-x-4">
<!-- Desktop appointment summary - hidden on mobile -->
<div class="hidden text-sm sm:block">
<div class="hidden text-sm md:block">
{#if selectedDate && selectedTime}
Appointment for
<span class="font-medium">
frontend/src/routes/prices/+page.svelte
+12 -12
View File
@@ -74,9 +74,9 @@
});
</script>
<div class="mx-auto max-w-4xl p-4 sm:p-6">
<div class="mb-6 text-center sm:mb-8">
<h1 class="mb-2 text-2xl font-bold sm:text-3xl">Our Prices</h1>
<div class="mx-auto max-w-4xl p-4 md:p-6">
<div class="mb-6 text-center md:mb-8">
<h1 class="mb-2 text-2xl font-bold md:text-3xl">Our Prices</h1>
<p class="text-gray-600">Professional beauty treatments with transparent pricing</p>
</div>
@@ -106,7 +106,7 @@
<h4 class="text-foreground font-semibold">{service.name}</h4>
<p class="text-muted-foreground mt-1 text-sm">{service.description}</p>
<!-- Duration shown on mobile -->
<p class="text-muted-foreground mt-2 text-sm sm:hidden">
<p class="text-muted-foreground mt-2 text-sm md:hidden">
<span class="inline-flex items-center">
<svg class="text-primary/70 mr-1 h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
<path
@@ -133,7 +133,7 @@
<!-- Price always visible -->
<div class="text-primary text-lg font-semibold">{formatPrice(service.price)}</div>
<!-- Duration shown on desktop -->
<div class="text-muted-foreground hidden text-sm sm:block">
<div class="text-muted-foreground hidden text-sm md:block">
{formatDuration(service.duration_minutes)}
</div>
</div>
@@ -149,9 +149,9 @@
<!-- Important Information -->
<Card.Root
class="mt-6 border-amber-200/60 bg-gradient-to-r from-amber-50 to-amber-100/50 sm:mt-8"
class="mt-6 border-amber-200/60 bg-gradient-to-r from-amber-50 to-amber-100/50 md:mt-8"
>
<Card.Content class="pt-4 sm:pt-6">
<Card.Content class="pt-4 md:pt-6">
<div class="space-y-2 text-sm text-amber-900">
<h4 class="font-semibold text-amber-800">Important Information:</h4>
<ul class="space-y-1 pl-4">
@@ -169,15 +169,15 @@
<!-- Call to Action -->
<div
class="from-primary/5 to-secondary/30 mt-6 rounded-xl bg-gradient-to-br p-6 text-center sm:mt-8 sm:p-8"
class="from-primary/5 to-secondary/30 mt-6 rounded-xl bg-gradient-to-br p-6 text-center md:mt-8 md:p-8"
>
<h2 class="text-primary mb-4 text-lg font-semibold sm:text-xl">Ready to Book?</h2>
<div class="flex flex-col gap-3 sm:flex-row sm:justify-center sm:gap-4">
<Button href="/book" class="px-6 py-3 sm:px-8">Book Appointment</Button>
<h2 class="text-primary mb-4 text-lg font-semibold md:text-xl">Ready to Book?</h2>
<div class="flex flex-col gap-3 md:flex-row md:justify-center md:gap-4">
<Button href="/book" class="px-6 py-3 md:px-8">Book Appointment</Button>
<Button
href="/contact"
variant="outline"
class="border-primary/30 hover:bg-primary/10 px-6 py-3 sm:px-8"
class="border-primary/30 hover:bg-primary/10 px-6 py-3 md:px-8"
>
Get in Touch
</Button>