mirror/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-11-28 20:26:19 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

ui: refactor user-cards as a grid

Browse source
This commit is contained in:
0ko 2024-07-31 16:23:23 +05:00
parent c0dde47d37
commit cad8d09ba8
3 changed files with 45 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
templates/repo/user_cards.tmpl
View file

@ -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>

2
tests/integration/repo_starwatch_test.go
View file

@ -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{

44
web_src/css/repo.css
View file

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