Merge pull request 'Improve button gap consistency' (#4254) from 0ko/forgejo:ui-button-row into forgejo

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4254
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
Reviewed-by: Beowulf <beowulf@noreply.codeberg.org>

templates/org/header.tmpl

@@ -9,7 +9,7 @@
 					{{if .Org.Visibility.IsPrivate}}<span class="ui large basic horizontal label">{{ctx.Locale.Tr "org.settings.visibility.private_shortname"}}</span>{{end}}
 				</span>
 			</div>
-			<span class="tw-flex tw-items-center top-right-buttons tw-ml-auto tw-text-16 tw-whitespace-nowrap">
+			<span class="tw-flex tw-items-center button-row tw-ml-auto tw-text-16 tw-whitespace-nowrap">
 				{{if .EnableFeed}}
 					<a class="ui basic label button tw-mr-0" href="{{.Org.HomeLink}}.rss" data-tooltip-content="{{ctx.Locale.Tr "rss_feed"}}">
 						{{svg "octicon-rss" 24}}

templates/repo/issue/milestone_issues.tmpl

@@ -6,7 +6,7 @@
 		<div class="tw-flex tw-items-center tw-justify-between">
 			<h1 class="tw-mb-2">{{.Milestone.Name}}</h1>
 			{{if not .Repository.IsArchived}}
-				<div class="tw-flex top-right-buttons">
+				<div class="tw-flex button-row">
 					{{if or .CanWriteIssues .CanWritePulls}}
 						{{if .Milestone.IsClosed}}
 							<a class="ui primary button link-action" href data-url="{{$.RepoLink}}/milestones/{{.MilestoneID}}/open">{{ctx.Locale.Tr "repo.milestones.open"}}

templates/repo/issue/milestones.tmpl

@@ -8,7 +8,7 @@
 			{{template "repo/issue/navbar" .}}
 			{{template "repo/issue/search" .}}
 			{{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}}
-				<div class="top-right-buttons">
+				<div class="button-row">
 					<a class="ui small primary button" href="{{$.Link}}/new">{{ctx.Locale.Tr "repo.milestones.new"}}</a>
 				</div>
 			{{end}}

templates/repo/issue/view_title.tmpl

@@ -10,7 +10,7 @@
 			{{RenderIssueTitle $.Context .Issue.Title ($.Repository.ComposeMetas ctx) | RenderCodeBlock}}
 			<span class="index">#{{.Issue.Index}}</span>
 		</h1>
-		<div class="top-right-buttons">
+		<div class="button-row">
 			{{if $canEditIssueTitle}}
 			<button id="issue-title-edit-show" class="ui small basic button">{{ctx.Locale.Tr "repo.issues.edit"}}</button>
 			{{end}}
@@ -24,7 +24,7 @@
 		<div class="ui input tw-flex-1">
 			<input value="{{.Issue.Title}}" data-old-title="{{.Issue.Title}}" maxlength="255" autocomplete="off" class="js-quick-submit">
 		</div>
-		<div class="top-right-buttons">
+		<div class="button-row">
 			<button class="ui small basic cancel button">{{ctx.Locale.Tr "repo.issues.cancel"}}</button>
 			<button class="ui small primary button"
 					data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title">

templates/repo/release/new.tmpl

@@ -108,7 +108,7 @@
 						<span class="help">{{ctx.Locale.Tr "repo.release.hide_archive_links_helper"}}</span>
 					{{end}}
 					<div class="divider tw-mt-0"></div>
-					<div class="tw-flex tw-justify-end">
+					<div class="tw-flex tw-justify-end button-row">
 						{{if .PageIsEditRelease}}
 							<a class="ui small button" href="{{.RepoLink}}/releases">
 								{{ctx.Locale.Tr "repo.release.cancel"}}

templates/repo/release_tag_header.tmpl

@@ -11,16 +11,18 @@
 				{{end}}
 			</h2>
 		</div>
-		{{if .EnableFeed}}
+		<div class="button-row">
-			<a class="ui small button" href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss">
+			{{if .EnableFeed}}
-				{{svg "octicon-rss" 16}} {{ctx.Locale.Tr "rss_feed"}}
+				<a class="ui small button" href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss">
-			</a>
+					{{svg "octicon-rss" 16}} {{ctx.Locale.Tr "rss_feed"}}
-		{{end}}
+				</a>
-		{{if and (not .PageIsTagList) .CanCreateRelease}}
+			{{end}}
-			<a class="ui small primary button" href="{{$.RepoLink}}/releases/new">
+			{{if and (not .PageIsTagList) .CanCreateRelease}}
-				{{ctx.Locale.Tr "repo.release.new_release"}}
+				<a class="ui small primary button" href="{{$.RepoLink}}/releases/new">
-			</a>
+					{{ctx.Locale.Tr "repo.release.new_release"}}
-		{{end}}
+				</a>
+			{{end}}
+		</div>
 	</div>
 	<div class="divider"></div>
 {{else if $canReadCode}}

templates/user/notification/notification_div.tmpl

@@ -11,7 +11,7 @@
 					{{ctx.Locale.Tr "notification.read"}}
 				</a>
 			</div>
-			<div class="tw-flex top-right-buttons">
+			<div class="tw-flex button-row">
 				<a class="ui tiny button" href="{{AppSubUrl}}/notifications/subscriptions">
 					{{ctx.Locale.Tr "notification.subscriptions"}}
 				</a>

tests/integration/pull_create_test.go

@@ -213,7 +213,7 @@ func TestPullCreate_TitleEscape(t *testing.T) {
 		req := NewRequest(t, "GET", url)
 		resp = session.MakeRequest(t, req, http.StatusOK)
 		htmlDoc := NewHTMLParser(t, resp.Body)
-		editTestTitleURL, exists := htmlDoc.doc.Find(".top-right-buttons button[data-update-url]").First().Attr("data-update-url")
+		editTestTitleURL, exists := htmlDoc.doc.Find(".button-row button[data-update-url]").First().Attr("data-update-url")
 		assert.True(t, exists, "The template has changed")
 
 		req = NewRequestWithValues(t, "POST", editTestTitleURL, map[string]string{

web_src/css/base.css

@@ -246,11 +246,11 @@ h1.error-code {
   user-select: none;
 }
 
-.top-right-buttons {
+.button-row {
   gap: 0.5rem;
 }
 
-.top-right-buttons .ui.button {
+.button-row .ui.button {
   margin-right: 0;
 }
 

web_src/css/repo.css

@@ -601,7 +601,8 @@ td .commit-summary {
   align-items: center;
 }
 
-.repository.view.issue .top-right-buttons {
+.repository.view.issue .button-row,
+.repository.releases .button-row {
   display: flex;
 }
 
@@ -609,7 +610,7 @@ td .commit-summary {
   .repository.view.issue .issue-title {
     flex-direction: column;
   }
-  .repository.view.issue .top-right-buttons {
+  .repository.view.issue .button-row {
     width: 100%;
     margin-top: .5rem;
     justify-content: space-between;