mirror of
https://codeberg.org/VnPower/PixivFE
synced 2024-12-06 19:16:23 +01:00
replace comments accordion with scrollable card
This commit is contained in:
perennial
@@ -1,18 +1,19 @@
|
||||
{{- extends "layout/default" }}
|
||||
{{- block body() }}
|
||||
<div class="row justify-content-center">
|
||||
<div class="row justify-content-center mb-5">
|
||||
<!-- col-md-9 to ensure that artworks don't take forever to scroll past, especially if there are multiple, but col-sm-12 to display artworks at full width on small devices -->
|
||||
<div class="col-sm-12 col-md-9">
|
||||
<div class="container">
|
||||
<!-- The Artwork fragment; left outside a card -->
|
||||
<!-- The artwork fragment -->
|
||||
{{- include "fragments/artwork" .Illust }}
|
||||
|
||||
<!-- Recent works by artist -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-body">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<a class="text-decoration-none text-light d-flex align-items-center" href="/users/{{ .Illust.User.ID }}">
|
||||
<img src="{{ .Illust.User.Avatar }}" alt="{{ .Illust.User.Name }}" class="rounded-circle me-2" style="width: 48px; height: 48px;">
|
||||
<span>Other works by {{ .Illust.User.Name }}</span>
|
||||
<h2 class="h5 my-2">Other works by {{ .Illust.User.Name }}</h2>
|
||||
<span class="ms-2">»</span>
|
||||
</a>
|
||||
{{- combinedUrl := "/artworks-multi/" + joinArtworkIds(.Illust.RecentWorks) }}
|
||||
@@ -31,61 +32,55 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- mt-5 for spacing between the comments section and related works -->
|
||||
<div class="accordion mb-5" id="commentsAccordion">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header" id="headingComments">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseComments" aria-expanded="false" aria-controls="collapseComments">
|
||||
Comments
|
||||
</button>
|
||||
</h2>
|
||||
<div id="collapseComments" class="accordion-collapse show" aria-labelledby="headingComments" data-bs-parent="#commentsAccordion">
|
||||
<div class="accordion-body">
|
||||
{{- if .Illust.CommentDisabled == 1 }}
|
||||
<p>The creator turned comments off</p>
|
||||
{{- else if .Illust.Comments == 0 }}
|
||||
<p>There are no comments yet</p>
|
||||
{{- else }}
|
||||
<div class="list-group">
|
||||
{{ range .Illust.CommentsList }}
|
||||
<!-- Element for a single comment -->
|
||||
<div class="list-group-item border-0">
|
||||
<div class="d-flex mb-3">
|
||||
<!-- Comment author avatar image -->
|
||||
<a href="/users/{{ .AuthorID }}" class="me-3">
|
||||
<img class="rounded-circle img-fluid" src="{{ .Avatar }}" alt="{{ .AuthorName }}" style="width: 40px; height: 40px;" />
|
||||
</a>
|
||||
<div>
|
||||
|
||||
<!-- Comment author name and date -->
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<a href="/users/{{ .AuthorID }}" class="text-body text-decoration-none me-2">
|
||||
<h6 class="fw-bold mb-0">{{- .AuthorName }}</h6>
|
||||
</a>
|
||||
<small class="text-muted">{{ .Date }}</small>
|
||||
</div>
|
||||
|
||||
<!-- Stamp or emoji -->
|
||||
<!-- TODO: .Stamp occasionally templates in text (which should be part of the main comment text) instead of an image, causing breakage in the layout. See the comment by "Unknown417" on /artworks/107442519 for an example -->
|
||||
{{- if .Stamp }}
|
||||
<img class="img-fluid rounded me-2" src="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg"
|
||||
alt="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg" style="width: 96px; height: 96px;" />
|
||||
{{- else }}
|
||||
<!-- Comment with emojis -->
|
||||
<p class="m-0">
|
||||
{{ raw: parseEmojis(.Context) }}
|
||||
</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<!-- mb-5 for spacing between the end of the comments section card and related works -->
|
||||
<div class="card mb-5">
|
||||
<div class="card-header">
|
||||
<h2 class="h5 my-2">Comments</h2>
|
||||
</div>
|
||||
<div class="card-body overflow-auto" style="max-height: 500px;">
|
||||
{{- if .Illust.CommentDisabled == 1 }}
|
||||
<p>The creator turned comments off</p>
|
||||
{{- else if .Illust.Comments == 0 }}
|
||||
<p>There are no comments yet</p>
|
||||
{{- else }}
|
||||
<div class="list-group">
|
||||
{{ range .Illust.CommentsList }}
|
||||
<!-- Element for a single comment -->
|
||||
<div class="list-group-item border-0">
|
||||
<div class="d-flex mb-3">
|
||||
<!-- Comment author avatar image -->
|
||||
<a href="/users/{{ .AuthorID }}" class="me-3">
|
||||
<img class="rounded-circle img-fluid" src="{{ .Avatar }}" alt="{{ .AuthorName }}" style="width: 40px; height: 40px;" />
|
||||
</a>
|
||||
<div>
|
||||
<!-- Comment author name and date -->
|
||||
<div class="d-flex align-items-center mb-2">
|
||||
<a href="/users/{{ .AuthorID }}" class="text-body text-decoration-none me-2">
|
||||
<h6 class="fw-bold mb-0">{{- .AuthorName }}</h6>
|
||||
</a>
|
||||
<small class="text-muted">{{ .Date }}</small>
|
||||
</div>
|
||||
|
||||
<!-- Stamp or emoji -->
|
||||
<!-- TODO: .Stamp occasionally templates in text (which should be part of the main comment text) instead of an image, causing breakage in the layout. See the comment by "Unknown417" on /artworks/107442519 for an example -->
|
||||
{{- if .Stamp }}
|
||||
<img class="img-fluid rounded me-2" src="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg"
|
||||
alt="/proxy/s.pximg.net/common/images/stamp/generated-stamps/{{ .Stamp }}_s.jpg" style="width: 96px; height: 96px;" />
|
||||
{{- else }}
|
||||
<!-- Comment with emojis -->
|
||||
<p class="m-0">
|
||||
{{ raw: parseEmojis(.Context) }}
|
||||
</p>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{- end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user