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

Replace icons with text links; add video and images modal on pieces page

Browse source
This commit is contained in:
Michael Winter 2026-03-07 13:34:02 +01:00
parent 69fab67601
commit f0133650f6
1 changed files with 33 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
pages/pieces.vue
View file

@ -6,25 +6,33 @@
<div v-for="item in works" :key="item.year" class="mb-8">
<p class="text-sm text-gray-500 mb-3">{{ item.year }}</p>
<div v-for="work in item.works" :key="work.title" class="mb-4">
<div class="flex items-start gap-2">
<div v-for="work in item.works" :key="work.title" class="mb-4 ml-4">
<div>
<NuxtLink
v-if="hasItems(work)"
:to="'/works/' + slugify(work.title)"
class="italic hover:underline"
class="text-lg italic hover:underline"
>
<span v-html="work.title"></span>
</NuxtLink>
<span v-else class="italic">
<span v-else class="text-lg italic">
<span v-html="work.title"></span>
</span>
</div>
<div class="flex gap-1">
<IconButton v-if="work.score" type="score" :work="work" :link="work.score" :visible="true"></IconButton>
<IconButton v-if="work.soundcloud_trackid" type="audio" :work="work" :visible="true"></IconButton>
<IconButton v-if="work.vimeo_trackid" type="video" :work="work" :visible="true"></IconButton>
<IconButton v-if="work.gallery" type="image" :work="work" :visible="true"></IconButton>
</div>
<div v-if="hasContent(work)" class="flex gap-4 text-sm text-gray-500 mt-0.5">
<button v-if="work.soundcloud_trackid" @click="audioPlayerStore.setSoundCloudTrackID(work.soundcloud_trackid)" class="hover:underline">
audio
</button>
<button v-if="work.vimeo_trackid" @click="openVideoModal(work.vimeo_trackid)" class="hover:underline">
video
</button>
<button v-if="work.gallery" @click="openImageModal(work)" class="hover:underline">
images
</button>
<a v-if="work.score" :href="work.score" target="_blank" class="hover:underline">
score
</a>
</div>
</div>
</div>
@ -55,8 +63,10 @@
<script setup>
import { useModalStore } from "@/stores/ModalStore"
import { useAudioPlayerStore } from "@/stores/AudioPlayerStore"
const modalStore = useModalStore()
const audioPlayerStore = useAudioPlayerStore()
const route = useRoute()
const slugify = (title) => {
@ -70,6 +80,19 @@ const hasItems = (work) => {
return work.vimeo_trackid || (work.images && work.images.length) || work.score
}
const hasContent = (work) => {
return work.soundcloud_trackid || work.vimeo_trackid || (work.images && work.images.length) || work.score
}
const openVideoModal = (vimeoId) => {
modalStore.setModalProps('video', 'aspect-video', true, '', '', vimeoId)
}
const openImageModal = (work) => {
const gallery = work.images.map(img => ({ image: img.filename }))
modalStore.setModalProps('image', 'aspect-auto', true, 'images', gallery, '')
}
const worksWithImages = computed(() => {
if (!works.value) return []
const allWorks = works.value.flatMap(group => group.works)