From 991c58d91d46f38bcf636ea8d1e469d8df5da39f Mon Sep 17 00:00:00 2001 From: lenafx Date: Wed, 31 Dec 2025 18:33:03 +0100 Subject: [PATCH] better double page on reader --- desktop/src/scripts/books/reader.js | 12 ++++ desktop/views/css/books/reader.css | 102 ++++++++++++++++++++++++---- docker/src/scripts/books/reader.js | 12 ++++ docker/views/css/books/reader.css | 10 +++ 4 files changed, 124 insertions(+), 12 deletions(-) diff --git a/desktop/src/scripts/books/reader.js b/desktop/src/scripts/books/reader.js index 93c672e..9c83bc4 100644 --- a/desktop/src/scripts/books/reader.js +++ b/desktop/src/scripts/books/reader.js @@ -469,6 +469,18 @@ function createImageElement(page, index) { } }; + img.onload = () => { + const ratio = img.naturalWidth / img.naturalHeight; + + if (ratio > 1.3) { + const double = img.closest('.double-container'); + if (double) { + double.replaceWith(img); + } + } + }; + + if (config.manga.mode === 'longstrip' && index > 0) { img.classList.add('longstrip-fit'); } else { diff --git a/desktop/views/css/books/reader.css b/desktop/views/css/books/reader.css index a616a21..f5510a9 100644 --- a/desktop/views/css/books/reader.css +++ b/desktop/views/css/books/reader.css @@ -4,11 +4,15 @@ --bg-hover: #252530; } -.hidden { display: none !important; } +.hidden { + display: none !important; +} .top-bar { position: fixed; - top: 0; left: 0; right: 0; + top: 0; + left: 0; + right: 0; height: 64px; background: rgba(10, 10, 15, 0.85); backdrop-filter: blur(20px) saturate(180%); @@ -107,7 +111,9 @@ height: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); - transition: transform 0.2s ease, box-shadow 0.2s ease; + transition: + transform 0.2s ease, + box-shadow 0.2s ease; cursor: pointer; display: block; } @@ -160,7 +166,9 @@ box-shadow: var(--shadow-lg); object-fit: contain; cursor: pointer; - transition: transform 0.2s ease, box-shadow 0.2s ease; + transition: + transform 0.2s ease, + box-shadow 0.2s ease; } .double-container img:hover { @@ -174,7 +182,7 @@ padding: 3rem 2.5rem; line-height: var(--ln-line-height, 1.8); font-size: var(--ln-font-size, 18px); - font-family: var(--ln-font-family, 'Georgia', serif); + font-family: var(--ln-font-family, "Georgia", serif); color: var(--ln-text-color, #e5e7eb); text-align: var(--ln-text-align, left); } @@ -183,7 +191,9 @@ margin-bottom: 1.5em; } -.ln-content h1, .ln-content h2, .ln-content h3 { +.ln-content h1, +.ln-content h2, +.ln-content h3 { margin-top: 2em; margin-bottom: 1em; font-weight: 700; @@ -297,7 +307,7 @@ .control label span { color: var(--color-text-primary); font-weight: 600; - font-family: 'JetBrains Mono', monospace; + font-family: "JetBrains Mono", monospace; font-size: 0.8125rem; } @@ -338,7 +348,9 @@ input[type="range"]::-moz-range-thumb { transition: all 0.2s; } -select, input[type="color"], input[type="number"] { +select, +input[type="color"], +input[type="number"] { width: 100%; padding: 0.625rem 0.875rem; border-radius: var(--radius-md); @@ -350,11 +362,15 @@ select, input[type="color"], input[type="number"] { border: 1px solid var(--border-subtle); } -select:hover, input[type="color"]:hover, input[type="number"]:hover { +select:hover, +input[type="color"]:hover, +input[type="number"]:hover { border-color: var(--color-primary); } -select:focus, input[type="color"]:focus, input[type="number"]:focus { +select:focus, +input[type="color"]:focus, +input[type="number"]:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-glow); @@ -454,7 +470,9 @@ input[type="color"] { } @keyframes spin { - to { transform: rotate(360deg); } + to { + transform: rotate(360deg); + } } .loading-container { @@ -544,4 +562,64 @@ input[type="color"] { max-width: 50%; margin: 0 auto; display: block; -} \ No newline at end of file +} + +@media (max-width: 768px) { + #reader { + padding-left: 0 !important; + padding-right: 0 !important; + + padding-top: 64px; + } + + .manga-container { + width: 100% !important; + max-width: 100% !important; + gap: 0 !important; + } + + .page-img { + width: 100% !important; + max-width: 100% !important; + height: auto !important; + border-radius: 0 !important; + box-shadow: none !important; + } + + .page-img.longstrip-fit { + width: 100% !important; + max-width: 100% !important; + margin: 0 !important; + } + + .double-container { + flex-direction: column !important; + gap: 0 !important; + width: 100% !important; + } + + .double-container img { + width: 100% !important; + max-width: 100% !important; + border-radius: 0 !important; + } + + .fit-height, + .fit-screen { + width: 100% !important; + height: auto !important; + max-height: none !important; + max-width: 100% !important; + object-fit: contain !important; + } +} + +.double-container.break-double { + display: block; +} + +.double-container.break-double img { + width: 100%; + max-width: 100%; + display: block; +} diff --git a/docker/src/scripts/books/reader.js b/docker/src/scripts/books/reader.js index 93c672e..9c83bc4 100644 --- a/docker/src/scripts/books/reader.js +++ b/docker/src/scripts/books/reader.js @@ -469,6 +469,18 @@ function createImageElement(page, index) { } }; + img.onload = () => { + const ratio = img.naturalWidth / img.naturalHeight; + + if (ratio > 1.3) { + const double = img.closest('.double-container'); + if (double) { + double.replaceWith(img); + } + } + }; + + if (config.manga.mode === 'longstrip' && index > 0) { img.classList.add('longstrip-fit'); } else { diff --git a/docker/views/css/books/reader.css b/docker/views/css/books/reader.css index 15de903..d4ad9f4 100644 --- a/docker/views/css/books/reader.css +++ b/docker/views/css/books/reader.css @@ -613,3 +613,13 @@ input[type="color"] { object-fit: contain !important; } } + +.double-container.break-double { + display: block; +} + +.double-container.break-double img { + width: 100%; + max-width: 100%; + display: block; +}