finn/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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"> <div class="user-cards">
{{if .CardsTitle}} {{if .CardsTitle}}
<h2 class="tw-mb-0"> <h2>
{{.CardsTitle}} {{.CardsTitle}}
</h2> </h2>
{{end}} {{end}}
<ul class="list"> <ul class="list">
{{range .Cards}} {{range .Cards}}
<li class="item ui segment"> <li class="card">
<a href="{{.HomeLink}}"> <a href="{{.HomeLink}}">
{{ctx.AvatarUtils.Avatar .}} {{ctx.AvatarUtils.Avatar .}}
</a> </a>
<h3 class="name"><a href="{{.HomeLink}}">{{.DisplayName}}</a></h3> <div>
<h3 class="name">
<a href="{{.HomeLink}}">{{.DisplayName}}</a>
</h3>
<div class="meta"> <div class="meta">
{{if .Website}} {{if .Website}}
{{svg "octicon-link"}} <a href="{{.Website}}" target="_blank" rel="noopener noreferrer">{{.Website}}</a> {{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)}} {{svg "octicon-calendar"}} {{ctx.Locale.Tr "user.joined_on" (DateTime "short" .CreatedUnix)}}
{{end}} {{end}}
</div> </div>
</div>
</li> </li>
{{end}} {{end}}
</ul> </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 // Verify that "user5" is among the stargazers/watchers
htmlDoc = NewHTMLParser(t, resp.Body) 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 // Unstar/unwatch the repo as user5
req = NewRequestWithValues(t, "POST", fmt.Sprintf("/user2/repo1/action/%s", oppositeAction), map[string]string{ 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 { .user-cards .list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin: 0 0 10px;
padding: 0; 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; display: flex;
flex-wrap: wrap; flex-direction: row;
margin: 10px 0; width: 100%;
} margin: 0;
.user-cards .list .item {
list-style: none;
width: 31%;
margin: 15px 15px 0 0;
padding: 14px; 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; width: 48px;
height: 48px; height: 48px;
float: left; margin-right: 14px;
display: block;
margin-right: 10px;
} }
.user-cards .list .item .name { .user-cards .list .card .name {
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal);
} }
.user-cards .list .item .meta { .user-cards .list .card .meta {
margin-top: 5px; margin-top: 5px;
} }