From 1bbb7e0250727ac8a2934b440eaf536224d7cd35 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Fri, 6 Mar 2026 18:36:40 +0100
Subject: [PATCH] Fix mobile handling for score and document icons

- 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
---
 components/IconButton.vue | 22 +++++++++++-----------
 pages/works/[slug].vue    | 15 ++++++++++-----
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/components/IconButton.vue b/components/IconButton.vue
index f2085b1..2572744 100644
--- a/components/IconButton.vue
+++ b/components/IconButton.vue
@@ -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)
diff --git a/pages/works/[slug].vue b/pages/works/[slug].vue
index 54fd8a8..a4874c8 100644
--- a/pages/works/[slug].vue
+++ b/pages/works/[slug].vue
@@ -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)