= [
- {title: this.translocoService.translate('import-cbl-modal.import-step'), index: Step.Import, active: true, icon: 'fa-solid fa-file-arrow-up'},
- {title: this.translocoService.translate('import-cbl-modal.validate-cbl-step'), index: Step.Validate, active: false, icon: 'fa-solid fa-spell-check'},
- {title: this.translocoService.translate('import-cbl-modal.dry-run-step'), index: Step.DryRun, active: false, icon: 'fa-solid fa-gears'},
- {title: this.translocoService.translate('import-cbl-modal.final-import-step'), index: Step.Finalize, active: false, icon: 'fa-solid fa-floppy-disk'},
+ {title: translate('import-cbl-modal.import-step'), index: Step.Import, active: true, icon: 'fa-solid fa-file-arrow-up'},
+ {title: translate('import-cbl-modal.validate-cbl-step'), index: Step.Validate, active: false, icon: 'fa-solid fa-spell-check'},
+ {title: translate('import-cbl-modal.dry-run-step'), index: Step.DryRun, active: false, icon: 'fa-solid fa-gears'},
+ {title: translate('import-cbl-modal.final-import-step'), index: Step.Finalize, active: false, icon: 'fa-solid fa-floppy-disk'},
];
currentStepIndex = this.steps[0].index;
@@ -103,7 +101,7 @@ export class ImportCblModalComponent {
case Step.Import:
const files = this.uploadForm.get('files')?.value;
if (!files) {
- this.toastr.error(this.translocoService.translate('toasts.select-files-warning'));
+ this.toastr.error(translate('toasts.select-files-warning'));
return;
}
// Load each file into filesToProcess and group their data
@@ -236,7 +234,7 @@ export class ImportCblModalComponent {
this.isLoading = false;
this.currentStepIndex++;
- this.toastr.success(this.translocoService.translate('toasts.reading-list-imported'));
+ this.toastr.success(translate('toasts.reading-list-imported'));
this.cdRef.markForCheck();
});
}
diff --git a/UI/Web/src/app/shared/edit-list/edit-list.component.html b/UI/Web/src/app/shared/edit-list/edit-list.component.html
index 7245422d90..8fbd7568dc 100644
--- a/UI/Web/src/app/shared/edit-list/edit-list.component.html
+++ b/UI/Web/src/app/shared/edit-list/edit-list.component.html
@@ -5,7 +5,7 @@
diff --git a/UI/Web/src/app/sidenav/_components/customize-dashboard-modal/customize-dashboard-modal.component.ts b/UI/Web/src/app/sidenav/_components/customize-dashboard-modal/customize-dashboard-modal.component.ts
index 2e00b966d9..b0b5d8615e 100644
--- a/UI/Web/src/app/sidenav/_components/customize-dashboard-modal/customize-dashboard-modal.component.ts
+++ b/UI/Web/src/app/sidenav/_components/customize-dashboard-modal/customize-dashboard-modal.component.ts
@@ -27,7 +27,8 @@ enum TabID {
selector: 'app-customize-dashboard-modal',
standalone: true,
imports: [CommonModule, SafeHtmlPipe, TranslocoDirective, DraggableOrderedListComponent, ReadingListItemComponent, DashboardStreamListItemComponent,
- NgbNav, NgbNavContent, NgbNavLink, NgbNavItem, NgbNavOutlet, CustomizeDashboardStreamsComponent, CustomizeSidenavStreamsComponent, ManageExternalSourcesComponent, ManageSmartFiltersComponent],
+ NgbNav, NgbNavContent, NgbNavLink, NgbNavItem, NgbNavOutlet, CustomizeDashboardStreamsComponent, CustomizeSidenavStreamsComponent,
+ ManageExternalSourcesComponent, ManageSmartFiltersComponent],
templateUrl: './customize-dashboard-modal.component.html',
styleUrls: ['./customize-dashboard-modal.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/UI/Web/src/app/sidenav/_components/customize-dashboard-streams/customize-dashboard-streams.component.ts b/UI/Web/src/app/sidenav/_components/customize-dashboard-streams/customize-dashboard-streams.component.ts
index 3ed5fa5c3f..d93a39fb84 100644
--- a/UI/Web/src/app/sidenav/_components/customize-dashboard-streams/customize-dashboard-streams.component.ts
+++ b/UI/Web/src/app/sidenav/_components/customize-dashboard-streams/customize-dashboard-streams.component.ts
@@ -13,6 +13,7 @@ import {forkJoin} from "rxjs";
import {TranslocoDirective} from "@ngneat/transloco";
import {FormControl, FormGroup, ReactiveFormsModule} from "@angular/forms";
import {FilterPipe} from "../../../_pipes/filter.pipe";
+import {Breakpoint, UtilityService} from "../../../shared/_services/utility.service";
@Component({
selector: 'app-customize-dashboard-streams',
@@ -31,6 +32,7 @@ export class CustomizeDashboardStreamsComponent {
private readonly dashboardService = inject(DashboardService);
private readonly filterService = inject(FilterService);
private readonly cdRef = inject(ChangeDetectorRef);
+ private readonly utilityService = inject(UtilityService);
listForm: FormGroup = new FormGroup({
'filterQuery': new FormControl('', [])
@@ -50,7 +52,7 @@ export class CustomizeDashboardStreamsComponent {
this.items = results[0];
// After 100 items, drag and drop is disabled to use virtualization
- if (this.items.length > 100) {
+ if (this.items.length > 100 || this.utilityService.getActiveBreakpoint() <= Breakpoint.Tablet) {
this.accessibilityMode = true;
}
diff --git a/UI/Web/src/app/sidenav/_components/customize-sidenav-streams/customize-sidenav-streams.component.ts b/UI/Web/src/app/sidenav/_components/customize-sidenav-streams/customize-sidenav-streams.component.ts
index 5d232c1526..9dc7378a99 100644
--- a/UI/Web/src/app/sidenav/_components/customize-sidenav-streams/customize-sidenav-streams.component.ts
+++ b/UI/Web/src/app/sidenav/_components/customize-sidenav-streams/customize-sidenav-streams.component.ts
@@ -2,7 +2,7 @@ import {
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
- DestroyRef, EventEmitter,
+ DestroyRef,
HostListener,
inject,
OnDestroy
@@ -29,9 +29,9 @@ import {FilterPipe} from "../../../_pipes/filter.pipe";
import {BulkOperationsComponent} from "../../../cards/bulk-operations/bulk-operations.component";
import {Action, ActionItem} from "../../../_services/action-factory.service";
import {BulkSelectionService} from "../../../cards/bulk-selection.service";
-import {filter, tap} from "rxjs/operators";
+import {tap} from "rxjs/operators";
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
-import {KEY_CODES} from "../../../shared/_services/utility.service";
+import {Breakpoint, KEY_CODES, UtilityService} from "../../../shared/_services/utility.service";
@Component({
selector: 'app-customize-sidenav-streams',
@@ -43,7 +43,6 @@ import {KEY_CODES} from "../../../shared/_services/utility.service";
})
export class CustomizeSidenavStreamsComponent implements OnDestroy {
- //@Input({required: true}) parentScrollElem!: Element | Window;
items: SideNavStream[] = [];
smartFilters: SmartFilter[] = [];
externalSources: ExternalSource[] = [];
@@ -108,6 +107,7 @@ export class CustomizeSidenavStreamsComponent implements OnDestroy {
private readonly cdRef = inject(ChangeDetectorRef);
private readonly destroyRef = inject(DestroyRef);
public readonly bulkSelectionService = inject(BulkSelectionService);
+ public readonly utilityService = inject(UtilityService);
@HostListener('document:keydown.shift', ['$event'])
handleKeypress(event: KeyboardEvent) {
@@ -172,7 +172,7 @@ export class CustomizeSidenavStreamsComponent implements OnDestroy {
this.items = results[0];
// After X items, drag and drop is disabled to use virtualization
- if (this.items.length > this.virtualizeAfter) {
+ if (this.items.length > this.virtualizeAfter || this.utilityService.getActiveBreakpoint() <= Breakpoint.Tablet) {
this.pageOperationsForm.get('accessibilityMode')?.setValue(true);
}
diff --git a/UI/Web/src/app/sidenav/_modals/library-settings-modal/library-settings-modal.component.html b/UI/Web/src/app/sidenav/_modals/library-settings-modal/library-settings-modal.component.html
index 7299e4add4..ac5ddceaaf 100644
--- a/UI/Web/src/app/sidenav/_modals/library-settings-modal/library-settings-modal.component.html
+++ b/UI/Web/src/app/sidenav/_modals/library-settings-modal/library-settings-modal.component.html
@@ -66,10 +66,10 @@