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

Add score modal functionality and simplify modal sizing

Browse source
This commit is contained in:
Michael Winter 2026-03-08 19:02:10 +01:00
parent 44c3397d85
commit 06e69316ad
2 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
layouts/default.vue
View file

@ -106,9 +106,9 @@
<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>
</ClientOnly> </ClientOnly>
</div> </div>
<div v-if="modalStore.type === 'pdf'" class="flex flex-col h-[70vh]"> <div v-if="modalStore.type === 'pdf'" class="w-full h-full flex flex-col">
<ClientOnly> <ClientOnly>
<iframe :src="modalStore.pdfUrl + '#toolbar=1&navpanes=0&sidebar=0'" width="100%" height="100%" frameborder="0" class="flex-grow"></iframe> <iframe :src="modalStore.pdfUrl + '#toolbar=1&navpanes=0&sidebar=0'" width="100%" height="100%" frameborder="0" class="flex-1"></iframe>
</ClientOnly> </ClientOnly>
<div v-if="modalStore.soundcloudUrl" class="flex justify-center mt-2"> <div v-if="modalStore.soundcloudUrl" class="flex justify-center mt-2">
<ClientOnly> <ClientOnly>

8
pages/pieces.vue
View file

@ -28,9 +28,9 @@
<button v-if="work.gallery" @click="openImageModal(work)" class="hover:underline"> <button v-if="work.gallery" @click="openImageModal(work)" class="hover:underline">
images images
</button> </button>
<a v-if="work.score" :href="work.score" target="_blank" class="hover:underline"> <button v-if="work.score" @click="openScoreModal(work.score)" class="hover:underline">
score score
</a> </button>
</div> </div>
</div> </div>
</div> </div>
@ -86,6 +86,10 @@ const openVideoModal = (vimeoId) => {
modalStore.setModalProps('video', 'aspect-video', true, '', '', vimeoId) modalStore.setModalProps('video', 'aspect-video', true, '', '', vimeoId)
} }
const openScoreModal = (scoreUrl) => {
modalStore.setModalProps('pdf', 'aspect-[1/1.414]', true, '', '', '', scoreUrl)
}
const openImageModal = (work) => { const openImageModal = (work) => {
const gallery = work.images.map(img => ({ image: img.filename })) const gallery = work.images.map(img => ({ image: img.filename }))
modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery, '', '', '', '', 0) modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery, '', '', '', '', 0)