Merge pull request 'Refactor user-cards as a grid' (#4760) from 0ko/forgejo:ui-usercards-grid into forgejo
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4760 Reviewed-by: Caesar Schinas <caesar@caesarschinas.com>
This commit is contained in:
commit
37151d75cb
3 changed files with 45 additions and 28 deletions
|
@ -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>
|
||||||
|
|
|
@ -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{
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue