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"
density="comfortable"
:icon="false"
class="mb-6"
class="mb-6 pa-0 overflow-hidden"
>
<div class="d-flex align-start gap-3">
<VIcon
icon="tabler-info-circle"
color="info"
size="22"
class="mt-1 flex-shrink-0"
/>
<div class="flex-grow-1 min-width-0">
<VBtn
variant="text"
block
class="d-flex justify-space-between align-center px-0 text-high-emphasis"
height="auto"
min-height="0"
@click="toggleTimeSlotHelp"
>
<span class="text-body-1 font-weight-medium text-start me-2">
Tijdsloten in dit evenement
</span>
<VIcon
:icon="timeSlotHelpOpen ? 'tabler-chevron-up' : 'tabler-chevron-down'"
size="20"
class="text-medium-emphasis flex-shrink-0"
/>
</VBtn>
<VExpandTransition>
<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
role="button"
tabindex="0"
class="cursor-pointer pa-4 text-start"
:aria-expanded="timeSlotHelpOpen"
aria-controls="shift-time-slot-help"
@click="toggleTimeSlotHelp"
@keydown.enter.prevent="toggleTimeSlotHelp"
@keydown.space.prevent="toggleTimeSlotHelp"
>
<div class="d-flex align-start gap-3">
<VIcon
icon="tabler-info-circle"
color="info"
size="22"
class="flex-shrink-0 align-self-start"
/>
<div class="flex-grow-1 min-width-0">
<div class="d-flex align-center flex-nowrap gap-2">
<span class="text-body-1 font-weight-medium text-high-emphasis flex-grow-1 min-width-0">
Tijdsloten in dit evenement
</span>
<VIcon
:icon="timeSlotHelpOpen ? 'tabler-chevron-up' : 'tabler-chevron-down'"
size="22"
class="text-medium-emphasis flex-shrink-0"
/>
</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>
</VAlert>