Update:Clamp item descriptions to 4 lines and show more button #2614

client/assets/app.css

@@ -217,36 +217,6 @@ Bookshelf Label
   filter: blur(20px);
 }
 
-
-.episode-subtitle {
-  word-break: break-word;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  line-height: 16px;
-  /* fallback */
-  max-height: 32px;
-  /* fallback */
-  -webkit-line-clamp: 2;
-  /* number of lines to show */
-  -webkit-box-orient: vertical;
-}
-
-.episode-subtitle-long {
-  word-break: break-word;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  line-height: 16px;
-  /* fallback */
-  max-height: 72px;
-  /* fallback */
-  -webkit-line-clamp: 6;
-  /* number of lines to show */
-  -webkit-box-orient: vertical;
-}
-
-
 /* Padding for toastification toasts in the top right to not cover appbar/toolbar */
 .app-bar-and-toolbar .Vue-Toastification__container.top-right {
   padding-top: 104px;

client/components/modals/podcast/EpisodeFeed.vue

@@ -33,7 +33,7 @@
               <div class="break-words">{{ episode.title }}</div>
               <widgets-podcast-type-indicator :type="episode.episodeType" />
             </div>
-            <p v-if="episode.subtitle" class="break-words mb-1 text-sm text-gray-300 episode-subtitle">{{ episode.subtitle }}</p>
+            <p v-if="episode.subtitle" class="mb-1 text-sm text-gray-300 line-clamp-2">{{ episode.subtitle }}</p>
             <p class="text-xs text-gray-300">Published {{ episode.publishedAt ? $dateDistanceFromNow(episode.publishedAt) : 'Unknown' }}</p>
           </div>
         </div>

client/components/modals/podcast/tabs/EpisodeMatch.vue

@@ -18,7 +18,7 @@
       <div v-for="(episode, index) in episodesFound" :key="index" class="w-full py-4 border-b border-white border-opacity-5 hover:bg-gray-300 hover:bg-opacity-10 cursor-pointer px-2" @click.stop="selectEpisode(episode)">
         <p v-if="episode.episode" class="font-semibold text-gray-200">#{{ episode.episode }}</p>
         <p class="break-words mb-1">{{ episode.title }}</p>
-        <p v-if="episode.subtitle" class="break-words mb-1 text-sm text-gray-300 episode-subtitle">{{ episode.subtitle }}</p>
+        <p v-if="episode.subtitle" class="mb-1 text-sm text-gray-300 line-clamp-2">{{ episode.subtitle }}</p>
         <p class="text-xs text-gray-400">Published {{ episode.publishedAt ? $dateDistanceFromNow(episode.publishedAt) : 'Unknown' }}</p>
       </div>
     </template>

client/components/tables/podcast/LazyEpisodeRow.vue

@@ -7,8 +7,8 @@
           <widgets-podcast-type-indicator :type="episodeType" />
         </div>
 
-        <div class="h-10 flex items-center mt-1.5 mb-0.5">
+        <div class="h-10 flex items-center mt-1.5 mb-0.5 overflow-hidden">
-          <p class="text-sm text-gray-200 episode-subtitle" v-html="episodeSubtitle"></p>
+          <p class="text-sm text-gray-200 line-clamp-2" v-html="episodeSubtitle"></p>
         </div>
         <div class="h-8 flex items-center">
           <div class="w-full inline-flex justify-between max-w-xl">

client/pages/item/_id/index.vue

@@ -125,7 +125,10 @@
           </div>
 
           <div class="my-4 w-full">
-            <p class="text-base text-gray-100 whitespace-pre-line">{{ description }}</p>
+            <p ref="description" id="item-description" class="text-base text-gray-100 whitespace-pre-line mb-1" :class="{ 'show-full': showFullDescription }">{{ description }}</p>
+            <button v-if="isDescriptionClamped" class="py-0.5 flex items-center text-slate-300 hover:text-white" @click="showFullDescription = !showFullDescription">
+              {{ showFullDescription ? 'Read less' : 'Read more' }} <span class="material-icons text-xl pl-1">{{ showFullDescription ? 'expand_less' : 'expand_more' }}</span>
+            </button>
           </div>
 
           <div v-if="invalidAudioFiles.length" class="bg-error border-red-800 shadow-md p-4">
@@ -182,7 +185,9 @@ export default {
       podcastFeedEpisodes: [],
       episodesDownloading: [],
       episodeDownloadsQueued: [],
-      showBookmarksModal: false
+      showBookmarksModal: false,
+      isDescriptionClamped: false,
+      showFullDescription: false
     }
   },
   computed: {
@@ -596,10 +601,15 @@ export default {
       this.$store.commit('setBookshelfBookIds', [])
       this.$store.commit('showEditModal', this.libraryItem)
     },
+    checkDescriptionClamped() {
+      if (!this.$refs.description) return
+      this.isDescriptionClamped = this.$refs.description.scrollHeight > this.$refs.description.clientHeight
+    },
     libraryItemUpdated(libraryItem) {
       if (libraryItem.id === this.libraryItemId) {
         console.log('Item was updated', libraryItem)
         this.libraryItem = libraryItem
+        this.$nextTick(this.checkDescriptionClamped)
       }
     },
     clearProgressClick() {
@@ -756,6 +766,8 @@ export default {
     }
   },
   mounted() {
+    this.checkDescriptionClamped()
+
     this.episodeDownloadsQueued = this.libraryItem.episodeDownloadsQueued || []
     this.episodesDownloading = this.libraryItem.episodesDownloading || []
 
@@ -782,3 +794,18 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+#item-description {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+  max-height: 6.25rem;
+  transition: all 0.3s ease-in-out;
+}
+#item-description.show-full {
+  -webkit-line-clamp: unset;
+  max-height: 999rem;
+}
+</style>

client/pages/library/_library/podcast/latest.vue

@@ -45,7 +45,7 @@
                 <widgets-podcast-type-indicator :type="episode.episodeType" />
               </div>
 
-              <p class="text-sm text-gray-200 mb-4 episode-subtitle-long" v-html="episode.subtitle || episode.description" />
+              <p class="text-sm text-gray-200 mb-4 line-clamp-4" v-html="episode.subtitle || episode.description" />
 
               <div class="flex items-center">
                 <button class="h-8 px-4 border border-white border-opacity-20 hover:bg-white hover:bg-opacity-10 rounded-full flex items-center justify-center cursor-pointer focus:outline-none" :class="episode.progress && episode.progress.isFinished ? 'text-white text-opacity-40' : ''" @click.stop="playClick(episode)">