benny/wishlist-app
1
0
Fork 0
mirror of https://github.com/ThisIsBenny/wishlist-app.git synced 2025-04-19 15:27:41 +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']
IconDelete: typeof import('./src/components/icons/IconDelete.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']
IconLightDark: typeof import('./src/components/icons/IconLightDark.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
v-if="modal.isShown"
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"
>
<div class="fixed inset-0 bg-stone-700/75"></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>
<span class="hidden sm:inline-block sm:h-screen sm:align-middle"
>&#8203;</span
>
<div
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="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<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 class="px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<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 class="flex flex-row px-4 py-3 sm:px-6">
<ButtonBase
class="w-full"
@click="modal.confirm"
data-test="modal-confirm-button"
>{{ modal.confirmText }}</ButtonBase
>
<ButtonBase
class="ml-2 w-full"
@click="modal.cancel"
data-test="modal-cancel-button"
>{{ modal.cancelText }}</ButtonBase
>
</div>
</div>
<div class="flex flex-row px-4 py-3 sm:px-6">
<ButtonBase
class="w-full"
@click="modal.confirm"
data-test="modal-confirm-button"
>{{ modal.confirmText }}</ButtonBase
>
<ButtonBase
class="ml-2 w-full"
@click="modal.cancel"
data-test="modal-cancel-button"
>{{ modal.cancelText }}</ButtonBase
>
</div>
</div>
</div>