Lowering line clamp on reading lists to fix overlap

Fixes #3636

UI/Web/package-lock.json

@@ -465,7 +465,6 @@
       "version": "18.2.9",
       "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-18.2.9.tgz",
       "integrity": "sha512-4iMoRvyMmq/fdI/4Gob9HKjL/jvTlCjbS4kouAYHuGO9w9dmUhi1pY1z+mALtCEl9/Q8CzU2W8e5cU2xtV4nVg==",
-      "dev": true,
       "dependencies": {
         "@babel/core": "7.25.2",
         "@jridgewell/sourcemap-codec": "^1.4.14",
@@ -493,7 +492,6 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",
       "integrity": "sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==",
-      "dev": true,
       "dependencies": {
         "readdirp": "^4.0.1"
       },
@@ -508,7 +506,6 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.0.2.tgz",
       "integrity": "sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==",
-      "dev": true,
       "engines": {
         "node": ">= 14.16.0"
       },
@@ -4025,8 +4022,7 @@
     "node_modules/convert-source-map": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
-      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
-      "dev": true
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="
     },
     "node_modules/cosmiconfig": {
       "version": "8.3.6",
@@ -4533,7 +4529,6 @@
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz",
       "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "iconv-lite": "^0.6.2"
@@ -4543,7 +4538,6 @@
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
       "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
-      "dev": true,
       "optional": true,
       "dependencies": {
         "safer-buffer": ">= 2.1.2 < 3.0.0"
@@ -7485,8 +7479,7 @@
     "node_modules/reflect-metadata": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz",
-      "integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==",
-      "dev": true
+      "integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q=="
     },
     "node_modules/replace-in-file": {
       "version": "7.1.0",
@@ -7757,7 +7750,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/sass": {
       "version": "1.77.6",
@@ -7791,7 +7784,6 @@
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
       "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       },
@@ -8346,7 +8338,6 @@
       "version": "5.5.4",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.4.tgz",
       "integrity": "sha512-Mtq29sKDAEYP7aljRgtPOpTvOfbwRWlS6dPRzwjdE+C0R4brX/GUyhHSecbHMFLNBLcJIPt9nl9yG5TZ1weH+Q==",
-      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"

UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html

@@ -24,7 +24,7 @@
   }
 
   <app-metadata-filter [filterSettings]="filterSettings" [filterOpen]="filterOpen" (applyFilter)="applyMetadataFilter($event)"></app-metadata-filter>
-  <div class="viewport-container ms-1" [ngClass]="{'empty': items.length === 0 && !isLoading}">
+  <div class="viewport-container ms-1" [ngClass]="{'empty': items.length === 0 && !isLoading, 'expanded': (isFilterOpen$ | async)}">
     <div class="content-container">
       <div class="card-container mt-">
         @if (items.length === 0 && !isLoading) {

UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.scss

@@ -5,11 +5,21 @@
     height: calc((var(--vh) *100) - 157px);
     margin-bottom: 10px;
 
+    &.expanded {
+      height: calc((var(--vh) *100) - 520px);
+    }
+
+
+
     &.empty {
         height: auto;
     }
 }
 
+::ng-deep .viewport-container.expanded  .virtual-scroller, ::ng-deep .viewport-container.expanded virtual-scroller {
+  height: calc((var(--vh) *100) - 520px);
+}
+
 .content-container {
     display: flex;
     flex-direction: column;

UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts

@@ -1,4 +1,4 @@
-import {DOCUMENT, NgClass, NgForOf, NgTemplateOutlet} from '@angular/common';
+import {AsyncPipe, DOCUMENT, NgClass, NgForOf, NgTemplateOutlet} from '@angular/common';
 import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
@@ -36,9 +36,10 @@ import {MetadataFilterComponent} from "../../metadata-filter/metadata-filter.com
 import {TranslocoDirective} from "@jsverse/transloco";
 import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component";
 import {SeriesFilterV2} from "../../_models/metadata/v2/series-filter-v2";
-import {filter, map} from "rxjs/operators";
+import {filter, map, startWith} from "rxjs/operators";
 import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
-import {tap} from "rxjs";
+import {of, pipe, tap} from "rxjs";
+import { ToggleService } from 'src/app/_services/toggle.service';
 
 
 const ANIMATION_TIME_MS = 0;
@@ -47,7 +48,7 @@ const ANIMATION_TIME_MS = 0;
   selector: 'app-card-detail-layout',
   standalone: true,
   imports: [LoadingComponent, VirtualScrollerModule, CardActionablesComponent, NgbTooltip, MetadataFilterComponent,
-    TranslocoDirective, NgTemplateOutlet, NgClass, NgForOf],
+    TranslocoDirective, NgTemplateOutlet, NgClass, NgForOf, AsyncPipe],
   templateUrl: './card-detail-layout.component.html',
   styleUrls: ['./card-detail-layout.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -60,6 +61,7 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
   private readonly jumpbarService = inject(JumpbarService);
   private readonly router = inject(Router);
   private readonly destroyRef = inject(DestroyRef);
+  private readonly toggleService = inject(ToggleService);
 
   protected readonly Breakpoint = Breakpoint;
 
@@ -73,7 +75,7 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
   @Input() parentScroll!: Element | Window;
 
   // Filter Code
-  @Input() filterOpen!: EventEmitter<boolean>;
+  @Input() filterOpen!: EventEmitter<boolean>; // TODO: Remove, we use a toggleservice
   /**
    * Should filtering be shown on the page
    */
@@ -108,6 +110,8 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
   updateApplied: number = 0;
   bufferAmount: number = 1;
 
+  isFilterOpen$ = this.toggleService.toggleState$.pipe(takeUntilDestroyed(this.destroyRef), startWith(false));
+
 
 
   constructor(@Inject(DOCUMENT) private document: Document) {}
@@ -169,6 +173,7 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
         setTimeout(() => this.virtualScroller.scrollToIndex(0, true, 0, ANIMATION_TIME_MS), 10);
       }
     }
+    
   }
 
   hasCustomSort() {

UI/Web/src/app/cards/series-card/series-card.component.html

@@ -66,7 +66,7 @@
 
     <div class="card-title-container">
       <app-series-format [format]="series.format"></app-series-format>
-      <span class="card-title" [ngbTooltip]="series.name" id="{{series.id}}">
+      <span class="card-title" [ngbTooltip]="series.name" placement="top" id="{{series.id}}">
         <a class="dark-exempt btn-icon" routerLink="/library/{{libraryId}}/series/{{series.id}}">
           {{series.name}}
         </a>

UI/Web/src/app/metadata-filter/metadata-filter.component.ts

@@ -38,7 +38,7 @@ import {
   Select2UpdateValue
 } from "ng-select2-component";
 import {SmartFilter} from "../_models/metadata/v2/smart-filter";
-import {animate, state, style, transition, trigger} from "@angular/animations";
+import {animate, keyframes, state, style, transition, trigger} from "@angular/animations";
 
 const ANIMATION_SPEED = 750;
 
@@ -55,7 +55,11 @@ const ANIMATION_SPEED = 750;
           [
             style({ height: 0, opacity: 0 }),
             animate('.5s ease-out',
-              style({ height: 300, opacity: 1 }))
+              keyframes([
+                style({ height: 300, offset: 0}),
+                style({ opacity: 1, offset: 0.8 })
+              ])
+            )
           ]
         ),
         transition(
@@ -63,9 +67,14 @@ const ANIMATION_SPEED = 750;
           [
             style({ height: 300, opacity: 1 }),
             animate('.5s ease-in',
-              style({ height: 0, opacity: 0 }))
-          ]
-        )
+              keyframes([
+                
+                style({ opacity: 0, offset: 0 }),
+                style({ height: 0, offset: 0.8})
+              ])
+            )
+          ],
+        ),
       ]
     ),
   ],

UI/Web/src/app/reading-list/_components/reading-list-item/reading-list-item.component.scss

@@ -36,7 +36,7 @@ $image-height: 125px;
 }
 
 ::ng-deep .read-more-cont div {
-    -webkit-line-clamp: 4;
+    -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
     display:-webkit-box;
@@ -45,7 +45,7 @@ $image-height: 125px;
 
 @media (max-width: 576px) {
     ::ng-deep .read-more-cont div {
-        -webkit-line-clamp: 4;
+        -webkit-line-clamp: 3;
         -webkit-box-orient: vertical;
         overflow: hidden;
         display:-webkit-box;

UI/Web/src/app/settings/_components/setting-item/setting-item.component.html

@@ -1,6 +1,6 @@
 <ng-container *transloco="let t;">
   <div>
-    <div class="settings-row g-0 row">
+    <div class="settings-row g-3 align-items-center mb-2 row">
       <div class="col-auto {{fixedExtras ? 'setting-title no-anim edit' : 'setting-title edit'}}">
         <h6 class="section-title">
           @if (labelId) {

UI/Web/src/styles.scss

@@ -93,10 +93,6 @@ app-root {
   scrollbar-color: rgba(255,255,255,0.3);
 }
 
-::-webkit-scrollbar {
-  width: 10px !important;
-}
-
 ::-webkit-scrollbar-thumb {
   background-clip: padding-box;
   border: 3px solid transparent;