Rough draft for Artwork page

2024-12-06 19:16:23 +01:00 · 2024-09-26 00:03:50 +10:00
parent c6eacbc709
commit c41b6e2e98
4 changed files with 196 additions and 193 deletions
@@ -1,77 +1,75 @@
 {{- extends "layout/default" }}
 {{- block body() }}
-<div class="container illust" id="checkpoint">
-  {{- include "fragments/artwork" .Illust }}
-  {{- if .Illust.SeriesNavData }}
-  <div class="illust-series-nav">
-    <div>
-      Series: <a class="illust-series-title" href="/user/{{ .Illust.UserID }}/series/{{ .Illust.SeriesNavData.SeriesID }}">
-        {{- .Illust.SeriesNavData.Title }}
-      </a>
+<div class="container" id="checkpoint">
+  <div class="card mb-4">
+    <div class="card-body">
+      {{- include "fragments/artwork" .Illust }}
    </div>
-    {{- if .Illust.SeriesNavData.Next }}
-    <div class="prev">
-      Next:<a class="illust-title" href="/artworks/{{.Illust.SeriesNavData.Next.ID}}">
-        #{{- .Illust.SeriesNavData.Next.Order }}&nbsp;{{ .Illust.SeriesNavData.Next.Title }}</a>
-    </div>
-    {{- end}}
-    {{- if .Illust.SeriesNavData.Prev }}
-    <div class="next">
-      Prev:<a class="illust-title" href="/artworks/{{.Illust.SeriesNavData.Prev.ID}}">
-        #{{- .Illust.SeriesNavData.Prev.Order }}&nbsp;{{ .Illust.SeriesNavData.Prev.Title }}</a>
-    </div>
-    {{- end}}
  </div>
-  {{- end}}
-  <div class="illust-other-works">
-    <div class="artwork-container-header">
-      <a class="illust-other-works-author" href="/users/{{ .Illust.User.ID }}"><img src="{{ .Illust.User.Avatar }}"
-          alt="{{ .Illust.User.Name }}" /> Other works by {{ .Illust.User.Name }}
-        <span class="special-symbol">&raquo;</span>
+
+  <div class="card mb-4">
+    <div class="card-header d-flex justify-content-between align-items-center">
+      <a class="text-decoration-none" href="/users/{{ .Illust.User.ID }}">
+        <img src="{{ .Illust.User.Avatar }}" alt="{{ .Illust.User.Name }}" class="rounded-circle me-2" style="width: 30px; height: 30px;">
+        Other works by {{ .Illust.User.Name }}
      </a>
      {{- combinedUrl := "/artworks-multi/" + joinArtworkIds(.Illust.RecentWorks) }}
-      <div class="artwork-actions"><a href="{{combinedUrl}}">View all</a></div>
+      <a href="{{combinedUrl}}" class="btn btn-sm btn-outline-primary">View all</a>
    </div>
-    <div class="artwork-container-scroll">
-      {{- range .Illust.RecentWorks }}
-      <div class="artwork-small artwork">
-        {{- include "fragments/thumbnail-dt" . }}
+    <div class="card-body">
+      <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-2">
+        {{- range .Illust.RecentWorks }}
+        <div class="col">
+          <div class="artwork-small artwork">
+            {{- include "fragments/thumbnail-dt" . }}
+          </div>
+        </div>
+        {{- end }}
      </div>
-      {{- end }}
    </div>
  </div>
-  <hr />
-  <details>
-    <summary>Comments</summary>
-    {{- if .Illust.CommentDisabled == 1 }}
-    <p>The creator turned comments off</p>
-    {{- else if .Illust.Comments == 0 }}
-    <p>There are no comments yet</p>
-    {{- else }} {{ range .Illust.CommentsList }}
-    <div class="comment">
-      <a href="/users/{{ .AuthorID }}" class="comment-author">
-        <img class="comment-avatar" src="{{ .Avatar }}" alt="{{ .AuthorName }}" />
-      </a>
-      <div class="comment-context">
-        <a href="/users/{{ .AuthorID }}" class="comment-author">
-          {{- .AuthorName }}
-        </a>
-        <p>
-          {{- if .Stamp }}
-          <img class="stamp" 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" />
-          {{- else }} {{ raw: parseEmojis(.Context) }} {{ end }}
-        </p>

-        <small>{{ .Date }}</small>
+  <div class="accordion mb-4" id="commentsAccordion">
+    <div class="accordion-item">
+      <h2 class="accordion-header">
+        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#commentsCollapse">
+          Comments
+        </button>
+      </h2>
+      <div id="commentsCollapse" class="accordion-collapse collapse" data-bs-parent="#commentsAccordion">
+        <div class="accordion-body">
+          {{- if .Illust.CommentDisabled == 1 }}
+          <p class="text-muted">The creator turned comments off</p>
+          {{- else if .Illust.Comments == 0 }}
+          <p class="text-muted">There are no comments yet</p>
+          {{- else }}
+            {{- range .Illust.CommentsList }}
+            <div class="d-flex mb-3">
+              <a href="/users/{{ .AuthorID }}" class="me-3">
+                <img class="rounded-circle" src="{{ .Avatar }}" alt="{{ .AuthorName }}" style="width: 40px; height: 40px;">
+              </a>
+              <div>
+                <a href="/users/{{ .AuthorID }}" class="text-decoration-none fw-bold">{{ .AuthorName }}</a>
+                <p class="mb-1">
+                  {{- if .Stamp }}
+                  <img class="img-fluid" 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="max-width: 100px;">
+                  {{- else }}
+                    {{ raw: parseEmojis(.Context) }}
+                  {{- end }}
+                </p>
+                <small class="text-muted">{{ .Date }}</small>
+              </div>
+            </div>
+            {{- end }}
+          {{- end }}
+        </div>
      </div>
    </div>
-    {{- end }} {{ end }}
-  </details>
-</div>
-<div class="container">
-  <h2>Related works</h2>
-  <div class="artwork-container">
+  </div>
+
+  <h2 class="mb-3">Related works</h2>
+  <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-2">
    {{- include "fragments/small-tn" .Illust.RelatedWorks }}
  </div>
 </div>
@@ -1,102 +1,94 @@
-{{- if !.IsUgoira }}
-<div class="illust-images">
-  {{- range index := .Images }}
-  <a href="{{ .Original }}" target="_blank" id="{{ index + 1 }}">
-    {{- if .Width != 0 && .Height != 0 }}
-    {* todo: do not reflow the page because of loading image *}
-    <img src="{{ .Large }}" alt="Page {{ index + 1 }}" data-width="{{.Width}}" data-height="{{.Height}}" />
+<div class="card mb-4">
+  <div class="card-body">
+    {{- if !.IsUgoira }}
+    <div class="mb-3">
+      {{- range index := .Images }}
+      <a href="{{ .Original }}" target="_blank" id="{{ index + 1 }}" class="d-block mb-3">
+        {{- if .Width != 0 && .Height != 0 }}
+        <img src="{{ .Large }}" alt="Page {{ index + 1 }}" data-width="{{.Width}}" data-height="{{.Height}}" class="img-fluid" />
+        {{- else }}
+        <img src="{{ .Large }}" alt="Page {{ index + 1 }}" class="img-fluid" />
+        {{- end }}
+      </a>
+      {{- end }}
+    </div>
    {{- else }}
-    <img src="{{ .Large }}" alt="Page {{ index + 1 }}" />
+    <div class="mb-3">
+      <video class="w-100" autoplay loop muted disablepictureinpicture playsinline controls poster="{{ .Images[0].Large }}"
+        src="/proxy/ugoira.com/{{ .ID }}">
+        Unable to load ugoira.
+      </video>
+    </div>
+    <div class="mb-3">
+      <a href="/proxy/ugoira.com/{{ .ID }}" class="btn btn-primary btn-sm me-2">Download</a>
+      <a href="https://ugoira.com/i/{{ .ID }}" class="btn btn-secondary btn-sm">Go to ugoira.com for more options</a>
+    </div>
    {{- end }}
-  </a>
-  {{- end }}
-</div>
-{{- else }}
-<div class="illust-images">
-  <video autoplay loop muted disablepictureinpicture playsinline controls poster="{{ .Images[0].Large }}"
-    src="/proxy/ugoira.com/{{ .ID }}">
-    Unable to load ugoira.
-  </video>
-</div>
-<a href="/proxy/ugoira.com/{{ .ID }}">Download</a>
-<br />
-<a href="https://ugoira.com/i/{{ .ID }}">Go to ugoira.com for more options</a>
-{{- end }}

-<div class="illust-attr">
-  <div class="illust-author-attr">
-    <a href="/users/{{ .User.ID }}"><img src="{{ .User.Avatar }}" alt="{{ .User.Name }}" class="illust-avatar" />
-    </a>
-    <div class="attr-wrap">
-      <div class="illust-title">{{ .Title }}</div>
-      <div class="illust-author">
-        <a href="/users/{{ .User.ID }}">{{ .User.Name }}</a>
+    <div class="d-flex justify-content-between align-items-center mb-3">
+      <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" style="width: 50px; height: 50px;" />
+        </a>
+        <div>
+          <h5 class="card-title mb-0">{{ .Title }}</h5>
+          <a href="/users/{{ .User.ID }}" class="text-muted">{{ .User.Name }}</a>
+        </div>
+      </div>
+      <div>
+        {{- if isset(.BookmarkData) && LoggedIn }}
+        <a href="/self/deleteBookmark/{{ .BookmarkID }}" class="btn btn-outline-danger btn-sm me-2">
+          <i class="bi bi-heart-fill"></i> Bookmarked
+        </a>
+        {{- else }}
+        <a href="/self/addBookmark/{{ .ID }}" class="btn btn-outline-primary btn-sm me-2">
+          <i class="bi bi-heart"></i> Bookmark
+        </a>
+        {{- end }}
+
+        {{- if .Liked && LoggedIn}}
+        <button class="btn btn-outline-primary btn-sm" disabled>
+          <i class="bi bi-hand-thumbs-up-fill"></i> Liked
+        </button>
+        {{- else }}
+        <a href="/self/like/{{ .ID }}" class="btn btn-outline-primary btn-sm">
+          <i class="bi bi-hand-thumbs-up"></i> Like
+        </a>
+        {{- end }}
      </div>
    </div>
-  </div>
-  <div class="artwork-actions">
-    {{- if isset(.BookmarkData) && LoggedIn }}
-    <a href="/self/deleteBookmark/{{ .BookmarkID }}">
-      <img src="/img/heart-red.png" alt="Bookmarked" />
-    </a>
-    {{- else }}
-    <a href="/self/addBookmark/{{ .ID }}">
-      <img src="/img/heart-outline.png" alt="Bookmark" />
-    </a>
-    {{- end }}

-    {{- if .Liked && LoggedIn}}
-    <img src="/img/like-blue.png" alt="Liked" />
+    <div class="mb-3">
+      <a href="https://pixiv.net/i/{{ .ID }}" class="text-muted">pixiv.net/i/{{ .ID }}</a>
+    </div>

-    {{- else }}
-    <a href="/self/like/{{ .ID }}">
-      <img src="/img/like-outline.png" alt="Like" />
-    </a>
-    {{- end }}
+    <div class="d-flex flex-wrap mb-3">
+      <span class="me-3"><i class="bi bi-eye"></i> {{- .Views }}</span>
+      <span class="me-3"><i class="bi bi-heart"></i> {{- .Bookmarks }}</span>
+      <span class="me-3"><i class="bi bi-hand-thumbs-up"></i> {{- .Likes }}</span>
+      <span><i class="bi bi-calendar"></i> {{- parseTime: .Date }}</span>
+    </div>
+
+    <div class="mb-3">
+      {{- if .AiType == 2 }}
+      <span class="badge bg-warning text-dark me-2">AI-generated</span>
+      {{- end }}
+      {{- range .Tags }}
+        {{- if isEmphasize(.Name) }}
+        <span class="badge bg-primary me-2">{{ .Name }}</span>
+        {{- else }}
+        <a href="/tags/{{ escapeString(.Name) }}" class="badge bg-secondary text-decoration-none me-2">
+          #{{ .Name }}
+          {{- if .TranslatedName }}
+          <span class="text-light">({{ .TranslatedName }})</span>
+          {{- end }}
+        </a>
+        {{- end }}
+      {{- end }}
+    </div>
+
+    <div class="mb-3">
+      {{- raw: parsePixivRedirect(.Description) }}
+    </div>
  </div>
 </div>
-
-<div>
-  <a href="https://pixiv.net/i/{{ .ID }}">pixiv.net/i/{{ .ID }}</a>
-  <br />
-</div>
-<div class="illust-tags">
-  <span class="illust-tag-attr">
-    <img src="/img/eye.png" alt="Views" />
-    {{- .Views }}
-  </span>
-  <span class="illust-tag-attr">
-    <img src="/img/heart-solid.png" alt="Bookmarks" />
-    {{- .Bookmarks }}
-  </span>
-  <span class="illust-tag-attr">
-    <img src="/img/like.png" alt="Likes" />
-    {{- .Likes }}
-  </span>
-  <span class="illust-tag-attr">
-    <img src="/img/calendar.png" alt="Date" />
-    {{- parseTime: .Date }}
-  </span>
-</div>
-
-<div class="illust-tags">
-  {{- if .AiType == 2 }}
-  <span class="illust-tag">
-    <span class="illust-tag-name" id="highlight">AI-generated</span>
-  </span>
-  {{- end }} {{ range .Tags }} {{ if isEmphasize(.Name) }}
-  <span class="illust-tag">
-    <span class="illust-tag-name" id="highlight">{{ .Name }}</span>
-  </span>
-  {{- else }}
-  <span class="illust-tag">
-    <span class="illust-tag-name"><a href="/tags/{{ escapeString(.Name) }}">#{{ .Name }}</a></span><span
-      class="illust-tag-translation">{{ .TranslatedName }}</span>
-  </span>
-  {{- end }} {{ end }}
-</div>
-<br />
-<div class="illust-description">
-  {{- raw: parsePixivRedirect(.Description) }}
-</div>
-<br />
@@ -1,17 +1,26 @@
-{{- range . }} {{ if .ID == "#" }}
-<div class="artwork-small artwork">
-  <img src="/img/deleted.png" alt="{{ .Title }}" loading="lazy" />
-  <div class="artwork-title">
-    <a>{{ .Title }}</a>
+{{- range . }}
+<div class="col-sm-6 col-md-4 col-lg-3 mb-4">
+  {{- if .ID == "#" }}
+  <div class="card h-100">
+    <img src="/img/deleted.png" class="card-img-top" alt="{{ .Title }}" loading="lazy">
+    <div class="card-body">
+      <h5 class="card-title text-truncate">{{ .Title }}</h5>
+      <div class="d-flex align-items-center mt-2">
+        <img src="/img/deleted.png" class="rounded-circle me-2" alt="{{ .ArtistName }}" width="32" height="32" loading="lazy">
+        <span class="text-muted text-truncate">{{ .ArtistName }}</span>
+      </div>
+    </div>
  </div>
-  <div class="artwork-author">
-    <a><img src="/img/deleted.png" alt="{{ .ArtistName }}" loading="lazy" />
-      <span>{{ .ArtistName }}</span></a>
+  {{- else if .ID }}
+  <div class="card h-100">
+    <div class="position-relative">
+      {{ include "thumbnail-dt" . }}
+    </div>
+    <div class="card-body">
+      {{ include "thumbnail-tt" . }}
+      {{ include "thumbnail-at" . }}
+    </div>
  </div>
+  {{- end }}
 </div>
-{{- else if .ID }}
-<div class="artwork-small artwork">
-  {{ include "thumbnail-dt" . }} {{ include "thumbnail-tt" . }} {{ include
-  "thumbnail-at" . }}
-</div>
-{{- end }} {{ end }}
+{{- end }}
@@ -2,31 +2,35 @@
 {{- hideR18 := CookieList["pixivfe-HideArtR18"] }}
 {{- hideR18G := CookieList["pixivfe-HideArtR18G"] }}
 {{- hideAi := CookieList["pixivfe-HideArtAI"] }}
-<div class="artwork-image">
-  <div class="artwork-additional">
-    {{- if isset(.Rank) }}
-    <div class="artwork-position">{{ .Rank }}</div>
-    {{- end }}
-    {{- if .XRestrict != 0 }}
-    <div class="artwork-profanity-label">
-      <span>{{ if .XRestrict == 1 }}R-18{{ else }}R-18G{{ end }}</span>
+<div class="card h-100">
+  <div class="position-relative">
+    <div class="position-absolute top-0 start-0 p-2 d-flex justify-content-between w-100">
+      {{- if isset(.Rank) }}
+      <span class="badge bg-primary rounded-pill">{{ .Rank }}</span>
+      {{- end }}
+      {{- if .XRestrict != 0 }}
+      <span class="badge bg-danger">
+        {{ if .XRestrict == 1 }}R-18{{ else }}R-18G{{ end }}
+      </span>
+      {{- end }}
    </div>
-    {{- end }}
-    {{- if .Pages > 1 }}
-    <div class="artwork-page-count"><span>&boxbox; {{ .Pages }}</span></div>
-    {{- end }}
-    {{- if .IllustType == 2 }}
-    <div class="artwork-page-count"><span>&#9654;</span></div>
-    {{- end }}
+    <div class="position-absolute bottom-0 end-0 p-2">
+      {{- if .Pages > 1 }}
+      <span class="badge bg-secondary">&boxbox; {{ .Pages }}</span>
+      {{- end }}
+      {{- if .IllustType == 2 }}
+      <span class="badge bg-info">&#9654;</span>
+      {{- end }}
+    </div>
+    {{- AiType := isset(.AiType) ? .AiType : 0}}
+    <a target="{{ target }}" href="/artworks/{{ .ID }}#checkpoint" class="d-block">
+      {{- if (.XRestrict > 0 && hideR18 != "" && hideR18G != "") || (.XRestrict == 2 && hideR18G != "") }}
+      <img src="/img/nsfw.png" alt="{{ .Title }}" class="card-img-top img-fluid" loading="lazy" />
+      {{- else if AiType == 2 && hideAi }}
+      <img src="/img/ai.png" alt="{{ .Title }}" class="card-img-top img-fluid" loading="lazy" />
+      {{- else }}
+      <img src="{{ .Thumbnail }}" alt="{{ .Title }}" class="card-img-top img-fluid" loading="lazy" />
+      {{- end }}
+    </a>
  </div>
-  {{- AiType := isset(.AiType) ? .AiType : 0}}
-  <a target="{{ target }}" href="/artworks/{{ .ID }}#checkpoint">
-    {{- if (.XRestrict > 0 && hideR18 != "" && hideR18G != "") || (.XRestrict == 2 && hideR18G != "") }}
-    <img src="/img/nsfw.png" alt="{{ .Title }}" loading="lazy" />
-    {{- else if AiType == 2 && hideAi }}
-    <img src="/img/ai.png" alt="{{ .Title }}" loading="lazy" />
-    {{- else }}
-    <img src="{{ .Thumbnail }}" alt="{{ .Title }}" loading="lazy" />
-    {{- end }}
-  </a>
 </div>