AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Enforce a readable line length for Read More (#3442)

Browse source
This commit is contained in:
Hippari 2024-12-08 17:03:44 +01:00 • committed by GitHub
parent 0407d75d91
commit 2091b35cef
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 14 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Web/src/app/_single-module/review-card/review-card.component.html
View file

@ -16,7 +16,7 @@
{{review.isExternal ? t('external-review') : t('local-review')}} {{review.isExternal ? t('external-review') : t('local-review')}}
</h6>--> </h6>-->
<p class="card-text no-images"> <p class="card-text no-images">
<app-read-more [text]="(review.isExternal ? review.bodyJustText : review.body) || ''" [maxLength]="150" [showToggle]="false"></app-read-more> <app-read-more [text]="(review.isExternal ? review.bodyJustText : review.body) || ''" [maxLength]="140" [showToggle]="false"></app-read-more>
</p> </p>
</div> </div>
</div> </div>

2
UI/Web/src/app/chapter-detail/chapter-detail.component.html
View file

@ -85,7 +85,7 @@
</div> </div>
<div class="mt-2 mb-3"> <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>
<div class="mt-2"> <div class="mt-2">

2
UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.html
View file

@ -41,7 +41,7 @@
<div class="col-md-10 col-xs-8 col-sm-6 mt-2"> <div class="col-md-10 col-xs-8 col-sm-6 mt-2">
@if (summary.length > 0) { @if (summary.length > 0) {
<div class="mb-2"> <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> </div>
@if (collectionTag.source !== ScrobbleProvider.Kavita) { @if (collectionTag.source !== ScrobbleProvider.Kavita) {

4
UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html
View file

@ -124,8 +124,8 @@
<!-- Summary row--> <!-- Summary row-->
<div class="row g-0 mt-2"> <div class="row g-0 my-2">
<app-read-more [text]="readingListSummary" [maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 585 : 200"></app-read-more> <app-read-more [text]="readingListSummary" [maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 170 : 200"></app-read-more>
</div> </div>
@if (characters$ | async; as characters) { @if (characters$ | async; as characters) {

2
UI/Web/src/app/series-detail/_components/series-detail/series-detail.component.html
View file

@ -109,7 +109,7 @@
</div> </div>
<div class="mt-2 mb-3"> <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>
<div class="mt-2 upper-details"> <div class="mt-2 upper-details">

7
UI/Web/src/app/shared/read-more/read-more.component.scss
View file

@ -1,3 +1,5 @@
@import "../../../theme/variables";
.blur-text { .blur-text {
color: transparent; color: transparent;
text-shadow: 0 0 5px var(--body-text-color); text-shadow: 0 0 5px var(--body-text-color);
@ -8,5 +10,10 @@
div { div {
word-break: break-word; word-break: break-word;
max-width: 75ch;
@media (max-width: $grid-breakpoints-sm) {
max-width: 50ch;
}
} }
} }

2
UI/Web/src/app/volume-detail/volume-detail.component.html
View file

@ -89,7 +89,7 @@
</div> </div>
<div class="mt-2 mb-3"> <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>
<div class="mt-2"> <div class="mt-2">