Skip to content

Commit bfa160f

Browse files
wxiaoguangwxiaoguang
authored
Refactor repo header/list (#29969)
1. Use general "mobile-only" and "not-mobile" CSS styles, remove some`@media (max-width: 767.98px)` tricks 2. Use `CountFmt` for repo list, just like the repo header (and it matches GitHub, to avoid big numbers bloat the page)
1 parent d6fed9a commit bfa160f

File tree

9 files changed

+51
-65
lines changed

9 files changed

+51
-65
lines changed

‎options/locale/locale_en-US.ini

+1-3
Original file line numberDiff line numberDiff line change
@@ -1063,6 +1063,7 @@ watchers = Watchers
10631063
stargazers = Stargazers
10641064
stars_remove_warning = This will remove all stars from this repository.
10651065
forks = Forks
1066+
stars = Stars
10661067
reactions_more = and %d more
10671068
unit_disabled = The site administrator has disabled this repository section.
10681069
language_other = Other
@@ -2966,9 +2967,6 @@ repos.unadopted.no_more = No more unadopted repositories found
29662967
repos.owner = Owner
29672968
repos.name = Name
29682969
repos.private = Private
2969-
repos.watches = Watches
2970-
repos.stars = Stars
2971-
repos.forks = Forks
29722970
repos.issues = Issues
29732971
repos.size = Size
29742972
repos.lfs_size = LFS Size

‎templates/admin/repo/list.tmpl

+3-3
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@
1919
{{ctx.Locale.Tr "admin.repos.name"}}
2020
{{SortArrow "alphabetically" "reversealphabetically" $.SortType false}}
2121
</th>
22-
<th>{{ctx.Locale.Tr "admin.repos.watches"}}</th>
22+
<th>{{ctx.Locale.Tr "repo.watchers"}}</th>
2323
<th data-sortt-asc="moststars" data-sortt-desc="feweststars">
24-
{{ctx.Locale.Tr "admin.repos.stars"}}
24+
{{ctx.Locale.Tr "repo.stars"}}
2525
{{SortArrow "moststars" "feweststars" $.SortType false}}
2626
</th>
2727
<th data-sortt-asc="mostforks" data-sortt-desc="fewestforks">
28-
{{ctx.Locale.Tr "admin.repos.forks"}}
28+
{{ctx.Locale.Tr "repo.forks"}}
2929
{{SortArrow "mostforks" "fewestforks" $.SortType false}}
3030
</th>
3131
<th>{{ctx.Locale.Tr "admin.repos.issues"}}</th>

‎templates/base/head_navbar.tmpl

+5-5
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</a>
1212

1313
<!-- mobile right menu, it must be here because in mobile view, each item is a flex column, the first item is a full row column -->
14-
<div class="ui secondary menu item navbar-mobile-right">
14+
<div class="ui secondary menu item navbar-mobile-right only-mobile">
1515
{{if .IsSigned}}
1616
<a id="mobile-notifications-icon" class="item tw-w-auto gt-p-3" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
1717
<div class="tw-relative">
@@ -58,7 +58,7 @@
5858
<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
5959
<span class="text gt-df gt-ac">
6060
{{ctx.AvatarUtils.Avatar .SignedUser 24 "gt-mr-2"}}
61-
<span class="mobile-only gt-ml-3">{{.SignedUser.Name}}</span>
61+
<span class="only-mobile gt-ml-3">{{.SignedUser.Name}}</span>
6262
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
6363
</span>
6464
<div class="menu user-menu">
@@ -80,7 +80,7 @@
8080
{{svg "octicon-stopwatch"}}
8181
<span class="header-stopwatch-dot"></span>
8282
</div>
83-
<span class="mobile-only gt-ml-3">{{ctx.Locale.Tr "active_stopwatch"}}</span>
83+
<span class="only-mobile gt-ml-3">{{ctx.Locale.Tr "active_stopwatch"}}</span>
8484
</a>
8585
<div class="active-stopwatch-popup item tippy-target gt-p-3">
8686
<div class="gt-df gt-ac">
@@ -122,7 +122,7 @@
122122
<span class="text">
123123
{{svg "octicon-plus"}}
124124
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
125-
<span class="mobile-only">{{ctx.Locale.Tr "create_new"}}</span>
125+
<span class="only-mobile">{{ctx.Locale.Tr "create_new"}}</span>
126126
</span>
127127
<div class="menu">
128128
<a class="item" href="{{AppSubUrl}}/repo/create">
@@ -144,7 +144,7 @@
144144
<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
145145
<span class="text gt-df gt-ac">
146146
{{ctx.AvatarUtils.Avatar .SignedUser 24 "gt-mr-2"}}
147-
<span class="mobile-only gt-ml-3">{{.SignedUser.Name}}</span>
147+
<span class="only-mobile gt-ml-3">{{.SignedUser.Name}}</span>
148148
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
149149
</span>
150150
<div class="menu user-menu">

‎templates/explore/repo_list.tmpl

+12-5
Original file line numberDiff line numberDiff line change
@@ -30,16 +30,23 @@
3030
{{end}}
3131
</span>
3232
</div>
33-
<div class="flex-item-trailing">
33+
<div class="flex-item-trailing muted-links">
3434
{{if .PrimaryLanguage}}
35-
<a class="muted" href="?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}{{if $.TabName}}&tab={{$.TabName}}{{end}}">
36-
<span class="flex-text-inline"><i class="color-icon gt-mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>{{.PrimaryLanguage.Language}}</span>
35+
<a class="flex-text-inline" href="?q={{$.Keyword}}&sort={{$.SortType}}&language={{.PrimaryLanguage.Language}}{{if $.TabName}}&tab={{$.TabName}}{{end}}">
36+
<i class="color-icon gt-mr-3" style="background-color: {{.PrimaryLanguage.Color}}"></i>
37+
{{.PrimaryLanguage.Language}}
3738
</a>
3839
{{end}}
3940
{{if not $.DisableStars}}
40-
<a class="text grey flex-text-inline" href="{{.Link}}/stars">{{svg "octicon-star" 16}}{{.NumStars}}</a>
41+
<a class="flex-text-inline" href="{{.Link}}/stars">
42+
<span aria-label="{{ctx.Locale.Tr "repo.stars"}}">{{svg "octicon-star" 16}}</span>
43+
<span {{if ge .NumStars 1000}}data-tooltip-content="{{.NumStars}}"{{end}}>{{CountFmt .NumStars}}</span>
44+
</a>
4145
{{end}}
42-
<a class="text grey flex-text-inline" href="{{.Link}}/forks">{{svg "octicon-git-branch" 16}}{{.NumForks}}</a>
46+
<a class="flex-text-inline" href="{{.Link}}/forks">
47+
<span aria-label="{{ctx.Locale.Tr "repo.forks"}}">{{svg "octicon-git-branch" 16}}</span>
48+
<span {{if ge .NumForks 1000}}data-tooltip-content="{{.NumForks}}"{{end}}>{{CountFmt .NumForks}}</span>
49+
</a>
4350
</div>
4451
</div>
4552
{{$description := .DescriptionHTML $.Context}}

‎templates/repo/header.tmpl

+16-14
Original file line numberDiff line numberDiff line change
@@ -3,29 +3,31 @@
33
<div class="ui container">
44
<div class="repo-header">
55
<div class="flex-item gt-ac">
6-
<div class="flex-item-leading">{{template "repo/icon" .}}</div>
6+
<div class="flex-item-leading">
7+
{{template "repo/icon" .}}
8+
</div>
79
<div class="flex-item-main">
810
<div class="flex-item-title gt-font-18">
9-
<a class="muted gt-font-normal" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>/
10-
<a class="muted" href="{{$.RepoLink}}">{{.Name}}</a></div>
11+
<a class="muted gt-font-normal" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>/<a class="muted" href="{{$.RepoLink}}">{{.Name}}</a>
12+
</div>
1113
</div>
1214
<div class="flex-item-trailing">
1315
{{if .IsArchived}}
14-
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.archived"}}</span>
15-
<div class="repo-icon" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.archived"}}">{{svg "octicon-archive" 18}}</div>
16+
<span class="ui basic label not-mobile">{{ctx.Locale.Tr "repo.desc.archived"}}</span>
17+
<div class="repo-icon only-mobile" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.archived"}}">{{svg "octicon-archive" 18}}</div>
1618
{{end}}
1719
{{if .IsPrivate}}
18-
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.private"}}</span>
19-
<div class="repo-icon" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.private"}}">{{svg "octicon-lock" 18}}</div>
20+
<span class="ui basic label not-mobile">{{ctx.Locale.Tr "repo.desc.private"}}</span>
21+
<div class="repo-icon only-mobile" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.private"}}">{{svg "octicon-lock" 18}}</div>
2022
{{else}}
2123
{{if .Owner.Visibility.IsPrivate}}
22-
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.internal"}}</span>
23-
<div class="repo-icon" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.internal"}}">{{svg "octicon-shield-lock" 18}}</div>
24+
<span class="ui basic label not-mobile">{{ctx.Locale.Tr "repo.desc.internal"}}</span>
25+
<div class="repo-icon only-mobile" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.internal"}}">{{svg "octicon-shield-lock" 18}}</div>
2426
{{end}}
2527
{{end}}
2628
{{if .IsTemplate}}
27-
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.template"}}</span>
28-
<div class="repo-icon" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.template"}}">{{svg "octicon-repo-template" 18}}</div>
29+
<span class="ui basic label not-mobile">{{ctx.Locale.Tr "repo.desc.template"}}</span>
30+
<div class="repo-icon only-mobile" data-tooltip-content="{{ctx.Locale.Tr "repo.desc.template"}}">{{svg "octicon-repo-template" 18}}</div>
2931
{{end}}
3032
{{if eq .ObjectFormatName "sha256"}}
3133
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.sha256"}}</span>
@@ -76,18 +78,18 @@
7678
<a class="ui compact{{if $.ShowForkModal}} show-modal{{end}} small basic button"
7779
{{if not $.CanSignedUserFork}}
7880
{{if gt (len $.UserAndOrgForks) 1}}
79-
data-modal="#fork-repo-modal"
81+
href="#" data-modal="#fork-repo-modal"
8082
{{else if eq (len $.UserAndOrgForks) 1}}
8183
href="{{AppSubUrl}}/{{(index $.UserAndOrgForks 0).FullName}}"
8284
{{/*else is not required here, because the button shouldn't link to any site if you can't create a fork*/}}
8385
{{end}}
8486
{{else if not $.UserAndOrgForks}}
8587
href="{{$.RepoLink}}/fork"
8688
{{else}}
87-
data-modal="#fork-repo-modal"
89+
href="#" data-modal="#fork-repo-modal"
8890
{{end}}
8991
>
90-
{{svg "octicon-repo-forked"}}<span class="text">{{ctx.Locale.Tr "repo.fork"}}</span>
92+
{{svg "octicon-repo-forked"}}<span class="text not-mobile">{{ctx.Locale.Tr "repo.fork"}}</span>
9193
</a>
9294
<div class="ui small modal" id="fork-repo-modal">
9395
<div class="header">

‎web_src/css/base.css

-7
Original file line numberDiff line numberDiff line change
@@ -1252,13 +1252,6 @@ strong.attention-caution, svg.attention-caution {
12521252
text-align: center;
12531253
}
12541254

1255-
@media (max-width: 767.98px) {
1256-
/* double selector so it wins over .gt-df etc */
1257-
.not-mobile.not-mobile {
1258-
display: none !important;
1259-
}
1260-
}
1261-
12621255
overflow-menu {
12631256
margin-bottom: 15px !important;
12641257
border-bottom: 1px solid var(--color-secondary) !important;

‎web_src/css/helpers.css

+12
Original file line numberDiff line numberDiff line change
@@ -199,3 +199,15 @@ only use:
199199
* showElem/hideElem/toggleElem functions in "utils/dom.js"
200200
*/
201201
.gt-hidden.gt-hidden { display: none !important; }
202+
203+
@media (max-width: 767.98px) {
204+
/* double selector so it wins over .tw-flex (old .gt-df) etc */
205+
.not-mobile.not-mobile {
206+
display: none !important;
207+
}
208+
}
209+
@media (min-width: 767.98px) {
210+
.only-mobile.only-mobile {
211+
display: none !important;
212+
}
213+
}

‎web_src/css/modules/navbar.css

-7
Original file line numberDiff line numberDiff line change
@@ -108,13 +108,6 @@
108108
}
109109
}
110110

111-
@media (min-width: 767.98px) {
112-
#navbar .navbar-mobile-right,
113-
#navbar .mobile-only {
114-
display: none;
115-
}
116-
}
117-
118111
#navbar a.item .notification_count {
119112
color: var(--color-nav-bg);
120113
padding: 0 3.75px;

‎web_src/css/repo/header.css

+2-21
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
.fork-flag {
1+
.header-wrapper .fork-flag {
22
margin-top: 0.5rem;
33
font-size: 12px;
44
}
@@ -15,22 +15,15 @@
1515
padding: 0;
1616
}
1717

18-
.repo-header .btn.interact-bg:hover {
19-
text-decoration: none;
20-
}
21-
2218
.repo-header .flex-item-main {
19+
flex: 0;
2320
flex-basis: unset;
2421
}
2522

2623
.repo-header .flex-item-trailing {
2724
flex-wrap: nowrap;
2825
}
2926

30-
.repo-header .flex-item-trailing .repo-icon {
31-
display: none;
32-
}
33-
3427
.repo-buttons {
3528
align-items: center;
3629
display: flex;
@@ -75,15 +68,3 @@
7568
padding-top: 12px;
7669
background-color: var(--color-header-wrapper);
7770
}
78-
79-
@media (max-width: 767.98px) {
80-
.repo-header .flex-item {
81-
flex-grow: 1;
82-
}
83-
.repo-header .flex-item-trailing .label {
84-
display: none;
85-
}
86-
.repo-header .flex-item-trailing .repo-icon {
87-
display: initial;
88-
}
89-
}

0 commit comments

Comments
 (0)