From 9f3c6d2ac3824e49063700a53e72c27dd5b4a9a1 Mon Sep 17 00:00:00 2001 From: Youwes09 Date: Tue, 28 Apr 2026 22:09:36 -0500 Subject: [PATCH] Fix: LibraryGrid with Z-Index Applied (#57) --- Todo | 17 +++++++++++------ .../library/components/LibraryGrid.svelte | 4 ++-- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/Todo b/Todo index b7a79b3..f552946 100644 --- a/Todo +++ b/Todo @@ -19,21 +19,26 @@ Priority Bugs: - Allow User to Wipe Suwayomi (Scratch) - If Possible, Component based Wipe (Library, Etc) - -In-Progress: - - Enable Cloudflare Bypass (Suwayomi Config) (Requires Patching) +Pending/On-Hold: +- Enable Cloudflare Bypass (Suwayomi Config) (Requires Patching) - Working on 3D Display Cards - Add Flathub Support (Pending Video) - +In-Progress: - Fix Tracking Login - Pasting OAuth URL is not User-Friendly, Look for Alternatives - Tracking - Fix SeriesDetail Tracking Window (Maybe Link to TrackingPanel) -- Hide Completed from Library Settting + - Refactor Content-Filters, Change Source-Enabling (More Intuitive) + - Integrate Tauri JSON for Settings + - Create Migration Logic for Local Storage + - Integrate Tauri SQLITE for Caching + - Document Caching (What is being Loaded) + - Create Proper Cache-Clearing & Tie into Suwayomi Methods Notes from last time: - - Currently working on #42, just need to mount panel and fix button in reader \ No newline at end of file + - Fixed Search Issue + - Create Z-Index for Library Statistics diff --git a/src/features/library/components/LibraryGrid.svelte b/src/features/library/components/LibraryGrid.svelte index 99f65a8..bea2a3e 100644 --- a/src/features/library/components/LibraryGrid.svelte +++ b/src/features/library/components/LibraryGrid.svelte @@ -196,7 +196,7 @@ .card.anims .cover-wrap { transition: transform 0.18s cubic-bezier(0.16,1,0.3,1), border-color var(--t-base), box-shadow 0.18s cubic-bezier(0.16,1,0.3,1); } .cover-wrap.completed { box-shadow: inset 0 -2px 0 0 var(--accent); } .card.anims .cover { transition: filter var(--t-base); } - .card-info-overlay { position: absolute; bottom: 0px; left: 0; right: 0; padding: 32px 6px 10px; background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 50%, transparent 100%); opacity: 0; pointer-events: none; } + .card-info-overlay { position: absolute; bottom: -4px; left: 0; right: 0; z-index: 2; padding: 32px 6px 10px; background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.5) 50%, transparent 100%); opacity: 0; pointer-events: none; } .card-info-overlay.anim { transition: opacity 0.18s ease; } .card-info-overlay.instant { transition: none; } .card-info-overlay.always { opacity: 1; } @@ -206,7 +206,7 @@ .badge-unread { background: var(--accent); color: #fff; box-shadow: 0 1px 8px rgba(0,0,0,0.5); } .badge-done { background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.25); } .badge-dl { background: rgba(0,0,0,0.55); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.18); margin-left: auto; } - .select-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.18); display: flex; align-items: flex-start; justify-content: flex-end; padding: 6px; pointer-events: none; } + .select-overlay { position: absolute; inset: 0; z-index: 3; background: rgba(0,0,0,0.18); display: flex; align-items: flex-start; justify-content: flex-end; padding: 6px; pointer-events: none; } .select-check { color: var(--text-faint); opacity: 0.7; transition: color var(--t-base), opacity var(--t-base); } .select-check.checked { color: var(--accent-fg); opacity: 1; } .select-check-empty { width: 20px; height: 20px; border-radius: 4px; border: 2px solid var(--text-faint); background: rgba(0,0,0,0.3); }