From 924eeac55c4cba5b2ca15a109efb1a304dfc6eff Mon Sep 17 00:00:00 2001
From: Michael Mayer <michael@liquidbytes.net>
Date: Tue, 7 Apr 2020 02:04:15 +0200
Subject: [PATCH] Frontend: Fix links in photo list view

Signed-off-by: Michael Mayer <michael@liquidbytes.net>
---
 frontend/src/component/p-photo-details.vue |  2 +-
 frontend/src/component/p-photo-list.vue    | 20 ++++++++++++++++----
 frontend/src/css/photos.css                |  2 +-
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/frontend/src/component/p-photo-details.vue b/frontend/src/component/p-photo-details.vue
index 9da94babe..25212a725 100644
--- a/frontend/src/component/p-photo-details.vue
+++ b/frontend/src/component/p-photo-details.vue
@@ -63,7 +63,7 @@
                             </v-btn>
                         </v-img>
 
-                        <v-card-title primary-title class="pa-3 p-photo-details-desc">
+                        <v-card-title primary-title class="pa-3 p-photo-desc">
                             <div>
                                 <h3 class="body-2 mb-2" :title="photo.PhotoTitle">
                                     <button @click.exact="editPhoto(index)">
diff --git a/frontend/src/component/p-photo-list.vue b/frontend/src/component/p-photo-list.vue
index 7c45d065b..6f65221b8 100644
--- a/frontend/src/component/p-photo-list.vue
+++ b/frontend/src/component/p-photo-list.vue
@@ -18,8 +18,12 @@
                     <v-icon v-else-if="!$clipboard.has(props.item)" color="accent lighten-4">radio_button_off</v-icon>
                 </v-btn>
             </td>
-            <td @click="editPhoto(props.index)" class="p-pointer">{{ props.item.PhotoTitle }}</td>
-            <td class="hidden-xs-only">
+            <td class="p-photo-desc">
+                <button @click.stop.prevent="openPhoto(props.index)">
+                    {{ props.item.PhotoTitle }}
+                </button>
+            </td>
+            <td class="hidden-xs-only p-photo-desc">
                 <button v-if="props.item.LocationID" @click.stop.prevent="openLocation(props.index)">
                     {{ props.item.getLocation() }}
                 </button>
@@ -27,8 +31,16 @@
                     {{ props.item.getLocation() }}
                 </span>
             </td>
-            <td class="hidden-sm-and-down">{{ props.item.CameraMake }} {{ props.item.CameraModel }}</td>
-            <td :title="props.item.TakenAt | luxon:format('dd/MM/yyyy HH:mm:ss')">{{ props.item.TakenAt | luxon:locale }}</td>
+            <td class="hidden-sm-and-down p-photo-desc">
+                <button @click.stop.prevent="editPhoto(props.index)">
+                    {{ props.item.CameraMake }} {{ props.item.CameraModel }}
+                </button>
+            </td>
+            <td :title="props.item.TakenAt | luxon:format('dd/MM/yyyy HH:mm:ss')" class="p-photo-desc">
+                <button @click.stop.prevent="editPhoto(props.index)">
+                    {{ props.item.TakenAt | luxon:locale }}
+                </button>
+            </td>
             <td><v-btn icon small flat :ripple="false"
                        class="p-photo-like"
                        @click.stop.prevent="props.item.toggleLike()">
diff --git a/frontend/src/css/photos.css b/frontend/src/css/photos.css
index d2b7e68b2..4a7d27704 100644
--- a/frontend/src/css/photos.css
+++ b/frontend/src/css/photos.css
@@ -38,6 +38,6 @@
     background-color: rgba(100,100,100,0.5) !important;
 }
 
-#photoprism .p-photo-details-desc button {
+#photoprism .p-photo-desc button {
     text-align: left;
 }