bert.hausmans/crewli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(portal): match registration wizard sidebar to Vuexy vertical wizard pattern

Browse Source 
- 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:
bert.hausmans
2026-04-10 21:45:26 +02:00
parent 0d741550a8
commit dfe7a63ad3
1 changed files with 92 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
apps/portal/src/pages/register/[eventSlug].vue
View File

@@ -481,78 +481,95 @@ async function onSubmit() {
{{ submitError }} {{ submitError }}
</VAlert> </VAlert>
<!-- Wizard card --> <!-- Wizard -->
<VCard variant="flat"> <VRow no-gutters>
<VRow no-gutters> <!-- Desktop: vertical step navigation -->
<!-- Desktop: vertical step navigation --> <VCol
<VCol v-if="mdAndUp"
v-if="mdAndUp" cols="12"
cols="3" md="3"
class="border-e" >
> <div class="pa-6">
<div class="pa-4"> <div class="text-overline text-medium-emphasis mb-6">
<h4 class="text-subtitle-1 font-weight-bold text-uppercase text-medium-emphasis mb-4"> AANMELDEN
Aanmelden </div>
</h4>
<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 <div
v-for="(step, index) in steps" class="d-flex align-center justify-center rounded-lg flex-shrink-0"
:key="index" :style="{
class="d-flex align-center ga-3 pa-3 rounded-lg" width: '40px',
:class="{ height: '40px',
'bg-primary': index === currentStep, backgroundColor: index === currentStep
'cursor-pointer': 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 <VIcon
size="28" v-if="index < currentStep"
:color="index < currentStep ? 'success' : index === currentStep ? 'white' : 'grey-lighten-2'" size="18"
:variant="index === currentStep ? 'flat' : 'tonal'"
> >
<VIcon tabler-check
v-if="index < currentStep" </VIcon>
size="16" <span
color="white" v-else
> class="text-body-1 font-weight-bold"
tabler-check >{{ index + 1 }}</span>
</VIcon> </div>
<span
v-else
class="text-caption font-weight-bold"
:style="index === currentStep ? `color: rgb(var(--v-theme-primary))` : ''"
>
{{ index + 1 }}
</span>
</VAvatar>
<div> <!-- Step text -->
<div <div>
class="text-body-2 font-weight-medium" <div
:style="index === currentStep ? 'color: white' : ''" class="text-body-1 font-weight-medium"
> :class="{
{{ step.title }} 'text-primary': index === currentStep,
</div> 'text-medium-emphasis': index !== currentStep,
<div }"
v-if="index === currentStep" >
class="text-caption" {{ step.title }}
style="color: rgba(255,255,255,0.7);" </div>
> <div
{{ step.subtitle }} v-if="index === currentStep"
</div> class="text-caption text-medium-emphasis"
>
{{ step.subtitle }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</VCol> </div>
</VCol>
<!-- Mobile: horizontal chips --> <!-- Mobile: horizontal chips -->
<VCol <VCol
v-if="!mdAndUp" v-if="!mdAndUp"
cols="12" 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 <VChip
v-for="(step, index) in steps" v-for="(step, index) in steps"
:key="index" :key="index"
@@ -570,14 +587,19 @@ async function onSubmit() {
<span>{{ index + 1 }}. {{ step.title }}</span> <span>{{ index + 1 }}. {{ step.title }}</span>
</VChip> </VChip>
</div> </div>
</VCol> </VCard>
</VCol>
<!-- Step content --> <!-- Step content -->
<VCol <VCol
cols="12" cols="12"
:md="mdAndUp ? 9 : 12" :md="mdAndUp ? 9 : 12"
>
<VCard
variant="flat"
rounded="lg"
> >
<div class="pa-6"> <VCardText class="pa-6">
<!-- Step header --> <!-- Step header -->
<div class="mb-6"> <div class="mb-6">
<h5 class="text-h5 mb-1"> <h5 class="text-h5 mb-1">
@@ -937,10 +959,10 @@ async function onSubmit() {
Aanmelding versturen Aanmelding versturen
</VBtn> </VBtn>
</div> </div>
</div> </VCardText>
</VCol> </VCard>
</VRow> </VCol>
</VCard> </VRow>
<!-- Footer --> <!-- Footer -->
<div class="text-center pa-4 text-caption text-medium-emphasis"> <div class="text-center pa-4 text-caption text-medium-emphasis">