45b854e1d0
* Fixed a loading indicator that is always on * Started to add swipe directive * Implemented the ability to swipe to navigate pages in manga reader. * Swipe to paginate seems to be working reliably * Removed a bunch of junk from csproj and added a debug menu for testing on phone to smooth out experience. * Fixed a bug where reading list detail wouldn't render the set image of the reading list. * Added some instructions and code to allow connecting to dev instance easier. * Fixed up paging with keyboard where to ensure that when we hit the end of the scroll, we don't go to the next page instantly, but rather make the user press the key once more. * Fixed reading list image not properly renderering on reading list detail page. * Solved the swiping bug, need to play with threshold again. * Swipe is now working. Need to decide if I'm going to support reversing the direction with reading direction. * Hooked up swipe with reading direction code * Cleaned up some direction code to align to a new enum * Feature complete
60 lines
No EOL
3.2 KiB
HTML
60 lines
No EOL
3.2 KiB
HTML
|
|
<div class="row mt-2 g-0 pb-2" *ngIf="header !== undefined && header.length > 0">
|
|
<div class="col me-auto">
|
|
<h2>
|
|
<span *ngIf="actions.length > 0" class="">
|
|
<app-card-actionables (actionHandler)="performAction($event)" [actions]="actions" [labelBy]="header"></app-card-actionables>
|
|
</span>
|
|
<span *ngIf="header !== undefined && header.length > 0">
|
|
{{header}}
|
|
<span class="badge bg-primary rounded-pill" attr.aria-label="{{pagination.totalItems}} total items" *ngIf="pagination != undefined">{{pagination.totalItems}}</span>
|
|
</span>
|
|
</h2>
|
|
</div>
|
|
</div>
|
|
<app-metadata-filter [filterSettings]="filterSettings" [filterOpen]="filterOpen" (applyFilter)="applyMetadataFilter($event)"></app-metadata-filter>
|
|
<div class="viewport-container" [ngClass]="{'empty': items.length === 0 && !isLoading}">
|
|
<div class="content-container">
|
|
<div class="card-container mt-2 mb-2">
|
|
<p *ngIf="items.length === 0 && !isLoading">
|
|
<ng-container [ngTemplateOutlet]="noDataTemplate"></ng-container>
|
|
</p>
|
|
<virtual-scroller [ngClass]="{'empty': items.length === 0 && !isLoading}" #scroll [items]="items" [bufferAmount]="1" [parentScroll]="parentScroll">
|
|
<div class="grid row g-0" #container>
|
|
<div class="card col-auto mt-2 mb-2" (click)="tryToSaveJumpKey(item)" *ngFor="let item of scroll.viewPortItems; trackBy:trackByIdentity; index as i" id="jumpbar-index--{{i}}" [attr.jumpbar-index]="i">
|
|
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: scroll.viewPortInfo.startIndexWithBuffer + i }"></ng-container>
|
|
</div>
|
|
</div>
|
|
</virtual-scroller>
|
|
</div>
|
|
</div>
|
|
|
|
<ng-container *ngIf="jumpBarKeysToRender.length >= 4 && items.length > 0 && scroll.viewPortInfo.maxScrollPosition > 0" [ngTemplateOutlet]="jumpBar" [ngTemplateOutletContext]="{ id: 'jumpbar' }"></ng-container>
|
|
</div>
|
|
<ng-template #cardTemplate>
|
|
<virtual-scroller #scroll [items]="items" [bufferAmount]="1">
|
|
<div class="grid row g-0" #container>
|
|
<div class="card col-auto mt-2 mb-2" (click)="tryToSaveJumpKey(item)" *ngFor="let item of scroll.viewPortItems; trackBy:trackByIdentity; index as i" id="jumpbar-index--{{i}}" [attr.jumpbar-index]="i">
|
|
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>
|
|
</div>
|
|
</div>
|
|
</virtual-scroller>
|
|
|
|
<div class="mx-auto" *ngIf="items.length === 0 && !isLoading" style="width: 200px;">
|
|
<p>
|
|
<ng-container [ngTemplateOutlet]="noDataTemplate"></ng-container>
|
|
</p>
|
|
</div>
|
|
</ng-template>
|
|
|
|
<app-loading [loading]="isLoading"></app-loading>
|
|
|
|
<ng-template #jumpBar>
|
|
<div class="jump-bar">
|
|
<ng-container *ngFor="let jumpKey of jumpBarKeysToRender; let i = index;">
|
|
<button class="btn btn-link" [ngClass]="{'disabled': hasCustomSort()}" (click)="scrollTo(jumpKey)">
|
|
{{jumpKey.title}}
|
|
</button>
|
|
</ng-container>
|
|
</div>
|
|
</ng-template> |