Skip to content

Commit e2fa84f

Browse files
silverwindlunny
silverwind
and
lunny
authored
Release and Tag List tweaks (#21712)
- Reduce font size on tag list and add muted links - Move Release tag to right side on release list - Move Release edit button to far-right and make it icon-only - Add styles for error dropdowns, seen on release edit page - Make the release page slightly more mobile-friendly <img width="468" alt="Screen Shot 2022-11-07 at 22 10 44" src="https://user-images.githubusercontent.com/115237/200417500-149f40f5-2376-42b4-92a7-d7eba3ac359d.png"> <img width="1015" alt="Screen Shot 2022-11-07 at 22 27 14" src="https://user-images.githubusercontent.com/115237/200419201-b28f39d6-fe9e-4049-8023-b301c9bae528.png"> <img width="1019" alt="Screen Shot 2022-11-07 at 22 27 27" src="https://user-images.githubusercontent.com/115237/200419206-3f07d988-42f6-421d-8ba9-303a0d59e711.png"> <img width="709" alt="Screen Shot 2022-11-07 at 22 42 10" src="https://user-images.githubusercontent.com/115237/200421671-f0393cde-2d8f-4e1f-a788-f1f51fc4807c.png"> <img width="713" alt="Screen Shot 2022-11-07 at 22 42 27" src="https://user-images.githubusercontent.com/115237/200421676-5797f8cf-dfe8-4dd6-85d4-dc69e31a9912.png"> <img width="406" alt="image" src="https://user-images.githubusercontent.com/115237/200418220-8c3f7549-61b4-4661-935e-39e1352f7851.png"> <img width="416" alt="Screen Shot 2022-11-07 at 22 21 36" src="https://user-images.githubusercontent.com/115237/200418107-cdb0eb6f-1292-469c-b89a-2cb13f24173c.png"> Co-authored-by: Lunny Xiao <[email protected]>
1 parent 74874d0 commit e2fa84f

File tree

5 files changed

+80
-41
lines changed

5 files changed

+80
-41
lines changed

‎templates/repo/release/list.tmpl‎

Lines changed: 42 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -36,21 +36,21 @@
3636
</h3>
3737
<div class="download df ac">
3838
{{if $.Permission.CanRead $.UnitTypeCode}}
39-
<a class="mr-3 mono" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "mr-2"}}{{ShortSha .Sha1}}</a>
39+
<a class="mr-3 mono muted" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "mr-2"}}{{ShortSha .Sha1}}</a>
4040
{{if not $.DisableDownloadSourceArchives}}
41-
<a class="archive-link mr-3" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "mr-2"}}ZIP</a>
42-
<a class="archive-link mr-3" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip" 16 "mr-2"}}TAR.GZ</a>
41+
<a class="archive-link mr-3 muted" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "mr-2"}}ZIP</a>
42+
<a class="archive-link mr-3 muted" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip" 16 "mr-2"}}TAR.GZ</a>
4343
{{end}}
4444
{{if (and $.CanCreateRelease $release.IsTag)}}
45-
<a class="mr-3" href="{{$.RepoLink}}/releases/new?tag={{.TagName}}">{{svg "octicon-tag" 16 "mr-2"}}{{$.locale.Tr "repo.release.new_release"}}</a>
45+
<a class="mr-3 muted" href="{{$.RepoLink}}/releases/new?tag={{.TagName}}">{{svg "octicon-tag" 16 "mr-2"}}{{$.locale.Tr "repo.release.new_release"}}</a>
4646
{{end}}
4747
{{if (and ($.Permission.CanWrite $.UnitTypeCode) $release.IsTag)}}
48-
<a class="ui red delete-button mr-3" data-url="{{$.RepoLink}}/tags/delete" data-id="{{.ID}}">
48+
<a class="ui delete-button mr-3 muted" data-url="{{$.RepoLink}}/tags/delete" data-id="{{.ID}}">
4949
{{svg "octicon-trash" 16 "mr-2"}}{{$.locale.Tr "repo.release.delete_tag"}}
5050
</a>
5151
{{end}}
5252
{{if (not $release.IsTag)}}
53-
<a class="mr-3" href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}">{{svg "octicon-tag" 16 "mr-2"}}{{$.locale.Tr "repo.release.detail"}}</a>
53+
<a class="mr-3 muted" href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}">{{svg "octicon-tag" 16 "mr-2"}}{{$.locale.Tr "repo.release.detail"}}</a>
5454
{{end}}
5555
{{end}}
5656
</div>
@@ -69,56 +69,67 @@
6969
{{if .IsTag}}
7070
{{if .CreatedUnix}}<span class="time">{{TimeSinceUnix .CreatedUnix $.locale}}</span>{{end}}
7171
{{else}}
72-
{{if .IsDraft}}
73-
<span class="ui yellow label">{{$.locale.Tr "repo.release.draft"}}</span>
74-
{{else if .IsPrerelease}}
75-
<span class="ui orange label">{{$.locale.Tr "repo.release.prerelease"}}</span>
76-
{{else}}
77-
<span class="ui green label">{{$.locale.Tr "repo.release.stable"}}</span>
78-
{{end}}
79-
<span class="tag text blue">
80-
<a class="df ac je" href="{{if not .Sha1}}#{{else}}{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}{{end}}" rel="nofollow">{{svg "octicon-tag" 16 "mr-2"}}{{.TagName}}</a>
81-
</span>
72+
<a class="df ac je muted" href="{{if not .Sha1}}#{{else}}{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}{{end}}" rel="nofollow">{{svg "octicon-tag" 16 "mr-2"}}{{.TagName}}</a>
8273
{{if .Sha1}}
8374
<span class="commit">
84-
<a class="mono" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "mr-2"}}{{ShortSha .Sha1}}</a>
75+
<a class="mono muted" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "mr-2"}}{{ShortSha .Sha1}}</a>
8576
</span>
8677
{{template "repo/branch_dropdown" dict "root" $ "release" .}}
8778
{{end}}
8879
{{end}}
8980
</div>
9081
<div class="ui twelve wide column detail">
9182
{{if .IsTag}}
92-
<h4>
93-
<a href="{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{svg "octicon-tag" 16 "mr-2"}}{{.TagName}}</a>
94-
</h4>
83+
<div class="df ac sb fw mb-3">
84+
<h4 class="release-list-title df ac">
85+
<a class="df ac" href="{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{svg "octicon-tag" 24 "mr-3"}}{{.TagName}}</a>
86+
</h4>
87+
</div>
9588
<p class="text grey">
9689
{{if gt .Publisher.ID 0}}
9790
<span class="author">
9891
{{avatar .Publisher 20}}
9992
<a href="{{.Publisher.HomeLink}}">{{.Publisher.Name}}</a>
10093
</span>
94+
<span class="released">
95+
{{$.locale.Tr "repo.released_this"}}
96+
</span>
97+
{{if .CreatedUnix}}
98+
<span class="time">{{TimeSinceUnix .CreatedUnix $.locale}}</span>
99+
{{end}}
100+
|
101101
{{end}}
102102
<span class="ahead"><a href="{{$.RepoLink}}/compare/{{.TagName | PathEscapeSegments}}{{if .Target}}...{{.Target | PathEscapeSegments}}{{end}}">{{$.locale.Tr "repo.release.ahead.commits" .NumCommitsBehind | Str2html}}</a> {{$.locale.Tr "repo.release.ahead.target" $.DefaultBranch}}</span>
103103
</p>
104104
<div class="download">
105105
{{if $.Permission.CanRead $.UnitTypeCode}}
106-
<a class="mono" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "mr-2"}}{{ShortSha .Sha1}}</a>
106+
<a class="mono muted" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "mr-2"}}{{ShortSha .Sha1}}</a>
107107
{{if not $.DisableDownloadSourceArchives}}
108-
<a class="archive-link" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
109-
<a class="archive-link" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;TAR.GZ</a>
108+
<a class="archive-link muted" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
109+
<a class="archive-link muted" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;TAR.GZ</a>
110110
{{end}}
111111
{{end}}
112112
</div>
113113
{{else}}
114-
<h4 class="release-list-title df ac">
115-
<a href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}">{{.Title}}</a>
116-
{{if $.CanCreateRelease}}
117-
<small class="ml-2">
118-
(<a href="{{$.RepoLink}}/releases/edit/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{$.locale.Tr "repo.release.edit"}}</a>)
119-
</small>
120-
{{end}}
121-
</h4>
114+
<div class="df ac sb fw mb-3">
115+
<h4 class="release-list-title df ac">
116+
<a href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}">{{.Title}}</a>
117+
{{if .IsDraft}}
118+
<span class="ui yellow label ml-3 mt-1">{{$.locale.Tr "repo.release.draft"}}</span>
119+
{{else if .IsPrerelease}}
120+
<span class="ui orange label ml-3 mt-1">{{$.locale.Tr "repo.release.prerelease"}}</span>
121+
{{else if not .IsTag}}
122+
<span class="ui green label ml-3 mt-1">{{$.locale.Tr "repo.release.stable"}}</span>
123+
{{end}}
124+
</h4>
125+
<div class="df ac">
126+
{{if $.CanCreateRelease}}
127+
<a class="muted tooltip ml-3 df ac" data-content="{{$.locale.Tr "repo.release.edit"}}" href="{{$.RepoLink}}/releases/edit/{{.TagName | PathEscapeSegments}}" rel="nofollow">
128+
{{svg "octicon-pencil"}}
129+
</a>
130+
{{end}}
131+
</div>
132+
</div>
122133
<p class="text grey">
123134
<span class="author">
124135
{{if .OriginalAuthor}}

‎tests/integration/release_test.go‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ func checkLatestReleaseAndCount(t *testing.T, session *TestSession, repoURL, ver
5353
resp := session.MakeRequest(t, req, http.StatusOK)
5454

5555
htmlDoc := NewHTMLParser(t, resp.Body)
56-
labelText := htmlDoc.doc.Find("#release-list > li .meta .label").First().Text()
56+
labelText := htmlDoc.doc.Find("#release-list > li .detail .label").First().Text()
5757
assert.EqualValues(t, label, labelText)
5858
titleText := htmlDoc.doc.Find("#release-list > li .detail h4 a").First().Text()
5959
assert.EqualValues(t, version, titleText)

‎web_src/less/_base.less‎

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,8 @@
108108
--color-diff-inactive: #f2f2f2;
109109
--color-error-border: #e0b4b4;
110110
--color-error-bg: #fff6f6;
111+
--color-error-bg-active: #fbb;
112+
--color-error-bg-hover: #fdd;
111113
--color-error-text: #9f3a38;
112114
--color-success-border: #a3c293;
113115
--color-success-bg: #fcfff5;
@@ -1293,6 +1295,11 @@ a.ui.card:hover,
12931295
.ui.form .fields.error .field input[type="text"],
12941296
.ui.form .fields.error .field input[type="file"],
12951297
.ui.form .fields.error .field input[type="url"],
1298+
.ui.form .fields.error .field .ui.dropdown,
1299+
.ui.form .fields.error .field .ui.dropdown .item,
1300+
.ui.form .field.error .ui.dropdown,
1301+
.ui.form .field.error .ui.dropdown .text,
1302+
.ui.form .field.error .ui.dropdown .item,
12961303
.ui.form .field.error textarea,
12971304
.ui.form .field.error select,
12981305
.ui.form .field.error input:not([type]),
@@ -1321,10 +1328,32 @@ a.ui.card:hover,
13211328
.ui.form .field.error input[type="file"]:focus,
13221329
.ui.form .field.error input[type="url"]:focus {
13231330
background-color: var(--color-error-bg);
1324-
border: 1px solid var(--color-error-border);
1331+
border-color: var(--color-error-border);
13251332
color: var(--color-error-text);
13261333
}
13271334

1335+
.ui.form .fields.error .field .ui.dropdown,
1336+
.ui.form .field.error .ui.dropdown,
1337+
.ui.form .fields.error .field .ui.dropdown:hover,
1338+
.ui.form .field.error .ui.dropdown:hover {
1339+
border-color: var(--color-error-border) !important;
1340+
}
1341+
1342+
.ui.form .fields.error .field .ui.dropdown .menu .item:hover,
1343+
.ui.form .field.error .ui.dropdown .menu .item:hover {
1344+
background-color: var(--color-error-bg-hover);
1345+
}
1346+
1347+
.ui.form .fields.error .field .ui.dropdown .menu .active.item,
1348+
.ui.form .field.error .ui.dropdown .menu .active.item {
1349+
background-color: var(--color-error-bg-active) !important;
1350+
}
1351+
1352+
.ui.form .fields.error .dropdown .menu,
1353+
.ui.form .field.error .dropdown .menu {
1354+
border-color: var(--color-error-border) !important;
1355+
}
1356+
13281357
.ui.loading.loading.input > i.icon svg {
13291358
visibility: hidden;
13301359
}

‎web_src/less/_repository.less‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1855,11 +1855,13 @@
18551855
border-top: 1px solid var(--color-secondary);
18561856
margin-top: 20px;
18571857
padding-top: 15px;
1858+
padding-left: 0;
18581859

18591860
.release-list-title {
18601861
font-size: 2rem;
18611862
font-weight: normal;
1862-
margin-top: -6px;
1863+
margin-top: -4px;
1864+
margin-bottom: 0;
18631865
}
18641866

18651867
> li {
@@ -1879,11 +1881,6 @@
18791881
margin-right: 0;
18801882
}
18811883

1882-
.tag:not(.icon) {
1883-
display: block;
1884-
margin-top: 15px;
1885-
}
1886-
18871884
.commit {
18881885
display: block;
18891886
margin-top: 10px;
@@ -1903,7 +1900,7 @@
19031900

19041901
.author {
19051902
img {
1906-
margin-bottom: -3px;
1903+
margin-bottom: 3px;
19071904
}
19081905
}
19091906

@@ -1966,7 +1963,7 @@
19661963
}
19671964

19681965
.release-tag-name {
1969-
font-size: 20px;
1966+
font-size: 18px;
19701967
font-weight: normal;
19711968
}
19721969
}

‎web_src/less/themes/theme-arc-green.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,8 @@
9797
--color-diff-inactive: #353846;
9898
--color-error-border: #a04141;
9999
--color-error-bg: #522;
100+
--color-error-bg-active: #744;
101+
--color-error-bg-hover: #633;
100102
--color-error-text: #f9cbcb;
101103
--color-success-border: #458a57;
102104
--color-success-bg: #284034;

0 commit comments

Comments
 (0)