Restyle release list, fix branch dropdown (#30837) (#30968)

Backport #30837 by @silverwind

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: silverwind <me@silverwind.io>

diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl
index 5a8668fbe1a3fb3cbdacc81bdece0a78aaa98e90..34548672b5dff48eaa6b414fcbe47d78a34aa30c 100644 (file)
--- a/templates/repo/release/list.tmpl
+++ b/templates/repo/release/list.tmpl
@@ -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}}

diff --git a/templates/repo/tag/list.tmpl b/templates/repo/tag/list.tmpl
index b3ad3a7c4727812ad875421def6143ea0e77cdbc..354808ed2e03b9a325d284be2e74ddcce33c49fd 100644 (file)
--- a/templates/repo/tag/list.tmpl
+++ b/templates/repo/tag/list.tmpl
@@ -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">

diff --git a/tests/integration/release_test.go b/tests/integration/release_test.go
index ce0c44016776aa8ad00d514a972f949fd7bcf46e..40bd798d161594a4d4b3d3e862fac4c7f33f0fdb 100644 (file)
--- a/tests/integration/release_test.go
+++ b/tests/integration/release_test.go
@@ -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)

diff --git a/web_src/css/repo/release-tag.css b/web_src/css/repo/release-tag.css
index a146eda6a9767ceb8eceec12eb39c07b5b36cd18..32027dd886d86f8e222329cbf91a63fcb26d1a92 100644 (file)
--- a/web_src/css/repo/release-tag.css
+++ b/web_src/css/repo/release-tag.css
@@ -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 {
-  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);
 }