realaravinth/bench-forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Release and Tag List tweaks (#21712)

Browse source 
- 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 <xiaolunwen@gmail.com>
This commit is contained in:
silverwind 2022-12-06 14:15:46 +01:00 committed by GitHub
parent 74874d065f
commit e2fa84fddc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 80 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
templates/repo/release/list.tmpl
View file

@ -36,21 +36,21 @@
</h3> </h3>
<div class="download df ac"> <div class="download df ac">
{{if $.Permission.CanRead $.UnitTypeCode}} {{if $.Permission.CanRead $.UnitTypeCode}}
<a class="mr-3 mono" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "mr-2"}}{{ShortSha .Sha1}}</a> <a class="mr-3 mono muted" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "mr-2"}}{{ShortSha .Sha1}}</a>
{{if not $.DisableDownloadSourceArchives}} {{if not $.DisableDownloadSourceArchives}}
<a class="archive-link mr-3" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "mr-2"}}ZIP</a> <a class="archive-link mr-3 muted" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.zip" rel="nofollow">{{svg "octicon-file-zip" 16 "mr-2"}}ZIP</a>
<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> <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>
{{end}} {{end}}
{{if (and $.CanCreateRelease $release.IsTag)}} {{if (and $.CanCreateRelease $release.IsTag)}}
<a class="mr-3" href="{{$.RepoLink}}/releases/new?tag={{.TagName}}">{{svg "octicon-tag" 16 "mr-2"}}{{$.locale.Tr "repo.release.new_release"}}</a> <a class="mr-3 muted" href="{{$.RepoLink}}/releases/new?tag={{.TagName}}">{{svg "octicon-tag" 16 "mr-2"}}{{$.locale.Tr "repo.release.new_release"}}</a>
{{end}} {{end}}
{{if (and ($.Permission.CanWrite $.UnitTypeCode) $release.IsTag)}} {{if (and ($.Permission.CanWrite $.UnitTypeCode) $release.IsTag)}}
<a class="ui red delete-button mr-3" data-url="{{$.RepoLink}}/tags/delete" data-id="{{.ID}}"> <a class="ui delete-button mr-3 muted" data-url="{{$.RepoLink}}/tags/delete" data-id="{{.ID}}">
{{svg "octicon-trash" 16 "mr-2"}}{{$.locale.Tr "repo.release.delete_tag"}} {{svg "octicon-trash" 16 "mr-2"}}{{$.locale.Tr "repo.release.delete_tag"}}
</a> </a>
{{end}} {{end}}
{{if (not $release.IsTag)}} {{if (not $release.IsTag)}}
<a class="mr-3" href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}">{{svg "octicon-tag" 16 "mr-2"}}{{$.locale.Tr "repo.release.detail"}}</a> <a class="mr-3 muted" href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}">{{svg "octicon-tag" 16 "mr-2"}}{{$.locale.Tr "repo.release.detail"}}</a>
{{end}} {{end}}
{{end}} {{end}}
</div> </div>
@ -69,19 +69,10 @@
{{if .IsTag}} {{if .IsTag}}
{{if .CreatedUnix}}<span class="time">{{TimeSinceUnix .CreatedUnix $.locale}}</span>{{end}} {{if .CreatedUnix}}<span class="time">{{TimeSinceUnix .CreatedUnix $.locale}}</span>{{end}}
{{else}} {{else}}
{{if .IsDraft}} <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>
<span class="ui yellow label">{{$.locale.Tr "repo.release.draft"}}</span>
{{else if .IsPrerelease}}
<span class="ui orange label">{{$.locale.Tr "repo.release.prerelease"}}</span>
{{else}}
<span class="ui green label">{{$.locale.Tr "repo.release.stable"}}</span>
{{end}}
<span class="tag text blue">
<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>
</span>
{{if .Sha1}} {{if .Sha1}}
<span class="commit"> <span class="commit">
<a class="mono" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "mr-2"}}{{ShortSha .Sha1}}</a> <a class="mono muted" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "mr-2"}}{{ShortSha .Sha1}}</a>
</span> </span>
{{template "repo/branch_dropdown" dict "root" $ "release" .}} {{template "repo/branch_dropdown" dict "root" $ "release" .}}
{{end}} {{end}}
@ -89,36 +80,56 @@
</div> </div>
<div class="ui twelve wide column detail"> <div class="ui twelve wide column detail">
{{if .IsTag}} {{if .IsTag}}
<h4> <div class="df ac sb fw mb-3">
<a href="{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{svg "octicon-tag" 16 "mr-2"}}{{.TagName}}</a> <h4 class="release-list-title df ac">
<a class="df ac" href="{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{svg "octicon-tag" 24 "mr-3"}}{{.TagName}}</a>
</h4> </h4>
</div>
<p class="text grey"> <p class="text grey">
{{if gt .Publisher.ID 0}} {{if gt .Publisher.ID 0}}
<span class="author"> <span class="author">
{{avatar .Publisher 20}} {{avatar .Publisher 20}}
<a href="{{.Publisher.HomeLink}}">{{.Publisher.Name}}</a> <a href="{{.Publisher.HomeLink}}">{{.Publisher.Name}}</a>
</span> </span>
<span class="released">
{{$.locale.Tr "repo.released_this"}}
</span>
{{if .CreatedUnix}}
<span class="time">{{TimeSinceUnix .CreatedUnix $.locale}}</span>
{{end}}
|
{{end}} {{end}}
<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> <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>
</p> </p>
<div class="download"> <div class="download">
{{if $.Permission.CanRead $.UnitTypeCode}} {{if $.Permission.CanRead $.UnitTypeCode}}
<a class="mono" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "mr-2"}}{{ShortSha .Sha1}}</a> <a class="mono muted" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "mr-2"}}{{ShortSha .Sha1}}</a>
{{if not $.DisableDownloadSourceArchives}} {{if not $.DisableDownloadSourceArchives}}
<a class="archive-link" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a> <a class="archive-link muted" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.zip" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;ZIP</a>
<a class="archive-link" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;TAR.GZ</a> <a class="archive-link muted" href="{{$.RepoLink}}/archive/{{.TagName | PathEscapeSegments}}.tar.gz" rel="nofollow">{{svg "octicon-file-zip"}}&nbsp;TAR.GZ</a>
{{end}} {{end}}
{{end}} {{end}}
</div> </div>
{{else}} {{else}}
<div class="df ac sb fw mb-3">
<h4 class="release-list-title df ac"> <h4 class="release-list-title df ac">
<a href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}">{{.Title}}</a> <a href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}">{{.Title}}</a>
{{if $.CanCreateRelease}} {{if .IsDraft}}
<small class="ml-2"> <span class="ui yellow label ml-3 mt-1">{{$.locale.Tr "repo.release.draft"}}</span>
(<a href="{{$.RepoLink}}/releases/edit/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{$.locale.Tr "repo.release.edit"}}</a>) {{else if .IsPrerelease}}
</small> <span class="ui orange label ml-3 mt-1">{{$.locale.Tr "repo.release.prerelease"}}</span>
{{else if not .IsTag}}
<span class="ui green label ml-3 mt-1">{{$.locale.Tr "repo.release.stable"}}</span>
{{end}} {{end}}
</h4> </h4>
<div class="df ac">
{{if $.CanCreateRelease}}
<a class="muted tooltip ml-3 df ac" data-content="{{$.locale.Tr "repo.release.edit"}}" href="{{$.RepoLink}}/releases/edit/{{.TagName | PathEscapeSegments}}" rel="nofollow">
{{svg "octicon-pencil"}}
</a>
{{end}}
</div>
</div>
<p class="text grey"> <p class="text grey">
<span class="author"> <span class="author">
{{if .OriginalAuthor}} {{if .OriginalAuthor}}

2
tests/integration/release_test.go
View file

@ -53,7 +53,7 @@ func checkLatestReleaseAndCount(t *testing.T, session *TestSession, repoURL, ver
resp := session.MakeRequest(t, req, http.StatusOK) resp := session.MakeRequest(t, req, http.StatusOK)
htmlDoc := NewHTMLParser(t, resp.Body) htmlDoc := NewHTMLParser(t, resp.Body)
labelText := htmlDoc.doc.Find("#release-list > li .meta .label").First().Text() labelText := htmlDoc.doc.Find("#release-list > li .detail .label").First().Text()
assert.EqualValues(t, label, labelText) assert.EqualValues(t, label, labelText)
titleText := htmlDoc.doc.Find("#release-list > li .detail h4 a").First().Text() titleText := htmlDoc.doc.Find("#release-list > li .detail h4 a").First().Text()
assert.EqualValues(t, version, titleText) assert.EqualValues(t, version, titleText)

31
web_src/less/_base.less
View file

@ -108,6 +108,8 @@
--color-diff-inactive: #f2f2f2; --color-diff-inactive: #f2f2f2;
--color-error-border: #e0b4b4; --color-error-border: #e0b4b4;
--color-error-bg: #fff6f6; --color-error-bg: #fff6f6;
--color-error-bg-active: #fbb;
--color-error-bg-hover: #fdd;
--color-error-text: #9f3a38; --color-error-text: #9f3a38;
--color-success-border: #a3c293; --color-success-border: #a3c293;
--color-success-bg: #fcfff5; --color-success-bg: #fcfff5;
@ -1293,6 +1295,11 @@ a.ui.card:hover,
.ui.form .fields.error .field input[type="text"], .ui.form .fields.error .field input[type="text"],
.ui.form .fields.error .field input[type="file"], .ui.form .fields.error .field input[type="file"],
.ui.form .fields.error .field input[type="url"], .ui.form .fields.error .field input[type="url"],
.ui.form .fields.error .field .ui.dropdown,
.ui.form .fields.error .field .ui.dropdown .item,
.ui.form .field.error .ui.dropdown,
.ui.form .field.error .ui.dropdown .text,
.ui.form .field.error .ui.dropdown .item,
.ui.form .field.error textarea, .ui.form .field.error textarea,
.ui.form .field.error select, .ui.form .field.error select,
.ui.form .field.error input:not([type]), .ui.form .field.error input:not([type]),
@ -1321,10 +1328,32 @@ a.ui.card:hover,
.ui.form .field.error input[type="file"]:focus, .ui.form .field.error input[type="file"]:focus,
.ui.form .field.error input[type="url"]:focus { .ui.form .field.error input[type="url"]:focus {
background-color: var(--color-error-bg); background-color: var(--color-error-bg);
border: 1px solid var(--color-error-border); border-color: var(--color-error-border);
color: var(--color-error-text); color: var(--color-error-text);
} }
.ui.form .fields.error .field .ui.dropdown,
.ui.form .field.error .ui.dropdown,
.ui.form .fields.error .field .ui.dropdown:hover,
.ui.form .field.error .ui.dropdown:hover {
border-color: var(--color-error-border) !important;
}
.ui.form .fields.error .field .ui.dropdown .menu .item:hover,
.ui.form .field.error .ui.dropdown .menu .item:hover {
background-color: var(--color-error-bg-hover);
}
.ui.form .fields.error .field .ui.dropdown .menu .active.item,
.ui.form .field.error .ui.dropdown .menu .active.item {
background-color: var(--color-error-bg-active) !important;
}
.ui.form .fields.error .dropdown .menu,
.ui.form .field.error .dropdown .menu {
border-color: var(--color-error-border) !important;
}
.ui.loading.loading.input > i.icon svg { .ui.loading.loading.input > i.icon svg {
visibility: hidden; visibility: hidden;
} }

13
web_src/less/_repository.less
View file

@ -1855,11 +1855,13 @@
border-top: 1px solid var(--color-secondary); border-top: 1px solid var(--color-secondary);
margin-top: 20px; margin-top: 20px;
padding-top: 15px; padding-top: 15px;
padding-left: 0;
.release-list-title { .release-list-title {
font-size: 2rem; font-size: 2rem;
font-weight: normal; font-weight: normal;
margin-top: -6px; margin-top: -4px;
margin-bottom: 0;
} }
> li { > li {
@ -1879,11 +1881,6 @@
margin-right: 0; margin-right: 0;
} }
.tag:not(.icon) {
display: block;
margin-top: 15px;
}
.commit { .commit {
display: block; display: block;
margin-top: 10px; margin-top: 10px;
@ -1903,7 +1900,7 @@
.author { .author {
img { img {
margin-bottom: -3px; margin-bottom: 3px;
} }
} }
@ -1966,7 +1963,7 @@
} }
.release-tag-name { .release-tag-name {
font-size: 20px; font-size: 18px;
font-weight: normal; font-weight: normal;
} }
} }

2
web_src/less/themes/theme-arc-green.less
View file

@ -97,6 +97,8 @@
--color-diff-inactive: #353846; --color-diff-inactive: #353846;
--color-error-border: #a04141; --color-error-border: #a04141;
--color-error-bg: #522; --color-error-bg: #522;
--color-error-bg-active: #744;
--color-error-bg-hover: #633;
--color-error-text: #f9cbcb; --color-error-text: #f9cbcb;
--color-success-border: #458a57; --color-success-border: #458a57;
--color-success-bg: #284034; --color-success-bg: #284034;