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

Fix mobile handling for score and document icons

Browse source 
- Score icon: mobile downloads PDF, desktop opens modal
- Document icon: reverts to same behavior on mobile and desktop (opens modal)
- Remove console.log from isMobile
- Remove documentLink computed property
This commit is contained in:
Michael Winter 2026-03-06 18:36:40 +01:00
parent 49f427256f
commit 1bbb7e0250
2 changed files with 21 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
components/IconButton.vue
View file

@ -3,24 +3,19 @@
<div v-show="visible" class="bg-black rounded-full text-xs inline-flex" >
<!-- Score: Mobile = PDF (downloads), Desktop = work page with hash (opens modal) -->
<span v-if="type === 'score'" class="md:hidden">
<span v-if="type === 'score' && isMobile()">
<a :href="scoreLink" class="inline-flex p-1">
<Icon name="ion:book-sharp" style="color: white" />
</a>
</span>
<span v-if="type === 'score'" class="hidden md:block">
<a :href="'/works/' + workSlug + '#score'" class="inline-flex p-1">
<span v-else-if="type === 'score'">
<button @click="openWithHash('score')" class="inline-flex p-1">
<Icon name="ion:book-sharp" style="color: white" />
</a>
</button>
</span>
<!-- Document: Mobile = PDF (downloads), Desktop = modal -->
<span v-if="type === 'document'" class="md:hidden">
<a :href="link" class="inline-flex p-1 cursor-pointer">
<Icon name="ion:book-sharp" style="color: white" />
</a>
</span>
<span v-if="type === 'document'" class="hidden md:block">
<!-- Document: Mobile = External opens new tab, PDF downloads, internal pages open modal -->
<span v-if="type === 'document'">
<a :href="isExternalLink ? link : undefined" :target="isExternalLink ? '_blank' : undefined" :rel="isExternalLink ? 'noopener noreferrer' : undefined" @click="openDocument()" class="inline-flex p-1 cursor-pointer">
<Icon name="ion:book-sharp" style="color: white" />
</a>
@ -87,6 +82,11 @@
return props.link && props.link.startsWith('/') && !props.link.endsWith('.pdf')
})
const isMobile = () => {
if (typeof window === 'undefined') return false
return window.innerWidth < 768
}
const openDocument = () => {
if (props.link?.endsWith('.pdf')) {
modalStore.setModalProps('pdf', 'aspect-[1/1.414]', true, '', '', '', props.link)

15
pages/works/[slug].vue
View file

@ -8,11 +8,11 @@
<nav class="flex gap-4 mb-6">
<a v-if="work.vimeo_trackid" href="#video" class="hover:underline">Video</a>
<a v-if="gallery && gallery.length" href="#images" class="hover:underline">Images</a>
<span class="md:hidden">
<a v-if="scoreUrl" :href="scoreUrl" class="hover:underline">Score</a>
<span v-if="scoreUrl && isMobile()">
<a :href="scoreUrl" class="hover:underline">Score</a>
</span>
<span class="hidden md:block">
<a v-if="scoreUrl" href="#score" class="hover:underline">Score</a>
<span v-else-if="scoreUrl">
<a href="#score" class="hover:underline">Score</a>
</span>
</nav>
</div>
@ -27,7 +27,7 @@
<ImageSlider :bucket="'images'" :gallery="gallery"></ImageSlider>
</div>
<div id="score" v-if="scoreUrl" class="mb-8 scroll-mt-[280px] hidden md:block">
<div id="score" v-if="scoreUrl && !isMobile()" class="mb-8 scroll-mt-[280px]">
<iframe :src="scoreUrl + '#toolbar=1&navpanes=0&sidebar=0'" class="w-full h-[85vh] border"></iframe>
</div>
</div>
@ -82,6 +82,11 @@ const itemCount = computed(() => {
return count
})
const isMobile = () => {
if (typeof window === 'undefined') return false
return window.innerWidth < 768
}
onMounted(() => {
if (work.value?.soundcloud_trackid) {
audioPlayerStore.setSoundCloudTrackID(work.value.soundcloud_trackid)