From 8c97af0ac551892327a313e0df2f156fc83f5fa7 Mon Sep 17 00:00:00 2001
From: perennial <mail@perennialte.ch>
Date: Mon, 7 Oct 2024 01:30:11 +1100
Subject: [PATCH] novel: settings modal

---
 assets/views/novel.jet.html | 160 +++++++++++++++++++++++++-----------
 1 file changed, 112 insertions(+), 48 deletions(-)

diff --git a/assets/views/novel.jet.html b/assets/views/novel.jet.html
index 23ed36b..323d512 100644
--- a/assets/views/novel.jet.html
+++ b/assets/views/novel.jet.html
@@ -93,60 +93,63 @@
     </div>
   </div>
 
-  <div class="col-12 col-lg-9">
-    <div class="custom-card">
-      <div class="custom-card-body bg-charcoal-surface1 p-4">
-        <h2><i class="bi bi-gear-fill me-2"></i>Options</h2>
+  <noscript>
+    <!-- col-12 because noscript forces d-inline which causes justify-content-center to break -->
+    <div class="col-12">
+      <div class="custom-card">
+        <div class="custom-card-body bg-charcoal-surface1 p-4">
+          <h2><i class="bi bi-gear-fill me-2"></i>Options</h2>
 
-        <ul class="list-group list-group-flush">
-          <li class="list-group-item bg-charcoal-surface1 pt-0 pb-4 px-0">
-            <h3>Font family</h3>
-            <p>Choose the font style for displaying novels. This affects the readability and aesthetic of the text.</p>
-            <form id="novel-font-form" hx-post="/settings/novelFontType" hx-target="#novel-font-response" hx-swap="outerHTML">
-              <div class="form-check mb-3">
-                <input class="form-check-input" type="radio" name="font-type" id="font-type-mincho" value="mincho" />
-                <label class="form-check-label fw-bold" for="font-type-mincho">Mincho</label>
-                <div id="font-type-mincho-help" class="form-text">A serif font style that resembles traditional Japanese printing. It's often used for formal or literary content, providing a classic and elegant look.</div>
-              </div>
-              <div class="form-check mb-3">
-                <input class="form-check-input" type="radio" name="font-type" id="font-type-gothic" value="gothic" checked />
-                <label class="form-check-label fw-bold" for="font-type-gothic">Gothic</label>
-                <div id="font-type-gothic-help" class="form-text">A sans-serif font style that's clean and modern. It's commonly used for easy readability on digital screens, offering a contemporary appearance.</div>
-              </div>
+          <ul class="list-group list-group-flush">
+            <li class="list-group-item bg-charcoal-surface1 pt-0 pb-4 px-0">
+              <h3>Font family</h3>
+              <p>Choose the font style for displaying novels. This affects the readability and aesthetic of the text.</p>
+              <form id="novel-font-form" hx-post="/settings/novelFontType" hx-target="#novel-font-response" hx-swap="outerHTML">
+                <div class="form-check mb-3">
+                  <input class="form-check-input" type="radio" name="font-type" id="font-type-mincho" value="mincho" />
+                  <label class="form-check-label fw-bold" for="font-type-mincho">Mincho</label>
+                  <div id="font-type-mincho-help" class="form-text">A serif font style that resembles traditional Japanese printing. It's often used for formal or literary content, providing a classic and elegant look.</div>
+                </div>
+                <div class="form-check mb-3">
+                  <input class="form-check-input" type="radio" name="font-type" id="font-type-gothic" value="gothic" checked />
+                  <label class="form-check-label fw-bold" for="font-type-gothic">Gothic</label>
+                  <div id="font-type-gothic-help" class="form-text">A sans-serif font style that's clean and modern. It's commonly used for easy readability on digital screens, offering a contemporary appearance.</div>
+                </div>
 
-              <button type="submit" class="custom-btn-secondary bg-charcoal-surface2">Save</button>
-            </form>
-            <div id="novel-font-response"></div>
-          </li>
+                <button type="submit" class="custom-btn-secondary bg-charcoal-surface2">Save</button>
+              </form>
+              <div id="novel-font-response"></div>
+            </li>
 
-          <li class="list-group-item bg-charcoal-surface1 pt-4 pb-0 px-0">
-            <h3>Force text orientation</h3>
-            <p>Set the text orientation for novels. This affects how the text is displayed and read on the page.</p>
-            <form id="novel-view-mode-form" hx-post="/settings/novelViewMode" hx-target="#novel-view-mode-response" hx-swap="outerHTML">
-              <div class="form-check mb-3">
-                <input class="form-check-input" type="radio" name="view-mode" id="tx-ori-h" value="1" />
-                <label class="form-check-label fw-bold" for="tx-ori-h">Horizontal</label>
-                <div id="tx-ori-h-help" class="form-text">Forces the text to be displayed horizontally, left-to-right. This is common for most languages and easier to read on smaller screens or for those more accustomed to Western text layouts.</div>
-              </div>
-              <div class="form-check mb-3">
-                <input class="form-check-input" type="radio" name="view-mode" id="tx-ori-v" value="2" />
-                <label class="form-check-label fw-bold" for="tx-ori-v">Vertical</label>
-                <div id="tx-ori-v-help" class="form-text">Forces the text to be displayed vertically, top-to-bottom and right-to-left. This is traditional for some East Asian languages and can provide a unique reading experience, especially for longer texts.</div>
-              </div>
-              <div class="form-check mb-3">
-                <input class="form-check-input" type="radio" name="view-mode" id="tx-ori-n" value="" checked />
-                <label class="form-check-label fw-bold" for="tx-ori-n">Don't force (default from Pixiv)</label>
-                <div id="tx-ori-n-help" class="form-text">Uses the original text orientation as set by the author on Pixiv. This is the default option and respects the intended layout of the novel.</div>
-              </div>
-              <button type="submit" class="custom-btn-secondary bg-charcoal-surface2">Save</button>
-            </form>
-            <div id="novel-view-mode-response"></div>
-          </li>
-        </ul>
+            <li class="list-group-item bg-charcoal-surface1 pt-4 pb-0 px-0">
+              <h3>Force text orientation</h3>
+              <p>Set the text orientation for novels. This affects how the text is displayed and read on the page.</p>
+              <form id="novel-view-mode-form" hx-post="/settings/novelViewMode" hx-target="#novel-view-mode-response" hx-swap="outerHTML">
+                <div class="form-check mb-3">
+                  <input class="form-check-input" type="radio" name="view-mode" id="tx-ori-h" value="1" />
+                  <label class="form-check-label fw-bold" for="tx-ori-h">Horizontal</label>
+                  <div id="tx-ori-h-help" class="form-text">Forces the text to be displayed horizontally, left-to-right. This is common for most languages and easier to read on smaller screens or for those more accustomed to Western text layouts.</div>
+                </div>
+                <div class="form-check mb-3">
+                  <input class="form-check-input" type="radio" name="view-mode" id="tx-ori-v" value="2" />
+                  <label class="form-check-label fw-bold" for="tx-ori-v">Vertical</label>
+                  <div id="tx-ori-v-help" class="form-text">Forces the text to be displayed vertically, top-to-bottom and right-to-left. This is traditional for some East Asian languages and can provide a unique reading experience, especially for longer texts.</div>
+                </div>
+                <div class="form-check mb-3">
+                  <input class="form-check-input" type="radio" name="view-mode" id="tx-ori-n" value="" checked />
+                  <label class="form-check-label fw-bold" for="tx-ori-n">Don't force (default from Pixiv)</label>
+                  <div id="tx-ori-n-help" class="form-text">Uses the original text orientation as set by the author on Pixiv. This is the default option and respects the intended layout of the novel.</div>
+                </div>
+                <button type="submit" class="custom-btn-secondary bg-charcoal-surface2">Save</button>
+              </form>
+              <div id="novel-view-mode-response"></div>
+            </li>
+          </ul>
 
+        </div>
       </div>
     </div>
-  </div>
+  </noscript>
 
   <div class="col-12">
     <div class="custom-card">
@@ -303,4 +306,65 @@
     </div>
   </div>
 </div>
+
+<!-- End of main content -->
+
+<!-- Novel options modal -->
+<div class="modal fade" id="NovelOptionsModal" tabindex="-1" aria-labelledby="NovelOptionsModalLabel" aria-hidden="true" hx-boost="false">
+  <div class="modal-dialog modal-lg">
+    <div class="modal-content bg-charcoal-surface1 rounded-5 border-0 p-4">
+      <div class="modal-header border-0 p-0 mb-4">
+        <h2 class="modal-title" id="NovelOptionsModalLabel"><i class="bi bi-gear-fill me-2"></i>Novel options</h2>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body p-0">
+        <ul class="list-group list-group-flush">
+          <li class="list-group-item bg-charcoal-surface1 pt-0 pb-4 px-0">
+            <h3>Font family</h3>
+            <p>Choose the font style for displaying novels. This affects the readability and aesthetic of the text.</p>
+            <form id="novel-font-form" hx-post="/settings/novelFontType" hx-target="#novel-font-response" hx-swap="outerHTML">
+              <div class="form-check mb-3">
+                <input class="form-check-input" type="radio" name="font-type" id="font-type-mincho" value="mincho" />
+                <label class="form-check-label fw-bold" for="font-type-mincho">Mincho</label>
+                <div id="font-type-mincho-help" class="form-text">A serif font style that resembles traditional Japanese printing. It's often used for formal or literary content, providing a classic and elegant look.</div>
+              </div>
+              <div class="form-check mb-3">
+                <input class="form-check-input" type="radio" name="font-type" id="font-type-gothic" value="gothic" checked />
+                <label class="form-check-label fw-bold" for="font-type-gothic">Gothic</label>
+                <div id="font-type-gothic-help" class="form-text">A sans-serif font style that's clean and modern. It's commonly used for easy readability on digital screens, offering a contemporary appearance.</div>
+              </div>
+
+              <button type="submit" class="custom-btn-secondary bg-charcoal-surface2">Save</button>
+            </form>
+            <div id="novel-font-response"></div>
+          </li>
+
+          <li class="list-group-item bg-charcoal-surface1 pt-4 pb-0 px-0">
+            <h3>Force text orientation</h3>
+            <p>Set the text orientation for novels. This affects how the text is displayed and read on the page.</p>
+            <form id="novel-view-mode-form" hx-post="/settings/novelViewMode" hx-target="#novel-view-mode-response" hx-swap="outerHTML">
+              <div class="form-check mb-3">
+                <input class="form-check-input" type="radio" name="view-mode" id="tx-ori-h" value="1" />
+                <label class="form-check-label fw-bold" for="tx-ori-h">Horizontal</label>
+                <div id="tx-ori-h-help" class="form-text">Forces the text to be displayed horizontally, left-to-right. This is common for most languages and easier to read on smaller screens or for those more accustomed to Western text layouts.</div>
+              </div>
+              <div class="form-check mb-3">
+                <input class="form-check-input" type="radio" name="view-mode" id="tx-ori-v" value="2" />
+                <label class="form-check-label fw-bold" for="tx-ori-v">Vertical</label>
+                <div id="tx-ori-v-help" class="form-text">Forces the text to be displayed vertically, top-to-bottom and right-to-left. This is traditional for some East Asian languages and can provide a unique reading experience, especially for longer texts.</div>
+              </div>
+              <div class="form-check mb-3">
+                <input class="form-check-input" type="radio" name="view-mode" id="tx-ori-n" value="" checked />
+                <label class="form-check-label fw-bold" for="tx-ori-n">Don't force (default from Pixiv)</label>
+                <div id="tx-ori-n-help" class="form-text">Uses the original text orientation as set by the author on Pixiv. This is the default option and respects the intended layout of the novel.</div>
+              </div>
+              <button type="submit" class="custom-btn-secondary bg-charcoal-surface2">Save</button>
+            </form>
+            <div id="novel-view-mode-response"></div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>
 {{- end }}