Made dialog go full screen on mobile
This commit is contained in:
@@ -41,12 +41,12 @@ const breakpoints = useBreakpoints(
|
||||
|
||||
<UiDialog v-model:open="isDialogOpen">
|
||||
<UiDialogContent
|
||||
class="border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
|
||||
class="max-md:translate-0 max-md:inset-0 max-md:w-full max-md:block"
|
||||
:trap-focus="true"
|
||||
@escape-key-down.prevent="handleClosing"
|
||||
@escape-key-down="handleClosing"
|
||||
@pointer-down-outside.prevent="handleClosing"
|
||||
>
|
||||
<UiDialogTitle>
|
||||
<UiDialogTitle class="max-md:mb-8">
|
||||
{{ $t("entity.calendar.event.addSingle") }}
|
||||
</UiDialogTitle>
|
||||
<CalendarFormCreateEvent @event-created="toggleDialog" />
|
||||
|
||||
@@ -25,13 +25,13 @@ function handleClosing() {
|
||||
<UiDialogContent
|
||||
:disable-outside-pointer-events="true"
|
||||
:trap-focus="true"
|
||||
class="pl-3 min-w-96 border-border"
|
||||
class="pl-3 md:min-w-96 max-md:translate-0 max-md:inset-0 max-md:w-full max-md:block"
|
||||
@escape-key-down="handleClosing"
|
||||
@focus-outside="handleClosing"
|
||||
@interact-outside="handleClosing"
|
||||
@pointer-down-outside="(e) => e.preventDefault()"
|
||||
>
|
||||
<header class="pl-8 grid gap-y-2">
|
||||
<header class="pl-8 grid gap-y-2 max-md:mb-8">
|
||||
<UiDialogTitle>
|
||||
{{ $t('entity.calendar.event.editDialog.title') }}
|
||||
</UiDialogTitle>
|
||||
|
||||
@@ -76,12 +76,12 @@ function handleClosing() {
|
||||
|
||||
<UiDialog v-model:open="isDialogOpen">
|
||||
<UiDialogContent
|
||||
class="border-indigo-200 dark:bg-slate-950 dark:border-indigo-950"
|
||||
class="max-md:translate-0 max-md:inset-0 max-md:w-full max-md:block"
|
||||
:trap-focus="true"
|
||||
@escape-key-down.prevent="handleClosing"
|
||||
@escape-key-down="handleClosing"
|
||||
@pointer-down-outside.prevent="null"
|
||||
>
|
||||
<UiDialogTitle>
|
||||
<UiDialogTitle class="max-md:mb-8">
|
||||
{{ $t("entity.calendar.event.addSingle") }}
|
||||
</UiDialogTitle>
|
||||
<CalendarFormCreateEvent @event-created="toggleDialog" />
|
||||
|
||||
Reference in New Issue
Block a user