mirror of
https://codeberg.org/VnPower/PixivFE
synced 2024-12-06 19:16:23 +01:00
some artwork page restyling
This commit is contained in:
perennial
@@ -104,14 +104,16 @@
|
||||
<div class="row mb-3">
|
||||
{* Artist avatar, artwork name, and artist name *}
|
||||
<div class="col-12 col-xl-8 mb-3 mb-xl-0">
|
||||
<h1 class="mb-2">{{ .Title }}</h1>
|
||||
<div class="d-flex align-items-center">
|
||||
<a href="/users/{{ .User.ID }}" class="me-3">
|
||||
<img src="{{ .User.Avatar }}" alt="{{ .User.Name }}" class="rounded-circle object-fit-cover" style="width: 64px; height: 64px;"/>
|
||||
<a href="/users/{{ .User.ID }}" class="me-2">
|
||||
<img src="{{ .User.Avatar }}" alt="{{ .User.Name }}" class="rounded-circle object-fit-cover" style="width: 24px; height: 24px;"/>
|
||||
</a>
|
||||
<div>
|
||||
<h1 class="mb-2">{{ .Title }}</h1>
|
||||
<h3 class="mb-0"><a href="/users/{{ .User.ID }}" class="text-muted text-decoration-none">{{ .User.Name }}</a></h3>
|
||||
</div>
|
||||
<h3 class="mb-0">
|
||||
<a href="/users/{{ .User.ID }}" class="text-body-secondary text-decoration-none">
|
||||
{{ .User.Name }}
|
||||
</a>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -201,32 +203,24 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{* View Pixiv original button *}
|
||||
<div class="d-inline-flex border border-neutral-700 rounded py-1 px-2 mb-3">
|
||||
<small class="text-center">
|
||||
<i class="bi bi-box-arrow-up-right me-1"></i>
|
||||
<a href="https://pixiv.net/i/{{ .ID }}" class="text-body-secondary fw-semibold">
|
||||
View on pixiv.net
|
||||
</a>
|
||||
</small>
|
||||
</div>
|
||||
<hr class="border-neutral-700 opacity-100 rounded">
|
||||
|
||||
{* Artwork description *}
|
||||
{* Rendered conditionally to avoid a weird empty p element that messes with spacing *}
|
||||
{{- if .Description }}
|
||||
<p class="mb-3">{{- raw: parsePixivRedirect(.Description) }}</p>
|
||||
<p class="text-body mb-3">{{- raw: parsePixivRedirect(.Description) }}</p>
|
||||
{{- end }}
|
||||
|
||||
{* Tag information *}
|
||||
{* text-start ensures that the content within non-emphasized tags is left-aligned while still maintaining proper wrapping behavior *}
|
||||
<div class="d-flex flex-wrap align-items-baseline mb-3">
|
||||
<div class="d-flex flex-wrap align-items-baseline">
|
||||
{{- if .AiType == 2 }}
|
||||
<span class="badge bg-warning text-dark mb-2 me-2">AI-generated</span>
|
||||
<span class="badge bg-warning text-dark mb-1 me-2">AI-generated</span>
|
||||
{{- end }}
|
||||
{{- range .Tags }}
|
||||
{* NOTE: early block to catch the R-18 tag *}
|
||||
{{- if isEmphasize(.Name) }}
|
||||
<span class="badge bg-danger mb-2 me-2">{{ .Name }}</span>
|
||||
<span class="badge bg-danger mb-1 me-2">{{ .Name }}</span>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
{{- range .Tags }}
|
||||
@@ -234,7 +228,7 @@
|
||||
{* Intentionally empty to not render anything to avoid duplication *}
|
||||
{{- else }}
|
||||
{* NOTE: tried styling these tags similarly to the "View on pixiv.net" button, but even then they still draw too much attention and break visual hierarchy *}
|
||||
<div class="d-inline-block mb-2 me-2">
|
||||
<div class="d-inline-block mb-1 me-2">
|
||||
<small>
|
||||
<a href="/tags/{{ escapeString(.Name) }}" class="text-primary-emphasis fw-semibold text-decoration-none text-wrap p-0 mb-0">#{{ .Name }}</a>
|
||||
{{- if .TranslatedName }}
|
||||
@@ -247,25 +241,39 @@
|
||||
{{- end }}
|
||||
</div>
|
||||
|
||||
<hr class="border-neutral-700 opacity-100 rounded">
|
||||
|
||||
{* Other artwork information (views, bookmarks, likes, creation date) *}
|
||||
<div class="d-flex flex-wrap text-muted small me-2">
|
||||
<div class="me-3 mb-2 mb-lg-0">
|
||||
<i class="bi bi-eye me-2"></i>{{- .Views }}
|
||||
<div class="d-flex-column d-lg-flex align-items-center justify-content-between pb-lg-2">
|
||||
<div class="d-flex flex-wrap text-body small mb-2 mb-lg-0 me-2">
|
||||
<div class="me-3 mb-2 mb-lg-0">
|
||||
<i class="bi bi-eye me-2"></i>{{- .Views }}
|
||||
</div>
|
||||
<div class="me-3 mb-2 mb-lg-0">
|
||||
<i class="bi bi-heart me-2"></i>{{- .Bookmarks }}
|
||||
</div>
|
||||
<div class="me-3 mb-2 mb-lg-0">
|
||||
<i class="bi bi-hand-thumbs-up me-2"></i>{{- .Likes }}
|
||||
</div>
|
||||
<div class="me-3 mb-2 mb-lg-0">
|
||||
<i class="bi bi-calendar me-2"></i>{{- parseTime: .Date }}
|
||||
</div>
|
||||
{{- if .Images[0].Width != 0 && .Images[0].Height != 0 }}
|
||||
<div>
|
||||
<i class="bi bi-arrows-angle-expand me-2"></i>{{ .Images[0].Width }}x{{ .Images[0].Height }}
|
||||
</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
<div class="me-3 mb-2 mb-lg-0">
|
||||
<i class="bi bi-heart me-2"></i>{{- .Bookmarks }}
|
||||
|
||||
{* View Pixiv original button *}
|
||||
<div class="d-inline-flex border border-neutral-700 rounded py-1 px-2">
|
||||
<small class="text-center">
|
||||
<i class="bi bi-box-arrow-up-right me-1"></i>
|
||||
<a href="https://pixiv.net/i/{{ .ID }}" class="text-body-secondary fw-semibold">
|
||||
View on pixiv.net
|
||||
</a>
|
||||
</small>
|
||||
</div>
|
||||
<div class="me-3 mb-2 mb-lg-0">
|
||||
<i class="bi bi-hand-thumbs-up me-2"></i>{{- .Likes }}
|
||||
</div>
|
||||
<div class="me-3 mb-2 mb-lg-0">
|
||||
<i class="bi bi-calendar me-2"></i>{{- parseTime: .Date }}
|
||||
</div>
|
||||
{{- if .Images[0].Width != 0 && .Images[0].Height != 0 }}
|
||||
<div>
|
||||
<i class="bi bi-arrows-angle-expand me-2"></i>{{ .Images[0].Width }}x{{ .Images[0].Height }}
|
||||
</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
{{- if .SeriesNavData }}
|
||||
<div class="custom-card mt-4">
|
||||
|
||||
Reference in New Issue
Block a user