mirror of
https://codeberg.org/VnPower/PixivFE
synced 2024-12-06 19:16:23 +01:00
novel: settings modal
This commit is contained in:
perennial
+112
-48
@@ -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 }}
|
||||
|
||||
Reference in New Issue
Block a user