Daniel/webshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(wizard): unify and minimize top spacing across steps 1-4
All checks were successful
Staging Build / build (push) Successful in 3m8s
Details

Browse Source
This commit is contained in:
DanielS
2026-09-08 00:20:46 +02:00
parent e78fe7c4b8
commit 05cf32591f
3 changed files with 30 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
shop/components/order-wizard.tsx
View File

@@ -923,16 +923,16 @@ export function OrderWizard({
} }
return ( return (
<div className="max-w-7xl mx-auto px-4 pt-2 pb-6"> <div className="max-w-7xl mx-auto px-4 pt-1 pb-2">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 items-start">
{/* Left Side Status Stepper & Categories for ALL steps */} {/* Left Side Status Stepper & Categories for ALL steps */}
<div className="lg:col-span-3 bg-slate-900/50 backdrop-blur-md border border-white/10 rounded-2xl p-5 space-y-5 sticky top-2"> <div className="lg:col-span-3 bg-slate-900/50 backdrop-blur-md border border-white/10 rounded-2xl p-4 space-y-4 sticky top-1">
<div> <div>
<h2 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-1"> <h2 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-0.5">
Fortschritt Fortschritt
</h2> </h2>
<p className="text-lg font-extrabold text-white"> <p className="text-base font-extrabold text-white">
Bestell-Wizard Bestell-Wizard
</p> </p>
</div> </div>
@@ -940,11 +940,11 @@ export function OrderWizard({
{/* Step 3 Categories inside left sidebar */} {/* Step 3 Categories inside left sidebar */}
{step === 3 && ( {step === 3 && (
<div className="pt-3 border-t border-white/10 flex flex-col min-h-0 max-h-[calc(100vh-22rem)] overflow-hidden"> <div className="pt-2.5 border-t border-white/10 flex flex-col min-h-0 max-h-[calc(100vh-22rem)] overflow-hidden">
<h3 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-2 shrink-0"> <h3 className="text-xs font-bold uppercase tracking-wider text-slate-400 mb-1.5 shrink-0">
Kategorien Kategorien
</h3> </h3>
<div className="flex flex-col gap-1.5 flex-1 min-h-0 overflow-y-auto pr-1 pb-2 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent"> <div className="flex flex-col gap-1 flex-1 min-h-0 overflow-y-auto pr-1 pb-1 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
{visibleCategories.map((cat) => { {visibleCategories.map((cat) => {
const sel = selections[cat.id] const sel = selections[cat.id]
const hasSelection = (sel?.productIds && sel.productIds.length > 0) || !!sel?.productId const hasSelection = (sel?.productIds && sel.productIds.length > 0) || !!sel?.productId
@@ -956,7 +956,7 @@ export function OrderWizard({
<button <button
key={cat.id} key={cat.id}
onClick={() => setActiveCategoryId(cat.id)} onClick={() => setActiveCategoryId(cat.id)}
className={`flex items-center gap-2 p-2 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group shrink-0 ${ className={`flex items-center gap-2 p-1.5 rounded-xl border transition-all duration-300 text-left relative overflow-hidden group shrink-0 ${
isMissingRequired isMissingRequired
? 'bg-red-500/10 border-red-500/50 text-red-400 font-bold' ? 'bg-red-500/10 border-red-500/50 text-red-400 font-bold'
: isActive : isActive
@@ -968,7 +968,7 @@ export function OrderWizard({
<div className="absolute left-0 top-0 bottom-0 w-1 bg-primary" /> <div className="absolute left-0 top-0 bottom-0 w-1 bg-primary" />
)} )}
<div className={`p-1.5 rounded-lg transition-colors shrink-0 ${ <div className={`p-1 rounded-lg transition-colors shrink-0 ${
isMissingRequired isMissingRequired
? 'bg-red-500/20 text-red-400' ? 'bg-red-500/20 text-red-400'
: isActive : isActive
@@ -1008,7 +1008,7 @@ export function OrderWizard({
</div> </div>
{/* Right Main Content Column */} {/* Right Main Content Column */}
<div className="lg:col-span-9 space-y-6"> <div className="lg:col-span-9 space-y-0">
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
{/* Step 1: Customer */} {/* Step 1: Customer */}
@@ -1018,7 +1018,7 @@ export function OrderWizard({
initial={{ opacity: 0, y: direction * 20 }} initial={{ opacity: 0, y: direction * 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: direction * -20 }} exit={{ opacity: 0, y: direction * -20 }}
className="space-y-6" className="space-y-0"
> >
<StepCustomer <StepCustomer
isAdmin={isAdmin} isAdmin={isAdmin}
@@ -1049,7 +1049,7 @@ export function OrderWizard({
initial={{ opacity: 0, y: direction * 20 }} initial={{ opacity: 0, y: direction * 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: direction * -20 }} exit={{ opacity: 0, y: direction * -20 }}
className="space-y-6" className="space-y-0"
> >
<StepBilling <StepBilling
selectedBillingInterval={selectedBillingInterval} selectedBillingInterval={selectedBillingInterval}
@@ -1069,16 +1069,16 @@ export function OrderWizard({
initial={{ opacity: 0, y: direction * 20 }} initial={{ opacity: 0, y: direction * 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: direction * -20 }} exit={{ opacity: 0, y: direction * -20 }}
className="h-[calc(100vh-160px)] overflow-hidden bg-slate-950/70 backdrop-blur-xl border border-slate-800/80 rounded-2xl shadow-2xl p-2" className="h-[calc(100vh-8.5rem)] overflow-hidden bg-slate-950/70 backdrop-blur-xl border border-slate-800/80 rounded-2xl shadow-2xl p-2"
> >
<div className="grid grid-cols-1 lg:grid-cols-5 gap-4 h-full items-stretch"> <div className="grid grid-cols-1 lg:grid-cols-5 gap-3 h-full items-stretch">
{/* LEFT: Scrollable Category Selection */} {/* LEFT: Scrollable Category Selection */}
<div className="lg:col-span-3 flex flex-col h-full overflow-hidden p-2 px-3"> <div className="lg:col-span-3 flex flex-col h-full overflow-hidden p-1 px-2">
<div className="flex-1 overflow-y-auto pr-2 subpixel-antialiased scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent"> <div className="flex-1 overflow-y-auto pr-2 subpixel-antialiased scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
{/* Upgrade-Modus Hinweis-Banner */} {/* Upgrade-Modus Hinweis-Banner */}
{upgradeMode && lockedDeviceId && ( {upgradeMode && lockedDeviceId && (
<div className="mb-4 p-3 rounded-xl bg-primary/10 border border-primary/20 text-xs text-primary/90 flex items-start gap-2"> <div className="mb-3 p-2.5 rounded-xl bg-primary/10 border border-primary/20 text-xs text-primary/90 flex items-start gap-2">
<Zap className="w-4 h-4 text-primary shrink-0 mt-0.5" /> <Zap className="w-4 h-4 text-primary shrink-0 mt-0.5" />
<div> <div>
<p className="font-semibold">Upgrade-Modus: {lockedDeviceId}</p> <p className="font-semibold">Upgrade-Modus: {lockedDeviceId}</p>
@@ -1110,7 +1110,7 @@ export function OrderWizard({
</div> </div>
{/* RIGHT: Summary sidebar */} {/* RIGHT: Summary sidebar */}
<div className="lg:col-span-2 flex flex-col h-full overflow-hidden p-2 pl-2"> <div className="lg:col-span-2 flex flex-col h-full overflow-hidden p-1 pl-1">
<div className="flex-1 overflow-hidden"> <div className="flex-1 overflow-hidden">
<SummarySidebar <SummarySidebar
visibleCategories={visibleCategories} visibleCategories={visibleCategories}
@@ -1146,10 +1146,6 @@ export function OrderWizard({
</motion.div> </motion.div>
)} )}
{/* Step 4: Verification & Submit */} {/* Step 4: Verification & Submit */}
{step === 4 && ( {step === 4 && (
<motion.div <motion.div
@@ -1157,7 +1153,7 @@ export function OrderWizard({
initial={{ opacity: 0, y: direction * 20 }} initial={{ opacity: 0, y: direction * 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: direction * -20 }} exit={{ opacity: 0, y: direction * -20 }}
className="h-[calc(100vh-140px)] overflow-hidden w-full" className="h-[calc(100vh-8.5rem)] overflow-hidden w-full"
> >
<StepSummary <StepSummary
finalItemsToShow={finalItemsToShow} finalItemsToShow={finalItemsToShow}

20
shop/components/wizard/step-summary.tsx
View File

@@ -103,32 +103,32 @@ export function StepSummary({
return ( return (
<Card className="glass-dark border-white/10 h-[calc(100vh-8.5rem)] flex flex-col justify-between overflow-hidden relative"> <Card className="glass-dark border-white/10 h-[calc(100vh-8.5rem)] flex flex-col justify-between overflow-hidden relative">
{/* ─── 1. FIXED HEADER (shrink-0) ─── */} {/* ─── 1. FIXED HEADER (shrink-0) ─── */}
<CardHeader className="pb-3 pt-4 px-6 shrink-0 border-b border-white/10 bg-slate-950/40 space-y-0"> <CardHeader className="py-2.5 px-4 shrink-0 border-b border-white/10 bg-slate-950/40 space-y-0">
<div className="flex items-center justify-between gap-3"> <div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-3"> <div className="flex items-center gap-2.5">
<div className="w-10 h-10 bg-primary/20 rounded-xl flex items-center justify-center border border-primary/40 shrink-0 text-primary"> <div className="w-8 h-8 bg-primary/20 rounded-lg flex items-center justify-center border border-primary/40 shrink-0 text-primary">
<ShieldCheck className="w-5 h-5" /> <ShieldCheck className="w-4 h-4" />
</div> </div>
<div> <div>
<CardTitle className="text-xl font-bold text-white flex items-center gap-2"> <CardTitle className="text-lg font-bold text-white flex items-center gap-2">
Anfrage prüfen & absenden Anfrage prüfen & absenden
</CardTitle> </CardTitle>
<CardDescription className="text-xs text-slate-300 mt-0.5"> <CardDescription className="text-[11px] text-slate-300 mt-0.5">
Überprüfen Sie alle konfigurierten Kassen, Positionen und Konditionen vor der Freigabe. Überprüfen Sie alle konfigurierten Kassen, Positionen und Konditionen vor der Freigabe.
</CardDescription> </CardDescription>
</div> </div>
</div> </div>
<Badge variant="outline" className="border-primary/30 text-primary bg-primary/10 text-xs px-3 py-1"> <Badge variant="outline" className="border-primary/30 text-primary bg-primary/10 text-xs px-2.5 py-0.5">
Schritt 4 von 4 Schritt 4 von 4
</Badge> </Badge>
</div> </div>
</CardHeader> </CardHeader>
{/* ─── 2. SCROLLABLE MIDDLE (flex-1 min-h-0 overflow-y-auto) ─── */} {/* ─── 2. SCROLLABLE MIDDLE (flex-1 min-h-0 overflow-y-auto) ─── */}
<div className="flex-1 min-h-0 overflow-y-auto p-6 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent"> <div className="flex-1 min-h-0 overflow-y-auto p-4 scrollbar-thin scrollbar-thumb-slate-800 scrollbar-track-transparent">
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 max-w-7xl mx-auto w-full items-start"> <div className="grid grid-cols-1 lg:grid-cols-12 gap-4 max-w-7xl mx-auto w-full items-start">
{/* ─── LINKES RASTER (lg:col-span-7) – Auftragsübersicht & Kassen ─── */} {/* ─── LINKES RASTER (lg:col-span-7) – Auftragsübersicht & Kassen ─── */}
<div className="lg:col-span-7 space-y-5"> <div className="lg:col-span-7 space-y-4">
{/* Kopf-Card: Endkunde & Abrechnungsmodell */} {/* Kopf-Card: Endkunde & Abrechnungsmodell */}
<div className="p-4 rounded-2xl bg-white/5 border border-white/10 space-y-3"> <div className="p-4 rounded-2xl bg-white/5 border border-white/10 space-y-3">
<div className="flex items-center justify-between gap-2 border-b border-white/5 pb-2.5 flex-wrap"> <div className="flex items-center justify-between gap-2 border-b border-white/5 pb-2.5 flex-wrap">

2
shop/components/wizard/summary-sidebar.tsx
View File

@@ -84,7 +84,7 @@ export function SummarySidebar({
return ( return (
<Card className="glass-dark border-white/10 shadow-2xl rounded-2xl overflow-hidden flex flex-col h-full bg-slate-900/90 backdrop-blur-xl"> <Card className="glass-dark border-white/10 shadow-2xl rounded-2xl overflow-hidden flex flex-col h-full bg-slate-900/90 backdrop-blur-xl">
{/* ─── 1. TOP HEADER (shrink-0) ─── */} {/* ─── 1. TOP HEADER (shrink-0) ─── */}
<CardHeader className="shrink-0 pb-3 pt-4 px-4 border-b border-white/10 bg-slate-950/60"> <CardHeader className="shrink-0 py-2.5 px-4 border-b border-white/10 bg-slate-950/60">
<div className="flex items-center justify-between gap-2"> <div className="flex items-center justify-between gap-2">
<CardTitle className="text-white text-sm font-bold flex items-center gap-2"> <CardTitle className="text-white text-sm font-bold flex items-center gap-2">
<ShoppingCart className="w-4 h-4 text-primary" /> <ShoppingCart className="w-4 h-4 text-primary" />