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

Stablize the Styles (#1128)

Browse source 
* Fixed a bug where adding multiple series to reading list would throw an error on UI, but it was successful.

* When a series has a reading list, we now show the connection on Series detail.

* Removed all baseurl code from UI and not-connected component since we no longer use it.

* Fixed tag badges not showing a border. Added last read time to the series detail page

* Fixed up error interceptor to remove no-connection code

* Changed implementation for series detail. Book libraries will never send chapters back. Volume 0 volumes will not be sent in volumes ever. Fixed up more renaming logic on books to send more accurate representations to the UI.

* Cleaned up the selected tab and tab display logic

* Fixed a bad where statement in reading lists for series

* Fixed up tab logic again

* Fixed a small margin on search backdrop

* Made badge expander button smaller to align with badges

* Fixed a few UIs due to .form-group and .form-row being removed

* Updated Theme component page to help with style testing

* Added more components to theme tester

* Cleaned up some styling

* Fixed opacity on search item hover
This commit is contained in:
Joseph Milazzo 2022-02-28 13:09:37 -06:00 • committed by GitHub
parent cb9b54b8de
commit 864d693790
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
38 changed files with 425 additions and 187 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -52,7 +52,7 @@
<app-read-more class="user-review {{userReview ? 'mt-1' : ''}}" [text]="series?.userReview || ''" [maxLength]="250"></app-read-more>
</div>
<div *ngIf="seriesMetadata" class="mt-2">
<app-series-metadata-detail [seriesMetadata]="seriesMetadata" [series]="series"></app-series-metadata-detail>
<app-series-metadata-detail [seriesMetadata]="seriesMetadata" [readingLists]="readingLists" [series]="series"></app-series-metadata-detail>
</div>
@ -63,7 +63,7 @@
<app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
<ul ngbNav #nav="ngbNav" [(activeId)]="activeTabId" class="nav nav-tabs mb-2" [destroyOnHide]="false" (navChange)="onNavChange($event)">
<li [ngbNavItem]="TabID.Specials" *ngIf="hasSpecials">
<a ngbNavLink>{{libraryType === LibraryType.Book ? 'Books': 'Specials'}}</a>
<a ngbNavLink>Specials</a>
<ng-template ngbNavContent>
<div class="row g-0">
<ng-container *ngFor="let chapter of specials; let idx = index; trackBy: trackByChapterIdentity">
@ -74,7 +74,7 @@
</div>
</ng-template>
</li>
<li [ngbNavItem]="TabID.Storyline" *ngIf="libraryType !== LibraryType.Book && (hasNonSpecialVolumeChapters || hasNonSpecialNonVolumeChapters)">
<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">
@ -91,7 +91,7 @@
</div>
</ng-template>
</li>
<li [ngbNavItem]="TabID.Volumes" *ngIf="hasNonSpecialVolumeChapters">
<li [ngbNavItem]="TabID.Volumes" *ngIf="volumes.length > 0">
<a ngbNavLink>{{libraryType === LibraryType.Book ? 'Books': 'Volumes'}}</a>
<ng-template ngbNavContent>
<div class="row g-0">
@ -103,7 +103,7 @@
</div>
</ng-template>
</li>
<li [ngbNavItem]="TabID.Chapters" *ngIf="hasNonSpecialNonVolumeChapters">
<li [ngbNavItem]="TabID.Chapters" *ngIf="chapters.length > 0">
<a ngbNavLink>{{utilityService.formatChapterName(libraryType) + 's'}}</a>
<ng-template ngbNavContent>
<div class="row g-0">

44
UI/Web/src/app/series-detail/series-detail.component.ts
View file

@ -19,6 +19,7 @@ import { ScanSeriesEvent } from '../_models/events/scan-series-event';
import { SeriesRemovedEvent } from '../_models/events/series-removed-event';
import { LibraryType } from '../_models/library';
import { MangaFormat } from '../_models/manga-format';
import { ReadingList } from '../_models/reading-list';
import { Series } from '../_models/series';
import { SeriesMetadata } from '../_models/series-metadata';
import { Volume } from '../_models/volume';
@ -29,6 +30,7 @@ import { ImageService } from '../_services/image.service';
import { LibraryService } from '../_services/library.service';
import { EVENTS, MessageHubService } from '../_services/message-hub.service';
import { ReaderService } from '../_services/reader.service';
import { ReadingListService } from '../_services/reading-list.service';
import { SeriesService } from '../_services/series.service';
@ -72,12 +74,11 @@ export class SeriesDetailComponent implements OnInit, OnDestroy {
hasSpecials = false;
specials: Array<Chapter> = [];
activeTabId = TabID.Storyline;
hasNonSpecialVolumeChapters = false;
hasNonSpecialNonVolumeChapters = false;
userReview: string = '';
libraryType: LibraryType = LibraryType.Manga;
seriesMetadata: SeriesMetadata | null = null;
readingLists: Array<ReadingList> = [];
/**
* Poster image for the Series
*/
@ -171,6 +172,7 @@ export class SeriesDetailComponent implements OnInit, OnDestroy {
private confirmService: ConfirmService, private titleService: Title,
private downloadService: DownloadService, private actionService: ActionService,
public imageSerivce: ImageService, private messageHub: MessageHubService,
private readingListService: ReadingListService
) {
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.accountService.currentUser$.pipe(take(1)).subscribe(user => {
@ -332,6 +334,9 @@ export class SeriesDetailComponent implements OnInit, OnDestroy {
this.coverImageOffset = 0;
this.seriesService.getMetadata(seriesId).subscribe(metadata => this.seriesMetadata = metadata);
this.readingListService.getReadingListsForSeries(seriesId).subscribe(lists => {
this.readingLists = lists;
});
this.setContinuePoint();
forkJoin([
@ -352,7 +357,7 @@ export class SeriesDetailComponent implements OnInit, OnDestroy {
this.chapterActions = this.actionFactoryService.getChapterActions(this.handleChapterActionCallback.bind(this));
this.seriesService.getSeriesDetail(this.seriesId).subscribe(detail => {
this.hasSpecials = detail.specials.length > 0
this.hasSpecials = detail.specials.length > 0;
this.specials = detail.specials;
this.chapters = detail.chapters;
@ -373,30 +378,23 @@ export class SeriesDetailComponent implements OnInit, OnDestroy {
* This assumes loadPage() has already primed all the calculations and state variables. Do not call directly.
*/
updateSelectedTab() {
// This shows Chapters/Issues tab
// If this has chapters that are not specials
if (this.chapters.filter(c => !c.isSpecial).length > 0) {
this.hasNonSpecialNonVolumeChapters = true;
// Book libraries only have Volumes or Specials enabled
if (this.libraryType === LibraryType.Book) {
if (this.volumes.length === 0) {
this.activeTabId = TabID.Specials;
} else {
this.activeTabId = TabID.Volumes;
}
return;
}
// This shows Volumes tab
if (this.volumes.filter(v => v.number !== 0).length !== 0) {
this.hasNonSpecialVolumeChapters = true;
}
// If an update occured and we were on specials, re-activate Volumes/Chapters
if (!this.hasSpecials && !this.hasNonSpecialVolumeChapters && this.activeTabId != TabID.Storyline) {
this.activeTabId = TabID.Storyline;
}
if (this.libraryType == LibraryType.Book && !this.hasSpecials){
this.activeTabId = TabID.Volumes;
} else if (this.hasNonSpecialVolumeChapters || this.hasNonSpecialNonVolumeChapters) {
this.activeTabId = TabID.Storyline;
} else {
if (this.volumes.length === 0 && this.chapters.length === 0 && this.specials.length > 0) {
this.activeTabId = TabID.Specials;
} else {
this.activeTabId = TabID.Storyline;
}
}
createHTML() {