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"
|
||||
md="3"
|
||||
>
|
||||
<div class="pa-6">
|
||||
<div class="text-overline text-medium-emphasis mb-6">
|
||||
AANMELDEN
|
||||
</div>
|
||||
|
||||
<div class="pa-5 pt-8">
|
||||
<div
|
||||
class="d-flex flex-column"
|
||||
style="gap: 28px;"
|
||||
@@ -503,14 +499,17 @@ async function onSubmit() {
|
||||
:key="index"
|
||||
class="d-flex align-center ga-4"
|
||||
:class="{ 'cursor-pointer': index < currentStep }"
|
||||
@click="goToStep(index)"
|
||||
@click="index < currentStep && goToStep(index)"
|
||||
>
|
||||
<!-- Number square -->
|
||||
<div
|
||||
class="d-flex align-center justify-center rounded-lg flex-shrink-0"
|
||||
class="d-flex align-center justify-center flex-shrink-0"
|
||||
:style="{
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
width: '50px',
|
||||
height: '50px',
|
||||
borderRadius: '10px',
|
||||
fontSize: '18px',
|
||||
fontWeight: 700,
|
||||
backgroundColor: index === currentStep
|
||||
? 'rgb(var(--v-theme-primary))'
|
||||
: index < currentStep
|
||||
@@ -526,30 +525,36 @@ async function onSubmit() {
|
||||
>
|
||||
<VIcon
|
||||
v-if="index < currentStep"
|
||||
size="18"
|
||||
size="22"
|
||||
>
|
||||
tabler-check
|
||||
</VIcon>
|
||||
<span
|
||||
v-else
|
||||
class="text-body-1 font-weight-bold"
|
||||
>{{ index + 1 }}</span>
|
||||
<span v-else>{{ index + 1 }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Step text -->
|
||||
<div>
|
||||
<div
|
||||
class="text-body-1 font-weight-medium"
|
||||
:class="{
|
||||
'text-primary': index === currentStep,
|
||||
'text-medium-emphasis': index !== currentStep,
|
||||
'text-body-1 font-weight-bold': 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 }}
|
||||
</div>
|
||||
<div
|
||||
v-if="index === currentStep"
|
||||
class="text-caption text-medium-emphasis"
|
||||
class="text-caption"
|
||||
:style="{
|
||||
color: index === currentStep
|
||||
? 'rgba(var(--v-theme-on-surface), 0.5)'
|
||||
: 'rgba(var(--v-theme-on-surface), 0.35)',
|
||||
}"
|
||||
>
|
||||
{{ step.subtitle }}
|
||||
</div>
|
||||
@@ -598,8 +603,9 @@ async function onSubmit() {
|
||||
<VCard
|
||||
variant="flat"
|
||||
rounded="lg"
|
||||
class="h-100"
|
||||
>
|
||||
<VCardText class="pa-6">
|
||||
<VCardText class="pa-8">
|
||||
<!-- Step header -->
|
||||
<div class="mb-6">
|
||||
<h5 class="text-h5 mb-1">
|
||||
|
||||
Reference in New Issue
Block a user