starred/audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2026-08-27 22:04:08 +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
pages/collection/_id.vue
+1 -1
View File
@@ -13,7 +13,7 @@
</h1>
<div class="flex-grow" />
<ui-btn v-if="showPlayButton" color="success" :padding-x="4" :loading="playerIsStartingForThisMedia" small class="flex items-center justify-center mx-1 w-24" @click="playClick">
<span class="material-symbols fill">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span class="material-symbols text-2xl fill">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span class="px-1 text-sm">{{ playerIsPlaying ? $strings.ButtonPause : $strings.ButtonPlay }}</span>
</ui-btn>
</div>
pages/item/_id/_episode/index.vue
+3 -3
View File
@@ -30,14 +30,14 @@
<!-- action buttons -->
<div class="flex mt-4 -mx-1">
<ui-btn color="success" class="flex items-center justify-center flex-grow mx-1" :loading="playerIsStartingForThisMedia" :padding-x="4" @click="playClick">
<span class="material-symbols fill">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span class="material-symbols text-2xl fill">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span class="px-1 text-sm">{{ playerIsPlaying ? $strings.ButtonPause : localEpisodeId ? $strings.ButtonPlay : $strings.ButtonStream }}</span>
</ui-btn>
<ui-btn v-if="showDownload" :color="downloadItem ? 'warning' : 'primary'" class="flex items-center justify-center mx-1" :padding-x="2" @click="downloadClick">
<span class="material-symbols" :class="downloadItem || startingDownload ? 'animate-pulse' : ''">{{ downloadItem || startingDownload ? 'downloading' : 'download' }}</span>
<span class="material-symbols text-2xl" :class="downloadItem || startingDownload ? 'animate-pulse' : ''">{{ downloadItem || startingDownload ? 'downloading' : 'download' }}</span>
</ui-btn>
<ui-btn color="primary" class="flex items-center justify-center mx-1" :padding-x="2" @click="showMoreMenu = true">
<span class="material-symbols">more_vert</span>
<span class="material-symbols text-2xl">more_vert</span>
</ui-btn>
</div>
pages/item/_id/index.vue
+4 -4
View File
@@ -51,18 +51,18 @@
<div class="col-span-full">
<div v-if="showPlay || showRead" class="flex mt-4 -mx-1">
<ui-btn v-if="showPlay" color="success" class="flex items-center justify-center flex-grow mx-1" :loading="playerIsStartingForThisMedia" :padding-x="4" @click="playClick">
<span class="material-symbols fill">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span class="material-symbols text-2xl fill">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span class="px-1 text-sm">{{ playerIsPlaying ? $strings.ButtonPause : isPodcast ? $strings.ButtonNextEpisode : hasLocal ? $strings.ButtonPlay : $strings.ButtonStream }}</span>
</ui-btn>
<ui-btn v-if="showRead" color="info" class="flex items-center justify-center mx-1" :class="showPlay ? '' : 'flex-grow'" :padding-x="2" @click="readBook">
<span class="material-symbols">auto_stories</span>
<span class="material-symbols text-2xl">auto_stories</span>
<span v-if="!showPlay" class="px-2 text-base">{{ $strings.ButtonRead }} {{ ebookFormat }}</span>
</ui-btn>
<ui-btn v-if="showDownload" :color="downloadItem ? 'warning' : 'primary'" class="flex items-center justify-center mx-1" :padding-x="2" @click="downloadClick">
<span class="material-symbols" :class="downloadItem || startingDownload ? 'animate-pulse' : ''">{{ downloadItem || startingDownload ? 'downloading' : 'download' }}</span>
<span class="material-symbols text-2xl" :class="downloadItem || startingDownload ? 'animate-pulse' : ''">{{ downloadItem || startingDownload ? 'downloading' : 'download' }}</span>
</ui-btn>
<ui-btn color="primary" class="flex items-center justify-center mx-1" :padding-x="2" @click="moreButtonPress">
<span class="material-symbols">more_vert</span>
<span class="material-symbols text-2xl">more_vert</span>
</ui-btn>
</div>
<ui-btn v-else-if="isMissing" color="error" :padding-x="4" small class="mt-4 flex items-center justify-center w-full" @click="clickMissingButton">
pages/media/_id/history.vue
+3 -3
View File
@@ -10,7 +10,7 @@
<p class="my-2 text-fg-muted font-semibold">{{ name }}</p>
<div v-for="(evt, index) in events" :key="index" class="py-3 flex items-center">
<p class="text-sm text-fg-muted w-12">{{ $formatDate(evt.timestamp, 'HH:mm') }}</p>
<span class="material-symbols px-1" :class="`text-${getEventColor(evt.name)}`">{{ getEventIcon(evt.name) }}</span>
<span class="material-symbols fill px-2" :class="`text-${getEventColor(evt.name)}`">{{ getEventIcon(evt.name) }}</span>
<p class="text-sm text-fg px-1">{{ evt.name }}</p>
<span v-if="evt.serverSyncAttempted && evt.serverSyncSuccess" class="material-symbols px-1 text-base text-success">cloud_done</span>
@@ -150,9 +150,9 @@ export default {
getEventIcon(name) {
switch (name) {
case 'Play':
return 'play_circle_filled'
return 'play_circle'
case 'Pause':
return 'pause_circle_filled'
return 'pause_circle'
case 'Stop':
return 'stop_circle'
case 'Save':
pages/playlist/_id.vue
+1 -1
View File
@@ -11,7 +11,7 @@
</h1>
<div class="flex-grow" />
<ui-btn v-if="showPlayButton" color="success" :padding-x="4" :loading="playerIsStartingForThisMedia" small class="flex items-center justify-center mx-1 w-24" @click="playClick">
<span class="material-symbols fill">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span class="material-symbols text-2xl fill">{{ playerIsPlaying ? 'pause' : 'play_arrow' }}</span>
<span class="px-1 text-sm">{{ playerIsPlaying ? $strings.ButtonPause : $strings.ButtonPlay }}</span>
</ui-btn>
</div>