better double page on reader

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 {

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;
-}
+}
+
+@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;
+}

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 {

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;
+}