mirror of
				https://github.com/advplyr/audiobookshelf.git
				synced 2025-10-27 11:18:14 +01:00 
			
		
		
		
	Fix:Aspect ratio of authors image on authors landing page #2227
This commit is contained in:
		
							parent
							
								
									516b0b4464
								
							
						
					
					
						commit
						8c5ce6149f
					
				| @ -15,7 +15,7 @@ | |||||||
|             <div v-if="podcastAuthor" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ podcastAuthor }}</div> |             <div v-if="podcastAuthor" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ podcastAuthor }}</div> | ||||||
|             <div v-else-if="musicArtists" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ musicArtists }}</div> |             <div v-else-if="musicArtists" class="pl-1 sm:pl-1.5 text-xs sm:text-base">{{ musicArtists }}</div> | ||||||
|             <div v-else-if="authors.length" class="pl-1 sm:pl-1.5 text-xs sm:text-base"> |             <div v-else-if="authors.length" class="pl-1 sm:pl-1.5 text-xs sm:text-base"> | ||||||
|               <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}?library=${libraryId}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">, </span></nuxt-link> |               <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">, </span></nuxt-link> | ||||||
|             </div> |             </div> | ||||||
|             <div v-else class="text-xs sm:text-base cursor-pointer pl-1 sm:pl-1.5">{{ $strings.LabelUnknown }}</div> |             <div v-else class="text-xs sm:text-base cursor-pointer pl-1 sm:pl-1.5">{{ $strings.LabelUnknown }}</div> | ||||||
|             <widgets-explicit-indicator :explicit="isExplicit"></widgets-explicit-indicator> |             <widgets-explicit-indicator :explicit="isExplicit"></widgets-explicit-indicator> | ||||||
|  | |||||||
| @ -1,5 +1,5 @@ | |||||||
| <template> | <template> | ||||||
|   <nuxt-link :to="`/author/${author.id}?library=${currentLibraryId}`"> |   <nuxt-link :to="`/author/${author.id}`"> | ||||||
|     <div @mouseover="mouseover" @mouseleave="mouseleave"> |     <div @mouseover="mouseover" @mouseleave="mouseleave"> | ||||||
|       <div :style="{ width: width + 'px', height: height + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden"> |       <div :style="{ width: width + 'px', height: height + 'px' }" class="bg-primary box-shadow-book rounded-md relative overflow-hidden"> | ||||||
|         <!-- Image or placeholder --> |         <!-- Image or placeholder --> | ||||||
|  | |||||||
| @ -26,7 +26,7 @@ | |||||||
|           </div> |           </div> | ||||||
|           <div class="truncate max-w-48 md:max-w-md text-xs md:text-sm text-gray-300"> |           <div class="truncate max-w-48 md:max-w-md text-xs md:text-sm text-gray-300"> | ||||||
|             <template v-for="(author, index) in bookAuthors"> |             <template v-for="(author, index) in bookAuthors"> | ||||||
|               <nuxt-link :key="author.id" :to="`/author/${author.id}?library=${book.libraryId}`" class="truncate hover:underline">{{ author.name }}</nuxt-link |               <nuxt-link :key="author.id" :to="`/author/${author.id}`" class="truncate hover:underline">{{ author.name }}</nuxt-link | ||||||
|               ><span :key="author.id + '-comma'" v-if="index < bookAuthors.length - 1">, </span> |               ><span :key="author.id + '-comma'" v-if="index < bookAuthors.length - 1">, </span> | ||||||
|             </template> |             </template> | ||||||
|           </div> |           </div> | ||||||
|  | |||||||
| @ -21,7 +21,7 @@ | |||||||
|           </div> |           </div> | ||||||
|           <div class="truncate max-w-48 md:max-w-md text-xs md:text-sm text-gray-300"> |           <div class="truncate max-w-48 md:max-w-md text-xs md:text-sm text-gray-300"> | ||||||
|             <template v-for="(author, index) in bookAuthors"> |             <template v-for="(author, index) in bookAuthors"> | ||||||
|               <nuxt-link :key="author.id" :to="`/author/${author.id}?library=${libraryItem.libraryId}`" class="truncate hover:underline">{{ author.name }}</nuxt-link |               <nuxt-link :key="author.id" :to="`/author/${author.id}`" class="truncate hover:underline">{{ author.name }}</nuxt-link | ||||||
|               ><span :key="author.id + '-comma'" v-if="index < bookAuthors.length - 1">, </span> |               ><span :key="author.id + '-comma'" v-if="index < bookAuthors.length - 1">, </span> | ||||||
|             </template> |             </template> | ||||||
|             <nuxt-link v-if="episode" :to="`/item/${libraryItem.id}`" class="truncate hover:underline">{{ mediaMetadata.title }}</nuxt-link> |             <nuxt-link v-if="episode" :to="`/item/${libraryItem.id}`" class="truncate hover:underline">{{ mediaMetadata.title }}</nuxt-link> | ||||||
|  | |||||||
| @ -3,7 +3,7 @@ | |||||||
|     <div class="max-w-6xl mx-auto"> |     <div class="max-w-6xl mx-auto"> | ||||||
|       <div class="flex flex-wrap sm:flex-nowrap justify-center mb-6"> |       <div class="flex flex-wrap sm:flex-nowrap justify-center mb-6"> | ||||||
|         <div class="w-48 min-w-48"> |         <div class="w-48 min-w-48"> | ||||||
|           <div class="w-full h-52"> |           <div class="w-full h-60"> | ||||||
|             <covers-author-image :author="author" rounded="0" /> |             <covers-author-image :author="author" rounded="0" /> | ||||||
|           </div> |           </div> | ||||||
|         </div> |         </div> | ||||||
| @ -44,7 +44,7 @@ | |||||||
| <script> | <script> | ||||||
| export default { | export default { | ||||||
|   async asyncData({ store, app, params, redirect, query }) { |   async asyncData({ store, app, params, redirect, query }) { | ||||||
|     const author = await app.$axios.$get(`/api/authors/${params.id}?library=${query.library || store.state.libraries.currentLibraryId}&include=items,series`).catch((error) => { |     const author = await app.$axios.$get(`/api/authors/${params.id}?include=items,series`).catch((error) => { | ||||||
|       console.error('Failed to get author', error) |       console.error('Failed to get author', error) | ||||||
|       return null |       return null | ||||||
|     }) |     }) | ||||||
|  | |||||||
| @ -42,7 +42,7 @@ | |||||||
|                   <nuxt-link v-for="(artist, index) in musicArtists" :key="index" :to="`/artist/${$encode(artist)}`" class="hover:underline">{{ artist }}<span v-if="index < musicArtists.length - 1">, </span></nuxt-link> |                   <nuxt-link v-for="(artist, index) in musicArtists" :key="index" :to="`/artist/${$encode(artist)}`" class="hover:underline">{{ artist }}<span v-if="index < musicArtists.length - 1">, </span></nuxt-link> | ||||||
|                 </p> |                 </p> | ||||||
|                 <p v-else-if="authors.length" class="mb-2 mt-0.5 text-gray-200 text-lg md:text-xl max-w-[calc(100vw-2rem)] overflow-hidden overflow-ellipsis"> |                 <p v-else-if="authors.length" class="mb-2 mt-0.5 text-gray-200 text-lg md:text-xl max-w-[calc(100vw-2rem)] overflow-hidden overflow-ellipsis"> | ||||||
|                   by <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}?library=${libraryItem.libraryId}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">, </span></nuxt-link> |                   by <nuxt-link v-for="(author, index) in authors" :key="index" :to="`/author/${author.id}`" class="hover:underline">{{ author.name }}<span v-if="index < authors.length - 1">, </span></nuxt-link> | ||||||
|                 </p> |                 </p> | ||||||
|                 <p v-else class="mb-2 mt-0.5 text-gray-200 text-xl">by Unknown</p> |                 <p v-else class="mb-2 mt-0.5 text-gray-200 text-xl">by Unknown</p> | ||||||
|               </template> |               </template> | ||||||
|  | |||||||
		Loading…
	
		Reference in New Issue
	
	Block a user