From f87960e60493f424bb7b171b4ba718ea13ce0d0c Mon Sep 17 00:00:00 2001
From: Greg Lorenzen <gregorylorenzen@gmail.com>
Date: Tue, 23 Jul 2024 05:42:00 +0000
Subject: [PATCH] Update tooltip text formatting and include user progress

---
 client/components/cards/LazyBookCard.vue | 24 +++++++++++-------------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/client/components/cards/LazyBookCard.vue b/client/components/cards/LazyBookCard.vue
index eefc31050..d4f29ca74 100644
--- a/client/components/cards/LazyBookCard.vue
+++ b/client/components/cards/LazyBookCard.vue
@@ -1115,22 +1115,20 @@ export default {
       // Truncate the description if it exceeds the maximum length
       const truncatedDescription = this.description.length > maxLength ? this.description.substring(0, maxLength) + '...' : this.description
 
+      // Get the duration of the media
       const duration = this.media.duration ? this.$elapsedPrettyExtended(this.media.duration, false) : ''
-
-      // Determine the vertical alignment of the duration based on the length of the description
-      const durationVerticalAlign = this.description.length < 200 ? 'top' : 'middle'
+      // Get user progress
+      const elapsedPretty = this.userProgress ? this.$elapsedPrettyExtended(this.userProgress.currentTime, true) : ''
 
       // Build the tooltip text using a table format
-      let tooltipText = '<table style="text-align: left; width: 100%;">'
-      tooltipText += '<tr>'
-      tooltipText += `<th style="padding-right: 10px;"><strong>${this.$strings.LabelDuration}</strong></th>`
-      tooltipText += `<th><strong>${this.$strings.LabelDescription}</strong></th>`
-      tooltipText += '</tr>'
-      tooltipText += '<tr>'
-      tooltipText += `<td style="padding-right: 10px; vertical-align: ${durationVerticalAlign}; white-space: nowrap;">${duration}</td>`
-      tooltipText += `<td>${truncatedDescription}</td>`
-      tooltipText += '</tr>'
-      tooltipText += '</table>'
+      let tooltipText = '<div style="text-align: left; width: 100%;">'
+      if (elapsedPretty) {
+        tooltipText += `<div style="font-style: italic; margin-bottom: 5px;">${elapsedPretty} / ${duration}</div>`
+      } else {
+        tooltipText += `<div style="font-style: italic; margin-bottom: 5px;">${duration}</div>`
+      }
+      tooltipText += `<div>${truncatedDescription}</div>`
+      tooltipText += '</div>'
 
       return tooltipText
     }