loading up the forgejo repo on tangled to test page performance
Merge pull request '[port] gitea#29969: repo header/list refactor' (#2839) from algernon/forgejo:gitea/port/29969/refactor-repo-header-list into forgejo
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/2839
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
+57
-80
+1
-3
options/locale/locale_en-US.ini
+1
-3
options/locale/locale_en-US.ini
···
1083
1083
stargazers = Stargazers
1084
1084
stars_remove_warning = This will remove all stars from this repository.
1085
1085
forks = Forks
1086
+
stars = Stars
1086
1087
reactions_more = and %d more
1087
1088
unit_disabled = The site administrator has disabled this repository section.
1088
1089
language_other = Other
···
3008
3009
repos.owner = Owner
3009
3010
repos.name = Name
3010
3011
repos.private = Private
3011
-
repos.watches = Watches
3012
-
repos.stars = Stars
3013
-
repos.forks = Forks
3014
3012
repos.issues = Issues
3015
3013
repos.size = Size
3016
3014
repos.lfs_size = LFS Size
+3
-3
templates/admin/repo/list.tmpl
+3
-3
templates/admin/repo/list.tmpl
···
19
19
{{ctx.Locale.Tr "admin.repos.name"}}
20
20
{{SortArrow "alphabetically" "reversealphabetically" $.SortType false}}
21
21
</th>
22
-
<th>{{ctx.Locale.Tr "admin.repos.watches"}}</th>
22
+
<th>{{ctx.Locale.Tr "repo.watchers"}}</th>
23
23
<th data-sortt-asc="moststars" data-sortt-desc="feweststars">
24
-
{{ctx.Locale.Tr "admin.repos.stars"}}
24
+
{{ctx.Locale.Tr "repo.stars"}}
25
25
{{SortArrow "moststars" "feweststars" $.SortType false}}
26
26
</th>
27
27
<th data-sortt-asc="mostforks" data-sortt-desc="fewestforks">
28
-
{{ctx.Locale.Tr "admin.repos.forks"}}
28
+
{{ctx.Locale.Tr "repo.forks"}}
29
29
{{SortArrow "mostforks" "fewestforks" $.SortType false}}
30
30
</th>
31
31
<th>{{ctx.Locale.Tr "admin.repos.issues"}}</th>
+12
-5
templates/explore/repo_list.tmpl
+12
-5
templates/explore/repo_list.tmpl
···
30
30
{{end}}
31
31
</span>
32
32
</div>
33
-
<div class="flex-item-trailing">
33
+
<div class="flex-item-trailing muted-links">
34
34
{{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}}
37
38
</a>
38
39
{{end}}
39
40
{{if not $.DisableStars}}
40
-
<a class="text grey flex-text-inline" href="{{.Link}}/stars" aria-label="{{ctx.Locale.TrN .NumStars "explore.stars_one" "explore.stars_few" .NumStars}}">{{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>
41
45
{{end}}
42
46
{{if not $.DisableForks}}
43
-
<a class="text grey flex-text-inline" href="{{.Link}}/forks" aria-label="{{ctx.Locale.TrN .NumForks "explore.forks_one" "explore.forks_few" .NumForks}}">{{svg "octicon-git-branch" 16}}{{.NumForks}}</a>
47
+
<a class="flex-text-inline" href="{{.Link}}/forks">
48
+
<span aria-label="{{ctx.Locale.Tr "repo.forks"}}">{{svg "octicon-git-branch" 16}}</span>
49
+
<span {{if ge .NumForks 1000}}data-tooltip-content="{{.NumForks}}"{{end}}>{{CountFmt .NumForks}}</span>
50
+
</a>
44
51
{{end}}
45
52
</div>
46
53
</div>
+15
-13
templates/repo/header.tmpl
+15
-13
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 tw-items-center">
6
-
<div class="flex-item-leading">{{template "repo/icon" .}}</div>
5
+
<div class="flex-item gt-ac">
6
+
<div class="flex-item-leading">
7
+
{{template "repo/icon" .}}
8
+
</div>
7
9
<div class="flex-item-main">
8
-
<div class="flex-item-title tw-text-18">
9
-
<a class="muted tw-font-normal" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>/
10
-
<a class="muted" href="{{$.RepoLink}}">{{.Name}}</a></div>
10
+
<div class="flex-item-title gt-font-18">
11
+
<a class="muted gt-font-normal" href="{{.Owner.HomeLink}}">{{.Owner.Name}}</a>/<a class="muted" href="{{$.RepoLink}}">{{.Name}}</a>
12
+
</div>
11
13
</div>
12
14
<div class="flex-item-trailing">
13
15
{{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>
16
18
{{end}}
17
19
{{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>
20
22
{{else}}
21
23
{{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>
24
26
{{end}}
25
27
{{end}}
26
28
{{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>
29
31
{{end}}
30
32
{{if eq .ObjectFormatName "sha256"}}
31
33
<span class="ui basic label">{{ctx.Locale.Tr "repo.desc.sha256"}}</span>
+3
-3
templates/repo/header_fork.tmpl
+3
-3
templates/repo/header_fork.tmpl
···
13
13
<a class="ui compact{{if $.ShowForkModal}} show-modal{{end}} small basic button"
14
14
{{if not $.CanSignedUserFork}}
15
15
{{if gt (len $.UserAndOrgForks) 1}}
16
-
data-modal="#fork-repo-modal"
16
+
href="#" data-modal="#fork-repo-modal"
17
17
{{else if eq (len $.UserAndOrgForks) 1}}
18
18
href="{{AppSubUrl}}/{{(index $.UserAndOrgForks 0).FullName}}"
19
19
{{/*else is not required here, because the button shouldn't link to any site if you can't create a fork*/}}
···
21
21
{{else if not $.UserAndOrgForks}}
22
22
href="{{$.RepoLink}}/fork"
23
23
{{else}}
24
-
data-modal="#fork-repo-modal"
24
+
href="#" data-modal="#fork-repo-modal"
25
25
{{end}}
26
26
>
27
-
{{svg "octicon-repo-forked"}}<span class="text">{{ctx.Locale.Tr "repo.fork"}}</span>
27
+
{{svg "octicon-repo-forked"}}<span class="text not-mobile">{{ctx.Locale.Tr "repo.fork"}}</span>
28
28
</a>
29
29
<div class="ui small modal" id="fork-repo-modal">
30
30
<div class="header">
+2
-2
templates/repo/star_unstar.tmpl
+2
-2
templates/repo/star_unstar.tmpl
···
2
2
<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.star_guest_user"}}"{{end}}>
3
3
<button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}}>
4
4
{{if $.IsStaringRepo}}
5
-
{{svg "octicon-star-fill"}}<span class="text">{{ctx.Locale.Tr "repo.unstar"}}</span>
5
+
{{svg "octicon-star-fill"}}<span class="text not-mobile">{{ctx.Locale.Tr "repo.unstar"}}</span>
6
6
{{else}}
7
-
{{svg "octicon-star"}}<span class="text">{{ctx.Locale.Tr "repo.star"}}</span>
7
+
{{svg "octicon-star"}}<span class="text not-mobile">{{ctx.Locale.Tr "repo.star"}}</span>
8
8
{{end}}
9
9
</button>
10
10
<a hx-boost="false" class="ui basic label" href="{{$.RepoLink}}/stars">
+2
-2
templates/repo/watch_unwatch.tmpl
+2
-2
templates/repo/watch_unwatch.tmpl
···
2
2
<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.watch_guest_user"}}"{{end}}>
3
3
<button type="submit" class="ui compact small basic button"{{if not $.IsSigned}} disabled{{end}}>
4
4
{{if $.IsWatchingRepo}}
5
-
{{svg "octicon-eye-closed" 16}}<span class="text">{{ctx.Locale.Tr "repo.unwatch"}}</span>
5
+
{{svg "octicon-eye-closed" 16}}<span class="text not-mobile">{{ctx.Locale.Tr "repo.unwatch"}}</span>
6
6
{{else}}
7
-
{{svg "octicon-eye"}}<span class="text">{{ctx.Locale.Tr "repo.watch"}}</span>
7
+
{{svg "octicon-eye"}}<span class="text not-mobile">{{ctx.Locale.Tr "repo.watch"}}</span>
8
8
{{end}}
9
9
</button>
10
10
<a hx-boost="false" class="ui basic label" href="{{.RepoLink}}/watchers">
-7
web_src/css/base.css
-7
web_src/css/base.css
···
1336
1336
text-align: center;
1337
1337
}
1338
1338
1339
-
@media (max-width: 767.98px) {
1340
-
/* double selector so it wins over .gt-df etc */
1341
-
.not-mobile.not-mobile {
1342
-
display: none !important;
1343
-
}
1344
-
}
1345
-
1346
1339
overflow-menu {
1347
1340
margin-bottom: 15px !important;
1348
1341
border-bottom: 1px solid var(--color-secondary) !important;
+12
web_src/css/helpers.css
+12
web_src/css/helpers.css
···
154
154
* showElem/hideElem/toggleElem functions in "utils/dom.js"
155
155
*/
156
156
.gt-hidden.gt-hidden { display: none !important; }
157
+
158
+
@media (max-width: 767.98px) {
159
+
/* double selector so it wins over .tw-flex (old .gt-df) etc */
160
+
.not-mobile.not-mobile {
161
+
display: none !important;
162
+
}
163
+
}
164
+
@media (min-width: 767.98px) {
165
+
.only-mobile.only-mobile {
166
+
display: none !important;
167
+
}
168
+
}
+2
-30
web_src/css/repo/header.css
+2
-30
web_src/css/repo/header.css
···
1
-
.fork-flag {
1
+
.header-wrapper .fork-flag {
2
2
margin-top: 0.5rem;
3
3
font-size: 12px;
4
4
}
···
14
14
padding: 0;
15
15
}
16
16
17
-
.repo-header .btn.interact-bg:hover {
18
-
text-decoration: none;
19
-
}
20
-
21
17
.repo-header .flex-item-main {
18
+
flex: 0;
22
19
flex-basis: unset;
23
20
}
24
21
25
22
.repo-header .flex-item-trailing {
26
23
flex-wrap: nowrap;
27
-
}
28
-
29
-
.repo-header .flex-item-trailing .repo-icon {
30
-
display: none;
31
24
}
32
25
33
26
.repo-buttons {
···
74
67
padding-top: 12px;
75
68
background-color: var(--color-header-wrapper);
76
69
}
77
-
78
-
@media (max-width: 767.98px) {
79
-
.repo-header .flex-item {
80
-
flex-grow: 1;
81
-
}
82
-
.repo-buttons .ui.labeled.button .text,
83
-
.repo-header .flex-item-trailing .label {
84
-
/* the elements are hidden from users with intact eye vision,
85
-
* because SVG icons convey the meaning.
86
-
* However, they should remain accessible to screen readers */
87
-
position: absolute;
88
-
left: -1000vw;
89
-
top: auto;
90
-
width: 1px;
91
-
height: 1px;
92
-
overflow: hidden;
93
-
}
94
-
.repo-header .flex-item-trailing .repo-icon {
95
-
display: initial;
96
-
}
97
-
}