From ed25676a9ae75c3a5f092dbaa449770fb1e9e70c Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 13 May 2024 23:33:51 +0200
Subject: [PATCH] Restyle release list, fix branch dropdown (#30837)

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>
---
 templates/repo/release/list.tmpl  | 17 ++++---
 templates/repo/tag/list.tmpl      |  8 ++--
 tests/integration/release_test.go |  8 ++--
 web_src/css/repo/release-tag.css  | 80 ++++++++++++++++++++-----------
 4 files changed, 68 insertions(+), 45 deletions(-)

diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl
index 5a8668fbe1..34548672b5 100644
--- 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 b3ad3a7c47..354808ed2e 100644
--- 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 ce0c440167..40bd798d16 100644
--- 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 a146eda6a9..32027dd886 100644
--- 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 {
+#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);
 }