From bf9cb5ddecfbd7df0695d2f07a26fea4b7768eb2 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Sun, 31 Oct 2021 15:31:03 -0500
Subject: [PATCH] Fix: List view overflowing titles #149

---
 client/components/app/BookListRow.vue      |  8 +++--
 client/components/cards/HoverBookCover.vue | 41 ++++++++++++++++++++++
 2 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 client/components/cards/HoverBookCover.vue

diff --git a/client/components/app/BookListRow.vue b/client/components/app/BookListRow.vue
index 7a33bc8b..17519e9a 100644
--- a/client/components/app/BookListRow.vue
+++ b/client/components/app/BookListRow.vue
@@ -8,11 +8,13 @@
       </div>
     </td>
     <td class="body-cell min-w-6 max-w-6">
-      <cards-book-cover :width="24" :audiobook="book" />
+      <cards-hover-book-cover :audiobook="book" />
     </td>
     <td class="body-cell min-w-64 max-w-64 px-2">
-      <nuxt-link :to="`/audiobook/${book.id}`" class="truncate hover:underline">
-        {{ book.book.title }}<span v-if="book.book.subtitle">: {{ book.book.subtitle }}</span>
+      <nuxt-link :to="`/audiobook/${book.id}`" class="hover:underline">
+        <p class="truncate">
+          {{ book.book.title }}<span v-if="book.book.subtitle">: {{ book.book.subtitle }}</span>
+        </p>
       </nuxt-link>
     </td>
     <td class="body-cell min-w-48 max-w-48 px-2">
diff --git a/client/components/cards/HoverBookCover.vue b/client/components/cards/HoverBookCover.vue
new file mode 100644
index 00000000..db50974b
--- /dev/null
+++ b/client/components/cards/HoverBookCover.vue
@@ -0,0 +1,41 @@
+<template>
+  <div ref="container" @mouseover="mouseover" @mouseleave="mouseleave" class="relative">
+    <cards-book-cover :width="24" :audiobook="audiobook" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    audiobook: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      isHovering: false
+    }
+  },
+  computed: {
+    placeholderUrl() {
+      return '/book_placeholder.jpg'
+    },
+    fullCoverUrl() {
+      return this.$store.getters['audiobooks/getBookCoverSrc'](this.audiobook, this.placeholderUrl)
+    },
+    hasCover() {
+      return !!this.audiobook.book.cover
+    }
+  },
+  methods: {
+    mouseover() {
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    }
+  },
+  mounted() {}
+}
+</script>
\ No newline at end of file