mwinter/portfolio
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Fix video modal sizing and remove modal bottom padding

Browse source
This commit is contained in:
Michael Winter 2026-02-19 01:37:29 +01:00
parent c6a8570d4f
commit 3c1dea94ce
2 changed files with 4 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/Modal/Modal.vue
View file

@ -93,7 +93,7 @@ provide('modal', api)
leave-to="opacity-0 scale-95" leave-to="opacity-0 scale-95"
> >
<DialogPanel <DialogPanel
class="w-full transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all max-h-[85vh] pb-4" class="w-full transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all max-h-[85vh]"
:class="{ :class="{
'h-screen': fullscreen, 'h-screen': fullscreen,
'max-w-[85vw] rounded-lg': !fullscreen, 'max-w-[85vw] rounded-lg': !fullscreen,

4
layouts/default.vue
View file

@ -36,7 +36,9 @@
<Modal v-model="modalStore.isOpen"> <Modal v-model="modalStore.isOpen">
<ModalBody :class="modalStore.aspect"> <ModalBody :class="modalStore.aspect">
<ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery"></ImageSlider> <ImageSlider v-if="modalStore.type === 'image'" :bucket="modalStore.bucket" :gallery="modalStore.gallery"></ImageSlider>
<iframe v-if="modalStore.type === 'video'" :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <div v-if="modalStore.type === 'video'" class="w-full" :class="modalStore.aspect">
<iframe :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<iframe v-if="modalStore.type === 'pdf'" :src="modalStore.pdfUrl + '#toolbar=1&navpanes=0'" width="100%" height="100%" frameborder="0" class="max-h-[calc(85vh-2rem)]"></iframe> <iframe v-if="modalStore.type === 'pdf'" :src="modalStore.pdfUrl + '#toolbar=1&navpanes=0'" width="100%" height="100%" frameborder="0" class="max-h-[calc(85vh-2rem)]"></iframe>
<div v-if="modalStore.type === 'pdf' || modalStore.type === 'image'" class="absolute bottom-2 right-2 z-10"> <div v-if="modalStore.type === 'pdf' || modalStore.type === 'image'" class="absolute bottom-2 right-2 z-10">
<a :href="modalStore.type === 'pdf' ? modalStore.pdfUrl : '/' + modalStore.bucket + '/' + modalStore.gallery[0]?.image" target="_blank" rel="noopener noreferrer" class="p-2 bg-gray-600 rounded-lg inline-flex items-center justify-center"> <a :href="modalStore.type === 'pdf' ? modalStore.pdfUrl : '/' + modalStore.bucket + '/' + modalStore.gallery[0]?.image" target="_blank" rel="noopener noreferrer" class="p-2 bg-gray-600 rounded-lg inline-flex items-center justify-center">