Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Restyle release list, fix branch dropdown #30837

Merged
merged 7 commits into from
May 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 8 additions & 9 deletions templates/repo/release/list.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -89,7 +89,6 @@
{{end}}
</ul>
</details>
<div class="dot"></div>
</div>
</li>
{{end}}
Expand Down
8 changes: 4 additions & 4 deletions templates/repo/tag/list.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
8 changes: 4 additions & 4 deletions tests/integration/release_test.go
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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)
Expand Down Expand Up @@ -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)
Expand Down
78 changes: 51 additions & 27 deletions web_src/css/repo/release-tag.css
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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 {
border-bottom: none;
#release-list .release-entry .detail .download[open] summary {
margin-bottom: 10px;
}

#release-list .download-icon {
margin-right: .25rem;
color: var(--color-text-light-1);
}

.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);
#release-list .release-entry .detail .download .list li:last-child {
border-bottom: none;
}

.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);
}
Expand Down