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

fix: shift dialog info alert layout and full-width toggle

Browse Source 
Made-with: Cursor
This commit is contained in:
bert.hausmans
2026-04-14 22:58:33 +02:00
parent 103d57c979
commit ec31646a93
1 changed files with 44 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
apps/app/src/components/sections/CreateShiftDialog.vue
View File

@@ -259,47 +259,52 @@ function onSubmit() {
border-color="info" border-color="info"
density="comfortable" density="comfortable"
:icon="false" :icon="false"
class="mb-6" class="mb-6 pa-0 overflow-hidden"
> >
<div class="d-flex align-start gap-3"> <div
<VIcon role="button"
icon="tabler-info-circle" tabindex="0"
color="info" class="cursor-pointer pa-4 text-start"
size="22" :aria-expanded="timeSlotHelpOpen"
class="mt-1 flex-shrink-0" aria-controls="shift-time-slot-help"
/> @click="toggleTimeSlotHelp"
<div class="flex-grow-1 min-width-0"> @keydown.enter.prevent="toggleTimeSlotHelp"
<VBtn @keydown.space.prevent="toggleTimeSlotHelp"
variant="text" >
block <div class="d-flex align-start gap-3">
class="d-flex justify-space-between align-center px-0 text-high-emphasis" <VIcon
height="auto" icon="tabler-info-circle"
min-height="0" color="info"
@click="toggleTimeSlotHelp" size="22"
> class="flex-shrink-0 align-self-start"
<span class="text-body-1 font-weight-medium text-start me-2"> />
Tijdsloten in dit evenement <div class="flex-grow-1 min-width-0">
</span> <div class="d-flex align-center flex-nowrap gap-2">
<VIcon <span class="text-body-1 font-weight-medium text-high-emphasis flex-grow-1 min-width-0">
:icon="timeSlotHelpOpen ? 'tabler-chevron-up' : 'tabler-chevron-down'" Tijdsloten in dit evenement
size="20" </span>
class="text-medium-emphasis flex-shrink-0" <VIcon
/> :icon="timeSlotHelpOpen ? 'tabler-chevron-up' : 'tabler-chevron-down'"
</VBtn> size="22"
<VExpandTransition> class="text-medium-emphasis flex-shrink-0"
<div />
v-show="timeSlotHelpOpen"
class="text-body-2 mt-3"
>
<p class="mb-2">
{{ tooltipText.main }}
</p>
<p class="text-caption text-medium-emphasis mb-0">
<span class="font-weight-medium text-high-emphasis">Tip:</span>
{{ tooltipText.tip }}
</p>
</div> </div>
</VExpandTransition> <VExpandTransition>
<div
v-show="timeSlotHelpOpen"
id="shift-time-slot-help"
class="text-body-2 mt-3 text-medium-emphasis"
>
<p class="mb-2 text-high-emphasis">
{{ tooltipText.main }}
</p>
<p class="text-caption mb-0">
<span class="font-weight-semibold text-high-emphasis">Tip:</span>
{{ tooltipText.tip }}
</p>
</div>
</VExpandTransition>
</div>
</div> </div>
</div> </div>
</VAlert> </VAlert>