Remove polluted .ui.right (#26825)

Each change is tested manually line by line. There are too many changes
so I can't share dozens of screenshots.

In short:

1. `ui right` could be still used in `ui top attached header`, because
there is a special case.
2. A lot of `ui right` are just no-op, so they can be removed safely.
3. Some of the `ui right` should be replaced by `gt-float-right` (to
avoid breaking, leave them to the future).
4. A few of the `ui right` could be rewritten by flex.

templates/admin/notice.tmpl

@@ -31,7 +31,7 @@
 						<tr>
 							<th></th>
 							<th colspan="5">
-								<form class="ui right" method="post" action="{{AppSubUrl}}/admin/notices/empty">
+								<form class="gt-float-right" method="post" action="{{AppSubUrl}}/admin/notices/empty">
 									{{.CsrfTokenHtml}}
 									<button type="submit" class="ui red small button">{{.locale.Tr "admin.notices.delete_all"}}</button>
 								</form>

templates/org/settings/labels.tmpl

@@ -1,14 +1,10 @@
 {{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings labels")}}
 				<div class="org-setting-content">
-					<div class="ui grid">
+					<div class="gt-df gt-ac">
-						<div class="left floated twelve wide column">
+						<div class="gt-f1">
 							{{$.locale.Tr "org.settings.labels_desc" | Str2html}}
 						</div>
-						<div class="right floated three wide column">
+						<button class="ui small green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button>
-							<div class="ui right">
-								<button class="ui small green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button>
-							</div>
-						</div>
 					</div>
 					<div class="divider"></div>
 					{{template "repo/issue/labels/label_new" .}}

templates/org/team/repositories.tmpl

@@ -41,7 +41,7 @@
 									{{if $canAddRemove}}
 										<form method="post" action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/repo/remove">
 											{{$.CsrfTokenHtml}}
-											<button type="submit" class="ui red small button right" name="repoid" value="{{.ID}}">{{$.locale.Tr "remove"}}</button>
+											<button type="submit" class="ui red small button" name="repoid" value="{{.ID}}">{{$.locale.Tr "remove"}}</button>
 										</form>
 									{{end}}
 								</div>

templates/package/view.tmpl

@@ -87,7 +87,7 @@
 				{{end}}
 				<div class="divider"></div>
 				<strong>{{.locale.Tr "packages.versions"}} ({{.TotalVersionCount}})</strong>
-				<a class="ui right" href="{{$.PackageDescriptor.PackageWebLink}}/versions">{{.locale.Tr "packages.versions.view_all"}}</a>
+				<a class="gt-float-right" href="{{$.PackageDescriptor.PackageWebLink}}/versions">{{.locale.Tr "packages.versions.view_all"}}</a>
 				<div class="ui relaxed list">
 				{{range .LatestVersions}}
 					<div class="item gt-df">

templates/repo/commits_list_small.tmpl

@@ -13,7 +13,7 @@
 
 		{{$commitLink:= printf "%s/commit/%s" $.comment.Issue.PullRequest.BaseRepo.Link (PathEscape .ID.String)}}
 
-		<span class="ui float right shabox gt-df gt-ac">
+		<span class="shabox gt-df gt-ac gt-float-right">
 			{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses "root" $.root}}
 			{{$class := "ui sha label"}}
 			{{if .Signature}}

templates/repo/diff/comment_form.tmpl

@@ -22,7 +22,7 @@
 
 		<div class="field footer gt-mx-3">
 			<span class="markup-info">{{svg "octicon-markup"}} {{$.root.locale.Tr "repo.diff.comment.markdown_info"}}</span>
-			<div class="ui right">
+			<div class="gt-text-right">
 				{{if $.reply}}
 					<button class="ui submit green tiny button btn-reply" type="submit">{{$.root.locale.Tr "repo.diff.comment.reply"}}</button>
 					<input type="hidden" name="reply" value="{{$.reply}}">

templates/repo/issue/labels.tmpl

@@ -5,9 +5,7 @@
 		<div class="navbar gt-mb-4">
 			{{template "repo/issue/navbar" .}}
 			{{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}}
-				<div class="ui right">
+				<button class="ui small green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button>
-					<button class="ui small green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button>
-				</div>
 			{{end}}
 		</div>
 		{{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}}

templates/repo/issue/milestones.tmpl

@@ -5,9 +5,7 @@
 		<div class="navbar gt-mb-4">
 			{{template "repo/issue/navbar" .}}
 			{{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}}
-				<div class="ui right">
+				<a class="ui small green button" href="{{$.Link}}/new">{{.locale.Tr "repo.milestones.new"}}</a>
-					<a class="ui small green button" href="{{$.Link}}/new">{{.locale.Tr "repo.milestones.new"}}</a>
-				</div>
 			{{end}}
 		</div>
 		{{template "base/alert" .}}

templates/repo/issue/view_content/attachments.tmpl

@@ -19,7 +19,7 @@
 				</a>
 			</div>
 			<div class="gt-p-3 gt-df gt-ac">
-				<span class="ui text grey right">{{.Size | FileSize}}</span>
+				<span class="ui text grey">{{.Size | FileSize}}</span>
 			</div>
 		</div>
 	{{end -}}

templates/repo/issue/view_content/comments.tmpl

@@ -477,7 +477,7 @@
 										</div>
 										<div>
 											{{if or $invalid $resolved}}
-												<button id="show-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if not $resolved}}gt-hidden {{end}}ui compact right labeled button show-outdated gt-df gt-ac">
+												<button id="show-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if not $resolved}}gt-hidden {{end}}ui compact labeled button show-outdated gt-df gt-ac">
 													{{svg "octicon-unfold" 16 "gt-mr-3"}}
 													{{if $resolved}}
 														{{$.locale.Tr "repo.issues.review.show_resolved"}}
@@ -485,7 +485,7 @@
 														{{$.locale.Tr "repo.issues.review.show_outdated"}}
 													{{end}}
 												</button>
-												<button id="hide-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if $resolved}}gt-hidden {{end}}ui compact right labeled button hide-outdated gt-df gt-ac">
+												<button id="hide-outdated-{{(index $comms 0).ID}}" data-comment="{{(index $comms 0).ID}}" class="{{if $resolved}}gt-hidden {{end}}ui compact labeled button hide-outdated gt-df gt-ac">
 													{{svg "octicon-fold" 16 "gt-mr-3"}}
 													{{if $resolved}}
 														{{$.locale.Tr "repo.issues.review.hide_resolved"}}
@@ -698,7 +698,7 @@
 					{{end}}
 				</span>
 				{{if and .IsForcePush $.Issue.PullRequest.BaseRepo.Name}}
-				<span class="ui float right comparebox">
+				<span class="gt-float-right comparebox">
 					<a href="{{$.Issue.PullRequest.BaseRepo.Link}}/compare/{{PathEscape .OldCommit}}..{{PathEscape .NewCommit}}" rel="nofollow" class="ui compare label">{{$.locale.Tr "repo.issues.force_push_compare"}}</a>
 				</span>
 				{{end}}

templates/repo/issue/view_content/comments_delete_time.tmpl

@@ -1,7 +1,7 @@
 {{if .comment.Time}} {{/* compatibility with time comments made before v1.14 */}}
 	{{if (not .comment.Time.Deleted)}}
 		{{if (or .ctxData.IsAdmin (and .ctxData.IsSigned (eq .ctxData.SignedUserID .comment.PosterID)))}}
-			<span class="ui float right">
+			<span class="gt-float-right">
 				<div class="ui mini modal issue-delete-time-modal" data-id="{{.comment.Time.ID}}">
 					<form method="post" class="delete-time-form" action="{{.ctxData.RepoLink}}/issues/{{.ctxData.Issue.Index}}/times/{{.comment.TimeID}}/delete">
 						{{.ctxData.CsrfTokenHtml}}

templates/repo/projects/view.tmpl

@@ -4,7 +4,7 @@
 	<div class="ui container padded">
 		<div class="gt-df gt-sb gt-ac gt-mb-4">
 			{{template "repo/issue/navbar" .}}
-			<a class="ui right small green button item" href="{{.RepoLink}}/issues/new/choose?project={{.Project.ID}}">{{ctx.Locale.Tr "repo.issues.new"}}</a>
+			<a class="ui small green button" href="{{.RepoLink}}/issues/new/choose?project={{.Project.ID}}">{{ctx.Locale.Tr "repo.issues.new"}}</a>
 		</div>
 		{{template "projects/view" .}}
 	</div>

templates/repo/release/list.tmpl

@@ -93,7 +93,7 @@
 									{{if .Attachments}}
 										{{range .Attachments}}
 											<li>
-												<span class="ui text middle aligned right">
+												<span class="gt-float-right">
 													<span class="ui text grey">{{.Size | FileSize}}</span>
 													<span data-tooltip-content="{{$.locale.Tr "repo.release.download_count" ($.locale.PrettyNumber .DownloadCount)}}">
 														{{svg "octicon-info"}}

templates/repo/release/new.tmpl

@@ -61,20 +61,18 @@
 					)}}
 				</div>
 				{{range .attachments}}
-					<div class="field" id="attachment-{{.ID}}">
+					<div class="field flex-text-block" id="attachment-{{.ID}}">
-						<div class="ui right gt-df gt-ac wrap_remove">
+						<div class="flex-text-inline gt-f1">
-							<a class="ui mini compact red button remove-rel-attach" data-id="{{.ID}}" data-uuid="{{.UUID}}">
+							<input name="attachment-edit-{{.UUID}}"  class="attachment_edit" required value="{{.Name}}">
-								{{$.locale.Tr "remove"}}
-							</a>
-						</div>
-						<div class="gt-df gt-ac">
-							<input name="attachment-edit-{{.UUID}}" class="gt-mr-3 attachment_edit" required value="{{.Name}}">
 							<input name="attachment-del-{{.UUID}}" type="hidden" value="false">
-							<span class="ui text grey gt-mr-3">{{.Size | FileSize}}</span>
+							<span class="ui text grey gt-whitespace-nowrap">{{.Size | FileSize}}</span>
 							<span data-tooltip-content="{{$.locale.Tr "repo.release.download_count" ($.locale.PrettyNumber .DownloadCount)}}">
 								{{svg "octicon-info"}}
 							</span>
 						</div>
+						<a class="ui mini compact red button remove-rel-attach" data-id="{{.ID}}" data-uuid="{{.UUID}}">
+							{{$.locale.Tr "remove"}}
+						</a>
 					</div>
 				{{end}}
 				{{if .IsAttachmentEnabled}}

templates/repo/release_tag_header.tmpl

@@ -15,7 +15,7 @@
 			{{end}}
 		</div>
 		{{if and (not .PageIsTagList) .CanCreateRelease}}
-			<a class="ui right small green button" href="{{$.RepoLink}}/releases/new">
+			<a class="ui small green button" href="{{$.RepoLink}}/releases/new">
 				{{.locale.Tr "repo.release.new_release"}}
 			</a>
 		{{end}}

templates/repo/settings/githooks.tmpl

@@ -12,7 +12,7 @@
 					<div class="item truncated-item-container">
 						<span class="text {{if .IsActive}}green{{else}}grey{{end}} gt-mr-3">{{svg "octicon-dot-fill" 22}}</span>
 						<span class="text truncate gt-f1 gt-mr-3">{{.Name}}</span>
-						<a class="muted ui right gt-p-3" href="{{$.RepoLink}}/settings/hooks/git/{{.Name|PathEscape}}">
+						<a class="muted gt-float-right gt-p-3" href="{{$.RepoLink}}/settings/hooks/git/{{.Name|PathEscape}}">
 							{{svg "octicon-pencil"}}
 						</a>
 					</div>

templates/repo/settings/webhook/history.tmpl

@@ -11,18 +11,18 @@
 		<div class="ui list">
 			{{range .History}}
 				<div class="item">
-					<div class="meta">
+					<div class="flex-text-block gt-sb">
-						{{if .IsSucceed}}
+						<div class="flex-text-inline">
-							<span class="text green">{{svg "octicon-check"}}</span>
+							{{if .IsSucceed}}
-						{{else}}
+								<span class="text green">{{svg "octicon-check"}}</span>
-							<span class="text red">{{svg "octicon-alert"}}</span>
+							{{else}}
-						{{end}}
+								<span class="text red">{{svg "octicon-alert"}}</span>
-						<a class="ui primary sha label toggle button show-panel" data-panel="#info-{{.ID}}">{{.UUID}}</a>
+							{{end}}
-						<div class="ui right">
+							<a class="ui primary sha label toggle button show-panel" data-panel="#info-{{.ID}}">{{.UUID}}</a>
-							<span class="text grey time">
-								{{TimeSince .Delivered.AsTime $.locale}}
-							</span>
 						</div>
+						<span class="text grey">
+							{{TimeSince .Delivered.AsTime $.locale}}
+						</span>
 					</div>
 					<div class="info gt-hidden" id="info-{{.ID}}">
 						<div class="ui top attached tabular menu">

templates/repo/wiki/new.tmpl

@@ -3,12 +3,10 @@
 	{{template "repo/header" .}}
 	<div class="ui container">
 		{{template "base/alert" .}}
-		<div class="ui header">
+		<div class="ui header flex-text-block gt-sb">
 			{{.locale.Tr "repo.wiki.new_page"}}
 			{{if .PageIsWikiEdit}}
-				<div class="ui right gt-mb-3">
+				<a class="ui green tiny button" href="{{.RepoLink}}/wiki?action=_new">{{.locale.Tr "repo.wiki.new_page_button"}}</a>
-					<a class="ui green tiny button" href="{{.RepoLink}}/wiki?action=_new">{{.locale.Tr "repo.wiki.new_page_button"}}</a>
-				</div>
 			{{end}}
 		</div>
 		<form class="ui form" action="{{.Link}}?action={{if .PageIsWikiEdit}}_edit{{else}}_new{{end}}" method="post">

templates/repo/wiki/view.tmpl

@@ -79,7 +79,7 @@
 			{{if .sidebarPresent}}
 			<div class="markup wiki-content-sidebar">
 				{{if and .CanWriteWiki (not .Repository.IsMirror)}}
-					<a class="ui right floated muted" href="{{.RepoLink}}/wiki/_Sidebar?action=_edit" aria-label="{{.locale.Tr "repo.wiki.edit_page_button"}}">{{svg "octicon-pencil"}}</a>
+					<a class="gt-float-right muted" href="{{.RepoLink}}/wiki/_Sidebar?action=_edit" aria-label="{{.locale.Tr "repo.wiki.edit_page_button"}}">{{svg "octicon-pencil"}}</a>
 				{{end}}
 				{{template "repo/unicode_escape_prompt" dict "EscapeStatus" .sidebarEscapeStatus "root" $}}
 				{{.sidebarContent | Safe}}
@@ -91,7 +91,7 @@
 			{{if .footerPresent}}
 			<div class="markup wiki-content-footer">
 				{{if and .CanWriteWiki (not .Repository.IsMirror)}}
-					<a class="ui right floated muted" href="{{.RepoLink}}/wiki/_Footer?action=_edit" aria-label="{{.locale.Tr "repo.wiki.edit_page_button"}}">{{svg "octicon-pencil"}}</a>
+					<a class="gt-float-right muted" href="{{.RepoLink}}/wiki/_Footer?action=_edit" aria-label="{{.locale.Tr "repo.wiki.edit_page_button"}}">{{svg "octicon-pencil"}}</a>
 				{{end}}
 				{{template "repo/unicode_escape_prompt" dict "footerEscapeStatus" .sidebarEscapeStatus "root" $}}
 				{{.footerContent | Safe}}

templates/user/dashboard/issues.tmpl

@@ -7,29 +7,29 @@
 				<div class="ui secondary vertical filter menu gt-bg-transparent">
 					<a class="{{if eq .ViewType "your_repositories"}}active{{end}} item" href="{{.Link}}?type=your_repositories&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}&q={{$.Keyword}}">
 						{{.locale.Tr "home.issues.in_your_repos"}}
-						<strong class="ui right">{{CountFmt .IssueStats.YourRepositoriesCount}}</strong>
+						<strong>{{CountFmt .IssueStats.YourRepositoriesCount}}</strong>
 					</a>
 					<a class="{{if eq .ViewType "assigned"}}active{{end}} item" href="{{.Link}}?type=assigned&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}&q={{$.Keyword}}">
 						{{.locale.Tr "repo.issues.filter_type.assigned_to_you"}}
-						<strong class="ui right">{{CountFmt .IssueStats.AssignCount}}</strong>
+						<strong>{{CountFmt .IssueStats.AssignCount}}</strong>
 					</a>
 					<a class="{{if eq .ViewType "created_by"}}active{{end}} item" href="{{.Link}}?type=created_by&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}&q={{$.Keyword}}">
 						{{.locale.Tr "repo.issues.filter_type.created_by_you"}}
-						<strong class="ui right">{{CountFmt .IssueStats.CreateCount}}</strong>
+						<strong>{{CountFmt .IssueStats.CreateCount}}</strong>
 					</a>
 					{{if .PageIsPulls}}
 						<a class="{{if eq .ViewType "review_requested"}}active{{end}} item" href="{{.Link}}?type=review_requested&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}&q={{$.Keyword}}">
 							{{.locale.Tr "repo.issues.filter_type.review_requested"}}
-							<strong class="ui right">{{CountFmt .IssueStats.ReviewRequestedCount}}</strong>
+							<strong>{{CountFmt .IssueStats.ReviewRequestedCount}}</strong>
 						</a>
 						<a class="{{if eq .ViewType "reviewed_by"}}active{{end}} item" href="{{.Link}}?type=reviewed_by&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}&q={{$.Keyword}}">
 							{{.locale.Tr "repo.issues.filter_type.reviewed_by_you"}}
-							<strong class="ui right">{{CountFmt .IssueStats.ReviewedCount}}</strong>
+							<strong>{{CountFmt .IssueStats.ReviewedCount}}</strong>
 						</a>
 					{{end}}
 					<a class="{{if eq .ViewType "mentioned"}}active{{end}} item" href="{{.Link}}?type=mentioned&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}&q={{$.Keyword}}">
 						{{.locale.Tr "repo.issues.filter_type.mentioning_you"}}
-						<strong class="ui right">{{CountFmt .IssueStats.MentionCount}}</strong>
+						<strong>{{CountFmt .IssueStats.MentionCount}}</strong>
 					</a>
 					<div class="divider"></div>
 					<a class="{{if not $.RepoIDs}}active{{end}} repo name item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&q={{$.Keyword}}">

templates/user/dashboard/milestones.tmpl

@@ -7,7 +7,7 @@
 				<div class="ui secondary vertical filter menu gt-bg-transparent">
 					<div class="item">
 						{{.locale.Tr "home.issues.in_your_repos"}}
-						<strong class="ui right">{{.Total}}</strong>
+						<strong>{{.Total}}</strong>
 					</div>
 					<div class="divider"></div>
 					{{range .Repos}}

templates/user/settings/repos.tmpl

@@ -32,7 +32,7 @@
 									{{else}}
 										<span class="icon gt-dib gt-pt-3">{{svg "octicon-file-directory-fill"}}</span>
 										<span class="name gt-dib gt-pt-3">{{$.ContextUser.Name}}/{{$dir}}</span>
-										<div class="ui right">
+										<div class="gt-float-right">
 											{{if $.allowAdopt}}
 												<button class="ui button green show-modal gt-p-3" data-modal="#adopt-unadopted-modal-{{$dirI}}"><span class="icon">{{svg "octicon-plus"}}</span><span class="label">{{$.locale.Tr "repo.adopt_preexisting_label"}}</span></button>
 												<div class="ui g-modal-confirm modal" id="adopt-unadopted-modal-{{$dirI}}">

web_src/css/base.css

@@ -1179,11 +1179,6 @@ img.ui.avatar,
   font-size: 0.75em;
 }
 
-/* FIXME: this is a serious pollution, do not use this for "float: right" anymore */
-.ui.right:not(.action) {
-  float: right;
-}
-
 .ui.form .ui.button {
   font-weight: var(--font-weight-normal);
 }

web_src/css/repo/release-tag.css

@@ -126,12 +126,8 @@
   }
 }
 
-.repository.new.release .field .wrap_remove {
-  height: 38px;
-}
-
 .repository.new.release .field .attachment_edit {
-  width: 450px !important;
+  max-width: 48em;
 }
 
 .repository.new.release .markup {

web_src/js/components/RepoBranchTagSelector.vue

@@ -33,7 +33,7 @@
           <div class="ui label" v-if="item.name===defaultBranch && mode === 'branches'">
             {{ textDefaultBranchLabel }}
           </div>
-          <a v-show="enableFeed && mode === 'branches'" role="button" class="rss-icon ui compact right" :href="rssURLPrefix + item.url" target="_blank" @click.stop>
+          <a v-show="enableFeed && mode === 'branches'" role="button" class="rss-icon gt-float-right" :href="rssURLPrefix + item.url" target="_blank" @click.stop>
             <!-- creating a lot of Vue component is pretty slow, so we use a static SVG here -->
             <svg width="14" height="14" class="svg octicon-rss"><use href="#svg-symbol-octicon-rss"/></svg>
           </a>