Enforce a readable line length for Read More

Kareadita · Dec 7, 2024 · cdd60aa · cdd60aa
1 parent bcfb4a6
commit cdd60aa
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 6 deletions.
diff --git a/UI/Web/src/app/chapter-detail/chapter-detail.component.html b/UI/Web/src/app/chapter-detail/chapter-detail.component.html
@@ -85,7 +85,7 @@ <h4 class="title mb-2">
           </div>
 
           <div class="mt-2 mb-3">
-            <app-read-more [text]="chapter.summary || ''" [maxLength]="utilityService.getActiveBreakpoint() >= Breakpoint.Desktop ? 585 : 250"></app-read-more>
+            <app-read-more [text]="chapter.summary || ''" [maxLength]="utilityService.getActiveBreakpoint() >= Breakpoint.Desktop ? 170 : 200"></app-read-more>
           </div>
 
           <div class="mt-2">

diff --git a/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.html b/UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.html
@@ -41,7 +41,7 @@ <h5 subtitle class="subtitle-with-actionables">{{t('item-count', {num: series.le
             <div class="col-md-10 col-xs-8 col-sm-6 mt-2">
               @if (summary.length > 0) {
                 <div class="mb-2">
-                  <app-read-more [text]="summary" [maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 585 : 200"></app-read-more>
+                  <app-read-more [text]="summary" [maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 170 : 200"></app-read-more>
                 </div>
 
                 @if (collectionTag.source !== ScrobbleProvider.Kavita) {

diff --git a/...b/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html b/...b/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html
@@ -124,8 +124,8 @@ <h4 class="reading-list-years">
 
 
             <!-- Summary row-->
-            <div class="row g-0 mt-2">
-              <app-read-more [text]="readingListSummary" [maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 585 : 200"></app-read-more>
+            <div class="row g-0 my-2">
+              <app-read-more [text]="readingListSummary" [maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 170 : 200"></app-read-more>
             </div>
 
             @if (characters$ | async; as characters) {

diff --git a/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html b/UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html
@@ -109,7 +109,7 @@ <h4 class="title mb-2">
           </div>
 
           <div class="mt-2 mb-3">
-            <app-read-more [text]="seriesMetadata.summary || ''" [maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 585 : 200"></app-read-more>
+            <app-read-more [text]="seriesMetadata.summary || ''" [maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 170 : 200"></app-read-more>
           </div>
 
           <div class="mt-2 upper-details">

diff --git a/UI/Web/src/app/shared/read-more/read-more.component.scss b/UI/Web/src/app/shared/read-more/read-more.component.scss
@@ -1,3 +1,5 @@
+@import "../../../theme/variables";
+
 .blur-text {
   color: transparent;
   text-shadow: 0 0 5px var(--body-text-color);
@@ -8,5 +10,10 @@
 
   div {
     word-break: break-word;
+    max-width: 75ch;
+
+    @media (max-width: $grid-breakpoints-sm) {
+      max-width: 50ch;
+    }
   }
 }
diff --git a/UI/Web/src/app/volume-detail/volume-detail.component.html b/UI/Web/src/app/volume-detail/volume-detail.component.html
@@ -89,7 +89,7 @@ <h4 class="title mb-2">
           </div>
 
           <div class="mt-2 mb-3">
-            <app-read-more [text]="volume.chapters[0].summary || ''" [maxLength]="utilityService.getActiveBreakpoint() >= Breakpoint.Desktop ? 585 : 250"></app-read-more>
+            <app-read-more [text]="volume.chapters[0].summary || ''" [maxLength]="utilityService.getActiveBreakpoint() >= Breakpoint.Desktop ? 170 : 200"></app-read-more>
           </div>
 
           <div class="mt-2">