From 48020bb5ac63a7c2ca9cbcb136a4b6e847eee70e Mon Sep 17 00:00:00 2001
From: VnPower <vnpower@disroot.org>
Date: Thu, 7 Nov 2024 20:42:30 +0700
Subject: [PATCH] Add a 'See more' button at the end of recent artworks

---
 assets/views/artwork.jet.html | 97 +++++++++++++++++++++--------------
 1 file changed, 58 insertions(+), 39 deletions(-)

diff --git a/assets/views/artwork.jet.html b/assets/views/artwork.jet.html
index e420529..fd36980 100644
--- a/assets/views/artwork.jet.html
+++ b/assets/views/artwork.jet.html
@@ -6,36 +6,36 @@
 <link rel="prefetch" href="/users/{{ .Illust.User.ID }}">
 
 <div class="row justify-content-center g-4">
-<!-- col-lg-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-lg-9">
-  <!-- The artwork fragment -->
-  {{- include "fragments/artwork" .Illust }}
-</div>
+  <!-- col-lg-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-lg-9">
+    <!-- The artwork fragment -->
+    {{- include "fragments/artwork" .Illust }}
+  </div>
 
-<div class="col-12 col-lg-11">
-  <div class="row g-4">
-    <!-- Recent works by artist -->
-    <div class="col-12 col-lg-6">
-      <div class="custom-card bg-charcoal-surface1 py-3 px-4 mb-3">
-        <div class="d-flex justify-content-between align-items-center">
-          <div class="d-flex align-items-center me-3">
-            <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 flex-shrink-0 border border-neutral-700 rounded py-1 px-2">
-            <small class="text-center">
-              <a href="{{ combinedUrl }}" class="text-body-secondary fw-semibold">
-                View all
+  <div class="col-12 col-lg-11">
+    <div class="row g-4">
+      <!-- Recent works by artist -->
+      <div class="col-12 col-lg-6">
+	<div class="custom-card bg-charcoal-surface1 py-3 px-4 mb-3">
+          <div class="d-flex justify-content-between align-items-center">
+            <div class="d-flex align-items-center me-3">
+              <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>
-            </small>
+              <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 flex-shrink-0 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>
         <div id="horizontal-scroll" class="row flex-nowrap flex-lg-wrap overflow-scroll overflow-lg-visible px-4 g-3">
           {{- range .Illust.RecentWorks }}
           {* NOTE: indivisble col-7 to create a visible affordance *}
@@ -48,25 +48,44 @@
             </div>
           </div>
           {{- end }}
+
+	  {* See more button *}
+	  <div class="col-7 col-md-4 col-xl-3">
+            <div class="card h-100 border-0 bg-transparent">
+	      <div class="position-relative h-100 thumbnail-hover-dark mb-2">
+		<div> 
+		  <a href="/users/{{ .Illust.User.ID }}#checkpoint">
+		    <div class="ratio ratio-1x1">
+		      <div class="rounded d-flex flex-column align-items-center justify-content-center w-100 h-100 bg-neutral-800 text-white">
+			<i class="bi bi-three-dots text-white fs-2"></i>
+			See more
+		      </div>
+		    </div>
+		  </a>
+		</div>
+	      </div>
+            </div>
+          </div>
+	  
         </div>
+      </div>
+
+      <!-- Comments section -->
+      {{- yield Comments(data=.Illust, contentType="illust") }}
+
     </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 }}
+  {{- 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>
-</div>
-{{- end }}
+  {{- end }}
 
 </div>
 {{- end }}