From ea6bb0a8478fc3bd6b2a32f09846ae897ad74f06 Mon Sep 17 00:00:00 2001
From: Lars Kiesow <lkiesow@uos.de>
Date: Sun, 8 Jan 2023 17:04:08 +0100
Subject: [PATCH] Metadata Table Alignment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This patch updates the metadata table in the book details view, turning
it into a CSS grid layout. This fixes a few issues with the current
layout:

- Keys and values are not vertically aligned with the value being
  displayed a little bit above the baseline of the key.
- There is no horizontal alignment of the table columns. In fact, it is
  technically not a table despite the CSS being tuned to almost look
  like one. Just turning this into a real grid looks cleaner.
- The code for making multi-line values not wrap is broken. This fixes
  the problem.

This also renames “Publish Year” to “Published”. Mainly because it is
shorter.
---
 pages/item/_id.vue | 31 +++++++++++++++----------------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/pages/item/_id.vue b/pages/item/_id.vue
index 2313ba41..afb3b9ac 100644
--- a/pages/item/_id.vue
+++ b/pages/item/_id.vue
@@ -35,33 +35,32 @@
     <p v-if="isLocal && serverLibraryItemId" style="font-size: 10px" class="text-success py-1 uppercase tracking-widest">connected</p>
     <p v-else-if="isLocal && libraryItem.serverAddress" style="font-size: 10px" class="text-gray-400 py-1">{{ libraryItem.serverAddress }}</p>
 
-    <div v-if="narrators && narrators.length" class="flex py-0.5 mt-4">
-      <div class="w-24">
-        <span class="text-white text-opacity-60 uppercase text-xs">Narrators</span>
+    <!-- metadata -->
+    <div class="grid gap-2 my-4" style="grid-template-columns: max-content auto;">
+      <div v-if="narrators.length" class="text-white text-opacity-60 uppercase text-sm">
+        Narrators
       </div>
-      <div class="max-w-[calc(100vw-10rem)] overflow-hidden overflow-ellipsis text-sm">
+      <div v-if="narrators.length" class="truncate text-sm">
         <template v-for="(narrator, index) in narrators">
           <nuxt-link :key="narrator" :to="`/bookshelf/library?filter=narrators.${$encode(narrator)}`">{{ narrator }}</nuxt-link
-          ><span :key="index" v-if="index < narrators.length - 1">,&nbsp;</span>
+          ><span :key="index" v-if="index < narrators.length - 1">, </span>
         </template>
       </div>
-    </div>
-    <div v-if="publishedYear" class="flex py-0.5">
-      <div class="w-24">
-        <span class="text-white text-opacity-60 uppercase text-xs">Publish Year</span>
+
+      <div v-if="publishedYear" class="text-white text-opacity-60 uppercase text-sm">
+        Published
       </div>
-      <div class="text-sm">
+      <div v-if="publishedYear" class="text-sm">
         {{ publishedYear }}
       </div>
-    </div>
-    <div class="flex py-0.5" v-if="genres.length">
-      <div class="w-24">
-        <span class="text-white text-opacity-60 uppercase text-xs">Genres</span>
+
+      <div v-if="genres.length" class="text-white text-opacity-60 uppercase text-sm">
+        Genres
       </div>
-      <div class="max-w-[calc(100vw-10rem)] overflow-hidden overflow-ellipsis text-sm">
+      <div v-if="genres.length" class="truncate text-sm">
         <template v-for="(genre, index) in genres">
           <nuxt-link :key="genre" :to="`/bookshelf/library?filter=genres.${$encode(genre)}`" class="hover:underline">{{ genre }}</nuxt-link
-          ><span :key="index" v-if="index < genres.length - 1">,&nbsp;</span>
+          ><span :key="index" v-if="index < genres.length - 1">, </span>
         </template>
       </div>
     </div>