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

15
components/ImageViewer.vue
View file

@ -1,14 +1,11 @@
<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;"> <NuxtImg
<!-- Image --> v-if="gallery[currentIndex]"
<NuxtImg :src="'/' + bucket + '/' + gallery[currentIndex].image"
v-if="gallery[currentIndex]" class="w-full h-full object-contain"
:src="'/' + bucket + '/' + gallery[currentIndex].image" />
class="w-full h-full object-contain"
/>
</div>
</div> </div>
<!-- Dots indicator --> <!-- Dots indicator -->

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 -->

28
layouts/default.vue
View file

@ -87,21 +87,19 @@
<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" width="100%"
width="100%" height="100%"
height="100%" frameborder="0"
frameborder="0" webkitallowfullscreen
webkitallowfullscreen mozallowfullscreen
mozallowfullscreen allowfullscreen
allowfullscreen class="w-full h-full block"
class="w-full h-full block" ></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>