loading up the forgejo repo on tangled to test page performance
Pulse page improvements (#30149)
1. add border-radius and spacing to bars
2. use tailwind background classes
3. Add more space around activity list headers
<img width="983" alt="Screenshot 2024-03-27 at 23 40 54"
src="https://github.com/go-gitea/gitea/assets/115237/70f72c30-e69f-4ecb-882f-32b8bc94d638">
<img width="1020" alt="Screenshot 2024-03-27 at 23 41 02"
src="https://github.com/go-gitea/gitea/assets/115237/a35dbbda-515c-40b0-938a-d759f9686b8e">
(cherry picked from commit 6999a88fd9bef6baa0a8cc5f63e419079611fc9b)
authored by
silverwind
and committed by
Gergely Nagy
3e53c519
bb11bf87
+33
-16
+15
-11
templates/repo/pulse.tmpl
+15
-11
templates/repo/pulse.tmpl
···
25
25
<div class="column">
26
26
{{if gt .Activity.ActivePRCount 0}}
27
27
<div class="stats-table">
28
-
<a href="#merged-pull-requests" class="table-cell tiny background purple" style="width: {{.Activity.MergedPRPerc}}{{if ne .Activity.MergedPRPerc 0}}%{{end}}"></a>
29
-
<a href="#proposed-pull-requests" class="table-cell tiny background green"></a>
28
+
{{if gt .Activity.MergedPRPerc 0}}
29
+
<a href="#merged-pull-requests" class="table-cell tiny tw-bg-purple" style="width: {{.Activity.MergedPRPerc}}%"></a>
30
+
{{end}}
31
+
<a href="#proposed-pull-requests" class="table-cell tiny tw-bg-green"></a>
30
32
</div>
31
33
{{else}}
32
34
<div class="stats-table">
33
-
<a class="table-cell tiny background light grey"></a>
35
+
<a class="table-cell tiny tw-bg-grey"></a>
34
36
</div>
35
37
{{end}}
36
38
{{ctx.Locale.TrN .Activity.ActivePRCount "repo.activity.active_prs_count_1" "repo.activity.active_prs_count_n" .Activity.ActivePRCount}}
···
40
42
<div class="column">
41
43
{{if gt .Activity.ActiveIssueCount 0}}
42
44
<div class="stats-table">
43
-
<a href="#closed-issues" class="table-cell tiny background red" style="width: {{.Activity.ClosedIssuePerc}}{{if ne .Activity.ClosedIssuePerc 0}}%{{end}}"></a>
44
-
<a href="#new-issues" class="table-cell tiny background green"></a>
45
+
{{if gt .Activity.ClosedIssuePerc 0}}
46
+
<a href="#closed-issues" class="table-cell tiny tw-bg-red" style="width: {{.Activity.ClosedIssuePerc}}%"></a>
47
+
{{end}}
48
+
<a href="#new-issues" class="table-cell tiny tw-bg-green"></a>
45
49
</div>
46
50
{{else}}
47
51
<div class="stats-table">
···
108
112
{{end}}
109
113
110
114
{{if gt .Activity.PublishedReleaseCount 0}}
111
-
<h4 class="divider divider-text tw-normal-case" id="published-releases">
115
+
<h4 class="divider divider-text" id="published-releases">
112
116
{{svg "octicon-tag" 16 "tw-mr-2"}}
113
117
{{ctx.Locale.Tr "repo.activity.title.releases_published_by"
114
118
(ctx.Locale.TrN .Activity.PublishedReleaseCount "repo.activity.title.releases_1" "repo.activity.title.releases_n" .Activity.PublishedReleaseCount)
···
130
134
{{end}}
131
135
132
136
{{if gt .Activity.MergedPRCount 0}}
133
-
<h4 class="divider divider-text tw-normal-case" id="merged-pull-requests">
137
+
<h4 class="divider divider-text" id="merged-pull-requests">
134
138
{{svg "octicon-git-pull-request" 16 "tw-mr-2"}}
135
139
{{ctx.Locale.Tr "repo.activity.title.prs_merged_by"
136
140
(ctx.Locale.TrN .Activity.MergedPRCount "repo.activity.title.prs_1" "repo.activity.title.prs_n" .Activity.MergedPRCount)
···
149
153
{{end}}
150
154
151
155
{{if gt .Activity.OpenedPRCount 0}}
152
-
<h4 class="divider divider-text tw-normal-case" id="proposed-pull-requests">
156
+
<h4 class="divider divider-text" id="proposed-pull-requests">
153
157
{{svg "octicon-git-branch" 16 "tw-mr-2"}}
154
158
{{ctx.Locale.Tr "repo.activity.title.prs_opened_by"
155
159
(ctx.Locale.TrN .Activity.OpenedPRCount "repo.activity.title.prs_1" "repo.activity.title.prs_n" .Activity.OpenedPRCount)
···
168
172
{{end}}
169
173
170
174
{{if gt .Activity.ClosedIssueCount 0}}
171
-
<h4 class="divider divider-text tw-normal-case" id="closed-issues">
175
+
<h4 class="divider divider-text" id="closed-issues">
172
176
{{svg "octicon-issue-closed" 16 "tw-mr-2"}}
173
177
{{ctx.Locale.Tr "repo.activity.title.issues_closed_from"
174
178
(ctx.Locale.TrN .Activity.ClosedIssueCount "repo.activity.title.issues_1" "repo.activity.title.issues_n" .Activity.ClosedIssueCount)
···
187
191
{{end}}
188
192
189
193
{{if gt .Activity.OpenedIssueCount 0}}
190
-
<h4 class="divider divider-text tw-normal-case" id="new-issues">
194
+
<h4 class="divider divider-text" id="new-issues">
191
195
{{svg "octicon-issue-opened" 16 "tw-mr-2"}}
192
196
{{ctx.Locale.Tr "repo.activity.title.issues_created_by"
193
197
(ctx.Locale.TrN .Activity.OpenedIssueCount "repo.activity.title.issues_1" "repo.activity.title.issues_n" .Activity.OpenedIssueCount)
···
206
210
{{end}}
207
211
208
212
{{if gt .Activity.UnresolvedIssueCount 0}}
209
-
<h4 class="divider divider-text tw-normal-case" id="unresolved-conversations" data-tooltip-content="{{ctx.Locale.Tr "repo.activity.unresolved_conv_desc"}}">
213
+
<h4 class="divider divider-text" id="unresolved-conversations" data-tooltip-content="{{ctx.Locale.Tr "repo.activity.unresolved_conv_desc"}}">
210
214
{{svg "octicon-comment-discussion" 16 "tw-mr-2"}}
211
215
{{ctx.Locale.TrN .Activity.UnresolvedIssueCount "repo.activity.title.unresolved_conv_1" "repo.activity.title.unresolved_conv_n" .Activity.UnresolvedIssueCount}}
212
216
</h4>
-1
web_src/css/dashboard.css
-1
web_src/css/dashboard.css
+5
-1
web_src/css/modules/divider.css
+5
-1
web_src/css/modules/divider.css
···
2
2
margin: 10px 0;
3
3
height: 0;
4
4
font-weight: var(--font-weight-medium);
5
-
text-transform: uppercase;
6
5
color: var(--color-text);
7
6
font-size: 1rem;
8
7
width: 100%;
8
+
}
9
+
10
+
h4.divider {
11
+
margin-top: 1.25rem;
12
+
margin-bottom: 1.25rem;
9
13
}
10
14
11
15
.divider:not(.divider-text) {
-1
web_src/css/modules/header.css
-1
web_src/css/modules/header.css
-1
web_src/css/modules/label.css
-1
web_src/css/modules/label.css
+13
-1
web_src/css/repo.css
+13
-1
web_src/css/repo.css
···
2339
2339
.stats-table {
2340
2340
display: table;
2341
2341
width: 100%;
2342
+
margin: 6px 0;
2343
+
border-spacing: 2px;
2342
2344
}
2343
2345
2344
2346
.stats-table .table-cell {
···
2346
2348
}
2347
2349
2348
2350
.stats-table .table-cell.tiny {
2349
-
height: 0.5em;
2351
+
height: 8px;
2352
+
}
2353
+
2354
+
.stats-table .table-cell:first-child {
2355
+
border-top-left-radius: 4px;
2356
+
border-bottom-left-radius: 4px;
2357
+
}
2358
+
2359
+
.stats-table .table-cell:last-child {
2360
+
border-top-right-radius: 4px;
2361
+
border-bottom-right-radius: 4px;
2350
2362
}
2351
2363
2352
2364
.labels-list {