PixivFE/assets/views/artwork.jet.html

{{- extends "layout/default" }}
{{- import "blocks/comments" }}
{{- block body() }}

<!-- Prefetch links -->
<link rel="prefetch" href="/users/{{ .Illust.User.ID }}">

<div class="row justify-content-center g-4">
<!-- col-md-9 to ensure that artworks don't take forever to scroll past, especially if there are multiple, but col-12 to display artworks at full width on small devices -->
<div class="col-12 col-md-9">
  <!-- The artwork fragment -->
  {{- include "fragments/artwork" .Illust }}

  <div class="row">
    <!-- Recent works by artist -->
    <div class="col-12 col-lg-6">
      <div class="custom-card bg-charcoal-surface1 py-3 px-4">
        <div class="d-flex justify-content-between align-items-center">
          <div class="d-flex align-items-center">
            <a href="/users/{{ .Illust.User.ID }}">
              <img src="{{ .Illust.User.Avatar }}" alt="{{ .Illust.User.Name }}" class="rounded-circle object-fit-cover me-3" style="width: 48px; height: 48px;">
            </a>
            <a href="/users/{{ .Illust.User.ID }}" class="text-body">
              <h2 class="m-0">{{ .Illust.User.Name }}</h2>
            </a>
          </div>
          {{- combinedUrl := "/artworks-multi/" + joinArtworkIds(.Illust.RecentWorks) }}
          <div class="d-inline-flex border border-neutral-700 rounded py-1 px-2">
            <small class="text-center">
              <a href="{{ combinedUrl }}" class="text-body-secondary fw-semibold">
                View all
              </a>
            </small>
          </div>
        </div>
        </div>
        <div id="horizontal-scroll" class="row flex-nowrap flex-lg-wrap overflow-scroll overflow-lg-visible my-3 mx-0">
          {{- range .Illust.RecentWorks }}
          {* NOTE: indivisble col-7 to create a visible affordance *}
          <div class="col-7 col-md-4 px-2">
              <div class="card h-100 border-0 bg-transparent">
                {{ include "fragments/thumbnail-dt" . }}
                <div class="card-body py-2 px-0">
                  {{ include "fragments/thumbnail-tt" . }}
                </div>
              </div>
          </div>
          {{- end }}
        </div>
    </div>

    <!-- Comments section -->
    {{- yield Comments(data=.Illust, contentType="illust") }}

  </div>

</div>

{{- if len(.Illust.RelatedWorks) > 0 }}
<div class="col-12 mt-5">
  <h2>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>
{{- end }}

</div>
{{- end }}