fix(portal): match registration wizard sidebar to Vuexy vertical wizard pattern
- Replace bg-primary block on active step with Vuexy number-square pattern: 40x40 rounded-lg squares with primary/tonal/grey backgrounds per state - Remove outer VCard wrapper so sidebar sits on page background - Wrap right content column in its own VCard for clear visual separation - Use text-overline for "AANMELDEN" label, 28px gap between steps - Active step: primary square + primary text + subtitle visible - Completed steps: tonal primary square with checkmark + muted text - Future steps: grey square + muted text, no subtitle - Mobile chips wrapped in their own card for consistency Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -481,78 +481,95 @@ async function onSubmit() {
|
||||
{{ submitError }}
|
||||
</VAlert>
|
||||
|
||||
<!-- Wizard card -->
|
||||
<VCard variant="flat">
|
||||
<VRow no-gutters>
|
||||
<!-- Desktop: vertical step navigation -->
|
||||
<VCol
|
||||
v-if="mdAndUp"
|
||||
cols="3"
|
||||
class="border-e"
|
||||
>
|
||||
<div class="pa-4">
|
||||
<h4 class="text-subtitle-1 font-weight-bold text-uppercase text-medium-emphasis mb-4">
|
||||
Aanmelden
|
||||
</h4>
|
||||
<!-- Wizard -->
|
||||
<VRow no-gutters>
|
||||
<!-- Desktop: vertical step navigation -->
|
||||
<VCol
|
||||
v-if="mdAndUp"
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<div class="pa-6">
|
||||
<div class="text-overline text-medium-emphasis mb-6">
|
||||
AANMELDEN
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column ga-1">
|
||||
<div
|
||||
class="d-flex flex-column"
|
||||
style="gap: 28px;"
|
||||
>
|
||||
<div
|
||||
v-for="(step, index) in steps"
|
||||
:key="index"
|
||||
class="d-flex align-center ga-4"
|
||||
:class="{ 'cursor-pointer': index < currentStep }"
|
||||
@click="goToStep(index)"
|
||||
>
|
||||
<!-- Number square -->
|
||||
<div
|
||||
v-for="(step, index) in steps"
|
||||
:key="index"
|
||||
class="d-flex align-center ga-3 pa-3 rounded-lg"
|
||||
:class="{
|
||||
'bg-primary': index === currentStep,
|
||||
'cursor-pointer': index < currentStep,
|
||||
class="d-flex align-center justify-center rounded-lg flex-shrink-0"
|
||||
:style="{
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
backgroundColor: index === currentStep
|
||||
? 'rgb(var(--v-theme-primary))'
|
||||
: index < currentStep
|
||||
? 'rgba(var(--v-theme-primary), 0.16)'
|
||||
: 'rgba(var(--v-theme-on-surface), 0.08)',
|
||||
color: index === currentStep
|
||||
? 'white'
|
||||
: index < currentStep
|
||||
? 'rgb(var(--v-theme-primary))'
|
||||
: 'rgba(var(--v-theme-on-surface), 0.4)',
|
||||
transition: 'all 0.2s ease',
|
||||
}"
|
||||
@click="goToStep(index)"
|
||||
>
|
||||
<VAvatar
|
||||
size="28"
|
||||
:color="index < currentStep ? 'success' : index === currentStep ? 'white' : 'grey-lighten-2'"
|
||||
:variant="index === currentStep ? 'flat' : 'tonal'"
|
||||
<VIcon
|
||||
v-if="index < currentStep"
|
||||
size="18"
|
||||
>
|
||||
<VIcon
|
||||
v-if="index < currentStep"
|
||||
size="16"
|
||||
color="white"
|
||||
>
|
||||
tabler-check
|
||||
</VIcon>
|
||||
<span
|
||||
v-else
|
||||
class="text-caption font-weight-bold"
|
||||
:style="index === currentStep ? `color: rgb(var(--v-theme-primary))` : ''"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</span>
|
||||
</VAvatar>
|
||||
tabler-check
|
||||
</VIcon>
|
||||
<span
|
||||
v-else
|
||||
class="text-body-1 font-weight-bold"
|
||||
>{{ index + 1 }}</span>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div
|
||||
class="text-body-2 font-weight-medium"
|
||||
:style="index === currentStep ? 'color: white' : ''"
|
||||
>
|
||||
{{ step.title }}
|
||||
</div>
|
||||
<div
|
||||
v-if="index === currentStep"
|
||||
class="text-caption"
|
||||
style="color: rgba(255,255,255,0.7);"
|
||||
>
|
||||
{{ step.subtitle }}
|
||||
</div>
|
||||
<!-- Step text -->
|
||||
<div>
|
||||
<div
|
||||
class="text-body-1 font-weight-medium"
|
||||
:class="{
|
||||
'text-primary': index === currentStep,
|
||||
'text-medium-emphasis': index !== currentStep,
|
||||
}"
|
||||
>
|
||||
{{ step.title }}
|
||||
</div>
|
||||
<div
|
||||
v-if="index === currentStep"
|
||||
class="text-caption text-medium-emphasis"
|
||||
>
|
||||
{{ step.subtitle }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCol>
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
<!-- Mobile: horizontal chips -->
|
||||
<VCol
|
||||
v-if="!mdAndUp"
|
||||
cols="12"
|
||||
<!-- Mobile: horizontal chips -->
|
||||
<VCol
|
||||
v-if="!mdAndUp"
|
||||
cols="12"
|
||||
>
|
||||
<VCard
|
||||
variant="flat"
|
||||
rounded="lg"
|
||||
class="mb-4"
|
||||
>
|
||||
<div class="d-flex justify-center flex-wrap ga-2 pa-4 border-b">
|
||||
<div class="d-flex justify-center flex-wrap ga-2 pa-4">
|
||||
<VChip
|
||||
v-for="(step, index) in steps"
|
||||
:key="index"
|
||||
@@ -570,14 +587,19 @@ async function onSubmit() {
|
||||
<span>{{ index + 1 }}. {{ step.title }}</span>
|
||||
</VChip>
|
||||
</div>
|
||||
</VCol>
|
||||
</VCard>
|
||||
</VCol>
|
||||
|
||||
<!-- Step content -->
|
||||
<VCol
|
||||
cols="12"
|
||||
:md="mdAndUp ? 9 : 12"
|
||||
<!-- Step content -->
|
||||
<VCol
|
||||
cols="12"
|
||||
:md="mdAndUp ? 9 : 12"
|
||||
>
|
||||
<VCard
|
||||
variant="flat"
|
||||
rounded="lg"
|
||||
>
|
||||
<div class="pa-6">
|
||||
<VCardText class="pa-6">
|
||||
<!-- Step header -->
|
||||
<div class="mb-6">
|
||||
<h5 class="text-h5 mb-1">
|
||||
@@ -937,10 +959,10 @@ async function onSubmit() {
|
||||
Aanmelding versturen
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="text-center pa-4 text-caption text-medium-emphasis">
|
||||
|
||||
Reference in New Issue
Block a user