From 54ab2d8b24d1eab183715a65ceb5094e47804214 Mon Sep 17 00:00:00 2001
From: Michael Winter <mwinter@unboundedpress.org>
Date: Fri, 6 Mar 2026 17:12:33 +0100
Subject: [PATCH] Add CSS-only mobile handling for PDFs

- Score icon: mobile downloads PDF, desktop opens modal
- Document icon: mobile downloads PDF, desktop opens modal
- Works page: mobile hides score iframe, Score link downloads PDF
- Uses pure CSS (md:hidden/hidden md:block) - no JS needed
---
 components/IconButton.vue | 36 ++++++++++++++++++++++--------------
 pages/works/[slug].vue    | 14 +++++++-------
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/components/IconButton.vue b/components/IconButton.vue
index 2cb1fa5..f2085b1 100644
--- a/components/IconButton.vue
+++ b/components/IconButton.vue
@@ -2,16 +2,29 @@
     <div class="inline-flex p-1 min-w-[25px]">
         <div v-show="visible" class="bg-black rounded-full text-xs inline-flex" >
 
-            <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>
+            <!-- Score: Mobile = PDF (downloads), Desktop = work page with hash (opens modal) -->
+            <span v-if="type === 'score'" class="md:hidden">
+                <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">
+                    <Icon name="ion:book-sharp" style="color: white" />
+                </a>
+            </span>
 
-            <a v-else-if="type === 'document'" :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>
+            <!-- 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">
+                <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>
+            </span>
 
             <a v-else-if="type === 'buy'" :href="link" :target="newTab ? '_blank' : undefined" :rel="newTab ? 'noopener noreferrer' : undefined" class="inline-flex p-1 cursor-pointer">
                 <Icon name="bxs:purchase-tag" style="color: white" />
@@ -58,11 +71,6 @@
 
   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/')) {
diff --git a/pages/works/[slug].vue b/pages/works/[slug].vue
index 6c363a9..fab50a3 100644
--- a/pages/works/[slug].vue
+++ b/pages/works/[slug].vue
@@ -8,7 +8,12 @@
           <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="isMobile ? scoreUrl : '#score'" class="hover:underline">Score</a>
+            <span class="md:hidden">
+              <a v-if="scoreUrl" :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>
           </nav>
         </div>
       </div>
@@ -22,7 +27,7 @@
           <ImageSlider :bucket="'images'" :gallery="gallery"></ImageSlider>
         </div>
         
-        <div id="score" v-if="scoreUrl && !isMobile" class="mb-8 scroll-mt-[280px]">
+        <div id="score" v-if="scoreUrl" class="mb-8 scroll-mt-[280px] hidden md:block">
           <iframe :src="scoreUrl + '#toolbar=1&navpanes=0&sidebar=0'" class="w-full h-[85vh] border"></iframe>
         </div>
       </div>
@@ -77,11 +82,6 @@ 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)