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

Compare commits

base: Daniel:e78fe7c4b8750e8f2cbc81d2367a4e33e7fe0a35
Branches Tags
Daniel:main Daniel:staging Daniel:develop Daniel:productiv
..
compare: Daniel:staging
Branches Tags
Daniel:staging Daniel:develop Daniel:main Daniel:productiv

1 Commits
e78fe7c4b8 ... staging

Author SHA1 Message Date
DanielS
05cf32591f style(wizard): unify and minimize top spacing across steps 1-4
All checks were successful
Staging Build / build (push) Successful in 3m8s
Details
2026-09-08 00:20:46 +02:00
3 changed files with 30 additions and 34 deletions
Expand all files Collapse all files

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

@@ -923,16 +923,16 @@ export function OrderWizard({
}
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 */}
<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>
<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
</h2>
<p className="text-lg font-extrabold text-white">
<p className="text-base font-extrabold text-white">
Bestell-Wizard
</p>
</div>
@@ -940,11 +940,11 @@ export function OrderWizard({
{/* Step 3 Categories inside left sidebar */}
{step === 3 && (
<div className="pt-3 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">
<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-1.5 shrink-0">
Kategorien
</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) => {
const sel = selections[cat.id]
const hasSelection = (sel?.productIds && sel.productIds.length > 0) || !!sel?.productId
@@ -956,7 +956,7 @@ export function OrderWizard({
<button
key={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
? 'bg-red-500/10 border-red-500/50 text-red-400 font-bold'
: isActive
@@ -968,7 +968,7 @@ export function OrderWizard({
<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
? 'bg-red-500/20 text-red-400'
: isActive
@@ -1008,7 +1008,7 @@ export function OrderWizard({
</div>
{/* 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">
{/* Step 1: Customer */}
@@ -1018,7 +1018,7 @@ export function OrderWizard({
initial={{ opacity: 0, y: direction * 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: direction * -20 }}
className="space-y-6"
className="space-y-0"
>
<StepCustomer
isAdmin={isAdmin}
@@ -1049,7 +1049,7 @@ export function OrderWizard({
initial={{ opacity: 0, y: direction * 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: direction * -20 }}
className="space-y-6"
className="space-y-0"
>
<StepBilling
selectedBillingInterval={selectedBillingInterval}
@@ -1069,16 +1069,16 @@ export function OrderWizard({
initial={{ opacity: 0, y: direction * 20 }}
animate={{ opacity: 1, y: 0 }}
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 */}
<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">
{/* Upgrade-Modus Hinweis-Banner */}
{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" />
<div>
<p className="font-semibold">Upgrade-Modus: {lockedDeviceId}</p>
@@ -1110,7 +1110,7 @@ export function OrderWizard({
</div>
{/* 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">
<SummarySidebar
visibleCategories={visibleCategories}
@@ -1146,10 +1146,6 @@ export function OrderWizard({
</motion.div>
)}
{/* Step 4: Verification & Submit */}
{step === 4 && (
<motion.div
@@ -1157,7 +1153,7 @@ export function OrderWizard({
initial={{ opacity: 0, y: direction * 20 }}
animate={{ opacity: 1, y: 0 }}
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
finalItemsToShow={finalItemsToShow}

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

@@ -103,32 +103,32 @@ export function StepSummary({
return (
<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) ─── */}
<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 gap-3">
<div className="w-10 h-10 bg-primary/20 rounded-xl flex items-center justify-center border border-primary/40 shrink-0 text-primary">
<ShieldCheck className="w-5 h-5" />
<div className="flex items-center gap-2.5">
<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-4 h-4" />
</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
</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.
</CardDescription>
</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
</Badge>
</div>
</CardHeader>
{/* ─── 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="grid grid-cols-1 lg:grid-cols-12 gap-6 max-w-7xl mx-auto w-full items-start">
<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-4 max-w-7xl mx-auto w-full items-start">
{/* ─── 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 */}
<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">

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

@@ -84,7 +84,7 @@ export function SummarySidebar({
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">
{/* ─── 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">
<CardTitle className="text-white text-sm font-bold flex items-center gap-2">
<ShoppingCart className="w-4 h-4 text-primary" />