Skip to content

Commit 4803766

Browse files
wxiaoguangwxiaoguang
authored
Refactor some CSS styles and simplify code (#26771)
Refactor some CSS styles and simplify code. Some styles are not in use, remove them.
1 parent a587d25 commit 4803766

File tree

9 files changed

+60
-78
lines changed

9 files changed

+60
-78
lines changed

‎templates/code/searchresults.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<div class="gt-df gt-ac gt-fw">
1+
<div class="flex-text-block gt-fw">
22
{{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}}">
44
<i class="color-icon gt-mr-3" style="background-color: {{$term.Color}}"></i>
55
{{$term.Language}}
66
<div class="detail">{{$term.Count}}</div>

‎templates/projects/view.tmpl

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,7 @@
4343
<label for="new_project_column_color">{{ctx.Locale.Tr "repo.projects.column.color"}}</label>
4444
<div class="color picker column">
4545
<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"}}
4947
</div>
5048
</div>
5149

@@ -125,9 +123,7 @@
125123
<label for="new_project_column_color">{{ctx.Locale.Tr "repo.projects.column.color"}}</label>
126124
<div class="color picker column">
127125
<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"}}
131127
</div>
132128
</div>
133129

‎templates/repo/branch/list.tmpl

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -132,11 +132,11 @@
132132
{{else}}
133133
<a href="{{.LatestPullRequest.Issue.Link}}" class="gt-vm ref-issue">{{if not .LatestPullRequest.IsSameRepo}}{{.LatestPullRequest.BaseRepo.FullName}}{{end}}#{{.LatestPullRequest.Issue.Index}}</a>
134134
{{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>
136136
{{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>
138138
{{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>
140140
{{end}}
141141
{{end}}
142142
</td>

‎templates/repo/icon.tmpl

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
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}}

‎templates/repo/issue/label_precolors.tmpl

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
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>

‎templates/repo/issue/labels/edit_delete_label.tmpl

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,7 @@
5454
<label for="color">{{$.locale.Tr "repo.issues.label_color"}}</label>
5555
<div class="color picker column">
5656
<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"}}
6058
</div>
6159
</div>
6260
</form>

‎templates/repo/issue/labels/label_new.tmpl

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,9 +29,7 @@
2929
<label for="color">{{$.locale.Tr "repo.issues.label_color"}}</label>
3030
<div class="color picker column">
3131
<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"}}
3533
</div>
3634
</div>
3735
</form>

‎templates/repo/search.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,9 @@
2727
{{.locale.Tr "repo.search.results" (.Keyword|Escape) (.RepoLink|Escape) (.RepoName|Escape) | Str2html}}
2828
</h3>
2929
{{if .SearchResults}}
30-
<div class="gt-df gt-ac gt-fw">
30+
<div class="flex-text-block gt-fw">
3131
{{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}}">
3333
<i class="color-icon gt-mr-3" style="background-color: {{$term.Color}}"></i>
3434
{{$term.Language}}
3535
<div class="detail">{{$term.Count}}</div>

‎web_src/css/base.css

Lines changed: 13 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -474,7 +474,7 @@ a.label,
474474

475475
/* fix Fomantic's line-height cutting off "g" on Windows Chrome with Segoe UI */
476476
.ui.input > input {
477-
line-height: 1.3;
477+
line-height: var(--line-height-default);
478478
}
479479

480480
.ui.input.focus > input,
@@ -951,6 +951,7 @@ img.ui.avatar,
951951
filter: saturate(2);
952952
}
953953

954+
/* TODO: use gt-word-break instead */
954955
.dont-break-out {
955956
overflow-wrap: break-word;
956957
word-wrap: break-word;
@@ -1456,10 +1457,6 @@ img.ui.avatar,
14561457
border-color: var(--color-gold) !important;
14571458
}
14581459

1459-
.ui .branch-tag-choice {
1460-
line-height: 20px;
1461-
}
1462-
14631460
@media (max-width: 767.98px) {
14641461
.ui.pagination.menu .item:not(.active,.navigation),
14651462
.ui.pagination.menu .item.navigation span.navigation_label {
@@ -1640,10 +1637,6 @@ img.ui.avatar,
16401637
margin-left: 0.5rem;
16411638
}
16421639

1643-
.repo-icon {
1644-
display: inline-block;
1645-
}
1646-
16471640
.activity-bar-graph {
16481641
background-color: var(--color-primary);
16491642
color: var(--color-primary-contrast);
@@ -1681,10 +1674,6 @@ i.icons .icon:first-child {
16811674
margin-right: 0;
16821675
}
16831676

1684-
i.icon.centerlock {
1685-
top: 1em;
1686-
}
1687-
16881677
.ui.label {
16891678
padding: 0.3em 0.5em;
16901679
transition: none;
@@ -1879,10 +1868,6 @@ a.ui.active.label:hover {
18791868
width: 100%;
18801869
}
18811870

1882-
.octicon-tiny {
1883-
font-size: 0.85714286rem;
1884-
}
1885-
18861871
.ui.primary.label,
18871872
.ui.primary.labels .label,
18881873
.ui.ui.ui.primary.label {
@@ -2037,6 +2022,7 @@ a.ui.basic.label:hover {
20372022
margin-left: 0;
20382023
}
20392024

2025+
/* TODO: replace it with gt-invisible */
20402026
.invisible {
20412027
visibility: hidden;
20422028
}
@@ -2123,11 +2109,6 @@ table th[data-sortt-desc] .svg {
21232109
box-shadow: 0 0 0 1px var(--color-secondary) inset;
21242110
}
21252111

2126-
.text-label {
2127-
display: inline-flex !important;
2128-
align-items: center !important;
2129-
}
2130-
21312112
.emoji,
21322113
.reaction {
21332114
font-size: 1.25em;
@@ -2241,14 +2222,14 @@ table th[data-sortt-desc] .svg {
22412222
}
22422223

22432224
.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;
22482229
}
22492230

22502231
.precolors .color {
2251-
float: left;
2232+
display: inline-block;
22522233
width: 15px;
22532234
height: 15px;
22542235
}
@@ -2303,6 +2284,7 @@ table th[data-sortt-desc] .svg {
23032284

23042285
.ui.ui.button,
23052286
.ui.ui.dropdown,
2287+
.ui.ui.label,
23062288
.flex-items-inline > .item,
23072289
.flex-text-inline {
23082290
display: inline-flex;
@@ -2319,6 +2301,10 @@ table th[data-sortt-desc] .svg {
23192301
vertical-align: middle;
23202302
}
23212303

2304+
.ui.ui.circular.label {
2305+
justify-content: center;
2306+
}
2307+
23222308
.ui.ui.labeled.button {
23232309
gap: 0;
23242310
align-items: stretch;

0 commit comments

Comments
 (0)