From d5fc1eed21091b80badd31a6b808bdb7b6e0c38e Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Fri, 6 Mar 2026 16:31:36 +0100
Subject: [PATCH] Add mobile-friendly

 PDF handling- Score icon on mobile: direct link to PDF triggers download
- Works page: hide score iframe on mobile, Score link downloads PDF
- Desktop behavior unchanged
---
 components/IconButton.vue | 18 +++++++++++++++++-
 pages/works/[slug].vue    |  9 +++++++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/components/IconButton.vue b/components/IconButton.vue
index 45de733..2cb1fa5 100644
--- a/components/IconButton.vue
+++ b/components/IconButton.vue
@@ -2,7 +2,10 @@
     <div class="inline-flex p-1 min-w-[25px]">
         <div v-show="visible" class="bg-black rounded-full text-xs inline-flex" >
 
-            <button v-if="type === 'score'" @click="openWithHash('score')" class="inline-flex p-1">
+            <a v-if="type === 'score' && isMobile" :href="scoreLink" class="inline-flex p-1">
+                <Icon name="ion:book-sharp" style="color: white" />
+            </a>
+            <button v-else-if="type === 'score'" @click="openWithHash('score')" class="inline-flex p-1">
                 <Icon name="ion:book-sharp" style="color: white" />
             </button>
 
@@ -55,6 +58,19 @@
 
   const workSlug = computed(() => slugify(props.work?.title))
 
+  const isMobile = computed(() => {
+    if (typeof window === 'undefined') return false
+    return window.innerWidth < 768
+  })
+
+  const scoreLink = computed(() => {
+    if (!props.work?.score) return null
+    if (props.work.score.startsWith('/scores/')) {
+      return props.work.score
+    }
+    return '/scores/' + props.work.score
+  })
+
   const isExternalLink = computed(() => {
     return props.link && !props.link.endsWith('.pdf') && !props.link.startsWith('/')
   })
diff --git a/pages/works/[slug].vue b/pages/works/[slug].vue
index 9aa18e2..6c363a9 100644
--- a/pages/works/[slug].vue
+++ b/pages/works/[slug].vue
@@ -8,7 +8,7 @@
           <nav v-if="itemCount >= 2" 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>
-            <a v-if="scoreUrl" href="#score" class="hover:underline">Score</a>
+            <a v-if="scoreUrl" :href="isMobile ? scoreUrl : '#score'" class="hover:underline">Score</a>
           </nav>
         </div>
       </div>
@@ -22,7 +22,7 @@
           <ImageSlider :bucket="'images'" :gallery="gallery"></ImageSlider>
         </div>
         
-        <div id="score" v-if="scoreUrl" class="mb-8 scroll-mt-[280px]">
+        <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>
@@ -77,6 +77,11 @@ const itemCount = computed(() => {
   return count
 })
 
+const isMobile = computed(() => {
+  if (typeof window === 'undefined') return false
+  return window.innerWidth < 768
+})
+
 onMounted(() => {
   if (work.value?.soundcloud_trackid) {
     audioPlayerStore.setSoundCloudTrackID(work.value.soundcloud_trackid)