starred/audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2026-08-08 04:48:36 +02:00
Code Issues 454 Packages Projects Releases 10 Wiki Activity

Fix: icon sizing and alignment issues

Browse Source
This commit is contained in:
Nicholas Wallace
2025-03-31 00:02:45 -07:00
parent 71f6f53111
commit e119672336
12 changed files with 55 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/cards/LazyListBookCard.vue
+1 -1
View File
@@ -31,7 +31,7 @@
</div>
<div v-if="localLibraryItem || isLocal" class="absolute top-0 right-0 z-20" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
<span class="material-symbol text-2xl text-success">download_done</span>
<span class="material-symbols text-2xl text-success">download_done</span>
</div>
</div>
</div>
components/home/BookshelfNavBar.vue
+1
View File
@@ -119,6 +119,7 @@ export default {
routeName: 'bookshelf-playlists',
iconPack: 'material-symbols',
icon: 'queue_music',
iconClass: 'text-2xl',
text: this.$strings.ButtonPlaylists
})
}
components/tables/collection/BookTableRow.vue
+1 -1
View File
@@ -13,7 +13,7 @@
</div>
<div class="w-8 min-w-8 flex justify-center">
<button v-if="showPlayBtn" class="w-8 h-8 rounded-full border border-white border-opacity-20 flex items-center justify-center" @click.stop.prevent="playClick">
<span class="material-symbols fill" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span class="material-symbols text-2xl fill" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
</button>
</div>
</nuxt-link>
components/tables/playlist/ItemTableRow.vue
+1 -1
View File
@@ -14,7 +14,7 @@
</div>
<div class="w-8 min-w-8 flex justify-center">
<button v-if="showPlayBtn" class="w-8 h-8 rounded-full border border-white/20 flex items-center justify-center" @click.stop.prevent="playClick">
<span v-if="!playerIsStartingForThisMedia" class="material-symbols fill" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span v-if="!playerIsStartingForThisMedia" class="material-symbols text-2xl fill" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
<svg v-else class="animate-spin" style="width: 18px; height: 18px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
</svg>
components/tables/podcast/EpisodeRow.vue
+19 -10
View File
@@ -29,26 +29,35 @@
</div>
<div class="flex items-center pt-2">
<div class="h-8 px-4 border border-border rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
<span v-if="!playerIsStartingForThisMedia" class="material-symbols fill" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
<svg v-else class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
<!-- Play/Pause Button -->
<div class="h-10 px-4 border border-border rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick">
<span v-if="!playerIsStartingForThisMedia" class="material-symbols text-2xl fill leading-none" :class="streamIsPlaying ? '' : 'text-success'">
{{ streamIsPlaying ? 'pause' : 'play_arrow' }}
</span>
<svg v-else class="animate-spin" style="width: 28px; height: 28px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
</svg>
<p class="pl-2 pr-1 text-sm font-semibold">{{ timeRemaining }}</p>
</div>
<ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
<!-- Read Status Button -->
<ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1" @click="toggleFinished" />
<button v-if="!isLocal" class="mx-1.5 mt-1.5" @click.stop="addToPlaylist">
<span class="material-symbols text-2xl">playlist_add</span>
<!-- Add to Playlist Button -->
<button v-if="!isLocal" class="mx-1.5" @click.stop="addToPlaylist">
<span class="material-symbols text-2xl leading-none">playlist_add</span>
</button>
<div v-if="userCanDownload">
<span v-if="isLocal" class="material-symbols px-2 text-success text-lg">audio_file</span>
<span v-else-if="!localEpisode" class="material-symbols mx-1.5 mt-2 text-xl" :class="downloadItem || startingDownload ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">{{ downloadItem || startingDownload ? 'downloading' : 'download' }}</span>
<span v-else class="material-symbols px-2 text-success text-xl">download_done</span>
<!-- Download Section -->
<div v-if="userCanDownload" class="flex items-center">
<span v-if="isLocal" class="material-symbols px-2 text-success text-2xl leading-none">audio_file</span>
<span v-else-if="!localEpisode" class="material-symbols mx-1.5 text-2xl leading-none" :class="downloadItem || startingDownload ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">
{{ downloadItem || startingDownload ? 'downloading' : 'download' }}
</span>
<span v-else class="material-symbols px-2 text-success text-2xl leading-none">download_done</span>
</div>
<!-- Spacer to push elements left -->
<div class="flex-grow" />
</div>
</div>
components/tables/podcast/LatestEpisodeRow.vue
+19 -10
View File
@@ -27,26 +27,35 @@
</div>
<div class="flex items-center pt-2">
<div class="h-8 px-4 border border-border hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-fg text-opacity-40' : ''" @click.stop="playClick">
<span v-if="!playerIsStartingForThisMedia" class="material-symbols fill" :class="streamIsPlaying ? '' : 'text-success'">{{ streamIsPlaying ? 'pause' : 'play_arrow' }}</span>
<svg v-else class="animate-spin" style="width: 24px; height: 24px" viewBox="0 0 24 24">
<!-- Play/Pause Button -->
<div class="h-9 px-4 border border-border hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer" :class="userIsFinished ? 'text-fg text-opacity-40' : ''" @click.stop="playClick">
<span v-if="!playerIsStartingForThisMedia" class="material-symbols text-2xl fill leading-none" :class="streamIsPlaying ? '' : 'text-success'">
{{ streamIsPlaying ? 'pause' : 'play_arrow' }}
</span>
<svg v-else class="animate-spin" style="width: 22px; height: 22px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
</svg>
<p class="pl-2 pr-1 text-sm font-semibold">{{ timeRemaining }}</p>
</div>
<ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1 mt-0.5" @click="toggleFinished" />
<!-- Read Status Button -->
<ui-read-icon-btn :disabled="isProcessingReadUpdate" :is-read="userIsFinished" borderless class="mx-1" @click="toggleFinished" />
<button v-if="!isLocal" class="mx-1.5 mt-1.5" @click.stop="addToPlaylist">
<span class="material-symbols text-2xl">playlist_add</span>
<!-- Add to Playlist Button -->
<button v-if="!isLocal" class="mx-1.5" @click.stop="addToPlaylist">
<span class="material-symbols text-2xl leading-none">playlist_add</span>
</button>
<div v-if="userCanDownload">
<span v-if="isLocal" class="material-symbols px-2 text-success text-lg">audio_file</span>
<span v-else-if="!localEpisode" class="material-symbols mx-1.5 mt-2 text-xl" :class="downloadItem || pendingDownload ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">{{ downloadItem || pendingDownload ? 'downloading' : 'download' }}</span>
<span v-else class="material-symbols px-2 text-success text-xl">download_done</span>
<!-- Download Section -->
<div v-if="userCanDownload" class="flex items-center">
<span v-if="isLocal" class="material-symbols px-2 text-success text-2xl leading-none">audio_file</span>
<span v-else-if="!localEpisode" class="material-symbols mx-1.5 text-2xl leading-none" :class="downloadItem || pendingDownload ? 'animate-bounce text-warning text-opacity-75' : ''" @click.stop="downloadClick">
{{ downloadItem || pendingDownload ? 'downloading' : 'download' }}
</span>
<span v-else class="material-symbols px-2 text-success text-2xl leading-none">download_done</span>
</div>
<!-- Spacer to push elements left -->
<div class="flex-grow" />
</div>
</div>
components/ui/IconBtn.vue
+1 -1
View File
@@ -5,7 +5,7 @@
<path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
</svg>
</div>
<span v-else class="material-symbols" :class="{ fill: !outlined }" :style="{ fontSize }">{{ icon }}</span>
<span v-else class="material-symbols text-2xl" :class="{ fill: !outlined }" :style="{ fontSize }">{{ icon }}</span>
</button>
</template>