From ab2842edd6185d0ac229c739312fdd6a5621aa32 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 2 May 2024 20:34:20 +0200
Subject: [PATCH] Restyle release list, fix branch dropdown

---
 templates/repo/release/list.tmpl | 15 +++----
 web_src/css/repo/release-tag.css | 76 ++++++++++++++++++++------------
 2 files changed, 55 insertions(+), 36 deletions(-)

diff --git a/templates/repo/release/list.tmpl b/templates/repo/release/list.tmpl
index 5a8668fbe1..6a401568ce 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>
@@ -68,16 +68,16 @@
 							<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/web_src/css/repo/release-tag.css b/web_src/css/repo/release-tag.css
index a146eda6a9..bf34175305 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,77 @@
   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 .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 {
   padding: 8px 12px;
 }
 
-.repository.tags #tags-table .release-tag-name {
+#tags-table .release-tag-name {
   font-size: 18px;
   font-weight: var(--font-weight-normal);
 }