loading up the forgejo repo on tangled to test page performance
Several fixes for mobile UI (#25634)
Resolves #25622
<details>
<summary>Screenshots</summary>
</details>
---------
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: silverwind <me@silverwind.io>
authored by
Denys Konovalov
wxiaoguang
silverwind
and committed by
GitHub
00dbba7f
f35ea2b0
+71
-39
+1
-1
templates/repo/branch/list.tmpl
+1
-1
templates/repo/branch/list.tmpl
···
29
29
</div>
30
30
<p class="info gt-df gt-ac gt-my-2">{{svg "octicon-git-commit" 16 "gt-mr-2"}}<a href="{{.RepoLink}}/commit/{{PathEscape .DefaultBranchBranch.DBBranch.CommitID}}">{{ShortSha .DefaultBranchBranch.DBBranch.CommitID}}</a> · <span class="commit-message">{{RenderCommitMessage $.Context .DefaultBranchBranch.DBBranch.CommitMessage .RepoLink .Repository.ComposeMetas}}</span> · {{.locale.Tr "org.repo_updated"}} {{TimeSince .DefaultBranchBranch.DBBranch.CommitTime.AsTime .locale}}{{if .DefaultBranchBranch.DBBranch.Pusher}} {{template "shared/user/avatarlink" dict "Context" $.Context "user" .DefaultBranchBranch.DBBranch.Pusher}}{{template "shared/user/namelink" .DefaultBranchBranch.DBBranch.Pusher}}{{end}}</p>
31
31
</td>
32
-
<td class="right aligned overflow-visible">
32
+
<td class="right aligned middle aligned overflow-visible">
33
33
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
34
34
<button class="btn interact-bg show-create-branch-modal gt-p-3"
35
35
data-modal="#create-branch-modal"
+1
-1
templates/repo/commits_list.tmpl
+1
-1
templates/repo/commits_list.tmpl
···
1
1
<div class="ui attached table segment commit-table">
2
-
<table class="ui very basic striped table unstackable fixed" id="commits-table">
2
+
<table class="ui very basic striped table unstackable" id="commits-table">
3
3
<thead>
4
4
<tr>
5
5
<th class="three wide">{{.locale.Tr "repo.commits.author"}}</th>
+7
-7
templates/repo/commits_table.tmpl
+7
-7
templates/repo/commits_table.tmpl
···
8
8
{{.locale.Tr "repo.commits.no_commits" $.BaseBranch $.HeadBranch}} {{if .RefName}}({{.RefName}}){{end}}
9
9
{{end}}
10
10
</div>
11
-
<div class="commits-table-right gt-df gt-ac">
11
+
<div class="commits-table-right">
12
12
{{if .PageIsCommits}}
13
13
<form class="ignore-dirty" action="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/search">
14
14
<div class="ui tiny search input">
15
15
<input name="q" placeholder="{{.locale.Tr "repo.commits.search"}}" value="{{.Keyword}}" autofocus>
16
16
</div>
17
-
18
-
<div class="ui checkbox">
19
-
<input type="checkbox" name="all" id="all" value="true" {{.All}}>
20
-
<label for="all">{{.locale.Tr "repo.commits.search_all"}} </label>
17
+
18
+
<div class="ui tiny checkbox">
19
+
<input type="checkbox" name="all" value="true" {{.All}}>
20
+
<label>{{.locale.Tr "repo.commits.search_all"}}</label>
21
21
</div>
22
22
<button class="ui primary tiny button gt-mr-0" data-panel="#add-deploy-key-panel" data-tooltip-content={{.locale.Tr "repo.commits.search.tooltip"}}>{{.locale.Tr "repo.commits.find"}}</button>
23
23
</form>
24
24
{{else if .IsDiffCompare}}
25
-
<a href="{{$.CommitRepoLink}}/commit/{{.BeforeCommitID | PathEscape}}" class="ui green sha label">{{if not .BaseIsCommit}}{{if .BaseIsBranch}}{{svg "octicon-git-branch"}}{{else if .BaseIsTag}}{{svg "octicon-tag"}}{{end}}{{.BaseBranch}}{{else}}{{ShortSha .BaseBranch}}{{end}}</a>
25
+
<a href="{{$.CommitRepoLink}}/commit/{{.BeforeCommitID | PathEscape}}" class="ui green sha label gt-mx-0">{{if not .BaseIsCommit}}{{if .BaseIsBranch}}{{svg "octicon-git-branch"}}{{else if .BaseIsTag}}{{svg "octicon-tag"}}{{end}}{{.BaseBranch}}{{else}}{{ShortSha .BaseBranch}}{{end}}</a>
26
26
...
27
-
<a href="{{$.CommitRepoLink}}/commit/{{.AfterCommitID | PathEscape}}" class="ui green sha label">{{if not .HeadIsCommit}}{{if .HeadIsBranch}}{{svg "octicon-git-branch"}}{{else if .HeadIsTag}}{{svg "octicon-tag"}}{{end}}{{.HeadBranch}}{{else}}{{ShortSha .HeadBranch}}{{end}}</a>
27
+
<a href="{{$.CommitRepoLink}}/commit/{{.AfterCommitID | PathEscape}}" class="ui green sha label gt-mx-0">{{if not .HeadIsCommit}}{{if .HeadIsBranch}}{{svg "octicon-git-branch"}}{{else if .HeadIsTag}}{{svg "octicon-tag"}}{{end}}{{.HeadBranch}}{{else}}{{ShortSha .HeadBranch}}{{end}}</a>
28
28
{{end}}
29
29
</div>
30
30
</h4>
+1
-1
templates/repo/issue/labels/labels_selector_field.tmpl
+1
-1
templates/repo/issue/labels/labels_selector_field.tmpl
···
1
1
<div class="ui {{if or (not .HasIssuesOrPullsWritePermission) .Repository.IsArchived}}disabled{{end}} floating jump select-label dropdown">
2
-
<span class="text gt-df gt-ac muted">
2
+
<span class="text muted flex-text-block">
3
3
<strong>{{.locale.Tr "repo.issues.new.labels"}}</strong>
4
4
{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
5
5
{{svg "octicon-gear" 16 "gt-ml-2"}}
+6
-6
templates/repo/issue/new_form.tmpl
+6
-6
templates/repo/issue/new_form.tmpl
···
59
59
60
60
<input id="milestone_id" name="milestone_id" type="hidden" value="{{.milestone_id}}">
61
61
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-milestone dropdown">
62
-
<span class="text">
62
+
<span class="text flex-text-block">
63
63
<strong>{{.locale.Tr "repo.issues.new.milestone"}}</strong>
64
64
{{if .HasIssuesOrPullsWritePermission}}
65
-
{{svg "octicon-gear"}}
65
+
{{svg "octicon-gear" 16 "gt-ml-2"}}
66
66
{{end}}
67
67
</span>
68
68
<div class="menu">
···
86
86
87
87
<input id="project_id" name="project_id" type="hidden" value="{{.project_id}}">
88
88
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-project dropdown">
89
-
<span class="text">
89
+
<span class="text flex-text-block">
90
90
<strong>{{.locale.Tr "repo.issues.new.projects"}}</strong>
91
91
{{if .HasIssuesOrPullsWritePermission}}
92
-
{{svg "octicon-gear"}}
92
+
{{svg "octicon-gear" 16 "gt-ml-2"}}
93
93
{{end}}
94
94
</span>
95
95
<div class="menu">
···
144
144
<div class="divider"></div>
145
145
<input id="assignee_ids" name="assignee_ids" type="hidden" value="{{.assignee_ids}}">
146
146
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-assignees dropdown">
147
-
<span class="text">
147
+
<span class="text flex-text-block">
148
148
<strong>{{.locale.Tr "repo.issues.new.assignees"}}</strong>
149
149
{{if .HasIssuesOrPullsWritePermission}}
150
-
{{svg "octicon-gear"}}
150
+
{{svg "octicon-gear" 16 "gt-ml-2"}}
151
151
{{end}}
152
152
</span>
153
153
<div class="filter menu" data-id="#assignee_ids">
+4
web_src/css/admin.css
+4
web_src/css/admin.css
+2
web_src/css/editor/combomarkdowneditor.css
+2
web_src/css/editor/combomarkdowneditor.css
+42
-14
web_src/css/repo.css
+42
-14
web_src/css/repo.css
···
655
655
.repository.view.issue .issue-title {
656
656
flex-direction: column;
657
657
}
658
+
.repository.view.issue .issue-title-buttons,
659
+
.repository.view.issue .edit-buttons {
660
+
width: 100%;
661
+
justify-content: space-between;
662
+
}
658
663
.repository.view.issue .edit-buttons {
659
664
margin-top: .5rem;
665
+
}
666
+
.comment.form .issue-content-left .avatar {
667
+
display: none;
668
+
}
669
+
.comment.form .issue-content-left .content {
670
+
margin-left: 0 !important;
671
+
}
672
+
.comment.form .issue-content-left .content::before,
673
+
.comment.form .issue-content-left .content::after,
674
+
.comment.form .content .form::before,
675
+
.comment.form .content .form::after {
676
+
display: none;
660
677
}
661
678
}
662
679
···
1197
1214
text-align: left;
1198
1215
}
1199
1216
1200
-
.repository.compare.pull .choose.branch .svg {
1217
+
.repository .choose.branch {
1218
+
display: flex;
1219
+
align-items: center;
1220
+
gap: 8px;
1221
+
flex-wrap: wrap;
1222
+
}
1223
+
1224
+
.repository .choose.branch .svg {
1201
1225
margin-right: 10px;
1202
1226
}
1203
1227
···
2036
2060
.repository .ui.segment.sub-menu .list {
2037
2061
width: 100%;
2038
2062
display: flex;
2039
-
align-items: center;
2063
+
align-items: stretch;
2040
2064
}
2041
2065
2042
2066
.repository .ui.segment.sub-menu .list .item {
2043
2067
width: 100%;
2044
2068
color: var(--color-text);
2069
+
display: flex;
2070
+
align-items: center;
2071
+
justify-content: center;
2045
2072
}
2046
2073
2047
2074
.repository .ui.segment.sub-menu .list .item:first-of-type {
···
3124
3151
text-wrap: balance;
3125
3152
}
3126
3153
3154
+
.commits-table .commits-table-right form {
3155
+
display: flex;
3156
+
align-items: center;
3157
+
gap: 0.75em;
3158
+
justify-content: center;
3159
+
flex-wrap: wrap;
3160
+
}
3161
+
3127
3162
@media (max-width: 767.98px) {
3128
3163
.repository.file.list #repo-files-table .entry,
3129
3164
.repository.file.list #repo-files-table .commit-list {
···
3193
3228
align-items: initial !important;
3194
3229
margin-bottom: 6px;
3195
3230
}
3196
-
.commits-table .commits-table-right form {
3197
-
display: flex;
3198
-
flex-wrap: wrap;
3199
-
}
3200
3231
.commits-table .commits-table-right form > div:nth-child(1) {
3201
-
order: 1;
3232
+
order: 1; /* the "commit search" input */
3202
3233
}
3203
3234
.commits-table .commits-table-right form > div:nth-child(2) {
3204
-
order: 3;
3205
-
margin-left: 0.5rem;
3206
-
margin-top: 0.5rem;
3235
+
order: 3; /* the "search all" checkbox */
3207
3236
}
3208
3237
.commits-table .commits-table-right form > button:nth-child(3) {
3209
-
order: 2;
3210
-
margin-left: 0.25rem;
3238
+
order: 2; /* the "search" button */
3211
3239
}
3212
3240
.commit-table {
3213
3241
overflow-x: auto;
···
3219
3247
.commit-table .commit-list span.message-wrapper {
3220
3248
max-width: none;
3221
3249
}
3250
+
.commit-table .commit-list tr td:first-child,
3222
3251
.commit-table .commit-list tr td:last-child {
3223
-
display: block;
3224
-
width: max-content;
3252
+
white-space: nowrap;
3225
3253
}
3226
3254
.commit-table .commit-list td.author {
3227
3255
display: block;
+3
-5
web_src/js/components/RepoActionView.vue
+3
-5
web_src/js/components/RepoActionView.vue
···
498
498
499
499
<style scoped>
500
500
.action-view-body {
501
+
padding-top: 12px;
502
+
padding-bottom: 12px;
501
503
display: flex;
502
504
gap: 12px;
503
505
}
···
529
531
display: flex;
530
532
gap: 5px;
531
533
margin: 0 0 0 28px;
532
-
}
533
-
534
-
.action-view-left, .action-view-right {
535
-
padding-top: 12px;
536
-
padding-bottom: 12px;
537
534
}
538
535
539
536
/* ================ */
···
749
746
background-color: var(--color-console-bg);
750
747
max-height: 100%;
751
748
border-radius: 0 0 var(--border-radius) var(--border-radius);
749
+
z-index: 0;
752
750
}
753
751
754
752
.job-step-container .job-step-summary {