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

Implemented the ability to allow the admin to change the cover generation size. (#2213)

Browse source 
Changed how covers are merged together. Now a cover image will always be generated for reading list and collections.

Fixed reading list page being a bit laggy due to a missing trackby function.

Reading list page will now show the cover image always. Collection detail page will only hide the image if there is no summary on the collection.
This commit is contained in:
Joe Milazzo 2023-08-14 06:56:09 -05:00 • committed by GitHub
parent 19801af6f3
commit d134196470
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 221 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

4
UI/Web/src/app/collections/_components/all-collections/all-collections.component.html
View file

@ -11,7 +11,9 @@
[trackByIdentity]="trackByIdentity"
>
<ng-template #cardItem let-item let-position="idx">
<app-card-item [title]="item.title" [entity]="item" [actions]="collectionTagActions" [imageUrl]="imageSerivce.getCollectionCoverImage(item.id)" (clicked)="loadCollection(item)"></app-card-item>
<app-card-item [title]="item.title" [entity]="item" [actions]="collectionTagActions"
[imageUrl]="imageSerivce.getCollectionCoverImage(item.id)"
(clicked)="loadCollection(item)"></app-card-item>
</ng-template>
<ng-template #noData>

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

@ -11,9 +11,9 @@
</div>
<div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid pt-2" *ngIf="collectionTag !== undefined" #scrollingBlock>
<div class="row mb-3" *ngIf="(collectionTag.coverImage !== '' && collectionTag.coverImage !== undefined && collectionTag.coverImage !== null) || summary.length > 0">
<div class="col-md-2 col-xs-4 col-sm-6 d-none d-sm-block" *ngIf="collectionTag.coverImage !== '' && collectionTag.coverImage !== undefined && collectionTag.coverImage !== null">
<app-image maxWidth="481px" [imageUrl]="tagImage"></app-image>
<div class="row mb-3" *ngIf="summary.length > 0">
<div class="col-md-2 col-xs-4 col-sm-6 d-none d-sm-block">
<app-image maxWidth="481px" [imageUrl]="imageService.getCollectionCoverImage(collectionTag.id)"></app-image>
</div>
<div class="col-md-10 col-xs-8 col-sm-6 mt-2">
<app-read-more [text]="summary" [maxLength]="250"></app-read-more>

9
UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.ts
View file

@ -70,7 +70,6 @@ export class CollectionDetailComponent implements OnInit, AfterContentChecked {
translocoService = inject(TranslocoService);
collectionTag!: CollectionTag;
tagImage: string = '';
isLoading: boolean = true;
series: Array<Series> = [];
pagination!: Pagination;
@ -229,9 +228,6 @@ export class CollectionDetailComponent implements OnInit, AfterContentChecked {
this.collectionTag = matchingTags[0];
this.summary = (this.collectionTag.summary === null ? '' : this.collectionTag.summary).replace(/\n/g, '<br>');
// TODO: This can be changed now that we have app-image and collection cover merge code (can it? Because we still have the case where there is no image)
// I can always tweak merge to allow blank slots and if just one item, just show that item image
this.tagImage = this.imageService.randomize(this.imageService.getCollectionCoverImage(this.collectionTag.id));
this.titleService.setTitle(this.translocoService.translate('collection-detail.title-alt', {collectionName: this.collectionTag.title}));
this.cdRef.markForCheck();
});
@ -285,11 +281,6 @@ export class CollectionDetailComponent implements OnInit, AfterContentChecked {
modalRef.closed.subscribe((results: {success: boolean, coverImageUpdated: boolean}) => {
this.updateTag(this.collectionTag.id);
this.loadPage();
if (results.coverImageUpdated) {
this.tagImage = this.imageService.randomize(this.imageService.getCollectionCoverImage(collectionTag.id));
this.collectionTag.coverImage = this.imageService.randomize(this.imageService.getCollectionCoverImage(collectionTag.id));
this.cdRef.markForCheck();
}
});
}