ui: refactor user-cards as a grid

templates/repo/user_cards.tmpl

@@ -1,17 +1,19 @@
 <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>
+					<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>
@@ -21,6 +23,7 @@
 							{{svg "octicon-calendar"}} {{ctx.Locale.Tr "user.joined_on" (DateTime "short" .CreatedUnix)}}
 						{{end}}
 					</div>
+				</div>
 			</li>
 		{{end}}
 	</ul>

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{

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;
 }