Shiloh/githaven
Shiloh/githaven
1
0
Fork 1
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Restyle release list, fix branch dropdown (#30837)

Browse Source 
Fixes https://github.com/go-gitea/gitea/issues/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 <teabot@gitea.io>
This commit is contained in:
silverwind 2024-05-13 23:33:51 +02:00 committed by GitHub
parent 8218b6484c
commit ed25676a9a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 68 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
templates/repo/release/list.tmpl
View File

@ -7,18 +7,18 @@
<ul id="release-list">
{{range $idx, $info := .Releases}}
{{$release := $info.Release}}
<li class="ui grid">
<div class="ui four wide column meta">
<li class="release-entry">
<div class="meta">
<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>
{{if and $release.Sha1 ($.Permission.CanRead ctx.Consts.RepoUnitTypeCode)}}
<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>
{{template "repo/branch_dropdown" dict "root" $ "release" $release}}
{{end}}
</div>
<div class="ui twelve wide column detail">
<div class="ui segment detail">
<div class="tw-flex tw-items-center tw-justify-between tw-flex-wrap tw-mb-2">
<h4 class="release-list-title gt-word-break">
{{if $.PageIsSingleTag}}{{$release.Title}}{{else}}<a href="{{$.RepoLink}}/releases/tag/{{$release.TagName | PathEscapeSegments}}">{{$release.Title}}</a>{{end}}
{{if $.PageIsSingleTag}}{{$release.Title}}{{else}}<a class="muted" href="{{$.RepoLink}}/releases/tag/{{$release.TagName | PathEscapeSegments}}">{{$release.Title}}</a>{{end}}
{{template "repo/commit_statuses" dict "Status" $info.CommitStatus "Statuses" $info.CommitStatuses "AdditionalClasses" "tw-flex"}}
{{if $release.IsDraft}}
<span class="ui yellow label">{{ctx.Locale.Tr "repo.release.draft"}}</span>
@ -62,22 +62,22 @@
</div>
<div class="divider"></div>
<details class="download" {{if eq $idx 0}}open{{end}}>
<summary class="tw-my-4">
<summary>
{{ctx.Locale.Tr "repo.release.downloads"}}
</summary>
<ul class="list">
{{if and (not $.DisableDownloadSourceArchives) (not $release.IsDraft) ($.Permission.CanRead ctx.Consts.RepoUnitTypeCode)}}
<li>
<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>
<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>
</li>
<li>
<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>
<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>
</li>
{{end}}
{{range $release.Attachments}}
<li>
<a target="_blank" rel="nofollow" href="{{.DownloadURL}}" download>
<strong>{{svg "octicon-package" 16 "tw-mr-1"}}{{.Name}}</strong>
<strong>{{svg "octicon-package" 16 "download-icon"}}{{.Name}}</strong>
</a>
<div>
<span class="text grey">{{.Size | FileSize}}</span>
@ -89,7 +89,6 @@
{{end}}
</ul>
</details>
<div class="dot"></div>
</div>
</li>
{{end}}

8
templates/repo/tag/list.tmpl
View File

@ -16,12 +16,12 @@
<tbody class="tag-list">
{{range $idx, $release := .Releases}}
<tr>
<td class="tag">
<h3 class="release-tag-name tw-mb-2">
<td class="tag-list-row">
<h3 class="tag-list-row-title tw-mb-2">
{{if $canReadReleases}}
<a class="tw-flex tw-items-center" href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
<a class="tag-list-row-link tw-flex tw-items-center" href="{{$.RepoLink}}/releases/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
{{else}}
<a class="tw-flex tw-items-center" href="{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
<a class="tag-list-row-link tw-flex tw-items-center" href="{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}" rel="nofollow">{{.TagName}}</a>
{{end}}
</h3>
<div class="download tw-flex tw-items-center">

8
tests/integration/release_test.go
View File

@ -142,7 +142,7 @@ func TestViewReleaseListNoLogin(t *testing.T) {
rsp := MakeRequest(t, req, http.StatusOK)
htmlDoc := NewHTMLParser(t, rsp.Body)
releases := htmlDoc.Find("#release-list li.ui.grid")
releases := htmlDoc.Find("#release-list .release-entry")
assert.Equal(t, 5, releases.Length())
links := make([]string, 0, 5)
@ -198,7 +198,7 @@ func TestViewReleaseListLogin(t *testing.T) {
rsp := session.MakeRequest(t, req, http.StatusOK)
htmlDoc := NewHTMLParser(t, rsp.Body)
releases := htmlDoc.Find("#release-list li.ui.grid")
releases := htmlDoc.Find("#release-list .release-entry")
assert.Equal(t, 3, releases.Length())
links := make([]string, 0, 5)
@ -229,12 +229,12 @@ func TestViewTagsList(t *testing.T) {
rsp := session.MakeRequest(t, req, http.StatusOK)
htmlDoc := NewHTMLParser(t, rsp.Body)
tags := htmlDoc.Find(".tag-list tr")
tags := htmlDoc.Find(".tag-list-row-link")
assert.Equal(t, 3, tags.Length())
tagNames := make([]string, 0, 5)
tags.Each(func(i int, s *goquery.Selection) {
tagNames = append(tagNames, s.Find(".tag a.tw-flex.tw-items-center").Text())
tagNames = append(tagNames, s.Text())
})
assert.EqualValues(t, []string{"v1.0", "delete-tag", "v1.1"}, tagNames)

80
web_src/css/repo/release-tag.css
View File

@ -1,10 +1,11 @@
.repository.releases #release-list {
margin-top: 12px;
padding-top: 12px;
#release-list {
display: flex;
flex-direction: column;
gap: var(--page-spacing);
padding-left: 0;
}
.repository.releases #release-list .release-list-title {
#release-list .release-list-title {
font-size: 2rem;
font-weight: var(--font-weight-normal);
display: flex;
@ -13,58 +14,81 @@
margin: 0;
}
.repository.releases #release-list > li .meta {
padding-top: 25px;
#release-list .release-entry {
display: flex;
gap: var(--page-spacing);
}
#release-list .release-entry .meta {
flex: 0 0 150px;
position: relative;
text-align: right;
display: flex;
flex-direction: column;
gap: 1em;
gap: 10px;
}
.repository.releases #release-list > li .detail {
padding-bottom: 20px;
border-left: 1px solid var(--color-secondary);
#release-list .release-entry .detail {
flex: 1;
margin: 0;
}
.repository.releases #release-list > li .detail .author img {
@media (max-width: 767.98px) {
#release-list .release-entry {
flex-direction: column;
gap: var(--page-spacing);
}
#release-list .release-entry .meta {
margin-left: 6px;
flex-direction: row;
flex-basis: auto;
display: flex;
align-items: center;
}
#release-list .js-branch-tag-selector {
margin-left: auto;
}
#release-list .branch-selector-dropdown .menu { /* open menu to left */
right: 0;
left: auto;
}
}
#release-list .release-entry .detail .author img {
margin-bottom: 2px; /* the legacy trick to align the avatar vertically, no better solution at the moment */
}
.repository.releases #release-list > li .detail .download .list {
#release-list .release-entry .detail .download .list {
padding-left: 0;
border: 1px solid var(--color-secondary);
border-radius: var(--border-radius);
background: var(--color-light);
}
.repository.releases #release-list > li .detail .download .list li {
#release-list .release-entry .detail .download .list li {
display: flex;
justify-content: space-between;
padding: 8px;
border-bottom: 1px solid var(--color-secondary);
}
.repository.releases #release-list > li .detail .download .list li:last-child {
#release-list .release-entry .detail .download[open] summary {
margin-bottom: 10px;
}
#release-list .download-icon {
margin-right: .25rem;
color: var(--color-text-light-1);
}
#release-list .release-entry .detail .download .list li:last-child {
border-bottom: none;
}
.repository.releases #release-list > li .detail .dot {
width: 10px;
height: 10px;
background-color: var(--color-secondary-dark-3);
position: absolute;
left: -5.5px;
top: 30px;
border-radius: var(--border-radius-circle);
border: 2.5px solid var(--color-body);
}
.repository.tags #tags-table .tag {
#tags-table .tag-list-row {
padding: 8px 12px;
}
.repository.tags #tags-table .release-tag-name {
#tags-table .tag-list-row-title {
font-size: 18px;
font-weight: var(--font-weight-normal);
}