loading up the forgejo repo on tangled to test page performance
Simplify helper CSS classes and avoid abuse (#26728)
Removed CSS helper classes (some of them are not useful while some of
them are abused often)
* `gt-db`: in most cases it could be replaced by `gt-df` and the flex
layout should be encouraged. Other cases: either it does need the
`gt-df` (eg: by using `div` directly) or it is an abuse (eg: the warning
message in a form)
* `gt-di`: it doesn't seem useful, or it could be replaced by `gt-dib`
in most cases.
* `gt-dif`: not useful, it could be replaced by `flex-text-inline` or
`gt-df`
* `gt-js`: never used
* All `<i class="icon gt-df gt-ac gt-jc">` could be written as `<i
class="icon">`
## Some UI samples
### Admin Notice
### Admin Stacktrace
### Org Home
### Org Team Repo
### Release List
### User Setting Application Token Scope
Co-authored-by: Giteabot <teabot@gitea.io>
authored by
wxiaoguang
Giteabot
and committed by
GitHub
576644d8
8b5c081d
+33
-34
+1
-1
templates/admin/notice.tmpl
+1
-1
templates/admin/notice.tmpl
···
17
17
<tbody>
18
18
{{range .Notices}}
19
19
<tr>
20
-
<td><div class="ui checkbox gt-db" data-id="{{.ID}}"><input type="checkbox"></div></td>
20
+
<td><div class="ui checkbox gt-df" data-id="{{.ID}}"><input type="checkbox"></div></td>
21
21
<td>{{.ID}}</td>
22
22
<td>{{$.locale.Tr .TrStr}}</td>
23
23
<td class="view-detail auto-ellipsis" style="width: 80%;"><span class="notice-description">{{.Description}}</span></td>
+1
-1
templates/admin/stacktrace-row.tmpl
+1
-1
templates/admin/stacktrace-row.tmpl
+2
-2
templates/org/home.tmpl
+2
-2
templates/org/home.tmpl
···
57
57
{{if .NumMembers}}
58
58
<h4 class="ui top attached header gt-df">
59
59
<strong class="gt-f1">{{.locale.Tr "org.members"}}</strong>
60
-
<a class="text grey gt-dif gt-ac" href="{{.OrgLink}}/members"><span>{{.NumMembers}}</span> {{svg "octicon-chevron-right"}}</a>
60
+
<a class="text grey gt-df gt-ac" href="{{.OrgLink}}/members"><span>{{.NumMembers}}</span> {{svg "octicon-chevron-right"}}</a>
61
61
</h4>
62
62
<div class="ui attached segment members">
63
63
{{$isMember := .IsOrganizationMember}}
···
71
71
{{if .IsOrganizationMember}}
72
72
<div class="ui top attached header gt-df">
73
73
<strong class="gt-f1">{{.locale.Tr "org.teams"}}</strong>
74
-
<a class="text grey gt-dif gt-ac" href="{{.OrgLink}}/teams"><span>{{.Org.NumTeams}}</span> {{svg "octicon-chevron-right"}}</a>
74
+
<a class="text grey gt-df gt-ac" href="{{.OrgLink}}/teams"><span>{{.Org.NumTeams}}</span> {{svg "octicon-chevron-right"}}</a>
75
75
</div>
76
76
<div class="ui attached table segment teams">
77
77
{{range .Teams}}
+1
-1
templates/org/team/repositories.tmpl
+1
-1
templates/org/team/repositories.tmpl
···
10
10
{{$canAddRemove := and $.IsOrganizationOwner (not $.Team.IncludesAllRepositories)}}
11
11
{{if $canAddRemove}}
12
12
<div class="ui attached segment gt-df gt-fw gt-gap-3">
13
-
<form class="ui form ignore-dirty gt-f1 gt-dif" action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/repo/add" method="post">
13
+
<form class="ui form ignore-dirty gt-f1 gt-df" action="{{$.OrgLink}}/teams/{{$.Team.LowerName | PathEscape}}/action/repo/add" method="post">
14
14
{{.CsrfTokenHtml}}
15
15
<div id="search-repo-box" data-uid="{{.Org.ID}}" class="ui search">
16
16
<div class="ui input">
+1
-1
templates/repo/home.tmpl
+1
-1
templates/repo/home.tmpl
···
18
18
<div class="ui small action input{{if .CodeIndexerUnavailable}} disabled left icon{{end}}"{{if .CodeIndexerUnavailable}} data-tooltip-content="{{.locale.Tr "repo.search.code_search_unavailable"}}"{{end}}>
19
19
<input name="q" value="{{.Keyword}}"{{if .CodeIndexerUnavailable}} disabled{{end}} placeholder="{{.locale.Tr "repo.search.search_repo"}}">
20
20
{{if .CodeIndexerUnavailable}}
21
-
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-alert"}}</i>
21
+
<i class="icon">{{svg "octicon-alert"}}</i>
22
22
{{end}}
23
23
<button class="ui small icon button"{{if .CodeIndexerUnavailable}} disabled{{end}} type="submit">
24
24
{{svg "octicon-search"}}
+5
-5
templates/repo/issue/filters.tmpl
+5
-5
templates/repo/issue/filters.tmpl
···
15
15
</span>
16
16
<div class="menu">
17
17
<div class="ui icon search input">
18
-
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
18
+
<i class="icon">{{svg "octicon-search" 16}}</i>
19
19
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_label"}}">
20
20
</div>
21
21
<span class="info">{{.locale.Tr "repo.issues.filter_label_exclude" | Safe}}</span>
···
43
43
</span>
44
44
<div class="menu">
45
45
<div class="ui icon search input">
46
-
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
46
+
<i class="icon">{{svg "octicon-search" 16}}</i>
47
47
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_milestone"}}">
48
48
</div>
49
49
<div class="divider"></div>
···
81
81
</span>
82
82
<div class="menu">
83
83
<div class="ui icon search input">
84
-
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
84
+
<i class="icon">{{svg "octicon-search" 16}}</i>
85
85
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_project"}}">
86
86
</div>
87
87
<a class="{{if not .ProjectID}}active selected {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&assignee={{$.AssigneeID}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_project_all"}}</a>
···
123
123
</span>
124
124
<div class="menu">
125
125
<div class="ui icon search input">
126
-
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
126
+
<i class="icon">{{svg "octicon-search" 16}}</i>
127
127
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_poster"}}">
128
128
</div>
129
129
<a class="item" data-value="0">{{.locale.Tr "repo.issues.filter_poster_no_select"}}</a>
···
138
138
</span>
139
139
<div class="menu">
140
140
<div class="ui icon search input">
141
-
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
141
+
<i class="icon">{{svg "octicon-search" 16}}</i>
142
142
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_assignee"}}">
143
143
</div>
144
144
<a class="{{if not .AssigneeID}}active selected {{end}}item" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&sort={{$.SortType}}&state={{$.State}}&labels={{.SelectLabels}}&milestone={{$.MilestoneID}}&project={{$.ProjectID}}&poster={{$.PosterID}}">{{.locale.Tr "repo.issues.filter_assginee_no_select"}}</a>
+1
-1
templates/repo/issue/labels/labels_selector_field.tmpl
+1
-1
templates/repo/issue/labels/labels_selector_field.tmpl
···
8
8
<div class="filter menu" {{if .Issue}}data-action="update" data-issue-id="{{$.Issue.ID}}" data-update-url="{{$.RepoLink}}/issues/labels"{{else}}data-id="#label_ids"{{end}}>
9
9
{{if or .Labels .OrgLabels}}
10
10
<div class="ui icon search input">
11
-
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
11
+
<i class="icon">{{svg "octicon-search" 16}}</i>
12
12
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_labels"}}">
13
13
</div>
14
14
{{end}}
+2
-2
templates/repo/issue/new_form.tmpl
+2
-2
templates/repo/issue/new_form.tmpl
···
95
95
<div class="menu">
96
96
{{if or .OpenProjects .ClosedProjects}}
97
97
<div class="ui icon search input">
98
-
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
98
+
<i class="icon">{{svg "octicon-search" 16}}</i>
99
99
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_projects"}}">
100
100
</div>
101
101
{{end}}
···
152
152
</span>
153
153
<div class="filter menu" data-id="#assignee_ids">
154
154
<div class="ui icon search input">
155
-
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
155
+
<i class="icon">{{svg "octicon-search" 16}}</i>
156
156
<input type="text" placeholder="{{.locale.Tr "repo.issues.filter_assignees"}}">
157
157
</div>
158
158
<div class="no-select item">{{.locale.Tr "repo.issues.new.clear_assignees"}}</div>
+2
-2
templates/repo/issue/view_content/pull_merge_instruction.tmpl
+2
-2
templates/repo/issue/view_content/pull_merge_instruction.tmpl
···
1
1
<div class="divider"></div>
2
2
<div class="instruct-toggle"> {{$.locale.Tr "repo.pulls.merge_instruction_hint" | Safe}} </div>
3
3
<div class="instruct-content gt-mt-3 gt-hidden">
4
-
<div><h3 class="gt-di">{{$.locale.Tr "step1"}} </h3>{{$.locale.Tr "repo.pulls.merge_instruction_step1_desc"}}</div>
4
+
<div><h3 class="gt-dib">{{$.locale.Tr "step1"}}</h3> {{$.locale.Tr "repo.pulls.merge_instruction_step1_desc"}}</div>
5
5
<div class="ui secondary segment">
6
6
{{if eq $.Issue.PullRequest.Flow 0}}
7
7
<div>git checkout -b {{if ne $.Issue.PullRequest.HeadRepo.ID $.Issue.PullRequest.BaseRepo.ID}}{{$.Issue.PullRequest.HeadRepo.OwnerName}}-{{end}}{{$.Issue.PullRequest.HeadBranch}} {{$.Issue.PullRequest.BaseBranch}}</div>
···
10
10
<div>git fetch origin {{$.Issue.PullRequest.GetGitRefName}}:{{$.Issue.PullRequest.HeadBranch}}</div>
11
11
{{end}}
12
12
</div>
13
-
<div><h3 class="gt-di">{{$.locale.Tr "step2"}} </h3>{{$.locale.Tr "repo.pulls.merge_instruction_step2_desc"}}</div>
13
+
<div><h3 class="gt-dib">{{$.locale.Tr "step2"}}</h3> {{$.locale.Tr "repo.pulls.merge_instruction_step2_desc"}}</div>
14
14
<div class="ui secondary segment">
15
15
<div>git checkout {{$.Issue.PullRequest.BaseBranch}}</div>
16
16
<div>git merge --no-ff {{if ne $.Issue.PullRequest.HeadRepo.ID $.Issue.PullRequest.BaseRepo.ID}}{{$.Issue.PullRequest.HeadRepo.OwnerName}}-{{end}}{{$.Issue.PullRequest.HeadBranch}}</div>
+3
-3
templates/repo/release/list.tmpl
+3
-3
templates/repo/release/list.tmpl
···
8
8
{{range $idx, $release := .Releases}}
9
9
<li class="ui grid">
10
10
<div class="ui four wide column meta">
11
-
<a class="gt-db muted" href="{{if not .Sha1}}#{{else}}{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}{{end}}" rel="nofollow">{{svg "octicon-tag" 16 "gt-mr-2"}}{{.TagName}}</a>
11
+
<a class="muted" href="{{if not .Sha1}}#{{else}}{{$.RepoLink}}/src/tag/{{.TagName | PathEscapeSegments}}{{end}}" rel="nofollow">{{svg "octicon-tag" 16 "gt-mr-2"}}{{.TagName}}</a>
12
12
{{if .Sha1}}
13
-
<a class="gt-mono muted gt-db gt-mt-4 gt-pt-1" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "gt-mr-2"}}{{ShortSha .Sha1}}</a>
14
-
{{template "repo/branch_dropdown" dict "root" $ "release" . "ContainerClasses" "gt-mt-4"}}
13
+
<a class="muted gt-mono" href="{{$.RepoLink}}/src/commit/{{.Sha1}}" rel="nofollow">{{svg "octicon-git-commit" 16 "gt-mr-2"}}{{ShortSha .Sha1}}</a>
14
+
{{template "repo/branch_dropdown" dict "root" $ "release" .}}
15
15
{{end}}
16
16
</div>
17
17
<div class="ui twelve wide column detail">
+1
-1
templates/repo/settings/options.tmpl
+1
-1
templates/repo/settings/options.tmpl
···
116
116
<tbody>
117
117
<tr>
118
118
<td colspan="4">
119
-
<span class="text red gt-db gt-py-4 gt-border-secondary-bottom">{{$.locale.Tr "repo.settings.mirror_settings.direction.pull"}}: {{$.locale.Tr "error.occurred"}}</span>
119
+
<div class="text red gt-py-4 gt-border-secondary-bottom">{{$.locale.Tr "repo.settings.mirror_settings.direction.pull"}}: {{$.locale.Tr "error.occurred"}}</div>
120
120
</td>
121
121
</tr>
122
122
</tbody>
+4
-4
templates/user/settings/applications.tmpl
+4
-4
templates/user/settings/applications.tmpl
···
86
86
></scoped-access-token-selector>
87
87
</div>
88
88
</details>
89
-
<div id="scoped-access-warning" class="ui warning message center gt-db gt-hidden">
90
-
{{.locale.Tr "settings.at_least_one_permission"}}
91
-
</div>
92
89
<button id="scoped-access-submit" class="ui green button">
93
90
{{.locale.Tr "settings.generate_token"}}
94
91
</button>
95
-
</form>
92
+
</form>{{/* Fomantic ".ui.form .warning.message" is hidden by default, so put the warning message out of the form*/}}
93
+
<div id="scoped-access-warning" class="ui warning message center gt-hidden">
94
+
{{.locale.Tr "settings.at_least_one_permission"}}
95
+
</div>
96
96
</div>
97
97
98
98
{{if .EnableOAuth2}}
-4
web_src/css/helpers.css
-4
web_src/css/helpers.css
···
2
2
Gitea's tailwind-style CSS helper classes have `gt-` prefix.
3
3
Gitea's private styles use `g-` prefix.
4
4
*/
5
-
.gt-db { display: block !important; }
6
5
.gt-df { display: flex !important; }
7
-
.gt-di { display: inline !important; }
8
-
.gt-dif { display: inline-flex !important; }
9
6
.gt-dib { display: inline-block !important; }
10
7
.gt-ac { align-items: center !important; }
11
8
.gt-jc { justify-content: center !important; }
12
-
.gt-js { justify-content: flex-start !important; }
13
9
.gt-je { justify-content: flex-end !important; }
14
10
.gt-sb { justify-content: space-between !important; }
15
11
.gt-fc { flex-direction: column !important; }
+4
-1
web_src/css/repo/release-tag.css
+4
-1
web_src/css/repo/release-tag.css
+1
-1
web_src/js/components/DashboardRepoList.vue
+1
-1
web_src/js/components/DashboardRepoList.vue
···
17
17
<div class="ui attached segment repos-search">
18
18
<div class="ui fluid right action left icon input" :class="{loading: isLoading}">
19
19
<input type="search" spellcheck="false" maxlength="255" @input="changeReposFilter(reposFilter)" v-model="searchQuery" ref="search" @keydown="reposFilterKeyControl" :placeholder="textSearchRepos">
20
-
<i class="icon gt-df gt-ac gt-jc"><svg-icon name="octicon-search" :size="16"/></i>
20
+
<i class="icon"><svg-icon name="octicon-search" :size="16"/></i>
21
21
<div class="ui dropdown icon button" :title="textFilter">
22
22
<svg-icon name="octicon-filter" :size="16"/>
23
23
<div class="menu">