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.
mj-develop
wxiaoguang 8 months ago committed by GitHub
parent 98f2bf23bc
commit 19a1e1b20e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -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>

@ -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="left floated twelve wide column">
<div class="gt-df gt-ac">
<div class="gt-f1">
{{$.locale.Tr "org.settings.labels_desc" | Str2html}}
</div>
<div class="right floated three wide column">
<div class="ui right">
<button class="ui small green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button>
</div>
</div>
<button class="ui small green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button>
</div>
<div class="divider"></div>
{{template "repo/issue/labels/label_new" .}}

@ -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>

@ -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">

@ -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}}

@ -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}}">

@ -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>
</div>
<button class="ui small green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button>
{{end}}
</div>
{{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}}

@ -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>
</div>
<a class="ui small green button" href="{{$.Link}}/new">{{.locale.Tr "repo.milestones.new"}}</a>
{{end}}
</div>
{{template "base/alert" .}}

@ -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 -}}

@ -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}}

@ -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}}

@ -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>

@ -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"}}

@ -61,20 +61,18 @@
)}}
</div>
{{range .attachments}}
<div class="field" id="attachment-{{.ID}}">
<div class="ui right gt-df gt-ac wrap_remove">
<a class="ui mini compact red button remove-rel-attach" data-id="{{.ID}}" data-uuid="{{.UUID}}">
{{$.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}}">
<div class="field flex-text-block" id="attachment-{{.ID}}">
<div class="flex-text-inline gt-f1">
<input name="attachment-edit-{{.UUID}}" class="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}}

@ -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}}

@ -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>

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

@ -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>
</div>
<a class="ui green tiny button" href="{{.RepoLink}}/wiki?action=_new">{{.locale.Tr "repo.wiki.new_page_button"}}</a>
{{end}}
</div>
<form class="ui form" action="{{.Link}}?action={{if .PageIsWikiEdit}}_edit{{else}}_new{{end}}" method="post">

@ -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}}

@ -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}}">

@ -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}}

@ -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}}">

@ -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);
}

@ -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 {

@ -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>

Loading…
Cancel
Save