loading up the forgejo repo on tangled to test page performance
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.
authored by
wxiaoguang
and committed by
GitHub
19a1e1b2
98f2bf23
+51
-72
+1
-1
templates/admin/notice.tmpl
+1
-1
templates/admin/notice.tmpl
···
31
31
<tr>
32
32
<th></th>
33
33
<th colspan="5">
34
-
<form class="ui right" method="post" action="{{AppSubUrl}}/admin/notices/empty">
34
+
<form class="gt-float-right" method="post" action="{{AppSubUrl}}/admin/notices/empty">
35
35
{{.CsrfTokenHtml}}
36
36
<button type="submit" class="ui red small button">{{.locale.Tr "admin.notices.delete_all"}}</button>
37
37
</form>
+3
-7
templates/org/settings/labels.tmpl
+3
-7
templates/org/settings/labels.tmpl
···
1
1
{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings labels")}}
2
2
<div class="org-setting-content">
3
-
<div class="ui grid">
4
-
<div class="left floated twelve wide column">
3
+
<div class="gt-df gt-ac">
4
+
<div class="gt-f1">
5
5
{{$.locale.Tr "org.settings.labels_desc" | Str2html}}
6
6
</div>
7
-
<div class="right floated three wide column">
8
-
<div class="ui right">
9
-
<button class="ui small green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button>
10
-
</div>
11
-
</div>
7
+
<button class="ui small green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button>
12
8
</div>
13
9
<div class="divider"></div>
14
10
{{template "repo/issue/labels/label_new" .}}
+1
-1
templates/org/team/repositories.tmpl
+1
-1
templates/org/team/repositories.tmpl
···
41
41
{{if $canAddRemove}}
42
42
<form method="post" action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/repo/remove">
43
43
{{$.CsrfTokenHtml}}
44
-
<button type="submit" class="ui red small button right" name="repoid" value="{{.ID}}">{{$.locale.Tr "remove"}}</button>
44
+
<button type="submit" class="ui red small button" name="repoid" value="{{.ID}}">{{$.locale.Tr "remove"}}</button>
45
45
</form>
46
46
{{end}}
47
47
</div>
+1
-1
templates/package/view.tmpl
+1
-1
templates/package/view.tmpl
···
87
87
{{end}}
88
88
<div class="divider"></div>
89
89
<strong>{{.locale.Tr "packages.versions"}} ({{.TotalVersionCount}})</strong>
90
-
<a class="ui right" href="{{$.PackageDescriptor.PackageWebLink}}/versions">{{.locale.Tr "packages.versions.view_all"}}</a>
90
+
<a class="gt-float-right" href="{{$.PackageDescriptor.PackageWebLink}}/versions">{{.locale.Tr "packages.versions.view_all"}}</a>
91
91
<div class="ui relaxed list">
92
92
{{range .LatestVersions}}
93
93
<div class="item gt-df">
+1
-1
templates/repo/commits_list_small.tmpl
+1
-1
templates/repo/commits_list_small.tmpl
···
13
13
14
14
{{$commitLink:= printf "%s/commit/%s" $.comment.Issue.PullRequest.BaseRepo.Link (PathEscape .ID.String)}}
15
15
16
-
<span class="ui float right shabox gt-df gt-ac">
16
+
<span class="shabox gt-df gt-ac gt-float-right">
17
17
{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses "root" $.root}}
18
18
{{$class := "ui sha label"}}
19
19
{{if .Signature}}
+1
-1
templates/repo/diff/comment_form.tmpl
+1
-1
templates/repo/diff/comment_form.tmpl
···
22
22
23
23
<div class="field footer gt-mx-3">
24
24
<span class="markup-info">{{svg "octicon-markup"}} {{$.root.locale.Tr "repo.diff.comment.markdown_info"}}</span>
25
-
<div class="ui right">
25
+
<div class="gt-text-right">
26
26
{{if $.reply}}
27
27
<button class="ui submit green tiny button btn-reply" type="submit">{{$.root.locale.Tr "repo.diff.comment.reply"}}</button>
28
28
<input type="hidden" name="reply" value="{{$.reply}}">
+1
-3
templates/repo/issue/labels.tmpl
+1
-3
templates/repo/issue/labels.tmpl
···
5
5
<div class="navbar gt-mb-4">
6
6
{{template "repo/issue/navbar" .}}
7
7
{{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}}
8
-
<div class="ui right">
9
-
<button class="ui small green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button>
10
-
</div>
8
+
<button class="ui small green new-label button">{{.locale.Tr "repo.issues.new_label"}}</button>
11
9
{{end}}
12
10
</div>
13
11
{{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}}
+1
-3
templates/repo/issue/milestones.tmpl
+1
-3
templates/repo/issue/milestones.tmpl
···
5
5
<div class="navbar gt-mb-4">
6
6
{{template "repo/issue/navbar" .}}
7
7
{{if and (or .CanWriteIssues .CanWritePulls) (not .Repository.IsArchived)}}
8
-
<div class="ui right">
9
-
<a class="ui small green button" href="{{$.Link}}/new">{{.locale.Tr "repo.milestones.new"}}</a>
10
-
</div>
8
+
<a class="ui small green button" href="{{$.Link}}/new">{{.locale.Tr "repo.milestones.new"}}</a>
11
9
{{end}}
12
10
</div>
13
11
{{template "base/alert" .}}
+1
-1
templates/repo/issue/view_content/attachments.tmpl
+1
-1
templates/repo/issue/view_content/attachments.tmpl
+3
-3
templates/repo/issue/view_content/comments.tmpl
+3
-3
templates/repo/issue/view_content/comments.tmpl
···
477
477
</div>
478
478
<div>
479
479
{{if or $invalid $resolved}}
480
-
<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">
480
+
<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">
481
481
{{svg "octicon-unfold" 16 "gt-mr-3"}}
482
482
{{if $resolved}}
483
483
{{$.locale.Tr "repo.issues.review.show_resolved"}}
···
485
485
{{$.locale.Tr "repo.issues.review.show_outdated"}}
486
486
{{end}}
487
487
</button>
488
-
<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">
488
+
<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">
489
489
{{svg "octicon-fold" 16 "gt-mr-3"}}
490
490
{{if $resolved}}
491
491
{{$.locale.Tr "repo.issues.review.hide_resolved"}}
···
698
698
{{end}}
699
699
</span>
700
700
{{if and .IsForcePush $.Issue.PullRequest.BaseRepo.Name}}
701
-
<span class="ui float right comparebox">
701
+
<span class="gt-float-right comparebox">
702
702
<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>
703
703
</span>
704
704
{{end}}
+1
-1
templates/repo/issue/view_content/comments_delete_time.tmpl
+1
-1
templates/repo/issue/view_content/comments_delete_time.tmpl
···
1
1
{{if .comment.Time}} {{/* compatibility with time comments made before v1.14 */}}
2
2
{{if (not .comment.Time.Deleted)}}
3
3
{{if (or .ctxData.IsAdmin (and .ctxData.IsSigned (eq .ctxData.SignedUserID .comment.PosterID)))}}
4
-
<span class="ui float right">
4
+
<span class="gt-float-right">
5
5
<div class="ui mini modal issue-delete-time-modal" data-id="{{.comment.Time.ID}}">
6
6
<form method="post" class="delete-time-form" action="{{.ctxData.RepoLink}}/issues/{{.ctxData.Issue.Index}}/times/{{.comment.TimeID}}/delete">
7
7
{{.ctxData.CsrfTokenHtml}}
+1
-1
templates/repo/projects/view.tmpl
+1
-1
templates/repo/projects/view.tmpl
···
4
4
<div class="ui container padded">
5
5
<div class="gt-df gt-sb gt-ac gt-mb-4">
6
6
{{template "repo/issue/navbar" .}}
7
-
<a class="ui right small green button item" href="{{.RepoLink}}/issues/new/choose?project={{.Project.ID}}">{{ctx.Locale.Tr "repo.issues.new"}}</a>
7
+
<a class="ui small green button" href="{{.RepoLink}}/issues/new/choose?project={{.Project.ID}}">{{ctx.Locale.Tr "repo.issues.new"}}</a>
8
8
</div>
9
9
{{template "projects/view" .}}
10
10
</div>
+1
-1
templates/repo/release/list.tmpl
+1
-1
templates/repo/release/list.tmpl
···
93
93
{{if .Attachments}}
94
94
{{range .Attachments}}
95
95
<li>
96
-
<span class="ui text middle aligned right">
96
+
<span class="gt-float-right">
97
97
<span class="ui text grey">{{.Size | FileSize}}</span>
98
98
<span data-tooltip-content="{{$.locale.Tr "repo.release.download_count" ($.locale.PrettyNumber .DownloadCount)}}">
99
99
{{svg "octicon-info"}}
+7
-9
templates/repo/release/new.tmpl
+7
-9
templates/repo/release/new.tmpl
···
61
61
)}}
62
62
</div>
63
63
{{range .attachments}}
64
-
<div class="field" id="attachment-{{.ID}}">
65
-
<div class="ui right gt-df gt-ac wrap_remove">
66
-
<a class="ui mini compact red button remove-rel-attach" data-id="{{.ID}}" data-uuid="{{.UUID}}">
67
-
{{$.locale.Tr "remove"}}
68
-
</a>
69
-
</div>
70
-
<div class="gt-df gt-ac">
71
-
<input name="attachment-edit-{{.UUID}}" class="gt-mr-3 attachment_edit" required value="{{.Name}}">
64
+
<div class="field flex-text-block" id="attachment-{{.ID}}">
65
+
<div class="flex-text-inline gt-f1">
66
+
<input name="attachment-edit-{{.UUID}}" class="attachment_edit" required value="{{.Name}}">
72
67
<input name="attachment-del-{{.UUID}}" type="hidden" value="false">
73
-
<span class="ui text grey gt-mr-3">{{.Size | FileSize}}</span>
68
+
<span class="ui text grey gt-whitespace-nowrap">{{.Size | FileSize}}</span>
74
69
<span data-tooltip-content="{{$.locale.Tr "repo.release.download_count" ($.locale.PrettyNumber .DownloadCount)}}">
75
70
{{svg "octicon-info"}}
76
71
</span>
77
72
</div>
73
+
<a class="ui mini compact red button remove-rel-attach" data-id="{{.ID}}" data-uuid="{{.UUID}}">
74
+
{{$.locale.Tr "remove"}}
75
+
</a>
78
76
</div>
79
77
{{end}}
80
78
{{if .IsAttachmentEnabled}}
+1
-1
templates/repo/release_tag_header.tmpl
+1
-1
templates/repo/release_tag_header.tmpl
···
15
15
{{end}}
16
16
</div>
17
17
{{if and (not .PageIsTagList) .CanCreateRelease}}
18
-
<a class="ui right small green button" href="{{$.RepoLink}}/releases/new">
18
+
<a class="ui small green button" href="{{$.RepoLink}}/releases/new">
19
19
{{.locale.Tr "repo.release.new_release"}}
20
20
</a>
21
21
{{end}}
+1
-1
templates/repo/settings/githooks.tmpl
+1
-1
templates/repo/settings/githooks.tmpl
···
12
12
<div class="item truncated-item-container">
13
13
<span class="text {{if .IsActive}}green{{else}}grey{{end}} gt-mr-3">{{svg "octicon-dot-fill" 22}}</span>
14
14
<span class="text truncate gt-f1 gt-mr-3">{{.Name}}</span>
15
-
<a class="muted ui right gt-p-3" href="{{$.RepoLink}}/settings/hooks/git/{{.Name|PathEscape}}">
15
+
<a class="muted gt-float-right gt-p-3" href="{{$.RepoLink}}/settings/hooks/git/{{.Name|PathEscape}}">
16
16
{{svg "octicon-pencil"}}
17
17
</a>
18
18
</div>
+11
-11
templates/repo/settings/webhook/history.tmpl
+11
-11
templates/repo/settings/webhook/history.tmpl
···
11
11
<div class="ui list">
12
12
{{range .History}}
13
13
<div class="item">
14
-
<div class="meta">
15
-
{{if .IsSucceed}}
16
-
<span class="text green">{{svg "octicon-check"}}</span>
17
-
{{else}}
18
-
<span class="text red">{{svg "octicon-alert"}}</span>
19
-
{{end}}
20
-
<a class="ui primary sha label toggle button show-panel" data-panel="#info-{{.ID}}">{{.UUID}}</a>
21
-
<div class="ui right">
22
-
<span class="text grey time">
23
-
{{TimeSince .Delivered.AsTime $.locale}}
24
-
</span>
14
+
<div class="flex-text-block gt-sb">
15
+
<div class="flex-text-inline">
16
+
{{if .IsSucceed}}
17
+
<span class="text green">{{svg "octicon-check"}}</span>
18
+
{{else}}
19
+
<span class="text red">{{svg "octicon-alert"}}</span>
20
+
{{end}}
21
+
<a class="ui primary sha label toggle button show-panel" data-panel="#info-{{.ID}}">{{.UUID}}</a>
25
22
</div>
23
+
<span class="text grey">
24
+
{{TimeSince .Delivered.AsTime $.locale}}
25
+
</span>
26
26
</div>
27
27
<div class="info gt-hidden" id="info-{{.ID}}">
28
28
<div class="ui top attached tabular menu">
+2
-4
templates/repo/wiki/new.tmpl
+2
-4
templates/repo/wiki/new.tmpl
···
3
3
{{template "repo/header" .}}
4
4
<div class="ui container">
5
5
{{template "base/alert" .}}
6
-
<div class="ui header">
6
+
<div class="ui header flex-text-block gt-sb">
7
7
{{.locale.Tr "repo.wiki.new_page"}}
8
8
{{if .PageIsWikiEdit}}
9
-
<div class="ui right gt-mb-3">
10
-
<a class="ui green tiny button" href="{{.RepoLink}}/wiki?action=_new">{{.locale.Tr "repo.wiki.new_page_button"}}</a>
11
-
</div>
9
+
<a class="ui green tiny button" href="{{.RepoLink}}/wiki?action=_new">{{.locale.Tr "repo.wiki.new_page_button"}}</a>
12
10
{{end}}
13
11
</div>
14
12
<form class="ui form" action="{{.Link}}?action={{if .PageIsWikiEdit}}_edit{{else}}_new{{end}}" method="post">
+2
-2
templates/repo/wiki/view.tmpl
+2
-2
templates/repo/wiki/view.tmpl
···
79
79
{{if .sidebarPresent}}
80
80
<div class="markup wiki-content-sidebar">
81
81
{{if and .CanWriteWiki (not .Repository.IsMirror)}}
82
-
<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>
82
+
<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>
83
83
{{end}}
84
84
{{template "repo/unicode_escape_prompt" dict "EscapeStatus" .sidebarEscapeStatus "root" $}}
85
85
{{.sidebarContent | Safe}}
···
91
91
{{if .footerPresent}}
92
92
<div class="markup wiki-content-footer">
93
93
{{if and .CanWriteWiki (not .Repository.IsMirror)}}
94
-
<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>
94
+
<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>
95
95
{{end}}
96
96
{{template "repo/unicode_escape_prompt" dict "footerEscapeStatus" .sidebarEscapeStatus "root" $}}
97
97
{{.footerContent | Safe}}
+6
-6
templates/user/dashboard/issues.tmpl
+6
-6
templates/user/dashboard/issues.tmpl
···
7
7
<div class="ui secondary vertical filter menu gt-bg-transparent">
8
8
<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}}">
9
9
{{.locale.Tr "home.issues.in_your_repos"}}
10
-
<strong class="ui right">{{CountFmt .IssueStats.YourRepositoriesCount}}</strong>
10
+
<strong>{{CountFmt .IssueStats.YourRepositoriesCount}}</strong>
11
11
</a>
12
12
<a class="{{if eq .ViewType "assigned"}}active{{end}} item" href="{{.Link}}?type=assigned&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}&q={{$.Keyword}}">
13
13
{{.locale.Tr "repo.issues.filter_type.assigned_to_you"}}
14
-
<strong class="ui right">{{CountFmt .IssueStats.AssignCount}}</strong>
14
+
<strong>{{CountFmt .IssueStats.AssignCount}}</strong>
15
15
</a>
16
16
<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}}">
17
17
{{.locale.Tr "repo.issues.filter_type.created_by_you"}}
18
-
<strong class="ui right">{{CountFmt .IssueStats.CreateCount}}</strong>
18
+
<strong>{{CountFmt .IssueStats.CreateCount}}</strong>
19
19
</a>
20
20
{{if .PageIsPulls}}
21
21
<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}}">
22
22
{{.locale.Tr "repo.issues.filter_type.review_requested"}}
23
-
<strong class="ui right">{{CountFmt .IssueStats.ReviewRequestedCount}}</strong>
23
+
<strong>{{CountFmt .IssueStats.ReviewRequestedCount}}</strong>
24
24
</a>
25
25
<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}}">
26
26
{{.locale.Tr "repo.issues.filter_type.reviewed_by_you"}}
27
-
<strong class="ui right">{{CountFmt .IssueStats.ReviewedCount}}</strong>
27
+
<strong>{{CountFmt .IssueStats.ReviewedCount}}</strong>
28
28
</a>
29
29
{{end}}
30
30
<a class="{{if eq .ViewType "mentioned"}}active{{end}} item" href="{{.Link}}?type=mentioned&repos=[{{range $.RepoIDs}}{{.}}%2C{{end}}]&sort={{$.SortType}}&state={{.State}}&q={{$.Keyword}}">
31
31
{{.locale.Tr "repo.issues.filter_type.mentioning_you"}}
32
-
<strong class="ui right">{{CountFmt .IssueStats.MentionCount}}</strong>
32
+
<strong>{{CountFmt .IssueStats.MentionCount}}</strong>
33
33
</a>
34
34
<div class="divider"></div>
35
35
<a class="{{if not $.RepoIDs}}active{{end}} repo name item" href="{{$.Link}}?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&q={{$.Keyword}}">
+1
-1
templates/user/dashboard/milestones.tmpl
+1
-1
templates/user/dashboard/milestones.tmpl
+1
-1
templates/user/settings/repos.tmpl
+1
-1
templates/user/settings/repos.tmpl
···
32
32
{{else}}
33
33
<span class="icon gt-dib gt-pt-3">{{svg "octicon-file-directory-fill"}}</span>
34
34
<span class="name gt-dib gt-pt-3">{{$.ContextUser.Name}}/{{$dir}}</span>
35
-
<div class="ui right">
35
+
<div class="gt-float-right">
36
36
{{if $.allowAdopt}}
37
37
<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>
38
38
<div class="ui g-modal-confirm modal" id="adopt-unadopted-modal-{{$dirI}}">
-5
web_src/css/base.css
-5
web_src/css/base.css
···
1179
1179
font-size: 0.75em;
1180
1180
}
1181
1181
1182
-
/* FIXME: this is a serious pollution, do not use this for "float: right" anymore */
1183
-
.ui.right:not(.action) {
1184
-
float: right;
1185
-
}
1186
-
1187
1182
.ui.form .ui.button {
1188
1183
font-weight: var(--font-weight-normal);
1189
1184
}
+1
-5
web_src/css/repo/release-tag.css
+1
-5
web_src/css/repo/release-tag.css
+1
-1
web_src/js/components/RepoBranchTagSelector.vue
+1
-1
web_src/js/components/RepoBranchTagSelector.vue
···
33
33
<div class="ui label" v-if="item.name===defaultBranch && mode === 'branches'">
34
34
{{ textDefaultBranchLabel }}
35
35
</div>
36
-
<a v-show="enableFeed && mode === 'branches'" role="button" class="rss-icon ui compact right" :href="rssURLPrefix + item.url" target="_blank" @click.stop>
36
+
<a v-show="enableFeed && mode === 'branches'" role="button" class="rss-icon gt-float-right" :href="rssURLPrefix + item.url" target="_blank" @click.stop>
37
37
<!-- creating a lot of Vue component is pretty slow, so we use a static SVG here -->
38
38
<svg width="14" height="14" class="svg octicon-rss"><use href="#svg-symbol-octicon-rss"/></svg>
39
39
</a>