PixivFE/assets/views/artwork.jet.html

{{- extends "layout/default" }}
{{- block body() }}
<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">
  <!-- The artwork fragment -->
  {{- include "fragments/artwork" .Illust }}

  <!-- Recent works by artist -->
  <div class="card mb-4">
    <div class="card-header p-3">
      <div class="d-flex justify-content-between align-items-center">
        <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 object-fit-cover me-2" style="width: 40px; height: 40px;">
          <h2 class="h5 fw-bold m-0">Other works by {{ .Illust.User.Name }}</h2>
        </a>
        {{- combinedUrl := "/artworks-multi/" + joinArtworkIds(.Illust.RecentWorks) }}
        <a href="{{combinedUrl}}" class="btn btn-sm btn-outline-primary">View all</a>
      </div>
    </div>
    <div class="card-body pb-1">
      <div class="overflow-auto px-2 pt-1" id="horizontal-scroll">
        <div class="row flex-nowrap">
          {{- range .Illust.RecentWorks }}
          <!-- Display artist's other artworks at smaller width on larger devices -->
          <!-- Should always be a bit larger than the thumbnails for the related works -->
          <div class="col-6 col-md-4 col-lg-3 px-2">
              <div class="card h-100 border-0">
                {{ include "fragments/thumbnail-dt" . }}
                <div class="card-body py-2 px-0">
                  {{ include "fragments/thumbnail-tt" . }}
                </div>
              </div>
          </div>
          {{- end }}
        </div>
      </div>
    </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 p-3">
        <!-- TODO: clean this logic up -->
        {{- if .Illust.Comments == 0 }}
        <h2 class="h5 fw-bold p-0 mb-0">0 Comments</h2>
        {{- else if .Illust.Comments == 1 }}
        <h2 class="h5 fw-bold p-0 mb-0">1 Comment</h2>
        {{- else }}
        <h2 class="h5 fw-bold p-0 mb-0">{{ .Illust.Comments }} Comments</h2>
        {{- end }}
    </div>
    <!-- The padding disparity with the card-header is intentional -->
    <!-- NOTE: pb-0 otherwise the last comment will add extra spacing at the end of the card -->
    <div class="card-body p-4 pb-0">
      {{- if .Illust.CommentDisabled == 1 }}
      <p class="mb-4">The creator turned comments off</p>
      {{- else if .Illust.Comments == 0 }}
      <p class="mb-4">There are no comments yet</p>
      {{- else }}
      <div class="list-group" id="comments-container">
        {{ range .Illust.CommentsList }}
        <!-- Element for a single comment -->
        <div class="list-group-item border-0 p-0 mb-4 comment-item">
          <div class="row">

            <!-- Comment author avatar image -->
            <div class="col-auto">
              <a href="/users/{{ .AuthorID }}">
                <img class="img-fluid rounded-circle object-fit-cover" src="{{ .Avatar }}" alt="{{ .AuthorName }}" style="width: 40px; height: 40px;" />
              </a>
            </div>

            <div class="col">
              <!-- Comment author name and date -->
              <div class="d-md-flex align-items-center mb-2">
                <div class="me-md-2">
                  <a href="/users/{{ .AuthorID }}" class="text-body text-decoration-none">
                    <h6 class="fw-bold mb-0">{{- .AuthorName }}</h6>
                  </a>
                </div>
                <div>
                  <small class="text-muted">{{ .Date }}</small>
                </div>
              </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 object-fit-cover 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>
        </div>
        {{- end }}
        <div class="d-flex justify-content-center">
            <!-- TODO: figure out how to hide the parent div instead of applying mb-4 to the button itself -->
            <button type="button" class="btn btn-outline-primary mb-4" id="load-more-btn">Load more</button>
        </div>
      </div>
      {{ end }}
    </div>
  </div>

</div>

<!-- TODO: check whether there actually are any related works before rendering this section -->
<!-- col-12 to display Related works at full width -->
<div class="col-12">
    <!-- h2 class="h4 fw-bold mb-0" used to replicate Pixiv headings -->
    <h2 class="h4 fw-bold mb-4">Related works</h2>
    <!-- Gradually increase the number of artworks shown per row along with device width -->
    <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-4">
        {{- include "fragments/small-tn" .Illust.RelatedWorks }}
    </div>
</div>

</div>
{{- end }}