extern/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2024-10-05 17:52:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix:Long library names overflow #858

Browse Source
This commit is contained in:
advplyr 2022-07-26 18:54:32 -05:00
parent 6244909332
commit 3b4ac3a230
5 changed files with 18 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/components/app/Appbar.vue
View File

@ -3,14 +3,14 @@
<div id="appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-2 md:px-6 py-1 z-50">
<div class="flex h-full items-center">
<nuxt-link to="/">
<img src="/icon48.png" class="w-8 h-8 mr-8 sm:w-12 sm:h-12 sm:mr-4" />
<img src="/icon48.png" class="w-10 min-w-10 h-10 mr-2 sm:w-12 sm:min-w-12 sm:h-12 sm:mr-4" />
</nuxt-link>
<nuxt-link to="/">
<h1 class="text-2xl font-book mr-6 hidden lg:block hover:underline">audiobookshelf</h1>
</nuxt-link>
<ui-libraries-dropdown />
<ui-libraries-dropdown class="mr-2" />
<controls-global-search v-if="currentLibrary" class="" />
<div class="flex-grow" />

2
client/components/controls/GlobalSearch.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="sm:w-80 w-full sm:ml-6 relative">
<div class="sm:w-80 w-full relative">
<form @submit.prevent="submitSearch">
<ui-text-input ref="input" v-model="search" placeholder="Search.." @input="inputUpdate" @focus="focussed" @blur="blurred" class="w-full h-8 text-sm" />
</form>

18
client/components/ui/LibrariesDropdown.vue
View File

@ -1,18 +1,18 @@
<template>
<div v-if="currentLibrary" class="relative sm:w-36 h-8 px-1.5" v-click-outside="clickOutsideObj">
<button type="button" :disabled="disabled" class="w-10 sm:w-36 relative h-full border border-white border-opacity-10 hover:border-opacity-20 rounded shadow-sm px-2 text-left text-sm focus:outline-none cursor-pointer bg-black bg-opacity-20 text-gray-400 hover:text-gray-200" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
<span class="flex items-center justify-center sm:justify-start">
<widgets-library-icon :icon="currentLibraryIcon" class="sm:mr-2" />
<span class="hidden sm:block">{{ currentLibrary.name }}</span>
</span>
<div v-if="currentLibrary" class="relative h-8 max-w-52" v-click-outside="clickOutsideObj">
<button type="button" :disabled="disabled" class="w-10 sm:w-full relative h-full border border-white border-opacity-10 hover:border-opacity-20 rounded shadow-sm px-2 text-left text-sm focus:outline-none cursor-pointer bg-black bg-opacity-20 text-gray-400 hover:text-gray-200" aria-haspopup="listbox" :aria-expanded="showMenu" @click.stop.prevent="clickShowMenu">
<div class="flex items-center justify-center sm:justify-start">
<widgets-library-icon :icon="currentLibraryIcon" class="sm:mr-1.5" />
<span class="hidden sm:block truncate">{{ currentLibrary.name }}</span>
</div>
</button>
<transition name="menu">
<ul v-show="showMenu" class="absolute z-10 -mt-px w-36 bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
<ul v-show="showMenu" class="absolute z-10 -mt-px min-w-48 w-full bg-primary border border-black-200 shadow-lg max-h-56 rounded-b-md py-1 ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" tabindex="-1" role="listbox">
<template v-for="library in librariesFiltered">
<li :key="library.id" class="text-gray-100 select-none relative py-2 cursor-pointer hover:bg-black-400" id="listbox-option-0" role="option" @click="selectLibrary(library)">
<div class="flex items-center px-3">
<widgets-library-icon :icon="library.icon" class="mr-2" />
<div class="flex items-center px-2">
<widgets-library-icon :icon="library.icon" class="mr-1.5 text-gray-400" />
<span class="font-normal block truncate font-sans text-sm">{{ library.name }}</span>
</div>
</li>

2
client/components/widgets/LibraryIcon.vue
View File

@ -1,5 +1,5 @@
<template>
<div :class="`h-${size} w-${size}`">
<div :class="`h-${size} w-${size} min-w-${size}`">
<component :is="iconComponentName" />
</div>
</template>

6
client/tailwind.config.js
View File

@ -14,7 +14,8 @@ module.exports = {
'text-green-500',
'py-1.5',
'bg-info',
'px-1.5'
'px-1.5',
'min-w-5'
],
},
theme: {
@ -36,11 +37,14 @@ module.exports = {
'32': '8rem',
'40': '10rem',
'48': '12rem',
'52': '13rem',
'64': '16rem',
'80': '20rem'
},
minWidth: {
'5': '1.25rem',
'6': '1.5rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',