VnPower/PixivFE
1
0
Fork 0
mirror of https://codeberg.org/VnPower/PixivFE synced 2024-12-06 19:16:23 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

novel-tn rework wip

Browse Source
This commit is contained in:
perennial
2024-10-06 15:35:33 +11:00
parent 642661a946
commit 036de97c4e
4 changed files with 69 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/bootstrap-style.css
Vendored
+23 -18
View File
@@ -4463,7 +4463,7 @@ textarea.form-control-lg {
--bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.card, .custom-card {
.card, .custom-novel-card, .custom-card {
--bs-card-spacer-y: 1rem;
--bs-card-spacer-x: 1rem;
--bs-card-title-spacer-y: 0.5rem;
@@ -4495,26 +4495,27 @@ textarea.form-control-lg {
border: var(--bs-card-border-width) solid var(--bs-card-border-color);
border-radius: var(--bs-card-border-radius);
}
.card > hr, .custom-card > hr {
.card > hr, .custom-novel-card > hr, .custom-card > hr {
margin-right: 0;
margin-left: 0;
}
.card > .list-group, .custom-card > .list-group {
.card > .list-group, .custom-novel-card > .list-group, .custom-card > .list-group {
border-top: inherit;
border-bottom: inherit;
}
.card > .list-group:first-child, .custom-card > .list-group:first-child {
.card > .list-group:first-child, .custom-novel-card > .list-group:first-child, .custom-card > .list-group:first-child {
border-top-width: 0;
border-top-left-radius: var(--bs-card-inner-border-radius);
border-top-right-radius: var(--bs-card-inner-border-radius);
}
.card > .list-group:last-child, .custom-card > .list-group:last-child {
.card > .list-group:last-child, .custom-novel-card > .list-group:last-child, .custom-card > .list-group:last-child {
border-bottom-width: 0;
border-bottom-right-radius: var(--bs-card-inner-border-radius);
border-bottom-left-radius: var(--bs-card-inner-border-radius);
}
.card > .card-header + .list-group, .custom-card > .card-header + .list-group,
.card > .card-header + .list-group, .custom-novel-card > .card-header + .list-group, .custom-card > .card-header + .list-group,
.card > .list-group + .card-footer,
.custom-novel-card > .list-group + .card-footer,
.custom-card > .list-group + .card-footer {
border-top: 0;
}
@@ -4609,7 +4610,7 @@ textarea.form-control-lg {
border-bottom-left-radius: var(--bs-card-inner-border-radius);
}
.card-group > .card, .card-group > .custom-card {
.card-group > .card, .card-group > .custom-novel-card, .card-group > .custom-card {
margin-bottom: var(--bs-card-group-margin);
}
@media (min-width: 576px) {
@@ -4617,39 +4618,43 @@ textarea.form-control-lg {
display: flex;
flex-flow: row wrap;
}
.card-group > .card, .card-group > .custom-card {
.card-group > .card, .card-group > .custom-novel-card, .card-group > .custom-card {
flex: 1 0 0%;
margin-bottom: 0;
}
.card-group > .card + .card, .card-group > .custom-card + .card, .card-group > .card + .custom-card, .card-group > .custom-card + .custom-card {
.card-group > .card + .card, .card-group > .custom-novel-card + .card, .card-group > .card + .custom-novel-card, .card-group > .custom-novel-card + .custom-novel-card, .card-group > .custom-card + .card, .card-group > .custom-card + .custom-novel-card, .card-group > .card + .custom-card, .card-group > .custom-novel-card + .custom-card, .card-group > .custom-card + .custom-card {
margin-left: 0;
border-left: 0;
}
.card-group > .card:not(:last-child), .card-group > .custom-card:not(:last-child) {
.card-group > .card:not(:last-child), .card-group > .custom-novel-card:not(:last-child), .card-group > .custom-card:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.card-group > .card:not(:last-child) .card-img-top, .card-group > .custom-card:not(:last-child) .card-img-top,
.card-group > .card:not(:last-child) .card-img-top, .card-group > .custom-novel-card:not(:last-child) .card-img-top, .card-group > .custom-card:not(:last-child) .card-img-top,
.card-group > .card:not(:last-child) .card-header,
.card-group > .custom-novel-card:not(:last-child) .card-header,
.card-group > .custom-card:not(:last-child) .card-header {
border-top-right-radius: 0;
}
.card-group > .card:not(:last-child) .card-img-bottom, .card-group > .custom-card:not(:last-child) .card-img-bottom,
.card-group > .card:not(:last-child) .card-img-bottom, .card-group > .custom-novel-card:not(:last-child) .card-img-bottom, .card-group > .custom-card:not(:last-child) .card-img-bottom,
.card-group > .card:not(:last-child) .card-footer,
.card-group > .custom-novel-card:not(:last-child) .card-footer,
.card-group > .custom-card:not(:last-child) .card-footer {
border-bottom-right-radius: 0;
}
.card-group > .card:not(:first-child), .card-group > .custom-card:not(:first-child) {
.card-group > .card:not(:first-child), .card-group > .custom-novel-card:not(:first-child), .card-group > .custom-card:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.card-group > .card:not(:first-child) .card-img-top, .card-group > .custom-card:not(:first-child) .card-img-top,
.card-group > .card:not(:first-child) .card-img-top, .card-group > .custom-novel-card:not(:first-child) .card-img-top, .card-group > .custom-card:not(:first-child) .card-img-top,
.card-group > .card:not(:first-child) .card-header,
.card-group > .custom-novel-card:not(:first-child) .card-header,
.card-group > .custom-card:not(:first-child) .card-header {
border-top-left-radius: 0;
}
.card-group > .card:not(:first-child) .card-img-bottom, .card-group > .custom-card:not(:first-child) .card-img-bottom,
.card-group > .card:not(:first-child) .card-img-bottom, .card-group > .custom-novel-card:not(:first-child) .card-img-bottom, .card-group > .custom-card:not(:first-child) .card-img-bottom,
.card-group > .card:not(:first-child) .card-footer,
.card-group > .custom-novel-card:not(:first-child) .card-footer,
.card-group > .custom-card:not(:first-child) .card-footer {
border-bottom-left-radius: 0;
}
@@ -7665,7 +7670,7 @@ textarea.form-control-lg {
border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
.border-0, .custom-card-body, .custom-card, .custom-btn-secondary, .custom-btn-secondary-flex {
.border-0, .custom-novel-card, .custom-card-body, .custom-card, .custom-btn-secondary, .custom-btn-secondary-flex {
border: 0 !important;
}
@@ -7882,7 +7887,7 @@ textarea.form-control-lg {
height: 75% !important;
}
.h-100 {
.h-100, .custom-novel-card {
height: 100% !important;
}
@@ -9153,7 +9158,7 @@ textarea.form-control-lg {
pointer-events: auto !important;
}
.rounded {
.rounded, .custom-novel-card {
border-radius: var(--bs-border-radius) !important;
}
assets/css/bootstrap-style.scss
Vendored
+7
View File
@@ -78,6 +78,13 @@ $utilities: map-merge(
@extend .rounded-5;
}
.custom-novel-card {
@extend .card;
@extend .h-100;
@extend .border-0;
@extend .rounded;
}
/// Custom heading sizes (e.g., h1 gets h3 size, h2 gets h4 size, etc.)
h1 {
font-size: $h3-font-size;
assets/views/fragments/novel-tn.jet.html
+38 -26
View File
@@ -1,25 +1,25 @@
<div class="col">
<div class="card h-100 border-0 bg-charcoal-surface1 rounded p-3">
<div class="custom-novel-card bg-charcoal-surface1 p-3">
<div class="row g-3">
<div class="col-4">
<div class="col-4 col-md-2">
<a href="/novel/{{ .ID }}" class="text-decoration-none">
<div class="ratio ratio-3x4">
<img src="{{ .CoverURL }}" alt="{{ .Title }}" class="img-fluid rounded object-fit-cover" loading="lazy" />
</div>
</a>
</div>
<div class="col-8">
<div class="col-8 col-md-10">
<!-- Series name -->
{{- if .SeriesID }}
<a href="/novel/series/{{ .SeriesID }}" class="text-decoration-none">
<p class="text-body-secondary small mb-1">{{ .SeriesTitle }}</p>
</a>
<p class="text-truncate mb-1">
<a href="/novel/series/{{ .SeriesID }}" class="fw-bold small text-body-secondary text-decoration-none">{{ .SeriesTitle }}</a>
</p>
{{- end }}
<!-- Novel title -->
<h3>
<h4 class="text-truncate">
<a href="/novel/{{ .ID }}" class="text-body text-decoration-none">{{ .Title }}</a>
</h3>
</h4>
<!-- Word count and reading time -->
<p class="card-text text-muted small mb-3"><span>{{ .WordCount }} word(s)</span>&nbsp;<span>{{ floor: .ReadingTime / 60 }} mins</span></p>
@@ -28,29 +28,41 @@
<span class="text-muted">{{ .UserName }}</span>
</a>
{*
<!-- Description -->
<!-- TODO: figure this out -->
<!-- <p class="small mb-2">{{ raw: .Description }}</p> -->
<!-- <p class="text-truncate mb-1">
{{ raw: .Description }}
</p> -->
*}
<!-- Tags -->
{{- if .AiType == 2 }}
<span class="badge bg-warning text-dark me-2 mb-2">AI-generated</span>
{{- end }}
{{- if .IsOriginal }}
<span class="badge bg-secondary me-2 mb-2">Original</span>
{{- end }}
{{- if .Genre != "0" }}
<span class="badge bg-light text-dark me-2 mb-2">{{ novelGenre: .Genre }}</span>
{{- end }}
{{- range .Tags }}
{{- if isEmphasize(.) }}
<span class="badge bg-danger me-2 mb-2">{{ . }}</span>
{{- else }}
<span class="badge fw-normal text-muted me-2 mb-2 p-0 text-wrap text-break text-start">
<a href="/tags/{{ escapeString(.) }}" class="text-decoration-none text-wrap text-break">#{{ . }}</a>
</span>
<div class="d-flex flex-wrap align-items-center mb-2">
{{- if .AiType == 2 }}
<span class="badge bg-warning text-dark me-2 mb-2">AI-generated</span>
{{- end }}
{{- end }}
<!-- NOTE: early block to catch the R-18 tag -->
{{- range .Tags }}
{{- if isEmphasize(.) }}
<span class="badge bg-danger me-2 mb-2">{{ . }}</span>
{{- end }}
{{- end }}
{{- if .IsOriginal }}
<span class="badge bg-primary me-2 mb-2">Original</span>
{{- end }}
{{- if .Genre != "0" }}
<span class="badge bg-secondary me-2 mb-2">{{ novelGenre: .Genre }}</span>
{{- end }}
{{- range .Tags }}
{{- if isEmphasize(.) }}
{* Intentionally empty to not render anything to avoid duplication *}
{{- else }}
<span class="badge fw-normal text-muted me-2 mb-2 p-0 text-wrap text-break text-start">
<a href="/tags/{{ escapeString(.) }}" class="text-decoration-none text-wrap text-break">#{{ . }}</a>
</span>
{{- end }}
{{- end }}
</div>
<!-- Metadata (bookmarks and creation date) -->
<div class="d-flex justify-content-between align-items-center">
assets/views/fragments/thumbnail-tt.jet.html
+1 -1
View File
@@ -1,5 +1,5 @@
{{- target := CookieList["pixivfe-ThumbnailToNewTab"] }}
<!-- The thumbnail-tt.jet.html fragment templates in the work title -->
<p class="card-title text-truncate mb-1">
<p class="text-truncate mb-1">
<a target="{{ target }}" href="/artworks/{{ .ID }}" class="fw-bold text-body text-decoration-none">{{ .Title }}</a>
</p>