Add: db error recovery check, Fix: bookmarks modal UI overflow #115

This commit is contained in:
advplyr 2021-11-03 19:12:17 -05:00
parent f7a780032f
commit f212ea91f9
5 changed files with 71 additions and 7 deletions

View file

@ -3,7 +3,7 @@
<nuxt-link :to="`/audiobook/${streamAudiobook.id}`" class="absolute -top-16 left-4 cursor-pointer">
<cards-book-cover :audiobook="streamAudiobook" :width="88" />
</nuxt-link>
<div class="flex items-center pl-24">
<div class="flex items-start pl-24">
<div>
<nuxt-link :to="`/audiobook/${streamAudiobook.id}`" class="hover:underline cursor-pointer text-lg">
{{ title }} <span v-if="stream && $isDev" class="text-xs text-gray-400">({{ stream.id }})</span>
@ -22,7 +22,7 @@
</div>
</div>
<div class="flex-grow" />
<span v-if="stream" class="material-icons px-4 cursor-pointer" @click="cancelStream">close</span>
<span v-if="stream" class="material-icons p-4 cursor-pointer" @click="cancelStream">close</span>
</div>
<audio-player ref="audioPlayer" :chapters="chapters" :loading="isLoading" :bookmarks="bookmarks" @close="cancelStream" @updateTime="updateTime" @loaded="(d) => (totalDuration = d)" @showBookmarks="showBookmarks" @hook:mounted="audioPlayerMounted" />

View file

@ -11,8 +11,8 @@
<div class="w-full h-px bg-white bg-opacity-10" />
<form @submit.prevent="submitCreateBookmark">
<div v-show="canCreateBookmark" class="flex px-4 py-2 items-center text-center border-b border-white border-opacity-10 text-white text-opacity-80">
<div class="w-16 text-center">
<p class="text-sm font-mono">
<div class="w-16 max-w-16 text-center">
<p class="text-sm font-mono text-gray-400">
{{ this.$secondsToTimestamp(currentTime) }}
</p>
</div>

View file

@ -1,12 +1,12 @@
<template>
<div :key="bookmark.id" :id="`bookmark-row-${bookmark.id}`" class="flex items-center px-4 py-4 justify-start relative hover:bg-bg" :class="wrapperClass" @click="click" @mouseover="mouseover" @mouseleave="mouseleave">
<!-- <span class="material-icons" :class="highlight ? 'text-success' : 'text-white text-opacity-80'">{{ highlight ? 'bookmark' : 'bookmark_border' }}</span> -->
<div class="w-12 min-w-12 text-center">
<p class="text-sm font-mono text-white text-opacity-80">
<div class="w-16 max-w-16 text-center">
<p class="text-sm font-mono text-gray-400">
{{ this.$secondsToTimestamp(bookmark.time) }}
</p>
</div>
<div class="flex-grow overflow-hidden">
<div class="flex-grow overflow-hidden px-2">
<template v-if="isEditing">
<form @submit.prevent="submitUpdate">
<div class="flex items-center">

View file

@ -20,6 +20,7 @@ module.exports = {
maxWidth: {
'6': '1.5rem',
'12': '3rem',
'16': '4rem',
'24': '6rem',
'32': '8rem',
'48': '12rem',