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

Last batch of bugfixes (#1262)

Browse source 
* Refactored code to show action bar instead of drawer in immersive mode

* Card grid

* adding margin for pagination gap

* Fixed a rare routing case that wouldn't redirect

* Fixed a bug where series detail would show blank filtering

* Fixing image scaling and library card spacing

* Refactored some methods to be static

* Adding card grid to series detail

* Fixed a bug with webtoon going to non-webtoon mode, resulting in black screen.

* Ensure emails are trimmed when trying to invite.

* Don't show More In if there is only 1 item in there on library recommended tab

* Fixed some bugs around locking metadata fields where the correct param wasn't being sent to backend.

* Added some UI error messaging when the email doesn't match the confirm-email (or rather any email in the system).

* Fixed some pages where actions weren't working (library detail) and removed some actionable buttons where they didn't make sense

* Refactored the series detail to use Robbie's new grid system.

* some styling fixes

* Styling fixes

- Removing select border gap
- fixing switches on lite theme
- fixing search result text-light

* better css var naming

* changing search lite text color override

* fixing as per feedback

* Removing boolean from being visible in bookreader

* Fixed some bugs in bulk operations not being visible on light/eink screens. Added --bulk-selection-highlight-text-color and --bulk-selection-text-color.

Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
This commit is contained in:
Joseph Milazzo 2022-05-18 19:31:49 -05:00 • committed by GitHub
parent 6f23a3bc6d
commit 1961b41268
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 195 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -72,68 +72,61 @@
<li [ngbNavItem]="TabID.Storyline" *ngIf="libraryType !== LibraryType.Book && (volumes.length > 0 || chapters.length > 0)">
<a ngbNavLink>Storyline</a>
<ng-template ngbNavContent>
<div class="row g-0">
<div class="card-container row g-0">
<ng-container *ngFor="let volume of volumes; let idx = index; trackBy: trackByVolumeIdentity">
<app-card-item class="col-auto p-2" *ngIf="volume.number != 0" [entity]="volume" [title]="volume.name" (click)="openVolume(volume)"
<app-card-item class="col-auto mt-2 mb-2" *ngIf="volume.number != 0" [entity]="volume" [title]="volume.name" (click)="openVolume(volume)"
[imageUrl]="imageService.getVolumeCoverImage(volume.id) + '&offset=' + coverImageOffset"
[read]="volume.pagesRead" [total]="volume.pages" [actions]="volumeActions" (selection)="bulkSelectionService.handleCardSelection('volume', idx, volumes.length, $event)" [selected]="bulkSelectionService.isCardSelected('volume', idx)" [allowSelection]="true"></app-card-item>
</ng-container>
<ng-container *ngFor="let chapter of storyChapters; let idx = index; trackBy: trackByChapterIdentity">
<app-card-item class="col-auto p-2" *ngIf="!chapter.isSpecial" [entity]="chapter" [title]="chapter.title" (click)="openChapter(chapter)"
[imageUrl]="imageService.getChapterCoverImage(chapter.id) + '&offset=' + coverImageOffset"
[read]="chapter.pagesRead" [total]="chapter.pages" [actions]="chapterActions" (selection)="bulkSelectionService.handleCardSelection('chapter', idx, storyChapters.length, $event)" [selected]="bulkSelectionService.isCardSelected('chapter', idx)" [allowSelection]="true"></app-card-item>
</ng-container>
<ng-container *ngFor="let chapter of storyChapters; let idx = index; trackBy: trackByChapterIdentity">
<app-card-item class="col-auto mt-2 mb-2" *ngIf="!chapter.isSpecial" [entity]="chapter" [title]="chapter.title" (click)="openChapter(chapter)"
[imageUrl]="imageService.getChapterCoverImage(chapter.id) + '&offset=' + coverImageOffset"
[read]="chapter.pagesRead" [total]="chapter.pages" [actions]="chapterActions" (selection)="bulkSelectionService.handleCardSelection('chapter', idx, storyChapters.length, $event)" [selected]="bulkSelectionService.isCardSelected('chapter', idx)" [allowSelection]="true"></app-card-item>
</ng-container>
</div>
</ng-template>
</li>
<li [ngbNavItem]="TabID.Volumes" *ngIf="volumes.length > 0">
<a ngbNavLink>{{libraryType === LibraryType.Book ? 'Books': 'Volumes'}}</a>
<ng-template ngbNavContent>
<app-card-detail-layout
[isLoading]="isLoading"
[items]="volumes">
<ng-template #cardItem let-item let-position="idx">
<app-card-item class="col-auto" [entity]="item" [title]="item.name" (click)="openVolume(item)"
<div class="card-container row g-0">
<ng-container *ngFor="let item of volumes; let idx = index; trackBy: trackByVolumeIdentity">
<app-card-item class="col-auto mt-2 mb-2" [entity]="item" [title]="item.name" (click)="openVolume(item)"
[imageUrl]="imageService.getVolumeCoverImage(item.id) + '&offset=' + coverImageOffset"
[read]="item.pagesRead" [total]="item.pages" [actions]="volumeActions"
(selection)="bulkSelectionService.handleCardSelection('volume', position, volumes.length, $event)"
[selected]="bulkSelectionService.isCardSelected('volume', position)" [allowSelection]="true">
(selection)="bulkSelectionService.handleCardSelection('volume', idx, volumes.length, $event)"
[selected]="bulkSelectionService.isCardSelected('volume', idx)" [allowSelection]="true">
</app-card-item>
</ng-template>
</app-card-detail-layout>
</ng-container>
</div>
</ng-template>
</li>
<li [ngbNavItem]="TabID.Chapters" *ngIf="chapters.length > 0">
<a ngbNavLink>{{utilityService.formatChapterName(libraryType) + 's'}}</a>
<ng-template ngbNavContent>
<app-card-detail-layout
[isLoading]="isLoading"
[items]="chapters">
<ng-template #cardItem let-item let-position="idx">
<app-card-item class="col-auto" *ngIf="!item.isSpecial" [entity]="item" [title]="item.title" (click)="openChapter(item)"
<div class="card-container row g-0">
<ng-container *ngFor="let item of chapters; let idx = index; trackBy: trackByChapterIdentity">
<app-card-item class="col-auto mt-2 mb-2" *ngIf="!item.isSpecial" [entity]="item" [title]="item.title" (click)="openChapter(item)"
[imageUrl]="imageService.getChapterCoverImage(item.id) + '&offset=' + coverImageOffset"
[read]="item.pagesRead" [total]="item.pages" [actions]="chapterActions"
(selection)="bulkSelectionService.handleCardSelection('chapter', position, chapters.length, $event)"
[selected]="bulkSelectionService.isCardSelected('chapter', position)" [allowSelection]="true"></app-card-item>
</ng-template>
</app-card-detail-layout>
(selection)="bulkSelectionService.handleCardSelection('chapter', idx, chapters.length, $event)"
[selected]="bulkSelectionService.isCardSelected('chapter', idx)" [allowSelection]="true"></app-card-item>
</ng-container>
</div>
</ng-template>
</li>
<li [ngbNavItem]="TabID.Specials" *ngIf="hasSpecials">
<a ngbNavLink>Specials</a>
<ng-template ngbNavContent>
<app-card-detail-layout
[isLoading]="isLoading"
[items]="specials">
<ng-template #cardItem let-item let-position="idx">
<app-card-item class="col-auto" [entity]="item" [title]="item.title || item.range" (click)="openChapter(item)"
<div class="card-container row g-0">
<ng-container *ngFor="let item of specials; let idx = index; trackBy: trackByChapterIdentity">
<app-card-item class="col-auto mt-2 mb-2" [entity]="item" [title]="item.title || item.range" (click)="openChapter(item)"
[imageUrl]="imageService.getChapterCoverImage(item.id)"
[read]="item.pagesRead" [total]="item.pages" [actions]="chapterActions"
(selection)="bulkSelectionService.handleCardSelection('special', position, chapters.length, $event)"
[selected]="bulkSelectionService.isCardSelected('special', position)" [allowSelection]="true"></app-card-item>
</ng-template>
</app-card-detail-layout>
(selection)="bulkSelectionService.handleCardSelection('special', idx, chapters.length, $event)"
[selected]="bulkSelectionService.isCardSelected('special', idx)" [allowSelection]="true"></app-card-item>
</ng-container>
</div>
</ng-template>
</li>
<li [ngbNavItem]="TabID.Related" *ngIf="hasRelations">

9
UI/Web/src/app/series-detail/series-detail.component.scss
View file

@ -5,4 +5,11 @@
.rating-star {
margin-top: 2px;
font-size: 1.5rem;
}
}
.card-container{
display: grid;
grid-template-columns: repeat(auto-fill, 158px);
grid-gap: 0.5rem;
justify-content: space-around;
}