loading up the forgejo repo on tangled to test page performance
Refactor some CSS styles and simplify code (#26771)
Refactor some CSS styles and simplify code.
Some styles are not in use, remove them.
authored by
wxiaoguang
and committed by
GitHub
4803766f
a587d252
+60
-78
+2
-2
templates/code/searchresults.tmpl
+2
-2
templates/code/searchresults.tmpl
···
1
-
<div class="gt-df gt-ac gt-fw">
1
+
<div class="flex-text-block gt-fw">
2
2
{{range $term := .SearchResultLanguages}}
3
-
<a class="ui text-label gt-df gt-ac gt-mr-1 gt-my-1 {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{AppSubUrl}}{{if $.ContextUser}}/{{$.ContextUser.Name}}/-/code{{else}}/explore/code{{end}}?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}{{if ne $.queryType ""}}&t={{$.queryType}}{{end}}">
3
+
<a class="ui {{if eq $.Language $term.Language}}primary{{end}} basic label gt-m-0" href="{{AppSubUrl}}{{if $.ContextUser}}/{{$.ContextUser.Name}}/-/code{{else}}/explore/code{{end}}?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}{{if ne $.queryType ""}}&t={{$.queryType}}{{end}}">
4
4
<i class="color-icon gt-mr-3" style="background-color: {{$term.Color}}"></i>
5
5
{{$term.Language}}
6
6
<div class="detail">{{$term.Count}}</div>
+2
-6
templates/projects/view.tmpl
+2
-6
templates/projects/view.tmpl
···
43
43
<label for="new_project_column_color">{{ctx.Locale.Tr "repo.projects.column.color"}}</label>
44
44
<div class="color picker column">
45
45
<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_project_column_color_picker" name="color">
46
-
<div class="column precolors">
47
-
{{template "repo/issue/label_precolors"}}
48
-
</div>
46
+
{{template "repo/issue/label_precolors"}}
49
47
</div>
50
48
</div>
51
49
···
125
123
<label for="new_project_column_color">{{ctx.Locale.Tr "repo.projects.column.color"}}</label>
126
124
<div class="color picker column">
127
125
<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_project_column_color" name="color" value="{{.Color}}">
128
-
<div class="column precolors">
129
-
{{template "repo/issue/label_precolors"}}
130
-
</div>
126
+
{{template "repo/issue/label_precolors"}}
131
127
</div>
132
128
</div>
133
129
+3
-3
templates/repo/branch/list.tmpl
+3
-3
templates/repo/branch/list.tmpl
···
132
132
{{else}}
133
133
<a href="{{.LatestPullRequest.Issue.Link}}" class="gt-vm ref-issue">{{if not .LatestPullRequest.IsSameRepo}}{{.LatestPullRequest.BaseRepo.FullName}}{{end}}#{{.LatestPullRequest.Issue.Index}}</a>
134
134
{{if .LatestPullRequest.HasMerged}}
135
-
<a href="{{.LatestPullRequest.Issue.Link}}" class="ui text-label purple large label gt-vm">{{svg "octicon-git-merge" 16 "gt-mr-2"}}{{$.locale.Tr "repo.pulls.merged"}}</a>
135
+
<a href="{{.LatestPullRequest.Issue.Link}}" class="ui purple large label">{{svg "octicon-git-merge" 16 "gt-mr-2"}}{{$.locale.Tr "repo.pulls.merged"}}</a>
136
136
{{else if .LatestPullRequest.Issue.IsClosed}}
137
-
<a href="{{.LatestPullRequest.Issue.Link}}" class="ui text-label red large label gt-vm">{{svg "octicon-git-pull-request" 16 "gt-mr-2"}}{{$.locale.Tr "repo.issues.closed_title"}}</a>
137
+
<a href="{{.LatestPullRequest.Issue.Link}}" class="ui red large label">{{svg "octicon-git-pull-request" 16 "gt-mr-2"}}{{$.locale.Tr "repo.issues.closed_title"}}</a>
138
138
{{else}}
139
-
<a href="{{.LatestPullRequest.Issue.Link}}" class="ui text-label green large label gt-vm">{{svg "octicon-git-pull-request" 16 "gt-mr-2"}}{{$.locale.Tr "repo.issues.open_title"}}</a>
139
+
<a href="{{.LatestPullRequest.Issue.Link}}" class="ui green large label">{{svg "octicon-git-pull-request" 16 "gt-mr-2"}}{{$.locale.Tr "repo.issues.open_title"}}</a>
140
140
{{end}}
141
141
{{end}}
142
142
</td>
+14
-16
templates/repo/icon.tmpl
+14
-16
templates/repo/icon.tmpl
···
1
-
<div class="repo-icon">
2
-
{{$avatarLink := .RelAvatarLink}}
3
-
{{if $avatarLink}}
4
-
<img class="ui avatar gt-vm" src="{{$avatarLink}}" width="32" height="32" alt="{{.FullName}}">
5
-
{{else if $.IsTemplate}}
6
-
{{svg "octicon-repo-template" 32}}
7
-
{{else if $.IsPrivate}}
8
-
{{svg "octicon-lock" 32}}
9
-
{{else if $.IsMirror}}
10
-
{{svg "octicon-mirror" 32}}
11
-
{{else if $.IsFork}}
12
-
{{svg "octicon-repo-forked" 32}}
13
-
{{else}}
14
-
{{svg "octicon-repo" 32}}
15
-
{{end}}
16
-
</div>
1
+
{{$avatarLink := .RelAvatarLink}}
2
+
{{if $avatarLink}}
3
+
<img class="ui avatar gt-vm" src="{{$avatarLink}}" width="32" height="32" alt="{{.FullName}}">
4
+
{{else if $.IsTemplate}}
5
+
{{svg "octicon-repo-template" 32}}
6
+
{{else if $.IsPrivate}}
7
+
{{svg "octicon-lock" 32}}
8
+
{{else if $.IsMirror}}
9
+
{{svg "octicon-mirror" 32}}
10
+
{{else if $.IsFork}}
11
+
{{svg "octicon-repo-forked" 32}}
12
+
{{else}}
13
+
{{svg "octicon-repo" 32}}
14
+
{{end}}
+22
-16
templates/repo/issue/label_precolors.tmpl
+22
-16
templates/repo/issue/label_precolors.tmpl
···
1
-
<a class="color" style="background-color:#e11d21" data-color-hex="#e11d21"></a>
2
-
<a class="color" style="background-color:#eb6420" data-color-hex="#eb6420"></a>
3
-
<a class="color" style="background-color:#fbca04" data-color-hex="#fbca04"></a>
4
-
<a class="color" style="background-color:#009800" data-color-hex="#009800"></a>
5
-
<a class="color" style="background-color:#006b75" data-color-hex="#006b75"></a>
6
-
<a class="color" style="background-color:#207de5" data-color-hex="#207de5"></a>
7
-
<a class="color" style="background-color:#0052cc" data-color-hex="#0052cc"></a>
8
-
<a class="color" style="background-color:#5319e7" data-color-hex="#5319e7"></a>
9
-
<a class="color" style="background-color:#f6c6c7" data-color-hex="#f6c6c7"></a>
10
-
<a class="color" style="background-color:#fad8c7" data-color-hex="#fad8c7"></a>
11
-
<a class="color" style="background-color:#fef2c0" data-color-hex="#fef2c0"></a>
12
-
<a class="color" style="background-color:#bfe5bf" data-color-hex="#bfe5bf"></a>
13
-
<a class="color" style="background-color:#bfdadc" data-color-hex="#bfdadc"></a>
14
-
<a class="color" style="background-color:#c7def8" data-color-hex="#c7def8"></a>
15
-
<a class="color" style="background-color:#bfd4f2" data-color-hex="#bfd4f2"></a>
16
-
<a class="color" style="background-color:#d4c5f9" data-color-hex="#d4c5f9"></a>
1
+
<div class="precolors">
2
+
<div class="gt-df">
3
+
<a class="color" style="background-color:#e11d21" data-color-hex="#e11d21"></a>
4
+
<a class="color" style="background-color:#eb6420" data-color-hex="#eb6420"></a>
5
+
<a class="color" style="background-color:#fbca04" data-color-hex="#fbca04"></a>
6
+
<a class="color" style="background-color:#009800" data-color-hex="#009800"></a>
7
+
<a class="color" style="background-color:#006b75" data-color-hex="#006b75"></a>
8
+
<a class="color" style="background-color:#207de5" data-color-hex="#207de5"></a>
9
+
<a class="color" style="background-color:#0052cc" data-color-hex="#0052cc"></a>
10
+
<a class="color" style="background-color:#5319e7" data-color-hex="#5319e7"></a>
11
+
</div>
12
+
<div class="gt-df">
13
+
<a class="color" style="background-color:#f6c6c7" data-color-hex="#f6c6c7"></a>
14
+
<a class="color" style="background-color:#fad8c7" data-color-hex="#fad8c7"></a>
15
+
<a class="color" style="background-color:#fef2c0" data-color-hex="#fef2c0"></a>
16
+
<a class="color" style="background-color:#bfe5bf" data-color-hex="#bfe5bf"></a>
17
+
<a class="color" style="background-color:#bfdadc" data-color-hex="#bfdadc"></a>
18
+
<a class="color" style="background-color:#c7def8" data-color-hex="#c7def8"></a>
19
+
<a class="color" style="background-color:#bfd4f2" data-color-hex="#bfd4f2"></a>
20
+
<a class="color" style="background-color:#d4c5f9" data-color-hex="#d4c5f9"></a>
21
+
</div>
22
+
</div>
+1
-3
templates/repo/issue/labels/edit_delete_label.tmpl
+1
-3
templates/repo/issue/labels/edit_delete_label.tmpl
···
54
54
<label for="color">{{$.locale.Tr "repo.issues.label_color"}}</label>
55
55
<div class="color picker column">
56
56
<input class="color-picker" name="color" value="#70c24a" required maxlength="7">
57
-
<div class="column precolors">
58
-
{{template "repo/issue/label_precolors"}}
59
-
</div>
57
+
{{template "repo/issue/label_precolors"}}
60
58
</div>
61
59
</div>
62
60
</form>
+1
-3
templates/repo/issue/labels/label_new.tmpl
+1
-3
templates/repo/issue/labels/label_new.tmpl
···
29
29
<label for="color">{{$.locale.Tr "repo.issues.label_color"}}</label>
30
30
<div class="color picker column">
31
31
<input class="color-picker" name="color" value="#70c24a" required maxlength="7">
32
-
<div class="column precolors">
33
-
{{template "repo/issue/label_precolors"}}
34
-
</div>
32
+
{{template "repo/issue/label_precolors"}}
35
33
</div>
36
34
</div>
37
35
</form>
+2
-2
templates/repo/search.tmpl
+2
-2
templates/repo/search.tmpl
···
27
27
{{.locale.Tr "repo.search.results" (.Keyword|Escape) (.RepoLink|Escape) (.RepoName|Escape) | Str2html}}
28
28
</h3>
29
29
{{if .SearchResults}}
30
-
<div class="gt-df gt-ac gt-fw">
30
+
<div class="flex-text-block gt-fw">
31
31
{{range $term := .SearchResultLanguages}}
32
-
<a class="ui text-label gt-df gt-ac gt-mr-1 gt-my-1 {{if eq $.Language $term.Language}}primary {{end}}basic label" href="{{$.SourcePath}}/search?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}{{if ne $.queryType ""}}&t={{$.queryType}}{{end}}">
32
+
<a class="ui {{if eq $.Language $term.Language}}primary{{end}} basic label gt-m-0" href="{{$.SourcePath}}/search?q={{$.Keyword}}{{if ne $.Language $term.Language}}&l={{$term.Language}}{{end}}{{if ne $.queryType ""}}&t={{$.queryType}}{{end}}">
33
33
<i class="color-icon gt-mr-3" style="background-color: {{$term.Color}}"></i>
34
34
{{$term.Language}}
35
35
<div class="detail">{{$term.Count}}</div>
+13
-27
web_src/css/base.css
+13
-27
web_src/css/base.css
···
474
474
475
475
/* fix Fomantic's line-height cutting off "g" on Windows Chrome with Segoe UI */
476
476
.ui.input > input {
477
-
line-height: 1.3;
477
+
line-height: var(--line-height-default);
478
478
}
479
479
480
480
.ui.input.focus > input,
···
951
951
filter: saturate(2);
952
952
}
953
953
954
+
/* TODO: use gt-word-break instead */
954
955
.dont-break-out {
955
956
overflow-wrap: break-word;
956
957
word-wrap: break-word;
···
1456
1457
border-color: var(--color-gold) !important;
1457
1458
}
1458
1459
1459
-
.ui .branch-tag-choice {
1460
-
line-height: 20px;
1461
-
}
1462
-
1463
1460
@media (max-width: 767.98px) {
1464
1461
.ui.pagination.menu .item:not(.active,.navigation),
1465
1462
.ui.pagination.menu .item.navigation span.navigation_label {
···
1640
1637
margin-left: 0.5rem;
1641
1638
}
1642
1639
1643
-
.repo-icon {
1644
-
display: inline-block;
1645
-
}
1646
-
1647
1640
.activity-bar-graph {
1648
1641
background-color: var(--color-primary);
1649
1642
color: var(--color-primary-contrast);
···
1679
1672
1680
1673
i.icons .icon:first-child {
1681
1674
margin-right: 0;
1682
-
}
1683
-
1684
-
i.icon.centerlock {
1685
-
top: 1em;
1686
1675
}
1687
1676
1688
1677
.ui.label {
···
1879
1868
width: 100%;
1880
1869
}
1881
1870
1882
-
.octicon-tiny {
1883
-
font-size: 0.85714286rem;
1884
-
}
1885
-
1886
1871
.ui.primary.label,
1887
1872
.ui.primary.labels .label,
1888
1873
.ui.ui.ui.primary.label {
···
2037
2022
margin-left: 0;
2038
2023
}
2039
2024
2025
+
/* TODO: replace it with gt-invisible */
2040
2026
.invisible {
2041
2027
visibility: hidden;
2042
2028
}
···
2123
2109
box-shadow: 0 0 0 1px var(--color-secondary) inset;
2124
2110
}
2125
2111
2126
-
.text-label {
2127
-
display: inline-flex !important;
2128
-
align-items: center !important;
2129
-
}
2130
-
2131
2112
.emoji,
2132
2113
.reaction {
2133
2114
font-size: 1.25em;
···
2241
2222
}
2242
2223
2243
2224
.precolors {
2244
-
padding-left: 0 !important;
2245
-
padding-right: 0 !important;
2246
-
margin: 3px 10px auto !important;
2247
-
width: 120px !important;
2225
+
display: flex;
2226
+
flex-direction: column;
2227
+
justify-content: center;
2228
+
margin-left: 1em;
2248
2229
}
2249
2230
2250
2231
.precolors .color {
2251
-
float: left;
2232
+
display: inline-block;
2252
2233
width: 15px;
2253
2234
height: 15px;
2254
2235
}
···
2303
2284
2304
2285
.ui.ui.button,
2305
2286
.ui.ui.dropdown,
2287
+
.ui.ui.label,
2306
2288
.flex-items-inline > .item,
2307
2289
.flex-text-inline {
2308
2290
display: inline-flex;
···
2317
2299
2318
2300
.ui.dropdown .ui.label .svg {
2319
2301
vertical-align: middle;
2302
+
}
2303
+
2304
+
.ui.ui.circular.label {
2305
+
justify-content: center;
2320
2306
}
2321
2307
2322
2308
.ui.ui.labeled.button {