fix(portal): match wizard sidebar exactly to Vuexy vertical wizard spec
- Remove "AANMELDEN" header text from sidebar - Increase number squares to 50x50px with borderRadius 10px (not circles) - Show subtitles on ALL steps (not just active), with dimmed color per state - Active step: bold title, default color; completed: medium-weight, 0.5 opacity; future: medium-weight, 0.4 opacity - Increase check icon to size 22, number font to 18px bold - Update sidebar padding to pa-5 pt-8 - Add h-100 to right card, increase content padding to pa-8 - Guard goToStep click handler with index check Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -489,11 +489,7 @@ async function onSubmit() {
|
|||||||
cols="12"
|
cols="12"
|
||||||
md="3"
|
md="3"
|
||||||
>
|
>
|
||||||
<div class="pa-6">
|
<div class="pa-5 pt-8">
|
||||||
<div class="text-overline text-medium-emphasis mb-6">
|
|
||||||
AANMELDEN
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="d-flex flex-column"
|
class="d-flex flex-column"
|
||||||
style="gap: 28px;"
|
style="gap: 28px;"
|
||||||
@@ -503,14 +499,17 @@ async function onSubmit() {
|
|||||||
:key="index"
|
:key="index"
|
||||||
class="d-flex align-center ga-4"
|
class="d-flex align-center ga-4"
|
||||||
:class="{ 'cursor-pointer': index < currentStep }"
|
:class="{ 'cursor-pointer': index < currentStep }"
|
||||||
@click="goToStep(index)"
|
@click="index < currentStep && goToStep(index)"
|
||||||
>
|
>
|
||||||
<!-- Number square -->
|
<!-- Number square -->
|
||||||
<div
|
<div
|
||||||
class="d-flex align-center justify-center rounded-lg flex-shrink-0"
|
class="d-flex align-center justify-center flex-shrink-0"
|
||||||
:style="{
|
:style="{
|
||||||
width: '40px',
|
width: '50px',
|
||||||
height: '40px',
|
height: '50px',
|
||||||
|
borderRadius: '10px',
|
||||||
|
fontSize: '18px',
|
||||||
|
fontWeight: 700,
|
||||||
backgroundColor: index === currentStep
|
backgroundColor: index === currentStep
|
||||||
? 'rgb(var(--v-theme-primary))'
|
? 'rgb(var(--v-theme-primary))'
|
||||||
: index < currentStep
|
: index < currentStep
|
||||||
@@ -526,30 +525,36 @@ async function onSubmit() {
|
|||||||
>
|
>
|
||||||
<VIcon
|
<VIcon
|
||||||
v-if="index < currentStep"
|
v-if="index < currentStep"
|
||||||
size="18"
|
size="22"
|
||||||
>
|
>
|
||||||
tabler-check
|
tabler-check
|
||||||
</VIcon>
|
</VIcon>
|
||||||
<span
|
<span v-else>{{ index + 1 }}</span>
|
||||||
v-else
|
|
||||||
class="text-body-1 font-weight-bold"
|
|
||||||
>{{ index + 1 }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Step text -->
|
<!-- Step text -->
|
||||||
<div>
|
<div>
|
||||||
<div
|
<div
|
||||||
class="text-body-1 font-weight-medium"
|
|
||||||
:class="{
|
:class="{
|
||||||
'text-primary': index === currentStep,
|
'text-body-1 font-weight-bold': index === currentStep,
|
||||||
'text-medium-emphasis': index !== currentStep,
|
'text-body-1 font-weight-medium': index !== currentStep,
|
||||||
}"
|
}"
|
||||||
|
:style="index > currentStep
|
||||||
|
? 'color: rgba(var(--v-theme-on-surface), 0.4)'
|
||||||
|
: index < currentStep
|
||||||
|
? 'color: rgba(var(--v-theme-on-surface), 0.5)'
|
||||||
|
: ''
|
||||||
|
"
|
||||||
>
|
>
|
||||||
{{ step.title }}
|
{{ step.title }}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="index === currentStep"
|
class="text-caption"
|
||||||
class="text-caption text-medium-emphasis"
|
:style="{
|
||||||
|
color: index === currentStep
|
||||||
|
? 'rgba(var(--v-theme-on-surface), 0.5)'
|
||||||
|
: 'rgba(var(--v-theme-on-surface), 0.35)',
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
{{ step.subtitle }}
|
{{ step.subtitle }}
|
||||||
</div>
|
</div>
|
||||||
@@ -598,8 +603,9 @@ async function onSubmit() {
|
|||||||
<VCard
|
<VCard
|
||||||
variant="flat"
|
variant="flat"
|
||||||
rounded="lg"
|
rounded="lg"
|
||||||
|
class="h-100"
|
||||||
>
|
>
|
||||||
<VCardText class="pa-6">
|
<VCardText class="pa-8">
|
||||||
<!-- Step header -->
|
<!-- Step header -->
|
||||||
<div class="mb-6">
|
<div class="mb-6">
|
||||||
<h5 class="text-h5 mb-1">
|
<h5 class="text-h5 mb-1">
|
||||||
|
|||||||
Reference in New Issue
Block a user