Cutlery/Kavita
1
0
Fork 0
mirror of https://github.com/Kareadita/Kavita.git synced 2026-06-07 23:35:18 -04:00
Code Issues Packages Projects Releases Wiki Activity

UX Overhaul Part 1 (#3047)

Browse Source 
Co-authored-by: Joseph Milazzo <joseph.v.milazzo@gmail.com>
This commit is contained in:
Robbie Davis
2024-08-09 13:55:31 -04:00
committed by GitHub
parent 5934d516f3
commit ff79710ac6
324 changed files with 11589 additions and 4598 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/Web/src/app/app.component.html
+34 -14
View File
@@ -1,18 +1,38 @@
<div [ngClass]="{'no-transitions' : (transitionState$ | async)}">
<app-nav-header></app-nav-header>
<div [ngClass]="{'closed' : (navService.sideNavCollapsed$ | async), 'content-wrapper': navService.sideNavVisibility$ | async}">
<a id="content"></a>
<app-side-nav *ngIf="navService.sideNavVisibility$ | async"></app-side-nav>
<div class="container-fluid" [ngClass]="{'g-0': (navService.sideNavVisibility$ | async) === false}">
<div style="padding: 20px 0 0;" *ngIf="navService.sideNavVisibility$ | async else noSideNav">
<div class="companion-bar" [ngClass]="{'companion-bar-content': (navService.sideNavCollapsed$ | async) === false}">
<router-outlet></router-outlet>
</div>
</div>
<ng-template #noSideNav>
<router-outlet></router-outlet>
</ng-template>
@if (accountService.currentUser$ | async; as currentUser) {
@if (currentUser) {
<div class="fullpage-background">
<div class="background-area">
<canvas id="backgroundCanvas" class="default-background" style="width: 100%; height: calc(var(--vh) * 100);"></canvas>
</div>
</div>
}
}
<app-nav-header></app-nav-header>
<div [ngClass]="{'closed' : (navService.sideNavCollapsed$ | async), 'content-wrapper': navService.sideNavVisibility$ | async}">
@if (navService.sideNavVisibility$ | async) {
@if(navService.usePreferenceSideNav$ | async) {
<app-preference-nav></app-preference-nav>
} @else {
<app-side-nav></app-side-nav>
}
}
<div class="container-fluid" [ngClass]="{'g-0': (navService.sideNavVisibility$ | async) === false}">
<a id="content"></a>
@if (navService.sideNavVisibility$ | async) {
<div>
<div class="companion-bar" [ngClass]="{'companion-bar-content': (navService.sideNavCollapsed$ | async) === false || (navService.usePreferenceSideNav$ | async),
'companion-bar-collapsed': ((navService.sideNavCollapsed$ | async) && (navService.usePreferenceSideNav$ | async))}">
<router-outlet></router-outlet>
</div>
</div>
} @else {
<router-outlet></router-outlet>
}
</div>
</div>
</div>