Made dialog go full screen on mobile
This commit is contained in:
@@ -41,12 +41,12 @@ const breakpoints = useBreakpoints(
|
|||||||
|
|
||||||
<UiDialog v-model:open="isDialogOpen">
|
<UiDialog v-model:open="isDialogOpen">
|
||||||
<UiDialogContent
|
<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"
|
:trap-focus="true"
|
||||||
@escape-key-down.prevent="handleClosing"
|
@escape-key-down="handleClosing"
|
||||||
@pointer-down-outside.prevent="handleClosing"
|
@pointer-down-outside.prevent="handleClosing"
|
||||||
>
|
>
|
||||||
<UiDialogTitle>
|
<UiDialogTitle class="max-md:mb-8">
|
||||||
{{ $t("entity.calendar.event.addSingle") }}
|
{{ $t("entity.calendar.event.addSingle") }}
|
||||||
</UiDialogTitle>
|
</UiDialogTitle>
|
||||||
<CalendarFormCreateEvent @event-created="toggleDialog" />
|
<CalendarFormCreateEvent @event-created="toggleDialog" />
|
||||||
|
|||||||
@@ -25,13 +25,13 @@ function handleClosing() {
|
|||||||
<UiDialogContent
|
<UiDialogContent
|
||||||
:disable-outside-pointer-events="true"
|
:disable-outside-pointer-events="true"
|
||||||
:trap-focus="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"
|
@escape-key-down="handleClosing"
|
||||||
@focus-outside="handleClosing"
|
@focus-outside="handleClosing"
|
||||||
@interact-outside="handleClosing"
|
@interact-outside="handleClosing"
|
||||||
@pointer-down-outside="(e) => e.preventDefault()"
|
@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>
|
<UiDialogTitle>
|
||||||
{{ $t('entity.calendar.event.editDialog.title') }}
|
{{ $t('entity.calendar.event.editDialog.title') }}
|
||||||
</UiDialogTitle>
|
</UiDialogTitle>
|
||||||
|
|||||||
@@ -76,12 +76,12 @@ function handleClosing() {
|
|||||||
|
|
||||||
<UiDialog v-model:open="isDialogOpen">
|
<UiDialog v-model:open="isDialogOpen">
|
||||||
<UiDialogContent
|
<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"
|
:trap-focus="true"
|
||||||
@escape-key-down.prevent="handleClosing"
|
@escape-key-down="handleClosing"
|
||||||
@pointer-down-outside.prevent="null"
|
@pointer-down-outside.prevent="null"
|
||||||
>
|
>
|
||||||
<UiDialogTitle>
|
<UiDialogTitle class="max-md:mb-8">
|
||||||
{{ $t("entity.calendar.event.addSingle") }}
|
{{ $t("entity.calendar.event.addSingle") }}
|
||||||
</UiDialogTitle>
|
</UiDialogTitle>
|
||||||
<CalendarFormCreateEvent @event-created="toggleDialog" />
|
<CalendarFormCreateEvent @event-created="toggleDialog" />
|
||||||
|
|||||||
Reference in New Issue
Block a user