mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-08-04 10:04:39 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Metadata Table Alignment

Browse source 
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.
This commit is contained in:
Lars Kiesow 2023-01-08 17:04:08 +01:00
parent d85158bd70
commit ea6bb0a847
No known key found for this signature in database
GPG key ID: 5DAFE8D9C823CE73
1 changed files with 15 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

31
pages/item/_id.vue
View file

@ -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>