From cad8d09ba86917ebef132d66b2ed61e45acbaaf8 Mon Sep 17 00:00:00 2001
From: 0ko <0ko@noreply.codeberg.org>
Date: Wed, 31 Jul 2024 16:23:23 +0500
Subject: [PATCH] ui: refactor user-cards as a grid

---
 templates/repo/user_cards.tmpl           | 27 ++++++++-------
 tests/integration/repo_starwatch_test.go |  2 +-
 web_src/css/repo.css                     | 44 ++++++++++++++++--------
 3 files changed, 45 insertions(+), 28 deletions(-)

diff --git a/templates/repo/user_cards.tmpl b/templates/repo/user_cards.tmpl
index 9061b1771..88178dbf3 100644
--- a/templates/repo/user_cards.tmpl
+++ b/templates/repo/user_cards.tmpl
@@ -1,25 +1,28 @@
 <div class="user-cards">
 	{{if .CardsTitle}}
-		<h2 class="tw-mb-0">
+		<h2>
 			{{.CardsTitle}}
 		</h2>
 	{{end}}
 	<ul class="list">
 		{{range .Cards}}
-			<li class="item ui segment">
+			<li class="card">
 				<a href="{{.HomeLink}}">
 					{{ctx.AvatarUtils.Avatar .}}
 				</a>
-				<h3 class="name"><a href="{{.HomeLink}}">{{.DisplayName}}</a></h3>
-
-				<div class="meta">
-					{{if .Website}}
-						{{svg "octicon-link"}} <a href="{{.Website}}" target="_blank" rel="noopener noreferrer">{{.Website}}</a>
-					{{else if .Location}}
-						{{svg "octicon-location"}} {{.Location}}
-					{{else}}
-						{{svg "octicon-calendar"}} {{ctx.Locale.Tr "user.joined_on" (DateTime "short" .CreatedUnix)}}
-					{{end}}
+				<div>
+					<h3 class="name">
+						<a href="{{.HomeLink}}">{{.DisplayName}}</a>
+					</h3>
+					<div class="meta">
+						{{if .Website}}
+							{{svg "octicon-link"}} <a href="{{.Website}}" target="_blank" rel="noopener noreferrer">{{.Website}}</a>
+						{{else if .Location}}
+							{{svg "octicon-location"}} {{.Location}}
+						{{else}}
+							{{svg "octicon-calendar"}} {{ctx.Locale.Tr "user.joined_on" (DateTime "short" .CreatedUnix)}}
+						{{end}}
+					</div>
 				</div>
 			</li>
 		{{end}}
diff --git a/tests/integration/repo_starwatch_test.go b/tests/integration/repo_starwatch_test.go
index ecab75847..a8bad3010 100644
--- a/tests/integration/repo_starwatch_test.go
+++ b/tests/integration/repo_starwatch_test.go
@@ -48,7 +48,7 @@ func testRepoStarringOrWatching(t *testing.T, action, listURI string) {
 
 	// Verify that "user5" is among the stargazers/watchers
 	htmlDoc = NewHTMLParser(t, resp.Body)
-	htmlDoc.AssertElement(t, ".user-cards .list .item.ui.segment > a[href='/user5']", true)
+	htmlDoc.AssertElement(t, ".user-cards .list .card > a[href='/user5']", true)
 
 	// Unstar/unwatch the repo as user5
 	req = NewRequestWithValues(t, "POST", fmt.Sprintf("/user2/repo1/action/%s", oppositeAction), map[string]string{
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 3b1735f27..bf0366add 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2099,35 +2099,49 @@ td .commit-summary {
 }
 
 .user-cards .list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+  margin: 0 0 10px;
   padding: 0;
+}
+
+@media (max-width: 767.98px) {
+  .user-cards .list {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+@media (max-width: 900px) {
+  .user.profile .user-cards .list {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+.user-cards .list .card {
   display: flex;
-  flex-wrap: wrap;
-  margin: 10px 0;
-}
-
-.user-cards .list .item {
-  list-style: none;
-  width: 31%;
-  margin: 15px 15px 0 0;
+  flex-direction: row;
+  width: 100%;
+  margin: 0;
   padding: 14px;
-  float: left;
+  border-radius: 0.28571429rem;
+  border: 1px solid var(--color-secondary);
+  background: var(--color-box-body);
 }
 
-.user-cards .list .item .avatar {
+.user-cards .list .card .avatar {
   width: 48px;
   height: 48px;
-  float: left;
-  display: block;
-  margin-right: 10px;
+  margin-right: 14px;
 }
 
-.user-cards .list .item .name {
+.user-cards .list .card .name {
   margin-top: 0;
   margin-bottom: 0;
   font-weight: var(--font-weight-normal);
 }
 
-.user-cards .list .item .meta {
+.user-cards .list .card .meta {
   margin-top: 5px;
 }