Mirrors/audiobookshelf
Mirrors/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-05-09 01:16:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

Don't use constructed tailwind classes in libraryIcon

Browse Source
This commit is contained in:
mikiher 2025-03-20 12:33:33 +02:00
parent 64b2c34031
commit bd91e466fd
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/tables/library/LibraryItem.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="w-full pl-2 pr-4 md:px-4 h-12 border border-white/10 flex items-center relative -mt-px" :class="selected ? 'bg-primary/50' : 'hover:bg-primary/25'" @mouseover="mouseover = true" @mouseleave="mouseover = false"> <div class="w-full pl-2 pr-4 md:px-4 h-12 border border-white/10 flex items-center relative -mt-px" :class="selected ? 'bg-primary/50' : 'hover:bg-primary/25'" @mouseover="mouseover = true" @mouseleave="mouseover = false">
<div v-show="selected" class="absolute top-0 left-0 h-full w-0.5 bg-warning z-10" /> <div v-show="selected" class="absolute top-0 left-0 h-full w-0.5 bg-warning z-10" />
<ui-library-icon v-if="!isScanning" :icon="library.icon" :size="6" font-size="lg md:text-xl" :class="isHovering ? 'text-white/90' : 'text-white/50'" /> <ui-library-icon v-if="!isScanning" :icon="library.icon" :size="6" font-size="text-lg md:text-xl" :class="isHovering ? 'text-white/90' : 'text-white/50'" />
<svg v-else viewBox="0 0 24 24" class="h-6 w-6 text-white/50 animate-spin"> <svg v-else viewBox="0 0 24 24" class="h-6 w-6 text-white/50 animate-spin">
<path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" /> <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
</svg> </svg>

12
client/components/ui/LibraryIcon.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div :class="`h-${size} w-${size} min-w-${size} text-${fontSize}`" class="flex items-center justify-center"> <div :class="`${classList}`" class="flex items-center justify-center">
<span class="abs-icons" :class="`icon-${iconToUse}`"></span> <span class="abs-icons" :class="`icon-${iconToUse}`"></span>
</div> </div>
</template> </template>
@ -13,7 +13,7 @@ export default {
}, },
fontSize: { fontSize: {
type: String, type: String,
default: 'lg' default: 'text-lg'
}, },
size: { size: {
type: Number, type: Number,
@ -24,6 +24,14 @@ export default {
return {} return {}
}, },
computed: { computed: {
classList() {
switch (this.size) {
case 6:
return `h-6 w-6 min-w-6 ${this.fontSize}`
default:
return `h-5 w-5 min-w-5 ${this.fontSize}`
}
},
iconToUse() { iconToUse() {
return this.icons.includes(this.icon) ? this.icon : 'audiobookshelf' return this.icons.includes(this.icon) ? this.icon : 'audiobookshelf'
}, },