Cutlery/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-07-09 03:04:08 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fix chapter table on audiobook tools page uneven column widths

Browse Source
This commit is contained in:
advplyr 2025-06-07 17:10:23 -05:00
parent 4a3eb7727b
commit 0c5d05d319
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
client/pages/audiobook/_id/manage.vue
View File

@ -28,14 +28,14 @@
<div class="flex justify-center flex-wrap lg:flex-nowrap gap-4"> <div class="flex justify-center flex-wrap lg:flex-nowrap gap-4">
<div class="w-full max-w-2xl border border-white/10 bg-bg"> <div class="w-full max-w-2xl border border-white/10 bg-bg">
<div class="flex py-2 px-4"> <div class="flex py-2 px-4">
<div class="w-1/3 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelMetaTag }}</div> <div class="w-28 min-w-28 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelMetaTag }}</div>
<div class="w-2/3 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelValue }}</div> <div class="grow text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelValue }}</div>
</div> </div>
<div class="w-full max-h-72 overflow-auto"> <div class="w-full max-h-72 overflow-auto">
<template v-for="(value, key, index) in metadataObject"> <template v-for="(value, key, index) in metadataObject">
<div :key="key" class="flex py-1 px-4 text-sm" :class="index % 2 === 0 ? 'bg-primary/25' : ''"> <div :key="key" class="flex py-1 px-4 text-sm" :class="index % 2 === 0 ? 'bg-primary/25' : ''">
<div class="w-1/3 font-semibold">{{ key }}</div> <div class="w-28 min-w-28 font-semibold">{{ key }}</div>
<div class="w-2/3"> <div class="grow">
{{ value }} {{ value }}
</div> </div>
</div> </div>
@ -45,18 +45,18 @@
<div class="w-full max-w-2xl border border-white/10 bg-bg"> <div class="w-full max-w-2xl border border-white/10 bg-bg">
<div class="flex py-2 px-4 bg-primary/25"> <div class="flex py-2 px-4 bg-primary/25">
<div class="grow text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelChapterTitle }}</div> <div class="grow text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelChapterTitle }}</div>
<div class="w-24 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelStart }}</div> <div class="w-16 min-w-16 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelStart }}</div>
<div class="w-24 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelEnd }}</div> <div class="w-16 min-w-16 text-xs font-semibold uppercase text-gray-200">{{ $strings.LabelEnd }}</div>
</div> </div>
<div class="w-full max-h-72 overflow-auto"> <div class="w-full max-h-72 overflow-auto">
<p v-if="!metadataChapters.length" class="py-5 text-center text-gray-200">{{ $strings.MessageNoChapters }}</p> <p v-if="!metadataChapters.length" class="py-5 text-center text-gray-200">{{ $strings.MessageNoChapters }}</p>
<template v-for="(chapter, index) in metadataChapters"> <template v-for="(chapter, index) in metadataChapters">
<div :key="index" class="flex py-1 px-4 text-sm" :class="index % 2 === 1 ? 'bg-primary/25' : ''"> <div :key="index" class="flex py-1 px-4 text-sm" :class="index % 2 === 1 ? 'bg-primary/25' : ''">
<div class="grow font-semibold">{{ chapter.title }}</div> <div class="grow font-semibold">{{ chapter.title }}</div>
<div class="w-24"> <div class="w-16 min-w-16">
{{ $secondsToTimestamp(chapter.start) }} {{ $secondsToTimestamp(chapter.start) }}
</div> </div>
<div class="w-24"> <div class="w-16 min-w-16">
{{ $secondsToTimestamp(chapter.end) }} {{ $secondsToTimestamp(chapter.end) }}
</div> </div>
</div> </div>