mirror/advplyr.audiobookshelf-app
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf-app.git synced 2025-08-31 15:19:34 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix description line clamp show more

Browse source
This commit is contained in:
advplyr 2023-03-06 15:51:11 -06:00
parent 3963ffa0e2
commit c590087578
1 changed files with 8 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

12
pages/item/_id/index.vue
View file

@ -117,10 +117,10 @@
<div v-if="publishedYear" class="text-sm">{{ publishedYear }}</div> <div v-if="publishedYear" class="text-sm">{{ publishedYear }}</div>
</div> </div>
<div class="w-full py-2"> <div v-if="description" class="w-full py-2">
<p ref="description" class="text-sm text-justify whitespace-pre-line font-light" :class="{ 'line-clamp-4': !showFullDescription }" style="hyphens: auto">{{ description }}</p> <p ref="description" class="text-sm text-justify whitespace-pre-line font-light" :class="{ 'line-clamp-4': !showFullDescription }" style="hyphens: auto">{{ description }}</p>
<div class="text-white text-sm py-2" @click="showFullDescription = !showFullDescription"> <div v-if="descriptionClamped" class="text-white text-sm py-2" @click="showFullDescription = !showFullDescription">
{{ showFullDescription ? 'Read less' : 'Read more' }} {{ showFullDescription ? 'Read less' : 'Read more' }}
<span class="material-icons align-middle text-base -mt-px">{{ showFullDescription ? 'expand_less' : 'expand_more' }}</span> <span class="material-icons align-middle text-base -mt-px">{{ showFullDescription ? 'expand_less' : 'expand_more' }}</span>
</div> </div>
@ -722,8 +722,12 @@ export default {
} }
}, },
checkDescriptionClamped() { checkDescriptionClamped() {
if (!this.$refs.description || this.showFullDescription) return if (this.showFullDescription) return
this.descriptionClamped = this.$refs.description.scrollHeight > this.$refs.description.clientHeight if (!this.$refs.description) {
this.descriptionClamped = false
} else {
this.descriptionClamped = this.$refs.description.scrollHeight > this.$refs.description.clientHeight
}
}, },
windowResized() { windowResized() {
this.windowWidth = window.innerWidth this.windowWidth = window.innerWidth