mirror of
https://codeberg.org/VnPower/PixivFE
synced 2024-12-06 19:16:23 +01:00
novel styling fix wip
This commit is contained in:
perennial
Vendored
+1
@@ -14183,6 +14183,7 @@ h6, .h6 {
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
direction: rtl;
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
#loading-indicator {
|
||||
|
||||
Vendored
+1
@@ -389,6 +389,7 @@ h6 {
|
||||
writing-mode: vertical-rl;
|
||||
text-orientation: upright;
|
||||
direction: rtl;
|
||||
max-height: 90vh; /// limit height so that only horizontal scrolling is needed
|
||||
}
|
||||
|
||||
/// Loading indicator for hx-requests
|
||||
|
||||
+32
-32
@@ -204,50 +204,50 @@
|
||||
</noscript>
|
||||
|
||||
<!-- NOTE: col-12 to always display at full width, may tune down in the future -->
|
||||
<div class="col-12">
|
||||
<div class="col-12 col-lg-11">
|
||||
<div class="custom-card">
|
||||
<div class="custom-card-body bg-charcoal-surface1 py-4 px-0">
|
||||
<!-- NOTE: mx-0 because the row element overflows the card horizontally without it -->
|
||||
<div class="row justify-content-center mx-0">
|
||||
<!-- NOTE: px-0 to undo the extra spacing caused by mx-0 -->
|
||||
<div class="col-12 px-0">
|
||||
<div class="d-flex flex-column align-items-center position-relative mx-4 mb-4 justify-content-center">
|
||||
<div class="d-flex flex-column text-center">
|
||||
<h2 class="mb-2">{{ .Novel.Title }}</h2>
|
||||
<h3><a href="/users/{{ .User.ID }}" class="text-body-secondary text-decoration-none">{{ .User.Name }}</a></h3>
|
||||
<p class="text-body-secondary small mb-0">
|
||||
<span>{{ .Novel.WordCount }} word(s)</span> · <span>{{ floor: .Novel.ReadingTime / 60 }} mins</span>
|
||||
</p>
|
||||
<div class="col-12 px-0">
|
||||
<div class="d-flex flex-column align-items-center position-relative mx-4 mb-4 justify-content-center">
|
||||
<div class="d-flex flex-column text-center">
|
||||
<h2 class="mb-2">{{ .Novel.Title }}</h2>
|
||||
<h3><a href="/users/{{ .User.ID }}" class="text-body-secondary text-decoration-none">{{ .User.Name }}</a></h3>
|
||||
<p class="text-body-secondary small mb-0">
|
||||
<span>{{ .Novel.WordCount }} word(s)</span> · <span>{{ floor: .Novel.ReadingTime / 60 }} mins</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Options button that will stay on the side for larger screens but 'move' to the bottom for smaller screens -->
|
||||
<button
|
||||
class="js-required custom-btn-secondary position-absolute top-50 end-0 translate-middle-y d-none d-lg-block"
|
||||
type="button"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#NovelOptionsModal">
|
||||
<i class="bi bi-gear me-2"></i>Options
|
||||
</button>
|
||||
|
||||
<!-- The smaller version of the button for mobile that is displayed below the text -->
|
||||
<button
|
||||
class="js-required custom-btn-secondary mt-3 d-lg-none"
|
||||
type="button"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#NovelOptionsModal">
|
||||
<i class="bi bi-gear me-2"></i>Options
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Options button that will stay on the side for larger screens but 'move' to the bottom for smaller screens -->
|
||||
<button
|
||||
class="js-required custom-btn-secondary position-absolute top-50 end-0 translate-middle-y d-none d-lg-block"
|
||||
type="button"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#NovelOptionsModal">
|
||||
<i class="bi bi-gear-fill me-2"></i>Options
|
||||
</button>
|
||||
|
||||
<!-- The smaller version of the button for mobile that is displayed below the text -->
|
||||
<button
|
||||
class="js-required custom-btn-secondary mt-3 d-lg-none"
|
||||
type="button"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#NovelOptionsModal">
|
||||
<i class="bi bi-gear"></i> Options
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- The actual novel itself -->
|
||||
<!-- TODO: make background color configurable (need to update backend source files etc) -->
|
||||
<!-- NOTE: mb-4 so that the parent card doesn't cut off suddenly right after the novel content -->
|
||||
<div id="content" class="card-body bg-off-white text-dark overflow-x-scroll mb-4 p-5">
|
||||
<p class="fs-5 lh-lg" data-font="{{ .FontType }}" data-lang="{{ .Language }}" data-view="{{ .ViewMode }}">
|
||||
{{- raw: renderNovel(.Novel.Content) }}
|
||||
</p>
|
||||
<div class="col-12 px-0 mb-4">
|
||||
<div id="content" class="fs-5 lh-lg card-body bg-off-white text-dark overflow-x-scroll h-100 w-100 mb-4 p-5" data-font="{{ .FontType }}" data-lang="{{ .Language }}" data-view="{{ .ViewMode }}">
|
||||
{{- raw: renderNovel(.Novel.Content) }}>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Series navigation, if present -->
|
||||
{{- if .Novel.SeriesNavData }}
|
||||
|
||||
+16
-2
@@ -177,13 +177,27 @@ func GetNovelByID(r *http.Request, id string) (Novel, error) {
|
||||
|
||||
// make [pixivimage:illustid-index] jump to anchor
|
||||
link := fmt.Sprintf("/artworks/%s", strings.ReplaceAll(illustid, "-", "#"))
|
||||
return fmt.Sprintf(`<a href="%s" target="_blank"><img src=%s alt="%s"/></a>`, link, url, s)
|
||||
|
||||
imgClass := "img-fluid w-100"
|
||||
if novel.Settings.ViewMode == 1 {
|
||||
imgClass = "img-fluid h-50 w-50 rounded"
|
||||
}
|
||||
|
||||
return fmt.Sprintf(`<a href="%s" target="_blank"><img src=%s alt="%s" class="%s"/></a>`, link, url, s, imgClass)
|
||||
})
|
||||
|
||||
novel.Content = re_u.ReplaceAllStringFunc(novel.Content, func(s string) string {
|
||||
imageId := re_id.FindString(s)
|
||||
if val, ok := novel.TextEmbeddedImages[imageId]; ok {
|
||||
return fmt.Sprintf(`<img src=%s alt="%s"/>`, val.Urls.Original, s)
|
||||
// Styling for horizontal text
|
||||
imgClass := "img-fluid h-50 w-50 rounded"
|
||||
wrapperClass := "d-flex justify-content-start w-100 my-3"
|
||||
// Styling for vertical text
|
||||
if novel.Settings.ViewMode == 2 {
|
||||
imgClass = "img-fluid h-100 w-100 rounded"
|
||||
wrapperClass = "d-flex justify-content-start h-100 ms-3 me-3"
|
||||
}
|
||||
return fmt.Sprintf(`<div class="%s"><img src=%s alt="%s" class="%s"/></div>`, wrapperClass, val.Urls.Original, s, imgClass)
|
||||
}
|
||||
return s
|
||||
})
|
||||
|
||||
@@ -163,6 +163,7 @@
|
||||
"assets/views/novel.jet.html:fwJjmTkfPFo": "{{ seriesWorks }} works in this series",
|
||||
"assets/views/novel.jet.html:kZv9k39fa4s": "·",
|
||||
"assets/views/novel.jet.html:nu2CR4aefnc": "Options",
|
||||
"assets/views/novel.jet.html:uq0P-PyMGRE": "{{- raw: renderNovel(.Novel.Content) }}>",
|
||||
"assets/views/novel.jet.html:y6pXNsQLNSg": "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.",
|
||||
"assets/views/novelDiscovery.jet.html:6A6XAFPz7qQ": "Refresh",
|
||||
"assets/views/novelDiscovery.jet.html:ifjfMyvWvyA": "Discovery",
|
||||
|
||||
Reference in New Issue
Block a user