Show numItems and numBooks on search cards

This commit is contained in:
advplyr 2024-07-21 11:07:54 -05:00
parent 3223011b13
commit a191dab359
6 changed files with 25 additions and 13 deletions

View File

@ -5,6 +5,7 @@
</div>
<div class="flex-grow px-2 authorSearchCardContent h-full">
<p class="truncate text-sm">{{ name }}</p>
<p class="text-xs text-gray-400">{{ $getString('LabelXBooks', [numBooks]) }}</p>
</div>
</div>
</template>
@ -23,6 +24,9 @@ export default {
computed: {
name() {
return this.author.name
},
numBooks() {
return this.author.numBooks
}
},
methods: {},
@ -33,9 +37,9 @@ export default {
<style>
.authorSearchCardContent {
width: calc(100% - 80px);
height: 40px;
height: 44px;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
</style>

View File

@ -5,6 +5,7 @@
</div>
<div class="flex-grow px-2 tagSearchCardContent h-full">
<p class="truncate text-sm">{{ genre }}</p>
<p class="text-xs text-gray-400">{{ $getString('LabelXItems', [numItems]) }}</p>
</div>
</div>
</template>
@ -12,7 +13,8 @@
<script>
export default {
props: {
genre: String
genre: String,
numItems: Number
},
data() {
return {}
@ -26,7 +28,7 @@ export default {
<style>
.tagSearchCardContent {
width: calc(100% - 40px);
height: 40px;
height: 44px;
display: flex;
flex-direction: column;
justify-content: center;

View File

@ -5,6 +5,7 @@
</div>
<div class="flex-grow px-2 narratorSearchCardContent h-full">
<p class="truncate text-sm">{{ narrator }}</p>
<p class="text-xs text-gray-400">{{ $getString('LabelXBooks', [numBooks]) }}</p>
</div>
</div>
</template>
@ -12,7 +13,8 @@
<script>
export default {
props: {
narrator: String
narrator: String,
numBooks: Number
},
data() {
return {}
@ -26,9 +28,9 @@ export default {
<style scoped>
.narratorSearchCardContent {
width: calc(100% - 40px);
height: 40px;
height: 44px;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
</style>

View File

@ -5,6 +5,7 @@
</div>
<div class="flex-grow px-2 tagSearchCardContent h-full">
<p class="truncate text-sm">{{ tag }}</p>
<p class="text-xs text-gray-400">{{ $getString('LabelXItems', [numItems]) }}</p>
</div>
</div>
</template>
@ -12,7 +13,8 @@
<script>
export default {
props: {
tag: String
tag: String,
numItems: Number
},
data() {
return {}
@ -26,9 +28,9 @@ export default {
<style>
.tagSearchCardContent {
width: calc(100% - 40px);
height: 40px;
height: 44px;
display: flex;
flex-direction: column;
justify-content: center;
}
</style>
</style>

View File

@ -61,7 +61,7 @@
<template v-for="item in tagResults">
<li :key="`tag.${item.name}`" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
<nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=tags.${$encode(item.name)}`">
<cards-tag-search-card :tag="item.name" />
<cards-tag-search-card :tag="item.name" :num-items="item.numItems" />
</nuxt-link>
</li>
</template>
@ -70,7 +70,7 @@
<template v-for="item in genreResults">
<li :key="`genre.${item.name}`" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
<nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=genres.${$encode(item.name)}`">
<cards-genre-search-card :genre="item.name" />
<cards-genre-search-card :genre="item.name" :num-items="item.numItems" />
</nuxt-link>
</li>
</template>
@ -79,7 +79,7 @@
<template v-for="narrator in narratorResults">
<li :key="narrator.name" class="text-gray-50 select-none relative cursor-pointer hover:bg-black-400 py-1" role="option" @click="clickOption">
<nuxt-link :to="`/library/${currentLibraryId}/bookshelf?filter=narrators.${$encode(narrator.name)}`">
<cards-narrator-search-card :narrator="narrator.name" />
<cards-narrator-search-card :narrator="narrator.name" :num-books="narrator.numBooks" />
</nuxt-link>
</li>
</template>

View File

@ -611,6 +611,8 @@
"LabelViewQueue": "View player queue",
"LabelVolume": "Volume",
"LabelWeekdaysToRun": "Weekdays to run",
"LabelXBooks": "{0} books",
"LabelXItems": "{0} items",
"LabelYearReviewHide": "Hide Year in Review",
"LabelYearReviewShow": "See Year in Review",
"LabelYourAudiobookDuration": "Your audiobook duration",