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

Fix modal to always be 16:9 aspect ratio

Browse source
This commit is contained in:
Michael Winter 2026-03-08 18:21:45 +01:00
parent 96e81b12c3
commit e5e4dca8e4
3 changed files with 20 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
components/ImageViewer.vue
View file

@ -1,15 +1,12 @@
<template> <template>
<div class="flex flex-col h-full"> <div class="flex flex-col h-full w-full">
<div class="flex-1 flex items-center justify-center min-h-0"> <div class="flex-1 flex items-center justify-center min-h-0">
<div class="w-full max-w-[80vw] aspect-video" style="height: 50vh;">
<!-- Image -->
<NuxtImg <NuxtImg
v-if="gallery[currentIndex]" v-if="gallery[currentIndex]"
:src="'/' + bucket + '/' + gallery[currentIndex].image" :src="'/' + bucket + '/' + gallery[currentIndex].image"
class="w-full h-full object-contain" class="w-full h-full object-contain"
/> />
</div> </div>
</div>
<!-- Dots indicator --> <!-- Dots indicator -->
<div v-if="gallery.length > 1" class="flex-none flex gap-2 py-2 justify-center"> <div v-if="gallery.length > 1" class="flex-none flex gap-2 py-2 justify-center">

2
components/SimpleModal.vue
View file

@ -7,7 +7,7 @@
<!-- Modal Panel --> <!-- Modal Panel -->
<div class="fixed inset-0 flex items-center justify-center pointer-events-none"> <div class="fixed inset-0 flex items-center justify-center pointer-events-none">
<div <div
class="bg-white rounded-lg shadow-xl max-w-[80vw] max-h-[85vh] overflow-hidden relative pointer-events-auto" class="bg-white rounded-lg shadow-xl w-[80vw] aspect-video max-h-[85vh] overflow-hidden relative pointer-events-auto"
:style="{ maxHeight }" :style="{ maxHeight }"
> >
<!-- Content --> <!-- Content -->

4
layouts/default.vue
View file

@ -87,8 +87,7 @@
<iframe :src="modalStore.soundcloudUrl" class="w-64" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe> <iframe :src="modalStore.soundcloudUrl" class="w-64" height="20px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
</ClientOnly> </ClientOnly>
</div> </div>
<div v-if="modalStore.type === 'video'" class="flex-1 flex items-center justify-center min-h-0"> <div v-if="modalStore.type === 'video'" class="w-full h-full flex items-center justify-center">
<div class="w-full max-w-[80vw] aspect-video" style="height: 50vh;">
<ClientOnly> <ClientOnly>
<iframe <iframe
:src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid" :src="'https://player.vimeo.com/video/' + modalStore.vimeo_trackid"
@ -102,7 +101,6 @@
></iframe> ></iframe>
</ClientOnly> </ClientOnly>
</div> </div>
</div>
<div v-if="modalStore.type === 'document'" class="w-full flex flex-col h-[70vh]"> <div v-if="modalStore.type === 'document'" class="w-full flex flex-col h-[70vh]">
<ClientOnly> <ClientOnly>
<iframe :src="modalStore.iframeUrl" width="100%" height="100%" frameborder="0" class="flex-grow"></iframe> <iframe :src="modalStore.iframeUrl" width="100%" height="100%" frameborder="0" class="flex-grow"></iframe>