loading up the forgejo repo on tangled to test page performance
ui: improve button gap consistency in repos (#4365)
Improve UI in a few areas in a similar way to https://codeberg.org/forgejo/forgejo/commit/dc0d3a40ab008f5ff20ad50d8b4a58277595f2fa. Ensure consistent 0.5em gaps in button rows, make buttons have more consistent horizontal paddings for better clickability.
Preview:
https://codeberg.org/attachments/cfca200a-3b68-4ba8-9876-75cea7822a00
https://codeberg.org/attachments/aaa5d387-919b-45af-8854-6d0f5273125f
https://codeberg.org/attachments/989225b7-b1dd-491d-bf76-7e4a962ea54e
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4365
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
+12
-14
+2
-2
templates/repo/diff/box.tmpl
+2
-2
templates/repo/diff/box.tmpl
···
23
23
</div>
24
24
{{end}}
25
25
</div>
26
-
<div class="diff-detail-actions">
26
+
<div class="diff-detail-actions button-row">
27
27
{{if and .PageIsPullFiles $.SignedUserID (not .IsArchived) (not .DiffNotAvailable)}}
28
28
<div class="not-mobile tw-flex tw-items-center tw-flex-col tw-whitespace-nowrap tw-mr-1">
29
29
<label for="viewed-files-summary" id="viewed-files-summary-label" data-text-changed-template="{{ctx.Locale.Tr "repo.pulls.viewed_files_label"}}">
···
146
146
{{end}}
147
147
</span>
148
148
</div>
149
-
<div class="diff-file-header-actions tw-flex tw-items-center tw-gap-1 tw-flex-wrap">
149
+
<div class="diff-file-header-actions tw-flex tw-items-center button-row tw-flex-wrap">
150
150
{{if $showFileViewToggle}}
151
151
<div class="ui compact icon buttons">
152
152
<button class="ui tiny basic button file-view-toggle" data-toggle-selector="#diff-source-{{$file.NameHash}}" data-tooltip-content="{{ctx.Locale.Tr "repo.file_view_source"}}">{{svg "octicon-code"}}</button>
+3
-3
templates/repo/diff/conversation.tmpl
+3
-3
templates/repo/diff/conversation.tmpl
···
37
37
{{template "repo/diff/comments" dict "root" $ "comments" .comments}}
38
38
</ui>
39
39
</div>
40
-
<div class="tw-flex tw-justify-end tw-items-center tw-flex-wrap tw-mt-2">
41
-
<div class="ui buttons tw-mr-1">
40
+
<div class="button-row tw-flex tw-justify-end tw-items-center tw-flex-wrap tw-mt-2">
41
+
<div class="ui buttons">
42
42
<button class="ui icon tiny basic button previous-conversation">
43
43
{{svg "octicon-arrow-up" 12 "icon"}} {{ctx.Locale.Tr "repo.issues.previous"}}
44
44
</button>
···
56
56
</button>
57
57
{{end}}
58
58
{{if and $.SignedUserID (not $.Repository.IsArchived)}}
59
-
<button class="comment-form-reply ui primary tiny labeled icon button tw-ml-1 tw-mr-0">
59
+
<button class="comment-form-reply ui primary tiny labeled icon button">
60
60
{{svg "octicon-reply" 16 "reply icon tw-mr-1"}}{{ctx.Locale.Tr "repo.diff.comment.reply"}}
61
61
</button>
62
62
{{end}}
+1
-1
templates/repo/header.tmpl
+1
-1
templates/repo/header.tmpl
···
35
35
</div>
36
36
</div>
37
37
{{if not (or .IsBeingCreated .IsBroken)}}
38
-
<div class="repo-buttons">
38
+
<div class="repo-buttons button-row">
39
39
{{if $.RepoTransfer}}
40
40
<form method="post" action="{{$.RepoLink}}/action/accept_transfer?redirect_to={{$.RepoLink}}">
41
41
{{$.CsrfTokenHtml}}
+2
-2
templates/repo/issue/view_content/conversation.tmpl
+2
-2
templates/repo/issue/view_content/conversation.tmpl
···
115
115
</div>
116
116
{{end}}
117
117
</div>
118
-
<div class="code-comment-buttons-buttons">
118
+
<div class="code-comment-buttons-buttons button-row">
119
119
{{if and $.CanMarkConversation $isNotPending}}
120
120
<button class="ui tiny basic button resolve-conversation" data-origin="timeline" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{(index .comments 0).ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation">
121
121
{{if $resolved}}
···
126
126
</button>
127
127
{{end}}
128
128
{{if and $.SignedUserID (not $.Repository.IsArchived)}}
129
-
<button class="comment-form-reply ui primary tiny labeled icon button tw-ml-1 tw-mr-0">
129
+
<button class="comment-form-reply ui primary tiny labeled icon button">
130
130
{{svg "octicon-reply" 16 "reply icon tw-mr-1"}}{{ctx.Locale.Tr "repo.diff.comment.reply"}}
131
131
</button>
132
132
{{end}}
+4
-5
web_src/css/repo.css
+4
-5
web_src/css/repo.css
···
601
601
align-items: center;
602
602
}
603
603
604
-
.repository.view.issue .button-row,
604
+
.issue-title .button-row,
605
605
.repository.releases .button-row {
606
606
display: flex;
607
607
}
···
610
610
.repository.view.issue .issue-title {
611
611
flex-direction: column;
612
612
}
613
-
.repository.view.issue .button-row {
613
+
.issue-title .button-row {
614
614
width: 100%;
615
615
margin-top: .5rem;
616
616
justify-content: space-between;
···
1539
1539
.diff-detail-actions {
1540
1540
display: flex;
1541
1541
align-items: center;
1542
-
gap: 0.25em;
1543
1542
justify-content: end;
1544
1543
}
1545
1544
···
1574
1573
}
1575
1574
1576
1575
.repository .diff-detail-box .ui.button {
1577
-
padding: 0 12px;
1576
+
padding: 0 1.125em;
1578
1577
height: 30px;
1579
1578
}
1580
1579
···
1596
1595
}
1597
1596
1598
1597
.repository .diff-box .header:not(.resolved-placeholder) .button {
1599
-
padding: 0 12px;
1598
+
padding: 0 1.125em;
1600
1599
flex: 0 0 auto;
1601
1600
margin-right: 0;
1602
1601
height: 30px;