loading up the forgejo repo on tangled to test page performance
Replace 10 more gt- classes with tw- (#29945) (step 2)
Same operation ran to cover all Forgejo specific files as well.
---
Likely the biggest change of the tailwind refactors. Only thing of note
is that `tw-flex-1` resolves to `flex: 1 1 0%` while our `gt-f1` was
`flex: 1 1 0`, I don't think it will make any difference. Commands I've
ran:
```sh
perl -p -i -e 's#gt-vm#tw-align-middle#g' web_src/js/**/* templates/**/* models/**/*
perl -p -i -e 's#gt-fw#tw-flex-wrap#g' web_src/js/**/* templates/**/* models/**/*
perl -p -i -e 's#gt-f1#tw-flex-1#g' web_src/js/**/* templates/**/* models/**/*
perl -p -i -e 's#gt-fc#tw-flex-col#g' web_src/js/**/* templates/**/* models/**/*
perl -p -i -e 's#gt-sb#tw-justify-between#g' web_src/js/**/* templates/**/* models/**/*
perl -p -i -e 's#gt-je#tw-justify-end#g' web_src/js/**/* templates/**/* models/**/*
perl -p -i -e 's#gt-jc#tw-justify-center#g' web_src/js/**/* templates/**/* models/**/*
perl -p -i -e 's#gt-ac#tw-content-center#g' web_src/js/**/* templates/**/* models/**/* tests/**/*
perl -p -i -e 's#gt-df#tw-flex#g' web_src/js/**/* templates/**/* models/**/* tests/**/*
perl -p -i -e 's#gt-dib#tw-inline-block#g' web_src/js/**/* templates/**/* models/**/* tests/**/*
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
(cherry picked from commit f88ad5424f381bf2a45fd863b551c5a72891bb68)
+30
-30
+1
-1
templates/org/settings/blocked_users.tmpl
+1
-1
templates/org/settings/blocked_users.tmpl
···
1
1
{{template "org/settings/layout_head" (dict "ctxData" . "pageClass" "organization settings blocked-users")}}
2
2
<div class="org-setting-content">
3
3
<div class="ui attached segment">
4
-
<form class="ui form ignore-dirty gt-df gt-fw gt-gap-3" action="{{$.Link}}/block" method="post">
4
+
<form class="ui form ignore-dirty tw-flex tw-flex-wrap gt-gap-3" action="{{$.Link}}/block" method="post">
5
5
{{.CsrfTokenHtml}}
6
6
<input type="hidden" name="uid" value="">
7
7
<div class="ui left">
+6
-6
templates/repo/diff/conversation.tmpl
+6
-6
templates/repo/diff/conversation.tmpl
···
5
5
{{$referenceUrl := printf "%s#%s" $.Issue.Link (index .comments 0).HashTag}}
6
6
<div class="conversation-holder" data-path="{{(index .comments 0).TreePath}}" data-side="{{if lt (index .comments 0).Line 0}}left{{else}}right{{end}}" data-idx="{{(index .comments 0).UnsignedLine}}">
7
7
{{if $resolved}}
8
-
<div class="ui attached header resolved-placeholder gt-df gt-ac gt-sb">
9
-
<div class="ui grey text gt-df gt-ac gt-fw gt-gap-2">
8
+
<div class="ui attached header resolved-placeholder tw-flex tw-content-center tw-justify-between">
9
+
<div class="ui grey text tw-flex tw-content-center tw-flex-wrap gt-gap-2">
10
10
{{svg "octicon-check" 16 "icon gt-mr-2"}}
11
11
<b>{{$resolveDoer.Name}}</b> {{ctx.Locale.Tr "repo.issues.review.resolved_by"}}
12
12
{{if $invalid}}
···
19
19
</a>
20
20
{{end}}
21
21
</div>
22
-
<div class="gt-df gt-ac gt-gap-3">
23
-
<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny labeled button show-outdated gt-df gt-ac">
22
+
<div class="tw-flex tw-content-center gt-gap-3">
23
+
<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny labeled button show-outdated tw-flex tw-content-center">
24
24
{{svg "octicon-unfold" 16 "gt-mr-3"}}
25
25
{{ctx.Locale.Tr "repo.issues.review.show_resolved"}}
26
26
</button>
27
-
<button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny labeled button hide-outdated gt-df gt-ac gt-hidden">
27
+
<button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny labeled button hide-outdated tw-flex tw-content-center gt-hidden">
28
28
{{svg "octicon-fold" 16 "gt-mr-3"}}
29
29
{{ctx.Locale.Tr "repo.issues.review.hide_resolved"}}
30
30
</button>
···
37
37
{{template "repo/diff/comments" dict "root" $ "comments" .comments}}
38
38
</ui>
39
39
</div>
40
-
<div class="gt-df gt-je gt-ac gt-fw gt-mt-3">
40
+
<div class="tw-flex tw-justify-end tw-content-center tw-flex-wrap gt-mt-3">
41
41
<div class="ui buttons gt-mr-2">
42
42
<button class="ui icon tiny basic button previous-conversation">
43
43
{{svg "octicon-arrow-up" 12 "icon"}} {{ctx.Locale.Tr "repo.issues.previous"}}
+1
-1
templates/repo/header.tmpl
+1
-1
templates/repo/header.tmpl
···
2
2
{{with .Repository}}
3
3
<div class="ui container">
4
4
<div class="repo-header">
5
-
<div class="flex-item gt-ac">
5
+
<div class="flex-item tw-content-center">
6
6
<div class="flex-item-leading">{{template "repo/icon" .}}</div>
7
7
<div class="flex-item-main">
8
8
<div class="flex-item-title gt-font-18">
+1
-1
templates/repo/issue/filter_actions.tmpl
+1
-1
templates/repo/issue/filter_actions.tmpl
···
29
29
<div class="divider"></div>
30
30
{{end}}
31
31
{{$previousExclusiveScope = $exclusiveScope}}
32
-
<div class="item issue-action gt-df gt-sb" data-action="toggle" data-element-id="{{.ID}}" data-url="{{$.RepoLink}}/issues/labels">
32
+
<div class="item issue-action tw-flex tw-justify-between" data-action="toggle" data-element-id="{{.ID}}" data-url="{{$.RepoLink}}/issues/labels">
33
33
{{if SliceUtils.Contains $.SelLabelIDs .ID}}{{if $exclusiveScope}}{{svg "octicon-dot-fill"}}{{else}}{{svg "octicon-check"}}{{end}}{{end}} {{RenderLabel $.Context .}}
34
34
{{template "repo/issue/labels/label_archived" .}}
35
35
</div>
+3
-3
templates/repo/issue/filter_list.tmpl
+3
-3
templates/repo/issue/filter_list.tmpl
···
32
32
<div class="divider"></div>
33
33
{{end}}
34
34
{{$previousExclusiveScope = $exclusiveScope}}
35
-
<a rel="nofollow" class="item label-filter-item gt-df gt-ac" {{if .IsArchived}}data-is-archived{{end}} href="?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.QueryString}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}{{if $.ShowArchivedLabels}}&archived=true{{end}}" data-label-id="{{.ID}}">
35
+
<a rel="nofollow" class="item label-filter-item tw-flex tw-content-center" {{if .IsArchived}}data-is-archived{{end}} href="?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.QueryString}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}{{if $.ShowArchivedLabels}}&archived=true{{end}}" data-label-id="{{.ID}}">
36
36
{{if .IsExcluded}}
37
37
{{svg "octicon-circle-slash"}}
38
38
{{else if .IsSelected}}
···
107
107
{{ctx.Locale.Tr "repo.issues.new.open_projects"}}
108
108
</div>
109
109
{{range .OpenProjects}}
110
-
<a rel="nofollow" class="{{if $.ProjectID}}{{if eq $.ProjectID .ID}}active selected{{end}}{{end}} item gt-df" href="?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&project={{.ID}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}{{if $.ShowArchivedLabels}}&archived=true{{end}}">
110
+
<a rel="nofollow" class="{{if $.ProjectID}}{{if eq $.ProjectID .ID}}active selected{{end}}{{end}} item tw-flex" href="?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&project={{.ID}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}{{if $.ShowArchivedLabels}}&archived=true{{end}}">
111
111
{{svg .IconName 18 "gt-mr-3 tw-shrink-0"}}<span class="gt-ellipsis">{{.Title}}</span>
112
112
</a>
113
113
{{end}}
···
160
160
<a rel="nofollow" class="{{if eq .AssigneeID -1}}active selected {{end}}item" href="?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee=-1&poster={{$.PosterID}}{{if $.ShowArchivedLabels}}&archived=true{{end}}">{{ctx.Locale.Tr "repo.issues.filter_assginee_no_assignee"}}</a>
161
161
<div class="divider"></div>
162
162
{{range .Assignees}}
163
-
<a rel="nofollow" class="{{if eq $.AssigneeID .ID}}active selected{{end}} item gt-df" href="?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee={{.ID}}&poster={{$.PosterID}}{{if $.ShowArchivedLabels}}&archived=true{{end}}">
163
+
<a rel="nofollow" class="{{if eq $.AssigneeID .ID}}active selected{{end}} item tw-flex" href="?type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&assignee={{.ID}}&poster={{$.PosterID}}{{if $.ShowArchivedLabels}}&archived=true{{end}}">
164
164
{{ctx.AvatarUtils.Avatar . 20}}{{template "repo/search_name" .}}
165
165
</a>
166
166
{{end}}
+8
-8
templates/repo/issue/view_content/conversation.tmpl
+8
-8
templates/repo/issue/view_content/conversation.tmpl
···
3
3
{{$resolveDoer := (index .comments 0).ResolveDoer}}
4
4
{{$isNotPending := (not (eq (index .comments 0).Review.Type 0))}}
5
5
<div class="ui segments conversation-holder">
6
-
<div class="ui segment collapsible-comment-box gt-py-3 gt-df gt-ac gt-sb">
7
-
<div class="gt-df gt-ac">
6
+
<div class="ui segment collapsible-comment-box gt-py-3 tw-flex tw-content-center tw-justify-between">
7
+
<div class="tw-flex tw-content-center">
8
8
<a href="{{(index .comments 0).CodeCommentLink ctx}}" class="file-comment gt-ml-3 gt-word-break">{{(index .comments 0).TreePath}}</a>
9
9
{{if $invalid}}
10
10
<span class="ui label basic small gt-ml-3" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.review.outdated_description"}}">
···
14
14
</div>
15
15
<div>
16
16
{{if or $invalid $resolved}}
17
-
<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="{{if not $resolved}}gt-hidden {{end}}ui compact labeled button show-outdated gt-df gt-ac">
17
+
<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="{{if not $resolved}}gt-hidden {{end}}ui compact labeled button show-outdated tw-flex tw-content-center">
18
18
{{svg "octicon-unfold" 16 "gt-mr-3"}}
19
19
{{if $resolved}}
20
20
{{ctx.Locale.Tr "repo.issues.review.show_resolved"}}
···
22
22
{{ctx.Locale.Tr "repo.issues.review.show_outdated"}}
23
23
{{end}}
24
24
</button>
25
-
<button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="{{if $resolved}}gt-hidden {{end}}ui compact labeled button hide-outdated gt-df gt-ac">
25
+
<button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="{{if $resolved}}gt-hidden {{end}}ui compact labeled button hide-outdated tw-flex tw-content-center">
26
26
{{svg "octicon-fold" 16 "gt-mr-3"}}
27
27
{{if $resolved}}
28
28
{{ctx.Locale.Tr "repo.issues.review.hide_resolved"}}
···
55
55
<div class="comment code-comment gt-pb-4" id="{{.HashTag}}">
56
56
<div class="content">
57
57
<div class="header comment-header">
58
-
<div class="comment-header-left gt-df gt-ac">
58
+
<div class="comment-header-left tw-flex tw-content-center">
59
59
{{if not .OriginalAuthor}}
60
60
<a class="avatar">
61
61
{{ctx.AvatarUtils.Avatar .Poster 20}}
···
76
76
{{ctx.Locale.Tr "repo.issues.commented_at" .HashTag $createdSubStr}}
77
77
</span>
78
78
</div>
79
-
<div class="comment-header-right actions gt-df gt-ac">
79
+
<div class="comment-header-right actions tw-flex tw-content-center">
80
80
{{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole}}
81
81
{{if not $.Repository.IsArchived}}
82
82
{{template "repo/issue/view_content/add_reaction" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
···
106
106
</div>
107
107
{{end}}
108
108
</div>
109
-
<div class="code-comment-buttons gt-df gt-ac gt-fw gt-mt-3 gt-mb-2 gt-mx-3">
110
-
<div class="gt-f1">
109
+
<div class="code-comment-buttons tw-flex tw-content-center tw-flex-wrap gt-mt-3 gt-mb-2 gt-mx-3">
110
+
<div class="tw-flex-1">
111
111
{{if $resolved}}
112
112
<div class="ui grey text">
113
113
{{svg "octicon-check" 16 "gt-mr-2"}}
+2
-2
templates/repo/release/list.tmpl
+2
-2
templates/repo/release/list.tmpl
···
16
16
{{end}}
17
17
</div>
18
18
<div class="ui twelve wide column detail">
19
-
<div class="gt-df gt-ac gt-sb gt-fw gt-mb-3">
19
+
<div class="tw-flex tw-content-center tw-justify-between tw-flex-wrap gt-mb-3">
20
20
<h4 class="release-list-title gt-word-break">
21
21
<a href="{{$.RepoLink}}/releases/tag/{{$release.TagName | PathEscapeSegments}}">{{$release.Title}}</a>
22
-
{{template "repo/commit_statuses" dict "Status" $info.CommitStatus "Statuses" $info.CommitStatuses "AdditionalClasses" "gt-df"}}
22
+
{{template "repo/commit_statuses" dict "Status" $info.CommitStatus "Statuses" $info.CommitStatuses "AdditionalClasses" "tw-flex"}}
23
23
{{if $release.IsDraft}}
24
24
<span class="ui yellow label">{{ctx.Locale.Tr "repo.release.draft"}}</span>
25
25
{{else if $release.IsPrerelease}}
+1
-1
templates/repo/wiki/view.tmpl
+1
-1
templates/repo/wiki/view.tmpl
···
4
4
{{$title := .title}}
5
5
<div class="ui container">
6
6
<div class="repo-button-row">
7
-
<div class="gt-df gt-ac">
7
+
<div class="tw-flex tw-content-center">
8
8
<div class="ui floating filter dropdown" data-no-results="{{ctx.Locale.Tr "repo.pulls.no_results"}}">
9
9
<div class="ui basic small button">
10
10
<span class="text">
+6
-6
web_src/js/components/DashboardRepoList.vue
+6
-6
web_src/js/components/DashboardRepoList.vue
···
344
344
<a :class="{item: true, active: tab === 'organizations'}" @click="changeTab('organizations')">{{ textMyOrgs }} <span class="ui grey label gt-ml-3">{{ organizationsTotalCount }}</span></a>
345
345
</div>
346
346
<div v-show="tab === 'repos'" class="ui tab active list dashboard-repos">
347
-
<h4 v-if="isOrganization" class="ui top attached gt-mt-4 gt-df gt-ac">
348
-
<div class="gt-f1 gt-df gt-ac">
347
+
<h4 v-if="isOrganization" class="ui top attached gt-mt-4 tw-flex tw-content-center">
348
+
<div class="tw-flex-1 tw-flex tw-content-center">
349
349
{{ textMyRepos }}
350
350
<span class="ui grey label gt-ml-3">{{ reposTotalCount }}</span>
351
351
</div>
···
407
407
</div>
408
408
<div v-if="repos.length" class="ui attached table segment tw-rounded-b">
409
409
<ul class="repo-owner-name-list">
410
-
<li class="gt-df gt-ac gt-py-3" v-for="repo, index in repos" :class="{'active': index === activeIndex}" :key="repo.id">
410
+
<li class="tw-flex tw-content-center gt-py-3" v-for="repo, index in repos" :class="{'active': index === activeIndex}" :key="repo.id">
411
411
<a class="repo-list-link muted" :href="repo.link">
412
412
<svg-icon :name="repoIcon(repo)" :size="16" class-name="repo-list-icon"/>
413
413
<div class="text truncate">{{ repo.full_name }}</div>
···
415
415
<svg-icon name="octicon-archive" :size="16"/>
416
416
</div>
417
417
</a>
418
-
<a class="gt-df gt-ac" v-if="repo.latest_commit_status" :href="repo.latest_commit_status.TargetLink" :data-tooltip-content="repo.locale_latest_commit_status.State">
418
+
<a class="tw-flex tw-content-center" v-if="repo.latest_commit_status" :href="repo.latest_commit_status.TargetLink" :data-tooltip-content="repo.locale_latest_commit_status.State">
419
419
<!-- the commit status icon logic is taken from templates/repo/commit_status.tmpl -->
420
420
<svg-icon :name="statusIcon(repo.latest_commit_status.State)" :class-name="'gt-ml-3 commit-status icon text ' + statusColor(repo.latest_commit_status.State)" :size="16"/>
421
421
</a>
···
456
456
<div v-if="!isOrganization" v-show="tab === 'organizations'" class="ui tab active list dashboard-orgs">
457
457
<div v-if="organizations.length" class="ui attached table segment tw-rounded-b">
458
458
<ul class="repo-owner-name-list">
459
-
<li class="gt-df gt-ac gt-py-3" v-for="org in organizations" :key="org.name">
459
+
<li class="tw-flex tw-content-center gt-py-3" v-for="org in organizations" :key="org.name">
460
460
<a class="repo-list-link muted" :href="subUrl + '/' + encodeURIComponent(org.name)">
461
461
<svg-icon name="octicon-organization" :size="16" class-name="repo-list-icon"/>
462
462
<div class="text truncate">{{ org.name }}</div>
···
466
466
</span>
467
467
</div>
468
468
</a>
469
-
<div class="text light grey gt-df gt-ac gt-ml-3">
469
+
<div class="text light grey tw-flex tw-content-center gt-ml-3">
470
470
{{ org.num_repos }}
471
471
<svg-icon name="octicon-repo" :size="16" class-name="gt-ml-2 gt-mt-1"/>
472
472
</div>