benny/wishlist-app
1
0
Fork 0
mirror of https://github.com/ThisIsBenny/wishlist-app.git synced 2025-05-16 03:17:42 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

cleanup on the modal

Browse source
This commit is contained in:
Benny Samir Hierl 2022-02-25 10:29:02 +01:00
parent 59f2b7bdbf
commit 78a8d39ea6
2 changed files with 27 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
components.d.ts vendored
View file

@ -14,7 +14,6 @@ declare module 'vue' {
IconCreation: typeof import('./src/components/icons/IconCreation.vue')['default'] IconCreation: typeof import('./src/components/icons/IconCreation.vue')['default']
IconDelete: typeof import('./src/components/icons/IconDelete.vue')['default'] IconDelete: typeof import('./src/components/icons/IconDelete.vue')['default']
IconError: typeof import('./src/components/icons/IconError.vue')['default'] IconError: typeof import('./src/components/icons/IconError.vue')['default']
IconHome: typeof import('./src/components/icons/IconHome.vue')['default']
IconImagePlaceholder: typeof import('./src/components/icons/IconImagePlaceholder.vue')['default'] IconImagePlaceholder: typeof import('./src/components/icons/IconImagePlaceholder.vue')['default']
IconLightDark: typeof import('./src/components/icons/IconLightDark.vue')['default'] IconLightDark: typeof import('./src/components/icons/IconLightDark.vue')['default']
IconLink: typeof import('./src/components/icons/IconLink.vue')['default'] IconLink: typeof import('./src/components/icons/IconLink.vue')['default']

62
src/components/Modal.vue
View file

@ -8,48 +8,40 @@ const modal = useModal()
<div <div
v-if="modal.isShown" v-if="modal.isShown"
data-test="modal" data-test="modal"
class="fixed inset-0 z-10 overflow-y-auto" class="fixed inset-0 z-10 overflow-y-auto p-4 pt-[70vh] sm:pt-[25vh]"
role="dialog" role="dialog"
> >
<div class="fixed inset-0 bg-stone-700/75"></div>
<div <div
class="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0" class="relative mx-auto rounded-md bg-white text-left shadow-xl ring-1 ring-black/5 dark:bg-stone-900 sm:max-w-xl"
> >
<div class="fixed inset-0 bg-stone-700/75 transition-opacity"></div> <div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<span class="hidden sm:inline-block sm:h-screen sm:align-middle" <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
>&#8203;</span <h3 class="text-lg font-medium leading-6" data-test="modal-title">
> {{ modal.title }}
<div </h3>
class="inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all dark:bg-stone-900 sm:my-8 sm:w-full sm:max-w-lg sm:align-middle" <div class="mt-2">
> <p class="text-sm opacity-60" data-test="modal-body">
<div class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> {{ modal.body }}
<div class="sm:flex sm:items-start"> </p>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg font-medium leading-6" data-test="modal-title">
{{ modal.title }}
</h3>
<div class="mt-2">
<p class="text-sm opacity-60" data-test="modal-body">
{{ modal.body }}
</p>
</div>
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-row px-4 py-3 sm:px-6"> </div>
<ButtonBase <div class="flex flex-row px-4 py-3 sm:px-6">
class="w-full" <ButtonBase
@click="modal.confirm" class="w-full"
data-test="modal-confirm-button" @click="modal.confirm"
>{{ modal.confirmText }}</ButtonBase data-test="modal-confirm-button"
> >{{ modal.confirmText }}</ButtonBase
<ButtonBase >
class="ml-2 w-full" <ButtonBase
@click="modal.cancel" class="ml-2 w-full"
data-test="modal-cancel-button" @click="modal.cancel"
>{{ modal.cancelText }}</ButtonBase data-test="modal-cancel-button"
> >{{ modal.cancelText }}</ButtonBase
</div> >
</div> </div>
</div> </div>
</div> </div>