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

Fix image carousel sizing and modal height for audio

Browse source
This commit is contained in:
Michael Winter 2026-02-19 02:27:15 +01:00
parent 9d1391eae0
commit 4bf23f0d25
3 changed files with 9 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
components/ImageSlider.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<Swiper <Swiper
:autoHeight="true" :autoHeight="false"
:loop="true" :loop="true"
:spaceBetween="30" :spaceBetween="30"
:centeredSlides="true" :centeredSlides="true"
@ -21,12 +21,12 @@
'--swiper-navigation-top-offset': '5rem' '--swiper-navigation-top-offset': '5rem'
}" }"
:modules="[SwiperAutoplay, SwiperPagination, SwiperNavigation]" :modules="[SwiperAutoplay, SwiperPagination, SwiperNavigation]"
class="h-full flex items-center justify-center" class="h-full w-full"
> >
<SwiperSlide v-for="image in gallery" class="!flex !items-center !justify-center !h-auto !py-10 !bg-zinc-100"> <SwiperSlide v-for="(image, index) in gallery" :key="image.id || index" class="!flex !items-center !justify-center !py-4 !bg-zinc-100">
<img :src="'/' + bucket + '/' + image.image" <img :src="'/' + bucket + '/' + image.image"
style="max-width: calc(100% - 80px); max-height: 70vh; object-fit: contain;"/> style="max-width: 100%; max-height: calc(85vh - 40px); object-fit: contain;"/>
</SwiperSlide> </SwiperSlide>
</Swiper> </Swiper>
</template> </template>

5
components/Modal/Modal.vue
View file

@ -12,11 +12,13 @@ const props = withDefaults(
modelValue?: boolean modelValue?: boolean
persistent?: boolean persistent?: boolean
fullscreen?: boolean fullscreen?: boolean
maxHeight?: string
}>(), }>(),
{ {
modelValue: false, modelValue: false,
persistent: false, persistent: false,
fullscreen: false, fullscreen: false,
maxHeight: '85vh',
}, },
) )
@ -93,11 +95,12 @@ 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]" class="w-full transform overflow-hidden bg-white text-left align-middle shadow-xl transition-all"
:class="{ :class="{
'h-screen': fullscreen, 'h-screen': fullscreen,
'max-w-[85vw] rounded-lg': !fullscreen, 'max-w-[85vw] rounded-lg': !fullscreen,
}" }"
:style="!fullscreen ? { maxHeight } : {}"
> >
<slot /> <slot />
</DialogPanel> </DialogPanel>

2
layouts/default.vue
View file

@ -33,7 +33,7 @@
:src="'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + audioPlayerStore.soundcloud_trackid + '&inverse=false&auto_play=true&show_user=false'"></iframe> :src="'https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + audioPlayerStore.soundcloud_trackid + '&inverse=false&auto_play=true&show_user=false'"></iframe>
</div> </div>
<Modal v-model="modalStore.isOpen"> <Modal v-model="modalStore.isOpen" :maxHeight="modalStore.type === 'image' && modalStore.soundcloudUrl ? 'calc(85vh + 60px)' : '85vh'">
<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>
<div v-if="modalStore.type === 'image' && modalStore.soundcloudUrl" class="flex justify-center mt-2"> <div v-if="modalStore.type === 'image' && modalStore.soundcloudUrl" class="flex justify-center mt-2">