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

PR Flush (#3446)

Browse source 
Co-authored-by: Hippari <iamtimscampi@gmail.com>
Co-authored-by: Gavin Mogan <github@gavinmogan.com>
This commit is contained in:
Joe Milazzo 2024-12-09 13:06:28 -06:00 • committed by GitHub
parent 0407d75d91
commit bfbcb4b741
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
46 changed files with 551 additions and 364 deletions
Download patch file Download diff file Expand all files Collapse all files

27
UI/Web/src/app/_directives/dbl-click.directive.ts Normal file
View file

@ -0,0 +1,27 @@
import {Directive, EventEmitter, HostListener, Output} from '@angular/core';
@Directive({
selector: '[appDblClick]',
standalone: true
})
export class DblClickDirective {
@Output() doubleClick = new EventEmitter<Event>();
private lastTapTime = 0;
private tapTimeout = 300; // Time threshold for a double tap (in milliseconds)
@HostListener('click', ['$event'])
handleClick(event: Event): void {
event.stopPropagation();
event.preventDefault();
const currentTime = new Date().getTime();
if (currentTime - this.lastTapTime < this.tapTimeout) {
// Detected a double click/tap
this.doubleClick.emit(event);
}
this.lastTapTime = currentTime;
}
}

2
UI/Web/src/app/_services/person.service.ts
View file

@ -26,7 +26,7 @@ export class PersonService {
}
get(name: string) {
return this.httpClient.get<Person>(this.baseUrl + `person?name=${name}`);
return this.httpClient.get<Person | null>(this.baseUrl + `person?name=${name}`);
}
getRolesForPerson(personId: number) {

0
UI/Web/src/app/_single-modules/age-rating-image/age-rating-image.component.html → UI/Web/src/app/_single-module/age-rating-image/age-rating-image.component.html
View file

0
UI/Web/src/app/_single-modules/age-rating-image/age-rating-image.component.scss → UI/Web/src/app/_single-module/age-rating-image/age-rating-image.component.scss
View file

0
UI/Web/src/app/_single-modules/age-rating-image/age-rating-image.component.ts → UI/Web/src/app/_single-module/age-rating-image/age-rating-image.component.ts
View file

4
UI/Web/src/app/_single-module/card-actionables/card-actionables.component.html
View file

@ -1,14 +1,14 @@
<ng-container *transloco="let t; read: 'actionable'">
@if (actions.length > 0) {
@if ((utilityService.activeBreakpoint$ | async)! <= Breakpoint.Tablet) {
<button [disabled]="disabled" class="btn {{btnClass}}" id="actions-{{labelBy}}"
<button [disabled]="disabled" class="btn {{btnClass}} px-3" id="actions-{{labelBy}}"
(click)="openMobileActionableMenu($event)">
{{label}}
<i class="fa {{iconClass}}" aria-hidden="true"></i>
</button>
} @else {
<div ngbDropdown container="body" class="d-inline-block">
<button [disabled]="disabled" class="btn {{btnClass}}" id="actions-{{labelBy}}" ngbDropdownToggle
<button [disabled]="disabled" class="btn {{btnClass}} px-3" id="actions-{{labelBy}}" ngbDropdownToggle
(click)="preventEvent($event)">
{{label}}
<i class="fa {{iconClass}}" aria-hidden="true"></i>

0
UI/Web/src/app/_single-modules/publisher-flipper/publisher-flipper.component.html → UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.html
View file

0
UI/Web/src/app/_single-modules/publisher-flipper/publisher-flipper.component.scss → UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.scss
View file

0
UI/Web/src/app/_single-modules/publisher-flipper/publisher-flipper.component.ts → UI/Web/src/app/_single-module/publisher-flipper/publisher-flipper.component.ts
View file

0
UI/Web/src/app/_single-modules/related-tab/related-tab.component.html → UI/Web/src/app/_single-module/related-tab/related-tab.component.html
View file

0
UI/Web/src/app/_single-modules/related-tab/related-tab.component.scss → UI/Web/src/app/_single-module/related-tab/related-tab.component.scss
View file

0
UI/Web/src/app/_single-modules/related-tab/related-tab.component.ts → UI/Web/src/app/_single-module/related-tab/related-tab.component.ts
View file

2
UI/Web/src/app/_single-module/review-card/review-card.component.html
View file

@ -16,7 +16,7 @@
{{review.isExternal ? t('external-review') : t('local-review')}}
</h6>-->
<p class="card-text no-images">
<app-read-more [text]="(review.isExternal ? review.bodyJustText : review.body) || ''" [maxLength]="150" [showToggle]="false"></app-read-more>
<app-read-more [text]="(review.isExternal ? review.bodyJustText : review.body) || ''" [maxLength]="140" [showToggle]="false"></app-read-more>
</p>
</div>
</div>

158
UI/Web/src/app/admin/edit-user/edit-user.component.html
View file

@ -1,76 +1,90 @@
<ng-container *transloco="let t; read: 'edit-user'">
<div class="modal-container">
<div class="modal-header">
<h5 class="modal-title" id="modal-basic-title">{{t('edit')}} {{member.username | sentenceCase}}</h5>
<button type="button" class="btn-close" [attr.aria-label]="t('close')" (click)="close()">
<div class="modal-container">
<div class="modal-header">
<h5 class="modal-title" id="modal-basic-title">{{t('edit')}} {{member.username | sentenceCase}}</h5>
<button type="button" class="btn-close" [attr.aria-label]="t('close')" (click)="close()">
</button>
</div>
<div class="modal-body scrollable-modal">
<form [formGroup]="userForm">
<h4>{{t('account-detail-title')}}</h4>
<div class="row g-0 mb-2">
<div class="col-md-6 col-sm-12 pe-4">
<div class="mb-3">
<label for="username" class="form-label">{{t('username')}}</label>
<input id="username" class="form-control" formControlName="username" type="text"
[class.is-invalid]="userForm.get('username')?.invalid && userForm.get('username')?.touched" aria-describedby="username-validations">
<div id="username-validations" class="invalid-feedback" *ngIf="userForm.dirty || userForm.touched">
<div *ngIf="userForm.get('username')?.errors?.required">
{{t('required')}}
</div>
<div *ngIf="userForm.get('username')?.errors?.pattern">
{{t('username-pattern', {characters: allowedCharacters})}}
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="mb-3" style="width:100%">
<label for="email" class="form-label">{{t('email')}}</label>
<input class="form-control" inputmode="email" type="email" id="email"
[class.is-invalid]="userForm.get('email')?.invalid && userForm.get('email')?.touched"
formControlName="email" aria-describedby="email-validations">
<div id="email-validations" class="invalid-feedback"
*ngIf="userForm.dirty || userForm.touched">
<div *ngIf="userForm.get('email')?.errors?.required">
{{t('required')}}
</div>
<div *ngIf="userForm.get('email')?.errors?.email">
{{t('not-valid-email')}}
</div>
</div>
</div>
</div>
</div>
<div class="row g-0 mb-3">
<div class="col-md-12">
<app-restriction-selector (selected)="updateRestrictionSelection($event)" [isAdmin]="hasAdminRoleSelected" [member]="member"></app-restriction-selector>
</div>
</div>
<div class="row g-0 mb-3">
<div class="col-md-6 pe-4">
<app-role-selector (selected)="updateRoleSelection($event)" [allowAdmin]="true" [member]="member"></app-role-selector>
</div>
<div class="col-md-6">
<app-library-selector (selected)="updateLibrarySelection($event)" [member]="member"></app-library-selector>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="close()">
{{t('cancel')}}
</button>
<button type="button" class="btn btn-primary" (click)="save()" [disabled]="isSaving || !userForm.valid">
<span *ngIf="isSaving" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span>{{isSaving ? t('saving') : t('update')}}</span>
</button>
</div>
</button>
</div>
<div class="modal-body scrollable-modal">
<form [formGroup]="userForm">
<h4>{{t('account-detail-title')}}</h4>
<div class="row g-0 mb-2">
<div class="col-md-6 col-sm-12 pe-4">
@if(userForm.get('username'); as formControl) {
<div class="mb-3">
<label for="username" class="form-label">{{t('username')}}</label>
<input id="username" class="form-control" formControlName="username" type="text"
[class.is-invalid]="formControl.invalid && !formControl.untouched" aria-describedby="username-validations">
@if(formControl.dirty || !formControl.untouched) {
<div id="username-validations" class="invalid-feedback">
@if (formControl.errors; as errors) {
<div>
@if (errors.required) {
{{t('required')}}
} @else if (errors.pattern) {
{{t('username-pattern', {characters: allowedCharacters})}}
}
</div>
}
</div>
}
</div>
}
</div>
<div class="col-md-6 col-sm-12">
@if(userForm.get('email'); as formControl) {
<div class="mb-3" style="width:100%">
<label for="email" class="form-label">{{t('email')}}</label>
<input id="email" class="form-control" formControlName="email" type="text"
[class.is-invalid]="formControl.invalid && !formControl.untouched" aria-describedby="email-validations">
@if(formControl.dirty || !formControl.untouched) {
<div id="email-validations" class="invalid-feedback">
@if (formControl.errors; as errors) {
<div>
@if (errors.required) {
{{t('required')}}
} @else if (errors.email) {
{{t('not-valid-email')}}
}
</div>
}
</div>
}
</div>
}
</div>
</div>
<div class="row g-0 mb-3">
<div class="col-md-12">
<app-restriction-selector (selected)="updateRestrictionSelection($event)" [isAdmin]="hasAdminRoleSelected" [member]="member"></app-restriction-selector>
</div>
</div>
<div class="row g-0 mb-3">
<div class="col-md-6 pe-4">
<app-role-selector (selected)="updateRoleSelection($event)" [allowAdmin]="true" [member]="member"></app-role-selector>
</div>
<div class="col-md-6">
<app-library-selector (selected)="updateLibrarySelection($event)" [member]="member"></app-library-selector>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" (click)="close()">
{{t('cancel')}}
</button>
<button type="button" class="btn btn-primary" (click)="save()" [disabled]="isSaving || !userForm.valid">
@if (isSaving) {
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
}
<span>{{isSaving ? t('saving') : t('update')}}</span>
</button>
</div>
</div>
</ng-container>

1
UI/Web/src/app/admin/edit-user/edit-user.component.ts
View file

@ -50,7 +50,6 @@ export class EditUserComponent implements OnInit {
this.userForm.addControl('email', new FormControl(this.member.email, [Validators.required, Validators.email]));
this.userForm.addControl('username', new FormControl(this.member.username, [Validators.required, Validators.pattern(AllowedUsernameCharacters)]));
this.userForm.get('email')?.disable();
this.selectedRestriction = this.member.ageRestriction;
this.cdRef.markForCheck();
}

2
UI/Web/src/app/admin/manage-settings/manage-settings.component.html
View file

@ -290,7 +290,7 @@
<div class="row g-0 mt-4 mb-4">
@if (settingsForm.get('onDeckUpdateDays'); as formControl) {
<app-setting-item [title]="t('on-deck-last-chapter-add-label')" [subtitle]="t('on-deck-last-progress-tooltip')">
<app-setting-item [title]="t('on-deck-last-chapter-add-label')" [subtitle]="t('on-deck-last-chapter-add-tooltip')">
<ng-template #view>
{{formControl.value}}
</ng-template>

2
UI/Web/src/app/app.component.scss
View file

@ -7,7 +7,7 @@
.companion-bar {
transition: all var(--side-nav-companion-bar-transistion);
margin-left: 60px;
margin-left: 45px;
overflow-y: hidden;
overflow-x: hidden;
height: calc(var(--vh)* 100 - var(--nav-mobile-offset));

2
UI/Web/src/app/chapter-detail/chapter-detail.component.html
View file

@ -85,7 +85,7 @@
</div>
<div class="mt-2 mb-3">
<app-read-more [text]="chapter.summary || ''" [maxLength]="utilityService.getActiveBreakpoint() >= Breakpoint.Desktop ? 585 : 250"></app-read-more>
<app-read-more [text]="chapter.summary || ''" [maxLength]="utilityService.getActiveBreakpoint() >= Breakpoint.Desktop ? 170 : 200"></app-read-more>
</div>
<div class="mt-2">

2
UI/Web/src/app/chapter-detail/chapter-detail.component.ts
View file

@ -48,7 +48,7 @@ import {FilterUtilitiesService} from "../shared/_services/filter-utilities.servi
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
import {ReadingList} from "../_models/reading-list";
import {ReadingListService} from "../_services/reading-list.service";
import {RelatedTabComponent} from "../_single-modules/related-tab/related-tab.component";
import {RelatedTabComponent} from "../_single-module/related-tab/related-tab.component";
import {BadgeExpanderComponent} from "../shared/badge-expander/badge-expander.component";
import {
MetadataDetailRowComponent

2
UI/Web/src/app/collections/_components/collection-detail/collection-detail.component.html
View file

@ -41,7 +41,7 @@
<div class="col-md-10 col-xs-8 col-sm-6 mt-2">
@if (summary.length > 0) {
<div class="mb-2">
<app-read-more [text]="summary" [maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 585 : 200"></app-read-more>
<app-read-more [text]="summary" [maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 170 : 200"></app-read-more>
</div>
@if (collectionTag.source !== ScrobbleProvider.Kavita) {

407
UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.html
View file

@ -3,47 +3,58 @@
@if(debugMode) {
<div class="fixed-top overlay">
@for(img of cachedImages; track img.src) {
<ng-container *ngIf="this.readerService.imageUrlToPageNum(img.src) as imageNum">
@if (this.readerService.imageUrlToPageNum(img.src); as imageNum) {
<span class="me-1" [ngClass]="{'current': imageNum === this.pageNum, 'loaded': img.complete}">{{this.readerService.imageUrlToPageNum(img.src)}}</span>
</ng-container>
}
}
</div>
}
<div class="fixed-top overlay" *ngIf="menuOpen" [@slideFromTop]="menuOpen">
<div style="display: flex; margin-top: 5px;">
<button class="btn btn-icon" style="height: 100%" [title]="t('back')" (click)="closeReader()">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
<span class="visually-hidden">{{t('back')}}</span>
</button>
@if (menuOpen) {
<div class="fixed-top overlay" [@slideFromTop]="menuOpen">
<div style="display: flex; margin-top: 5px;">
<button class="btn btn-icon" style="height: 100%" [title]="t('back')" (click)="closeReader()">
<i class="fa fa-arrow-left" aria-hidden="true"></i>
<span class="visually-hidden">{{t('back')}}</span>
</button>
<div>
<div style="font-weight: bold;">{{title}} <span class="clickable" *ngIf="incognitoMode" (click)="turnOffIncognito()" role="button" [attr.aria-label]="t('incognito-alt')">(<i class="fa fa-glasses" aria-hidden="true"></i><span class="visually-hidden">{{t('incognito-title')}}</span>)</span></div>
<div class="subtitle">
{{subtitle}} <span *ngIf="totalSeriesPages > 0">{{t('series-progress', {percentage: (Math.min(1, ((totalSeriesPagesRead + pageNum) / totalSeriesPages)) | percent)}) }}</span>
<div>
<div style="font-weight: bold;">{{title}}
@if (incognitoMode) {
<span class="clickable" (click)="turnOffIncognito()" role="button" [attr.aria-label]="t('incognito-alt')">(<i class="fa fa-glasses" aria-hidden="true"></i><span class="visually-hidden">{{t('incognito-title')}}</span>)</span>
}
</div>
<div class="subtitle">
{{subtitle}}
@if (totalSeriesPages > 0) {
<span>{{t('series-progress', {percentage: (Math.min(1, ((totalSeriesPagesRead + pageNum) / totalSeriesPages)) | percent)}) }}</span>
}
</div>
</div>
<div style="margin-left: auto; padding-right: 3%;">
<button class="btn btn-icon" title="Shortcuts" (click)="openShortcutModal()">
<i class="fa-regular fa-rectangle-list" aria-hidden="true"></i>
<span class="visually-hidden">{{t('shortcuts-menu-alt')}}</span>
</button>
@if (!bookmarkMode && hasBookmarkRights) {
<button class="btn btn-icon" role="checkbox" [attr.aria-checked]="CurrentPageBookmarked"
title="{{t(CurrentPageBookmarked ? 'unbookmark-page-tooltip' : 'bookmark-page-tooltip')}}" (click)="bookmarkPage()">
<i class="{{CurrentPageBookmarked ? 'fa' : 'far'}} fa-bookmark" aria-hidden="true"></i>
<span class="visually-hidden">{{t(CurrentPageBookmarked ? 'unbookmark-page-tooltip' : 'bookmark-page-tooltip')}}</span>
</button>
}
</div>
</div>
<div style="margin-left: auto; padding-right: 3%;">
<button class="btn btn-icon" title="Shortcuts" (click)="openShortcutModal()">
<i class="fa-regular fa-rectangle-list" aria-hidden="true"></i>
<span class="visually-hidden">{{t('shortcuts-menu-alt')}}</span>
</button>
@if (!bookmarkMode && hasBookmarkRights) {
<button class="btn btn-icon" role="checkbox" [attr.aria-checked]="CurrentPageBookmarked"
title="{{t(CurrentPageBookmarked ? 'unbookmark-page-tooltip' : 'bookmark-page-tooltip')}}" (click)="bookmarkPage()">
<i class="{{CurrentPageBookmarked ? 'fa' : 'far'}} fa-bookmark" aria-hidden="true"></i>
<span class="visually-hidden">{{t(CurrentPageBookmarked ? 'unbookmark-page-tooltip' : 'bookmark-page-tooltip')}}</span>
</button>
}
</div>
</div>
</div>
}
<app-loading [loading]="isLoading || (!(currentImage$ | async)?.complete && this.readerMode !== ReaderMode.Webtoon)" [absolute]="true"></app-loading>
<div class="reading-area"
ngSwipe (swipeEnd)="onSwipeEnd($event)" (swipeMove)="onSwipeMove($event)"
[ngStyle]="{'background-color': backgroundColor, 'height': readerMode === ReaderMode.Webtoon ? 'inherit' : '100dvh'}" #readingArea>
<ng-container *ngIf="readerMode !== ReaderMode.Webtoon; else webtoon">
@if (readerMode !== ReaderMode.Webtoon) {
<div (dblclick)="bookmarkPage($event)">
<app-canvas-renderer
[readerSettings$]="readerSettings$"
@ -57,24 +68,28 @@
<div class="pagination-area">
<div class="{{readerMode === ReaderMode.LeftRight ? 'left' : 'top'}} {{clickOverlayClass('left')}}" (click)="handlePageChange($event, KeyDirection.Left)"
[ngStyle]="{'height': (readerMode === ReaderMode.LeftRight ? MaxHeight: '25%'), 'max-height': MaxHeight}">
<div *ngIf="showClickOverlay">
<i class="fa fa-angle-{{readingDirection === ReadingDirection.RightToLeft ? 'double-' : ''}}{{readerMode === ReaderMode.LeftRight ? 'left' : 'up'}}"
[title]="t('prev-page-tooltip')" aria-hidden="true"></i>
</div>
@if (showClickOverlay) {
<div>
<i class="fa fa-angle-{{readingDirection === ReadingDirection.RightToLeft ? 'double-' : ''}}{{readerMode === ReaderMode.LeftRight ? 'left' : 'up'}}"
[title]="t('prev-page-tooltip')" aria-hidden="true"></i>
</div>
}
</div>
<div class="{{readerMode === ReaderMode.LeftRight ? 'right' : 'bottom'}} {{clickOverlayClass('right')}}" (click)="handlePageChange($event, KeyDirection.Right)"
[ngStyle]="{'height': (readerMode === ReaderMode.LeftRight ? MaxHeight: '25%'),
'left': 'inherit',
'right': RightPaginationOffset + 'px',
'max-height': MaxHeight}">
<div *ngIf="showClickOverlay">
<i class="fa fa-angle-{{readingDirection === ReadingDirection.LeftToRight ? 'double-' : ''}}{{readerMode === ReaderMode.LeftRight ? 'right' : 'down'}}"
[title]="t('next-page-tooltip')" aria-hidden="true"></i>
</div>
@if (showClickOverlay) {
<div>
<i class="fa fa-angle-{{readingDirection === ReadingDirection.LeftToRight ? 'double-' : ''}}{{readerMode === ReaderMode.LeftRight ? 'right' : 'down'}}"
[title]="t('next-page-tooltip')" aria-hidden="true"></i>
</div>
}
</div>
</div>
<div (dblclick)="bookmarkPage($event)">
<div appDblClick (doubleClick)="bookmarkPage($event)">
<app-single-renderer [image$]="currentImage$"
[readerSettings$]="readerSettings$"
[bookmark$]="showBookmarkEffect$"
@ -106,196 +121,200 @@
[getPage]="getPageFn">
</app-double-no-cover-renderer>
</div>
</ng-container>
<ng-template #webtoon>
<div class="webtoon-images" *ngIf="!isLoading && !inSetup">
<app-infinite-scroller [pageNum]="pageNum"
[bufferPages]="5"
[goToPage]="goToPageEvent"
(pageNumberChange)="handleWebtoonPageChange($event)"
[totalPages]="maxPages"
[urlProvider]="getPageUrl"
(loadNextChapter)="loadNextChapter()"
(loadPrevChapter)="loadPrevChapter()"
[bookmarkPage]="showBookmarkEffectEvent"
[fullscreenToggled]="fullscreenEvent"
[readerSettings$]="readerSettings$">
</app-infinite-scroller>
</div>
</ng-template>
} @else {
@if (!isLoading && !inSetup) {
<div class="webtoon-images">
<app-infinite-scroller [pageNum]="pageNum"
[bufferPages]="5"
[goToPage]="goToPageEvent"
(pageNumberChange)="handleWebtoonPageChange($event)"
[totalPages]="maxPages"
[urlProvider]="getPageUrl"
(loadNextChapter)="loadNextChapter()"
(loadPrevChapter)="loadPrevChapter()"
[bookmarkPage]="showBookmarkEffectEvent"
[fullscreenToggled]="fullscreenEvent"
[readerSettings$]="readerSettings$">
</app-infinite-scroller>
</div>
}
}
</div>
<div class="fixed-bottom overlay" *ngIf="menuOpen" [@slideFromBottom]="menuOpen">
<div class="mb-3" *ngIf="pageOptions !== undefined && pageOptions.ceil !== undefined">
<span class="visually-hidden" id="slider-info"></span>
<div class="row g-0">
<button class="btn btn-icon col-1" [disabled]="prevChapterDisabled" (click)="loadPrevChapter();resetMenuCloseTimer();" [title]="t('prev-chapter-tooltip')"><i class="fa fa-fast-backward" aria-hidden="true"></i></button>
<button class="btn btn-icon col-2" [disabled]="prevPageDisabled || pageNum === 0" (click)="goToPage(0);resetMenuCloseTimer();" [title]="t('first-page-tooltip')"><i class="fa fa-step-backward" aria-hidden="true"></i></button>
<div class="col custom-slider" *ngIf="pageOptions.ceil > 0; else noSlider">
<ngx-slider [options]="pageOptions" [value]="pageNum" aria-describedby="slider-info" [manualRefresh]="refreshSlider" (userChangeEnd)="sliderPageUpdate($event);startMenuCloseTimer()" (userChange)="sliderDragUpdate($event)" (userChangeStart)="cancelMenuCloseTimer();"></ngx-slider>
</div>
<ng-template #noSlider>
<div class="col custom-slider">
<ngx-slider [options]="pageOptions" [value]="pageNum" aria-describedby="slider-info" (userChangeEnd)="startMenuCloseTimer()" (userChangeStart)="cancelMenuCloseTimer();"></ngx-slider>
@if (menuOpen) {
<div class="fixed-bottom overlay" [@slideFromBottom]="menuOpen">
@if (pageOptions !== undefined && pageOptions.ceil !== undefined) {
<div class="mb-3">
<span class="visually-hidden" id="slider-info"></span>
<div class="row g-0">
<button class="btn btn-icon col-1" [disabled]="prevChapterDisabled" (click)="loadPrevChapter();resetMenuCloseTimer();" [title]="t('prev-chapter-tooltip')"><i class="fa fa-fast-backward" aria-hidden="true"></i></button>
<button class="btn btn-icon col-2" [disabled]="prevPageDisabled || pageNum === 0" (click)="goToPage(0);resetMenuCloseTimer();" [title]="t('first-page-tooltip')"><i class="fa fa-step-backward" aria-hidden="true"></i></button>
@if (pageOptions.ceil > 0) {
<div class="col custom-slider">
<ngx-slider [options]="pageOptions" [value]="pageNum" aria-describedby="slider-info" [manualRefresh]="refreshSlider" (userChangeEnd)="sliderPageUpdate($event);startMenuCloseTimer()" (userChange)="sliderDragUpdate($event)" (userChangeStart)="cancelMenuCloseTimer();"></ngx-slider>
</div>
} @else {
<div class="col custom-slider">
<ngx-slider [options]="pageOptions" [value]="pageNum" aria-describedby="slider-info" (userChangeEnd)="startMenuCloseTimer()" (userChangeStart)="cancelMenuCloseTimer();"></ngx-slider>
</div>
}
<button class="btn btn-icon col-2" [disabled]="nextPageDisabled || pageNum >= maxPages - 1" (click)="goToPage(this.maxPages);resetMenuCloseTimer();" [title]="t('last-page-tooltip')"><i class="fa fa-step-forward" aria-hidden="true"></i></button>
<button class="btn btn-icon col-1" [disabled]="nextChapterDisabled" (click)="loadNextChapter();resetMenuCloseTimer();" [title]="t('next-chapter-tooltip')"><i class="fa fa-fast-forward" aria-hidden="true"></i></button>
</div>
</ng-template>
<button class="btn btn-icon col-2" [disabled]="nextPageDisabled || pageNum >= maxPages - 1" (click)="goToPage(this.maxPages);resetMenuCloseTimer();" [title]="t('last-page-tooltip')"><i class="fa fa-step-forward" aria-hidden="true"></i></button>
<button class="btn btn-icon col-1" [disabled]="nextChapterDisabled" (click)="loadNextChapter();resetMenuCloseTimer();" [title]="t('next-chapter-tooltip')"><i class="fa fa-fast-forward" aria-hidden="true"></i></button>
</div>
}
<div class="row pt-4 ms-2 me-2 mb-2">
<div class="col">
<button class="btn btn-icon" (click)="setReadingDirection();resetMenuCloseTimer();" [disabled]="readerMode === ReaderMode.Webtoon || readerMode === ReaderMode.UpDown" aria-describedby="reading-direction" [title]="t('reading-direction-tooltip') + readingDirection === ReadingDirection.LeftToRight ? t('left-to-right-alt') : t('right-to-left-alt')">
<i class="fa fa-angle-double-{{readingDirection === ReadingDirection.LeftToRight ? 'right' : 'left'}}" aria-hidden="true"></i>
<span id="reading-direction" class="visually-hidden">{{readingDirection === ReadingDirection.LeftToRight ? t('left-to-right-alt') : t('right-to-left-alt')}}</span>
</button>
</div>
<div class="col">
<button class="btn btn-icon" [title]="t('reading-mode-tooltip')" (click)="toggleReaderMode();resetMenuCloseTimer();">
<i class="fa {{this.readerMode | readerModeIcon}}" aria-hidden="true"></i>
<span class="visually-hidden">{{t('reading-mode-tooltip')}}</span>
</button>
</div>
<div class="col">
<button class="btn btn-icon" title="{{this.isFullscreen ? t('collapse') : t('fullscreen')}}" (click)="toggleFullscreen();resetMenuCloseTimer();">
<i class="fa {{this.isFullscreen | fullscreenIcon}}" aria-hidden="true"></i>
<span class="visually-hidden">{{this.isFullscreen ? t('collapse') : t('fullscreen')}}</span>
</button>
</div>
<div class="col">
<button class="btn btn-icon" [title]="t('settings-tooltip')" (click)="settingsOpen = !settingsOpen;resetMenuCloseTimer();">
<i class="fa fa-sliders-h" aria-hidden="true"></i>
<span class="visually-hidden">{{t('settings-tooltip')}}</span>
</button>
</div>
</div>
</div>
<div class="row pt-4 ms-2 me-2 mb-2">
<div class="col">
<button class="btn btn-icon" (click)="setReadingDirection();resetMenuCloseTimer();" [disabled]="readerMode === ReaderMode.Webtoon || readerMode === ReaderMode.UpDown" aria-describedby="reading-direction" [title]="t('reading-direction-tooltip') + readingDirection === ReadingDirection.LeftToRight ? t('left-to-right-alt') : t('right-to-left-alt')">
<i class="fa fa-angle-double-{{readingDirection === ReadingDirection.LeftToRight ? 'right' : 'left'}}" aria-hidden="true"></i>
<span id="reading-direction" class="visually-hidden">{{readingDirection === ReadingDirection.LeftToRight ? t('left-to-right-alt') : t('right-to-left-alt')}}</span>
</button>
</div>
<div class="col">
<button class="btn btn-icon" [title]="t('reading-mode-tooltip')" (click)="toggleReaderMode();resetMenuCloseTimer();">
<i class="fa {{this.readerMode | readerModeIcon}}" aria-hidden="true"></i>
<span class="visually-hidden">{{t('reading-mode-tooltip')}}</span>
</button>
</div>
<div class="col">
<button class="btn btn-icon" title="{{this.isFullscreen ? t('collapse') : t('fullscreen')}}" (click)="toggleFullscreen();resetMenuCloseTimer();">
<i class="fa {{this.isFullscreen | fullscreenIcon}}" aria-hidden="true"></i>
<span class="visually-hidden">{{this.isFullscreen ? t('collapse') : t('fullscreen')}}</span>
</button>
</div>
<div class="col">
<button class="btn btn-icon" [title]="t('settings-tooltip')" (click)="settingsOpen = !settingsOpen;resetMenuCloseTimer();">
<i class="fa fa-sliders-h" aria-hidden="true"></i>
<span class="visually-hidden">{{t('settings-tooltip')}}</span>
</button>
</div>
</div>
<div class="bottom-menu" *ngIf="settingsOpen && generalSettingsForm">
<form [formGroup]="generalSettingsForm">
<div class="row mb-2">
<div class="col-md-6 col-sm-12">
<label for="page-splitting" class="form-label">{{t('image-splitting-label')}}</label>&nbsp;
<div class="split fa fa-image">
<div class="{{SplitIconClass}}"></div>
@if (settingsOpen && generalSettingsForm) {
<div class="bottom-menu">
<form [formGroup]="generalSettingsForm">
<div class="row mb-2">
<div class="col-md-6 col-sm-12">
<label for="page-splitting" class="form-label">{{t('image-splitting-label')}}</label>&nbsp;
<div class="split fa fa-image">
<div class="{{SplitIconClass}}"></div>
</div>
<select class="form-control" id="page-splitting" formControlName="pageSplitOption">
<option *ngFor="let opt of pageSplitOptionsTranslated" [value]="opt.value">{{opt.text}}</option>
</select>
</div>
<div class="col-md-6 col-sm-12">
<label for="page-fitting" class="form-label">{{t('image-scaling-label')}}</label>&nbsp;<i class="{{FittingOption | fittingIcon}}" aria-hidden="true"></i>
<select class="form-control" id="page-fitting" formControlName="fittingOption">
<option value="full-height">{{t('height')}}</option>
<option value="full-width">{{t('width')}}</option>
<option value="original">{{t('original')}}</option>
</select>
</div>
</div>
<select class="form-control" id="page-splitting" formControlName="pageSplitOption">
<option *ngFor="let opt of pageSplitOptionsTranslated" [value]="opt.value">{{opt.text}}</option>
</select>
</div>
<div class="col-md-6 col-sm-12">
<label for="page-fitting" class="form-label">{{t('image-scaling-label')}}</label>&nbsp;<i class="{{FittingOption | fittingIcon}}" aria-hidden="true"></i>
<select class="form-control" id="page-fitting" formControlName="fittingOption">
<option value="full-height">{{t('height')}}</option>
<option value="full-width">{{t('width')}}</option>
<option value="original">{{t('original')}}</option>
</select>
</div>
</div>
<div class="row mb-2">
<div class="col-md-6 col-sm-12">
<label for="layout-mode" class="form-label">Layout Mode</label>&nbsp;
<ng-container [ngSwitch]="layoutMode">
<ng-container *ngSwitchCase="LayoutMode.Single">
<div class="split-double">
<div class="row mb-2">
<div class="col-md-6 col-sm-12">
<label for="layout-mode" class="form-label">Layout Mode</label>&nbsp;
<ng-container [ngSwitch]="layoutMode">
<ng-container *ngSwitchCase="LayoutMode.Single">
<div class="split-double">
<span class="fa-stack fa-1x">
<i class="fa-regular fa-square-full fa-stack-2x"></i>
<i class="fa fa-image fa-stack-1x"></i>
</span>
</div>
</ng-container>
<ng-container *ngSwitchCase="LayoutMode.Double">
<div class="split-double">
</div>
</ng-container>
<ng-container *ngSwitchCase="LayoutMode.Double">
<div class="split-double">
<span class="fa-stack fa-1x">
<i class="fa-regular fa-square-full fa-stack-2x"></i>
<i class="fab fa-1 fa-stack-1x"></i>
</span>
<span class="fa-stack fa right">
<span class="fa-stack fa right">
<i class="fa-regular fa-square-full fa-stack-2x"></i>
<i class="fab fa-2 fa-stack-1x"></i>
</span>
</div>
</ng-container>
<ng-container *ngSwitchCase="LayoutMode.DoubleReversed">
<div class="split-double">
</div>
</ng-container>
<ng-container *ngSwitchCase="LayoutMode.DoubleReversed">
<div class="split-double">
<span class="fa-stack fa-1x">
<i class="fa-regular fa-square-full fa-stack-2x"></i>
<i class="fab fa-2 fa-stack-1x"></i>
</span>
<span class="fa-stack fa right">
<span class="fa-stack fa right">
<i class="fa-regular fa-square-full fa-stack-2x"></i>
<i class="fab fa-1 fa-stack-1x"></i>
</span>
</div>
</ng-container>
</ng-container>
<select class="form-control" id="layout-mode" formControlName="layoutMode">
<option [value]="opt.value" *ngFor="let opt of layoutModesTranslated">{{opt.text}}</option>
</select>
</div>
<div class="col-md-3 col-sm-12">
<div class="mb-3">
<div class="mb-3">
<div class="form-check form-switch">
<input type="checkbox" id="auto-close" formControlName="autoCloseMenu" class="form-check-input" >
<label class="form-check-label" for="auto-close">{{t('auto-close-menu-label')}}</label>
</div>
</div>
</ng-container>
</ng-container>
<select class="form-control" id="layout-mode" formControlName="layoutMode">
<option [value]="opt.value" *ngFor="let opt of layoutModesTranslated">{{opt.text}}</option>
</select>
</div>
</div>
<div class="col-md-3 col-sm-12">
<div class="mb-3">
<div class="mb-3">
<div class="form-check form-switch">
<input type="checkbox" id="auto-close" formControlName="autoCloseMenu" class="form-check-input" >
<label class="form-check-label" for="auto-close">{{t('auto-close-menu-label')}}</label>
</div>
</div>
</div>
<div class="mb-3">
<div class="mb-3">
<div class="form-check form-switch">
<input type="checkbox" id="swipe-to-paginate" formControlName="swipeToPaginate" class="form-check-input" >
<label class="form-check-label" for="swipe-to-paginate">{{t('swipe-enabled-label')}}</label>
<div class="mb-3">
<div class="mb-3">
<div class="form-check form-switch">
<input type="checkbox" id="swipe-to-paginate" formControlName="swipeToPaginate" class="form-check-input" >
<label class="form-check-label" for="swipe-to-paginate">{{t('swipe-enabled-label')}}</label>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-12">
<div class="mb-3">
<div class="mb-3">
<div class="form-check form-switch">
<input type="checkbox" id="emulate-book" formControlName="emulateBook" class="form-check-input">
<label class="form-check-label" for="emulate-book">{{t('emulate-comic-book-label')}}</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-12">
<div class="mb-3">
<div class="mb-3">
<div class="form-check form-switch">
<input type="checkbox" id="emulate-book" formControlName="emulateBook" class="form-check-input">
<label class="form-check-label" for="emulate-book">{{t('emulate-comic-book-label')}}</label>
</div>
<div class="row mb-2">
<div class="col-md-6 col-sm-12">
<label for="darkness" class="form-label range-label">{{t('brightness-label')}}</label>
<span class="ms-1 range-text">{{generalSettingsForm.get('darkness')?.value + '%'}}</span>
<input type="range" class="form-range" id="darkness"
min="10" max="100" step="1" formControlName="darkness">
</div>
<div class="col-md-6 col-sm-12">
<label for="width-override-slider" class="form-label">{{t('width-override-label')}}:
@if (widthOverrideLabel$ | async; as widthOverrideLabel) {
{{ widthOverrideLabel ? widthOverrideLabel : t('off') }}
}
@else {
{{t('off')}}
}
</label>
<input id="width-override-slider" type="range" min="0" max="100" class="form-range" formControlName="widthSlider">
</div>
<div class="col-md-6 col-sm-12">
<button class="btn btn-primary" (click)="savePref()">{{t('save-globally')}}</button>
</div>
</div>
</div>
</form>
</div>
<div class="row mb-2">
<div class="col-md-6 col-sm-12">
<label for="darkness" class="form-label range-label">{{t('brightness-label')}}</label>
<span class="ms-1 range-text">{{generalSettingsForm.get('darkness')?.value + '%'}}</span>
<input type="range" class="form-range" id="darkness"
min="10" max="100" step="1" formControlName="darkness">
</div>
<div class="col-md-6 col-sm-12">
<label for="width-override-slider" class="form-label">{{t('width-override-label')}}:
@if (widthOverrideLabel$ | async; as widthOverrideLabel) {
{{ widthOverrideLabel ? widthOverrideLabel : t('off') }}
}
@else {
{{t('off')}}
}
</label>
<input id="width-override-slider" type="range" min="0" max="100" class="form-range" formControlName="widthSlider">
</div>
<div class="col-md-6 col-sm-12">
<button class="btn btn-primary" (click)="savePref()">{{t('save-globally')}}</button>
</div>
</div>
</form>
}
</div>
</div>
}
</div>
</ng-container>

9
UI/Web/src/app/manga-reader/_components/manga-reader/manga-reader.component.ts
View file

@ -13,7 +13,7 @@ import {
OnInit,
ViewChild
} from '@angular/core';
import {AsyncPipe, DOCUMENT, NgClass, NgFor, NgIf, NgStyle, NgSwitch, NgSwitchCase, PercentPipe} from '@angular/common';
import {AsyncPipe, DOCUMENT, NgClass, NgFor, NgStyle, NgSwitch, NgSwitchCase, PercentPipe} from '@angular/common';
import {ActivatedRoute, Router} from '@angular/router';
import {
BehaviorSubject,
@ -70,6 +70,7 @@ import {SwipeDirective} from '../../../ng-swipe/ng-swipe.directive';
import {LoadingComponent} from '../../../shared/loading/loading.component';
import {translate, TranslocoDirective} from "@jsverse/transloco";
import {shareReplay} from "rxjs/operators";
import {DblClickDirective} from "../../../_directives/dbl-click.directive";
const PREFETCH_PAGES = 10;
@ -123,10 +124,10 @@ enum KeyDirection {
])
],
standalone: true,
imports: [NgStyle, NgIf, LoadingComponent, SwipeDirective, CanvasRendererComponent, SingleRendererComponent,
imports: [NgStyle, LoadingComponent, SwipeDirective, CanvasRendererComponent, SingleRendererComponent,
DoubleRendererComponent, DoubleReverseRendererComponent, DoubleNoCoverRendererComponent, InfiniteScrollerComponent,
NgxSliderModule, ReactiveFormsModule, NgFor, NgSwitch, NgSwitchCase, FittingIconPipe, ReaderModeIconPipe,
FullscreenIconPipe, TranslocoDirective, NgbProgressbar, PercentPipe, NgClass, AsyncPipe]
FullscreenIconPipe, TranslocoDirective, PercentPipe, NgClass, AsyncPipe, DblClickDirective]
})
export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
@ -1656,7 +1657,7 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
/**
* Bookmarks the current page for the chapter
*/
bookmarkPage(event: MouseEvent | undefined = undefined) {
bookmarkPage(event: Event | undefined = undefined) {
if (event) {
event.stopPropagation();
event.preventDefault();

23
UI/Web/src/app/person-detail/person-detail.component.html
View file

@ -14,11 +14,24 @@
<div class="main-container container-fluid pt-2 mb-5">
<div class="row mb-0 mb-xl-3 info-container">
<div class="image-container col-5 col-sm-6 col-md-5 col-lg-5 col-xl-2 col-xxl-2 col-xxxl-2 d-none d-sm-block mt-2">
<app-image [styles]="{'background': 'none', 'max-height': '400px', 'height': '200px', 'width': '200px', 'border-radius': '50%'}"
[imageUrl]="imageService.getPersonImage(person.id)"
[errorImage]="imageService.noPersonImage"></app-image>
</div>
@if (HasCoverImage) {
<div class="image-container col-5 col-sm-6 col-md-5 col-lg-5 col-xl-2 col-xxl-2 col-xxxl-2 d-none d-sm-block mt-2">
<div class="person-badge">
<app-image
objectFit="cover"
height="200px"
width="200px"
[imageUrl]="imageService.getPersonImage(person.id)"
[errorImage]="imageService.noPersonImage"></app-image>
</div>
</div>
} @else {
<div class="image-container col-5 col-sm-6 col-md-5 col-lg-5 col-xl-2 col-xxl-2 col-xxxl-2 d-none d-sm-block mt-2">
<div class="person-badge d-flex align-items-center justify-content-center">
<i class="fas fa-user" aria-hidden="true"></i>
</div>
</div>
}
<div class="col-xl-10 col-lg-7 col-md-12 col-xs-12 col-sm-12 mt-2">
<div class="row g-0 mt-2">

15
UI/Web/src/app/person-detail/person-detail.component.scss
View file

@ -1,4 +1,19 @@
.main-container {
margin-top: 10px;
padding: 0 0 0 10px;
.person-badge {
background: var(--card-bg-color);
max-height: 200px;
height: 200px;
width: 200px;
border-radius: 50%;
overflow: hidden;
i {
max-height: 128px;
height: 128px;
font-size: 8rem;
}
}
}

15
UI/Web/src/app/person-detail/person-detail.component.ts
View file

@ -39,6 +39,7 @@ import {translate, TranslocoDirective} from "@jsverse/transloco";
import {ChapterCardComponent} from "../cards/chapter-card/chapter-card.component";
import {ThemeService} from "../_services/theme.service";
import {DefaultModalOptions} from "../_models/default-modal-options";
import {ToastrService} from "ngx-toastr";
@Component({
selector: 'app-person-detail',
@ -74,6 +75,7 @@ export class PersonDetailComponent {
protected readonly imageService = inject(ImageService);
protected readonly accountService = inject(AccountService);
private readonly themeService = inject(ThemeService);
private readonly toastr = inject(ToastrService);
protected readonly TagBadgeCursor = TagBadgeCursor;
@ -92,6 +94,10 @@ export class PersonDetailComponent {
private readonly personSubject = new BehaviorSubject<Person | null>(null);
protected readonly person$ = this.personSubject.asObservable();
get HasCoverImage() {
return (this.person as Person).coverImage;
}
constructor() {
this.route.paramMap.pipe(
switchMap(params => {
@ -104,7 +110,14 @@ export class PersonDetailComponent {
this.personName = personName;
return this.personService.get(personName);
}),
tap(person => {
tap((person) => {
if (person == null) {
this.toastr.error(translate('toasts.unauthorized-1'));
this.router.navigateByUrl('/home');
return;
}
this.person = person;
this.personSubject.next(person); // emit the person data for subscribers
this.themeService.setColorScape(person.primaryColor || '', person.secondaryColor);

4
UI/Web/src/app/reading-list/_components/reading-list-detail/reading-list-detail.component.html
View file

@ -124,8 +124,8 @@
<!-- Summary row-->
<div class="row g-0 mt-2">
<app-read-more [text]="readingListSummary" [maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 585 : 200"></app-read-more>
<div class="row g-0 my-2">
<app-read-more [text]="readingListSummary" [maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 170 : 200"></app-read-more>
</div>
@if (characters$ | async; as characters) {

4
UI/Web/src/app/series-detail/_components/metadata-detail-row/metadata-detail-row.component.ts
View file

@ -1,5 +1,5 @@
import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';
import {AgeRatingImageComponent} from "../../../_single-modules/age-rating-image/age-rating-image.component";
import {AgeRatingImageComponent} from "../../../_single-module/age-rating-image/age-rating-image.component";
import {CompactNumberPipe} from "../../../_pipes/compact-number.pipe";
import {ReadTimeLeftPipe} from "../../../_pipes/read-time-left.pipe";
import {ReadTimePipe} from "../../../_pipes/read-time.pipe";
@ -17,7 +17,7 @@ import {FilterComparison} from "../../../_models/metadata/v2/filter-comparison";
import {FilterField} from "../../../_models/metadata/v2/filter-field";
import {MangaFormat} from "../../../_models/manga-format";
import {SeriesFormatComponent} from "../../../shared/series-format/series-format.component";
import {PublisherFlipperComponent} from "../../../_single-modules/publisher-flipper/publisher-flipper.component";
import {PublisherFlipperComponent} from "../../../_single-module/publisher-flipper/publisher-flipper.component";
@Component({
selector: 'app-metadata-detail-row',

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

@ -109,7 +109,7 @@
</div>
<div class="mt-2 mb-3">
<app-read-more [text]="seriesMetadata.summary || ''" [maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 585 : 200"></app-read-more>
<app-read-more [text]="seriesMetadata.summary || ''" [maxLength]="(utilityService.activeBreakpoint$ | async)! >= Breakpoint.Desktop ? 170 : 200"></app-read-more>
</div>
<div class="mt-2 upper-details">

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

@ -115,7 +115,7 @@ import {DownloadButtonComponent} from "../download-button/download-button.compon
import {hasAnyCast} from "../../../_models/common/i-has-cast";
import {EditVolumeModalComponent} from "../../../_single-module/edit-volume-modal/edit-volume-modal.component";
import {CoverUpdateEvent} from "../../../_models/events/cover-update-event";
import {RelatedSeriesPair, RelatedTabComponent} from "../../../_single-modules/related-tab/related-tab.component";
import {RelatedSeriesPair, RelatedTabComponent} from "../../../_single-module/related-tab/related-tab.component";
import {CollectionTagService} from "../../../_services/collection-tag.service";
import {UserCollection} from "../../../_models/collection-tag";
import {CoverImageComponent} from "../../../_single-module/cover-image/cover-image.component";

1
UI/Web/src/app/shared/image/image.component.html
View file

@ -1,4 +1,5 @@
<img class="img-placeholder fade-in"
[style]="{ 'object-fit': objectFit }"
#img
alt=""
aria-hidden="true"

4
UI/Web/src/app/shared/image/image.component.ts
View file

@ -65,6 +65,10 @@ export class ImageComponent implements OnChanges {
* If the image load fails, instead of showing an error image, hide the image (visibility)
*/
@Input() hideOnError: boolean = false;
/**
* Sets the object-fit property of the image. Default is 'fill'.
*/
@Input() objectFit: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' = 'fill';
@ViewChild('img', {static: true}) imgElem!: ElementRef<HTMLImageElement>;

38
UI/Web/src/app/shared/person-badge/person-badge.component.html
View file

@ -1,30 +1,26 @@
@if (person !== undefined) {
<div class="tagbadge cursor clickable">
<div class="d-flex flex-column">
@if (HasCoverImage) {
<div class="mx-auto">
<a class="btn btn-icon p-0" routerLink="/person/{{person.name}}">
<app-image height="24px" width="24px" [styles]="{'background': 'none', 'max-height': '48px', 'height': '48px', 'width': '48px', 'border-radius': '50%'}"
[imageUrl]="ImageUrl"
[errorImage]="imageService.noPersonImage">
<a class="btn btn-icon p-0" routerLink="/person/{{person.name}}">
<div class="tagbadge cursor clickable">
<div class="d-flex flex-column align-items-center justify-content-center">
<div class="image-container d-flex align-items-center justify-content-center">
@if (HasCoverImage) {
<app-image
objectFit="cover"
height="96px"
width="96px"
[imageUrl]="ImageUrl"
[errorImage]="imageService.noPersonImage">
</app-image>
</a>
} @else {
<i class="fas fa-user" aria-hidden="true"></i>
}
</div>
} @else {
<div style="background: none; max-height: 48px; height: 48px; width: 48px; border-radius: 50%" class="mx-auto">
<i class="fas fa-user" aria-hidden="true"></i>
</div>
}
<div class="flex-grow-1 text-center mt-2">
@if (isStaff) {
<div class="flex-grow-1 text-center mt-2">
<span class="mt-1 mb-0">{{person.name}}</span>
} @else {
<a class="btn btn-icon p-0" routerLink="/person/{{person.name}}">{{person.name}}</a>
}
</div>
</div>
</div>
</div>
</a>
}

21
UI/Web/src/app/shared/person-badge/person-badge.component.scss
View file

@ -1,18 +1,31 @@
@import '../../../theme/_variables.scss';
.tagbadge {
background-color: var(--tagbadge-bg-color);
transition: all .3s ease-out;
margin: 3px 5px 3px 0px;
padding: 2px 10px;
margin: 3px 10px 3px 0px;
border-radius: 6px;
font-size: .8rem;
display: inline-block;
cursor: pointer;
width: 120px;
width: 96px;
word-break: break-word;
i {
max-height: 48px;
height: 48px;
width: 48px;
font-size: 2.96rem;
font-weight: bold;
cursor: pointer;
}
}
.image-container {
background: var(--card-bg-color);
max-height: 96px;
height: 96px;
width: 96px;
border-radius: 50%;
overflow: hidden;
}
}

7
UI/Web/src/app/shared/read-more/read-more.component.scss
View file

@ -1,3 +1,5 @@
@import "../../../theme/variables";
.blur-text {
color: transparent;
text-shadow: 0 0 5px var(--body-text-color);
@ -8,5 +10,10 @@
div {
word-break: break-word;
max-width: 75ch;
@media (max-width: $grid-breakpoints-sm) {
max-width: 50ch;
}
}
}

2
UI/Web/src/app/volume-detail/volume-detail.component.html
View file

@ -89,7 +89,7 @@
</div>
<div class="mt-2 mb-3">
<app-read-more [text]="volume.chapters[0].summary || ''" [maxLength]="utilityService.getActiveBreakpoint() >= Breakpoint.Desktop ? 585 : 250"></app-read-more>
<app-read-more [text]="volume.chapters[0].summary || ''" [maxLength]="utilityService.getActiveBreakpoint() >= Breakpoint.Desktop ? 170 : 200"></app-read-more>
</div>
<div class="mt-2">

2
UI/Web/src/app/volume-detail/volume-detail.component.ts
View file

@ -59,7 +59,7 @@ import {
} from "../_single-module/edit-volume-modal/edit-volume-modal.component";
import {Genre} from "../_models/metadata/genre";
import {Tag} from "../_models/tag";
import {RelatedTabComponent} from "../_single-modules/related-tab/related-tab.component";
import {RelatedTabComponent} from "../_single-module/related-tab/related-tab.component";
import {ReadingList} from "../_models/reading-list";
import {ReadingListService} from "../_services/reading-list.service";
import {BadgeExpanderComponent} from "../shared/badge-expander/badge-expander.component";

31
UI/Web/src/theme/components/_sidenav.scss
View file

@ -12,6 +12,7 @@
border-radius: var(--side-nav-border-radius);
transition: width var(--side-nav-openclose-transition), background-color var(--side-nav-bg-color-transition), border-color var(--side-nav-border-transition);
border: var(--side-nav-border);
overflow: hidden;
&::-webkit-scrollbar {
visibility: hidden;
@ -27,7 +28,7 @@
}
//START closed state of the sidebar
&.closed {
width: 4.0625rem;
width: 2.825rem;
overflow-x: hidden;
overflow-y: hidden;
background-color: var(--side-nav-closed-bg-color);
@ -49,11 +50,6 @@
opacity: 0;
}
.side-nav-text {
opacity: 0;
display: none;
}
.card-actions {
opacity: 0;
display: none;
@ -64,7 +60,7 @@
//END closed state of the sidebar
//START sidebar
.side-nav {
overflow-y: hidden;
overflow: hidden;
height: 100%;
scrollbar-gutter: stable;
scrollbar-width: thin;
@ -73,7 +69,7 @@
position: relative;
align-items: center;
display: flex;
justify-content: space-between;
justify-content: start;
width: 100%;
height: auto;
min-height: 2.6rem;
@ -89,6 +85,7 @@
&:first-of-type {
text-align: center;
width: 2.5rem;
min-width: 2.5rem;
margin-left: 0.3rem;
}
@ -101,7 +98,7 @@
align-items: center;
height: 100%;
justify-content: inherit;
width: 100%;
padding: 0 0.625rem;
i {
font-size: var(--side-nav-icon-size);
@ -291,10 +288,6 @@
.side-nav-item {
width: 100%;
padding: 0;
display: block;
line-height: 2.5rem;
text-align: center;
min-height: unset;
color: var(--side-nav-item-closed-color);
&:hover {
@ -317,11 +310,13 @@
margin: 0;
left: 0;
top: 0;
transition: width var(--side-nav-openclose-transition);
transition: width var(--side-nav-openclose-transition), visibility var(--side-nav-openclose-transition);
z-index: 1050;
overflow-x: hidden;
overflow-y: auto;
border: var(--side-nav-mobile-border);
border-radius: 0rem;
visibility: visible;
&.preference {
background-color: unset;
@ -349,8 +344,10 @@
&.closed {
width: 0;
background-color: var(--side-nav-mobile-bg-color);
overflow: hidden;
box-shadow: none;
visibility: hidden;
}
.side-nav {
@ -383,9 +380,13 @@
left: 0;
top: 0;
z-index: 1041;
visibility: visible;
opacity: 1;
transition: visibility var(--side-nav-openclose-transition), opacity var(--side-nav-openclose-transition);
&.closed {
display: none;
visibility: hidden;
opacity: 0;
}
}
}