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 (
<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}