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

Polish Part 3 (#2424)

Browse source
This commit is contained in:
Joe Milazzo 2023-11-10 07:56:30 -06:00 • committed by GitHub
parent a018d6828e
commit 944830ca73
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
62 changed files with 518 additions and 493 deletions
Download patch file Download diff file Expand all files Collapse all files

4
UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.html
View file

@ -1,5 +1,5 @@
<div class="container-flex {{darkMode ? 'dark-mode' : ''}} reader-container {{ColumnLayout}} {{WritingStyleClass}}"
tabindex="0" #reader (click)="handleContainerClick($event)" [ngClass]="{'pointer' : cursorIsPointer}">
tabindex="0" #reader (click)="handleContainerClick($event)" [ngClass]="{'clickable' : cursorIsPointer}">
<ng-container *transloco="let t; read: 'book-reader'">
<div class="fixed-top" #stickyTop>
<a class="visually-hidden-focusable focus-visible" href="javascript:void(0);" (click)="moveFocus()">{{t('skip-header')}}</a>
@ -44,7 +44,7 @@
<button class="btn btn-small btn-icon col-1" [disabled]="prevChapterDisabled" (click)="loadPrevChapter()" [title]="t('prev-chapter')"><i class="fa fa-fast-backward" aria-hidden="true"></i></button>
<div class="col-1" (click)="goToPage(0)">{{pageNum}}</div>
<div class="col-8">
<ngb-progressbar style="cursor: pointer" [title]="t('go-to-page')" (click)="goToPage()" type="primary" height="5px" [value]="pageNum" [max]="maxPages - 1"></ngb-progressbar>
<ngb-progressbar class="clickable" [title]="t('go-to-page')" (click)="goToPage()" type="primary" height="5px" [value]="pageNum" [max]="maxPages - 1"></ngb-progressbar>
</div>
<div class="col-1 btn-icon" (click)="goToPage(maxPages - 1)" [title]="t('go-to-last-page')">{{maxPages - 1}}</div>
<button class="btn btn-small btn-icon col-1" [disabled]="nextChapterDisabled" (click)="loadNextChapter()" [title]="t('next-chapter')"><i class="fa fa-fast-forward" aria-hidden="true"></i></button>

7
UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.scss
View file

@ -200,10 +200,6 @@ $action-bar-height: 38px;
}
}
.pointer {
cursor: pointer;
}
.book-content {
position: relative;
margin: 0 0;
@ -398,6 +394,7 @@ $pagination-opacity: 0;
.highlight {
background-color: rgba(65, 225, 100, 0.5) !important;
animation: fadein .5s both;
@ -409,7 +406,7 @@ $pagination-opacity: 0;
// TODO: Figure out why book-reader has it's own button overrides
.btn {
&.btn-secondary {
color: var(--br-actionbar-button-text-color);

7
UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.ts
View file

@ -1614,13 +1614,12 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.cdRef.markForCheck();
}
// Responsibile for handling pagination only
// Responsible for handling pagination only
handleContainerClick(event: MouseEvent) {
//if (event.target)
console.log('target: ', event.target);
if (['action-bar'].some(className => (event.target as Element).classList.contains(className))) {
console.log('exiting early')
if (this.actionBarVisible || ['action-bar'].some(className => (event.target as Element).classList.contains(className))) {
//console.log('exiting early')
return;
}