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

Update modal with simplified carousel and responsive sizing

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

18
components/ImageViewer.vue
View file

@ -1,16 +1,18 @@
<template> <template>
<div class="flex flex-col h-full"> <div class="flex flex-col h-full">
<div class="relative h-[60vh] w-full flex items-center justify-center"> <div class="flex-1 flex items-center justify-center min-h-0">
<!-- Image --> <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="max-w-full max-h-full object-contain" :src="'/' + bucket + '/' + gallery[currentIndex].image"
/> class="w-full h-full object-contain"
/>
</div>
</div> </div>
<!-- Dots indicator --> <!-- Dots indicator -->
<div v-if="gallery.length > 1" class="flex gap-2 py-2 justify-center"> <div v-if="gallery.length > 1" class="flex-none flex gap-2 py-2 justify-center">
<button <button
v-for="(img, index) in gallery" v-for="(img, index) in gallery"
:key="index" :key="index"

20
components/SimpleModal.vue
View file

@ -1,23 +1,15 @@
<template> <template>
<Teleport to="body"> <Teleport to="body">
<div v-if="modelValue" class="fixed inset-0 z-50" @click.self="close"> <div v-if="modelValue" class="fixed inset-0 z-50">
<!-- Backdrop --> <!-- Backdrop - click to close -->
<div class="fixed inset-0 bg-black/50" @click="close"></div> <div class="fixed inset-0 bg-black/50 cursor-pointer" @click="close"></div>
<!-- Modal Panel --> <!-- Modal Panel -->
<div class="fixed inset-0 flex items-center justify-center p-4"> <div class="fixed inset-0 flex items-center justify-center pointer-events-none">
<div <div
class="bg-white rounded-lg shadow-xl max-w-[85vw] max-h-[85vh] overflow-auto relative" class="bg-white rounded-lg shadow-xl max-w-[80vw] max-h-[85vh] overflow-hidden relative pointer-events-auto"
:style="{ maxHeight }" :style="{ maxHeight }"
> >
<!-- Close button -->
<button
@click="close"
class="absolute top-4 right-4 z-10 text-gray-500 hover:text-gray-700 text-2xl leading-none"
>
&times;
</button>
<!-- Content --> <!-- Content -->
<slot /> <slot />
</div> </div>
@ -27,7 +19,7 @@
</template> </template>
<script setup> <script setup>
const props = defineProps({ defineProps({
modelValue: Boolean, modelValue: Boolean,
maxHeight: { maxHeight: {
type: String, type: String,

6
layouts/default.vue
View file

@ -87,8 +87,8 @@
<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="w-full flex items-center justify-center"> <div v-if="modalStore.type === 'video'" class="flex-1 flex items-center justify-center min-h-0">
<div class="w-full aspect-video"> <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"
@ -98,7 +98,7 @@
webkitallowfullscreen webkitallowfullscreen
mozallowfullscreen mozallowfullscreen
allowfullscreen allowfullscreen
class="w-full h-full" class="w-full h-full block"
></iframe> ></iframe>
</ClientOnly> </ClientOnly>
</div> </div>