Skip to content

Commit ed25676

Browse files
silverwindGiteaBot
silverwind
and
GiteaBot
authored
Restyle release list, fix branch dropdown (#30837)
Fixes #30821 and restyles the release list. Desktop: <img width="1199" alt="Screenshot 2024-05-02 at 20 46 10" src="https://github.com/go-gitea/gitea/assets/115237/bee92423-d4a9-4b26-8301-3a1e09eef4cd"> Mobile: <img width="443" alt="Screenshot 2024-05-02 at 20 46 21" src="https://github.com/go-gitea/gitea/assets/115237/42ecbae5-bdb6-4b16-a0ee-9c64daede68d"> --------- Co-authored-by: Giteabot <[email protected]>
1 parent 8218b64 commit ed25676

File tree

4 files changed

+67
-44
lines changed

4 files changed

+67
-44
lines changed

‎templates/repo/release/list.tmpl

Lines changed: 8 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,18 @@
77
<ul id="release-list">
88
{{range $idx, $info := .Releases}}
99
{{$release := $info.Release}}
10-
<li class="ui grid">
11-
<div class="ui four wide column meta">
10+
<li class="release-entry">
11+
<div class="meta">
1212
<a class="muted" href="{{if not (and $release.Sha1 ($.Permission.CanRead ctx.Consts.RepoUnitTypeCode))}}#{{else}}{{$.RepoLink}}/src/tag/{{$release.TagName | PathEscapeSegments}}{{end}}" rel="nofollow">{{svg "octicon-tag" 16 "tw-mr-1"}}{{$release.TagName}}</a>
1313
{{if and $release.Sha1 ($.Permission.CanRead ctx.Consts.RepoUnitTypeCode)}}
1414
<a class="muted tw-font-mono" href="{{$.RepoLink}}/src/commit/{{$release.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "tw-mr-1"}}{{ShortSha $release.Sha1}}</a>
1515
{{template "repo/branch_dropdown" dict "root" $ "release" $release}}
1616
{{end}}
1717
</div>
18-
<div class="ui twelve wide column detail">
18+
<div class="ui segment detail">
1919
<div class="tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-mb-2">
2020
<h4 class="release-list-title gt-word-break">
21-
{{if $.PageIsSingleTag}}{{$release.Title}}{{else}}<a href="{{$.RepoLink}}/releases/tag/{{$release.TagName | PathEscapeSegments}}">{{$release.Title}}</a>{{end}}
21+
{{if $.PageIsSingleTag}}{{$release.Title}}{{else}}<a class="muted" href="{{$.RepoLink}}/releases/tag/{{$release.TagName | PathEscapeSegments}}">{{$release.Title}}</a>{{end}}
2222
{{template "repo/commit_statuses" dict "Status" $info.CommitStatus "Statuses" $info.CommitStatuses "AdditionalClasses" "tw-flex"}}
2323
{{if $release.IsDraft}}
2424
<span class="ui yellow label">{{ctx.Locale.Tr "repo.release.draft"}}</span>
@@ -62,22 +62,22 @@
6262
</div>
6363
<div class="divider"></div>
6464
<details class="download" {{if eq $idx 0}}open{{end}}>
65-
<summary class="tw-my-4">
65+
<summary>
6666
{{ctx.Locale.Tr "repo.release.downloads"}}
6767
</summary>
6868
<ul class="list">
6969
{{if and (not $.DisableDownloadSourceArchives) (not $release.IsDraft) ($.Permission.CanRead ctx.Consts.RepoUnitTypeCode)}}
7070
<li>
71-
<a class="archive-link" href="{{$.RepoLink}}/archive/{{$release.TagName | PathEscapeSegments}}.zip" rel="nofollow"><strong>{{svg "octicon-file-zip" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.release.source_code"}} (ZIP)</strong></a>
71+
<a class="archive-link" href="{{$.RepoLink}}/archive/{{$release.TagName | PathEscapeSegments}}.zip" rel="nofollow"><strong>{{svg "octicon-file-zip" 16 "download-icon"}}{{ctx.Locale.Tr "repo.release.source_code"}} (ZIP)</strong></a>
7272
</li>
7373
<li>
74-
<a class="archive-link" href="{{$.RepoLink}}/archive/{{$release.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow"><strong>{{svg "octicon-file-zip" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.release.source_code"}} (TAR.GZ)</strong></a>
74+
<a class="archive-link" href="{{$.RepoLink}}/archive/{{$release.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow"><strong>{{svg "octicon-file-zip" 16 "download-icon"}}{{ctx.Locale.Tr "repo.release.source_code"}} (TAR.GZ)</strong></a>
7575
</li>
7676
{{end}}
7777
{{range $release.Attachments}}
7878
<li>
7979
<a target="_blank" rel="nofollow" href="{{.DownloadURL}}" download>
80-
<strong>{{svg "octicon-package" 16 "tw-mr-1"}}{{.Name}}</strong>
80+
<strong>{{svg "octicon-package" 16 "download-icon"}}{{.Name}}</strong>
8181
</a>
8282
<div>
8383
<span class="text grey">{{.Size | FileSize}}</span>
@@ -89,7 +89,6 @@
8989
{{end}}
9090
</ul>
9191
</details>
92-
<div class="dot"></div>
9392
</div>
9493
</li>
9594
{{end}}

‎templates/repo/tag/list.tmpl

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,12 @@
1616
<tbody class="tag-list">
1717
{{range $idx, $release := .Releases}}
1818
<tr>
19-
<td class="tag">
20-
<h3 class="release-tag-name tw-mb-2">
19+
<td class="tag-list-row">
20+
<h3 class="tag-list-row-title tw-mb-2">
2121
{{if $canReadReleases}}
22-
<a class="tw-flex tw-items-center" href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
22+
<a class="tag-list-row-link tw-flex tw-items-center" href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
2323
{{else}}
24-
<a class="tw-flex tw-items-center" href="{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
24+
<a class="tag-list-row-link tw-flex tw-items-center" href="{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
2525
{{end}}
2626
</h3>
2727
<div class="download tw-flex tw-items-center">

‎tests/integration/release_test.go

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ func TestViewReleaseListNoLogin(t *testing.T) {
142142
rsp := MakeRequest(t, req, http.StatusOK)
143143

144144
htmlDoc := NewHTMLParser(t, rsp.Body)
145-
releases := htmlDoc.Find("#release-list li.ui.grid")
145+
releases := htmlDoc.Find("#release-list .release-entry")
146146
assert.Equal(t, 5, releases.Length())
147147

148148
links := make([]string, 0, 5)
@@ -198,7 +198,7 @@ func TestViewReleaseListLogin(t *testing.T) {
198198
rsp := session.MakeRequest(t, req, http.StatusOK)
199199

200200
htmlDoc := NewHTMLParser(t, rsp.Body)
201-
releases := htmlDoc.Find("#release-list li.ui.grid")
201+
releases := htmlDoc.Find("#release-list .release-entry")
202202
assert.Equal(t, 3, releases.Length())
203203

204204
links := make([]string, 0, 5)
@@ -229,12 +229,12 @@ func TestViewTagsList(t *testing.T) {
229229
rsp := session.MakeRequest(t, req, http.StatusOK)
230230

231231
htmlDoc := NewHTMLParser(t, rsp.Body)
232-
tags := htmlDoc.Find(".tag-list tr")
232+
tags := htmlDoc.Find(".tag-list-row-link")
233233
assert.Equal(t, 3, tags.Length())
234234

235235
tagNames := make([]string, 0, 5)
236236
tags.Each(func(i int, s *goquery.Selection) {
237-
tagNames = append(tagNames, s.Find(".tag a.tw-flex.tw-items-center").Text())
237+
tagNames = append(tagNames, s.Text())
238238
})
239239

240240
assert.EqualValues(t, []string{"v1.0", "delete-tag", "v1.1"}, tagNames)

‎web_src/css/repo/release-tag.css

Lines changed: 51 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
.repository.releases #release-list {
2-
margin-top: 12px;
3-
padding-top: 12px;
1+
#release-list {
2+
display: flex;
3+
flex-direction: column;
4+
gap: var(--page-spacing);
45
padding-left: 0;
56
}
67

7-
.repository.releases #release-list .release-list-title {
8+
#release-list .release-list-title {
89
font-size: 2rem;
910
font-weight: var(--font-weight-normal);
1011
display: flex;
@@ -13,58 +14,81 @@
1314
margin: 0;
1415
}
1516

16-
.repository.releases #release-list > li .meta {
17-
padding-top: 25px;
17+
#release-list .release-entry {
18+
display: flex;
19+
gap: var(--page-spacing);
20+
}
21+
22+
#release-list .release-entry .meta {
23+
flex: 0 0 150px;
1824
position: relative;
1925
text-align: right;
2026
display: flex;
2127
flex-direction: column;
22-
gap: 1em;
28+
gap: 10px;
2329
}
2430

25-
.repository.releases #release-list > li .detail {
26-
padding-bottom: 20px;
27-
border-left: 1px solid var(--color-secondary);
31+
#release-list .release-entry .detail {
32+
flex: 1;
33+
margin: 0;
2834
}
2935

30-
.repository.releases #release-list > li .detail .author img {
36+
@media (max-width: 767.98px) {
37+
#release-list .release-entry {
38+
flex-direction: column;
39+
gap: var(--page-spacing);
40+
}
41+
#release-list .release-entry .meta {
42+
margin-left: 6px;
43+
flex-direction: row;
44+
flex-basis: auto;
45+
display: flex;
46+
align-items: center;
47+
}
48+
#release-list .js-branch-tag-selector {
49+
margin-left: auto;
50+
}
51+
#release-list .branch-selector-dropdown .menu { /* open menu to left */
52+
right: 0;
53+
left: auto;
54+
}
55+
}
56+
57+
#release-list .release-entry .detail .author img {
3158
margin-bottom: 2px; /* the legacy trick to align the avatar vertically, no better solution at the moment */
3259
}
3360

34-
.repository.releases #release-list > li .detail .download .list {
61+
#release-list .release-entry .detail .download .list {
3562
padding-left: 0;
3663
border: 1px solid var(--color-secondary);
3764
border-radius: var(--border-radius);
38-
background: var(--color-light);
3965
}
4066

41-
.repository.releases #release-list > li .detail .download .list li {
67+
#release-list .release-entry .detail .download .list li {
4268
display: flex;
4369
justify-content: space-between;
4470
padding: 8px;
4571
border-bottom: 1px solid var(--color-secondary);
4672
}
4773

48-
.repository.releases #release-list > li .detail .download .list li:last-child {
49-
border-bottom: none;
74+
#release-list .release-entry .detail .download[open] summary {
75+
margin-bottom: 10px;
76+
}
77+
78+
#release-list .download-icon {
79+
margin-right: .25rem;
80+
color: var(--color-text-light-1);
5081
}
5182

52-
.repository.releases #release-list > li .detail .dot {
53-
width: 10px;
54-
height: 10px;
55-
background-color: var(--color-secondary-dark-3);
56-
position: absolute;
57-
left: -5.5px;
58-
top: 30px;
59-
border-radius: var(--border-radius-circle);
60-
border: 2.5px solid var(--color-body);
83+
#release-list .release-entry .detail .download .list li:last-child {
84+
border-bottom: none;
6185
}
6286

63-
.repository.tags #tags-table .tag {
87+
#tags-table .tag-list-row {
6488
padding: 8px 12px;
6589
}
6690

67-
.repository.tags #tags-table .release-tag-name {
91+
#tags-table .tag-list-row-title {
6892
font-size: 18px;
6993
font-weight: var(--font-weight-normal);
7094
}

0 commit comments

Comments
 (0)