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

Linked Series (#1230)

Browse source 
* Implemented the ability to link different series together through Edit Series. CSS pending.

* Fixed up the css for related cards to show the relation

* Working on making all tabs in edit seris modal save in one go. Taking a break.

* Some fixes for Robbie to help with styling on

* Linked series pill, center library

* Centering library detail and related pill spacing

- Library detail cards are now centered if total number of items is > 6 or if mobile.
- Added ability to determine if mobile (viewport width <= 480px
- Fixed related card spacing
- Fixed related card pill spacing

* Updating relation form spacing

* Fixed a bug in card detail layout when there is no pagination, we create one in a way that all items render at once.

* Only auto-close side nav on phones, not tablets

* Fixed a bug where we had flipped state on sideNavCollapsed$

* Cleaned up some misleading comments

* Implemented RBS back in and now  if you have a relationship besides prequel/sequel, the target series will show a link back to it's parent.

* Added Parentto pipe

* Missed a relationship type

Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>
This commit is contained in:
Joseph Milazzo 2022-04-24 11:59:09 -05:00 • committed by GitHub
parent 7253765f1d
commit 4206ae3e22
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
47 changed files with 2571 additions and 195 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Web/src/app/sidenav/side-nav-companion-bar/side-nav-companion-bar.component.ts
View file

@ -47,7 +47,7 @@ export class SideNavCompanionBarComponent implements OnInit, OnDestroy {
// If user opens side nav while filter is open on mobile, then collapse filter (as it doesn't render well) TODO: Change this when we have new drawer
this.navService.sideNavCollapsed$.pipe(takeUntil(this.onDestroy)).subscribe(sideNavCollapsed => {
if (this.isFilterOpen && sideNavCollapsed && this.utilityService.getActiveBreakpoint() < Breakpoint.Desktop) {
if (this.isFilterOpen && sideNavCollapsed && this.utilityService.getActiveBreakpoint() < Breakpoint.Tablet) {
this.isFilterOpen = false;
this.filterOpen.emit(this.isFilterOpen);
}

4
UI/Web/src/app/sidenav/side-nav-item/side-nav-item.component.html
View file

@ -1,11 +1,11 @@
<ng-container *ngIf="link === undefined || link.length === 0; else useLink">
<div class="side-nav-item" [ngClass]="{'closed': !(navService?.sideNavCollapsed$ | async), 'active': highlighted}">
<div class="side-nav-item" [ngClass]="{'closed': (navService?.sideNavCollapsed$ | async), 'active': highlighted}">
<ng-container [ngTemplateOutlet]="inner"></ng-container>
</div>
</ng-container>
<ng-template #useLink>
<a class="side-nav-item" href="javascript:void(0);" [ngClass]="{'closed': !(navService?.sideNavCollapsed$ | async), 'active': highlighted}" [routerLink]="link">
<a class="side-nav-item" href="javascript:void(0);" [ngClass]="{'closed': (navService?.sideNavCollapsed$ | async), 'active': highlighted}" [routerLink]="link">
<ng-container [ngTemplateOutlet]="inner"></ng-container>
</a>
</ng-template>

4
UI/Web/src/app/sidenav/side-nav/side-nav.component.html
View file

@ -1,5 +1,5 @@
<ng-container>
<div class="side-nav" [ngClass]="{'closed' : !(navService?.sideNavCollapsed$ | async), 'hidden' :!(navService?.sideNavVisibility$ | async)}" *ngIf="accountService.currentUser$ | async as user">
<div class="side-nav" [ngClass]="{'closed' : (navService?.sideNavCollapsed$ | async), 'hidden' :!(navService?.sideNavVisibility$ | async)}" *ngIf="accountService.currentUser$ | async as user">
<!-- <app-side-nav-item icon="fa-user-circle align-self-center phone-hidden" [title]="user.username | sentenceCase" link="/preferences/">
<ng-container actions>
Todo: This will be customize dashboard/side nav controls
@ -26,5 +26,5 @@
</ng-container>
</app-side-nav-item>
</div>
<div class="side-nav-overlay" (click)="navService?.toggleSideNav()" [ngClass]="{'closed' : !(navService?.sideNavCollapsed$ | async)}"></div>
<div class="side-nav-overlay" (click)="navService?.toggleSideNav()" [ngClass]="{'closed' : (navService?.sideNavCollapsed$ | async)}"></div>
</ng-container>

9
UI/Web/src/app/sidenav/side-nav/side-nav.component.ts
View file

@ -60,9 +60,14 @@ export class SideNavComponent implements OnInit, OnDestroy {
takeUntil(this.onDestroy),
map(evt => evt as NavigationEnd))
.subscribe((evt: NavigationEnd) => {
if (this.utilityService.getActiveBreakpoint() < Breakpoint.Desktop) {
if (this.utilityService.getActiveBreakpoint() < Breakpoint.Tablet) {
// collapse side nav
this.navService.toggleSideNav();
this.navService.sideNavCollapsed$.pipe(take(1)).subscribe(collapsed => {
console.log('Side nav collapsed: ', collapsed);
if (!collapsed) {
this.navService.toggleSideNav();
}
});
}
});
}