Skip to content

Commit bde014e

Browse files
kerwin612wxiaoguang
kerwin612
and
wxiaoguang
authored
Fix button alignments and remove unnecessary styles (#34206)
Co-authored-by: wxiaoguang <[email protected]>
1 parent a4f22a3 commit bde014e

22 files changed

+98
-166
lines changed

‎templates/devtest/gitea-ui.tmpl

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,16 +9,16 @@
99
<a class="silenced" href="#">silenced</a>
1010
</div>
1111
<h1>Button</h1>
12-
<div>
13-
Style:
14-
<label><input type="checkbox" name="button-style-compact" value="compact">compact</label>
15-
<label><input type="radio" name="button-style-size" value="">(normal)</label>
16-
<label><input type="radio" name="button-style-size" value="tiny">tiny</label>
17-
<label><input type="radio" name="button-style-size" value="mini">mini</label>
12+
".ui.button" styles:
13+
<div class="flex-text-block tw-gap-4">
14+
<label class="gt-checkbox"><input type="radio" name="button-style-size" value="">(normal)</label>
15+
<label class="gt-checkbox"><input type="radio" name="button-style-size" value="small">small</label>
16+
<label class="gt-checkbox"><input type="radio" name="button-style-size" value="tiny">tiny</label>
17+
<label class="gt-checkbox"><input type="radio" name="button-style-size" value="mini">mini</label>
1818
</div>
19-
<div>
20-
State:
21-
<label><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label>
19+
<div class="flex-text-block tw-gap-4">
20+
<label class="gt-checkbox"><input type="checkbox" name="button-style-compact" value="compact">compact</label>
21+
<label class="gt-checkbox"><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label>
2222
</div>
2323
<div id="devtest-button-samples">
2424
<ul class="button-sample-groups">

‎templates/repo/clone_panel.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<button class="ui primary button js-btn-clone-panel">
1+
<button class="ui compact primary button js-btn-clone-panel">
22
{{svg "octicon-code" 16}}
33
<span>{{ctx.Locale.Tr "repo.code"}}</span>
44
{{svg "octicon-triangle-down" 14 "dropdown icon"}}

‎templates/repo/diff/box.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
{{if .PageIsPullFiles}}
3838
<div id="diff-commit-select" data-issuelink="{{$.Issue.Link}}" data-queryparams="?style={{if $.IsSplitStyle}}split{{else}}unified{{end}}&whitespace={{$.WhitespaceBehavior}}&show-outdated={{$.ShowOutdatedComments}}" data-filter_changes_by_commit="{{ctx.Locale.Tr "repo.pulls.filter_changes_by_commit"}}">
3939
{{/* the following will be replaced by vue component, but this avoids any loading artifacts till the vue component is initialized */}}
40-
<div class="ui jump dropdown basic button custom">
40+
<div class="ui jump dropdown tiny basic button custom">
4141
{{svg "octicon-git-commit"}}
4242
</div>
4343
</div>

‎templates/repo/diff/conversation.tmpl

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -36,21 +36,21 @@
3636
{{end}}
3737
<div id="code-comments-{{$comment.ID}}" class="field comment-code-cloud {{if $resolved}}tw-hidden{{end}}">
3838
<div class="comment-list">
39-
<ui class="ui comments">
39+
<div class="ui comments">
4040
{{template "repo/diff/comments" dict "root" $ "comments" .comments}}
41-
</ui>
41+
</div>
4242
</div>
43-
<div class="tw-flex tw-justify-end tw-items-center tw-gap-2 tw-mt-2 tw-flex-wrap">
43+
<div class="flex-text-block tw-mt-2 tw-flex-wrap tw-justify-end">
4444
<div class="ui buttons">
4545
<button class="ui icon tiny basic button previous-conversation">
46-
{{svg "octicon-arrow-up" 12 "icon"}} {{ctx.Locale.Tr "repo.issues.previous"}}
46+
{{svg "octicon-arrow-up" 12}} {{ctx.Locale.Tr "repo.issues.previous"}}
4747
</button>
4848
<button class="ui icon tiny basic button next-conversation">
49-
{{svg "octicon-arrow-down" 12 "icon"}} {{ctx.Locale.Tr "repo.issues.next"}}
49+
{{svg "octicon-arrow-down" 12}} {{ctx.Locale.Tr "repo.issues.next"}}
5050
</button>
5151
</div>
5252
{{if and $.CanMarkConversation $hasReview (not $isReviewPending)}}
53-
<button class="ui icon tiny basic button resolve-conversation tw-mr-0" data-origin="diff" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{$comment.ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation">
53+
<button class="ui icon tiny basic button resolve-conversation" data-origin="diff" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{$comment.ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation">
5454
{{if $resolved}}
5555
{{ctx.Locale.Tr "repo.issues.review.un_resolve_conversation"}}
5656
{{else}}
@@ -59,8 +59,8 @@
5959
</button>
6060
{{end}}
6161
{{if and $.SignedUserID (not $.Repository.IsArchived)}}
62-
<button class="comment-form-reply ui primary tiny labeled icon button tw-mr-0">
63-
{{svg "octicon-reply" 16 "reply icon tw-mr-1"}}{{ctx.Locale.Tr "repo.diff.comment.reply"}}
62+
<button class="comment-form-reply ui primary icon tiny button">
63+
{{svg "octicon-reply" 12}}{{ctx.Locale.Tr "repo.diff.comment.reply"}}
6464
</button>
6565
{{end}}
6666
</div>

‎templates/repo/graph.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,8 +45,8 @@
4545
{{end}}
4646
</div>
4747
</div>
48-
<button id="flow-color-monochrome" class="ui labelled icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}</button>
49-
<button id="flow-color-colored" class="ui labelled icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.color"}}</button>
48+
<button id="flow-color-monochrome" class="ui icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.monochrome"}}</button>
49+
<button id="flow-color-colored" class="ui icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{ctx.Locale.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.commit_graph.color"}}</button>
5050
</div>
5151
</h2>
5252
<div class="ui dividing"></div>

‎templates/repo/graph/commits.tmpl

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,18 +17,18 @@
1717
{{if eq $refGroup "pull"}}
1818
{{if or (not $.HidePRRefs) (SliceUtils.Contains $.SelectedBranches .Name)}}
1919
<!-- it's intended to use issues not pulls, if it's a pull you will get redirected -->
20-
<a class="ui labelled basic tiny button" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled ctx ctx.Consts.RepoUnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}">
20+
<a class="ui basic tiny button" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled ctx ctx.Consts.RepoUnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}">
2121
{{svg "octicon-git-pull-request"}} #{{.ShortName}}
2222
</a>
2323
{{end}}
2424
{{else if eq $refGroup "tags"}}
2525
{{- template "repo/tag/name" dict "RepoLink" $.Repository.Link "TagName" .ShortName -}}
2626
{{else if eq $refGroup "remotes"}}
27-
<a class="ui labelled basic tiny button" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}">
27+
<a class="ui basic tiny button" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}">
2828
{{svg "octicon-cross-reference"}} {{.ShortName}}
2929
</a>
3030
{{else if eq $refGroup "heads"}}
31-
<a class="ui labelled basic tiny button" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
31+
<a class="ui basic tiny button" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
3232
{{svg "octicon-git-branch"}} {{.ShortName}}
3333
</a>
3434
{{else}}

‎templates/repo/header.tmpl

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,20 +38,20 @@
3838
</div>
3939
</div>
4040
{{if not (or .IsBeingCreated .IsBroken)}}
41-
<div class="repo-buttons">
41+
<div class="flex-text-block tw-flex-wrap">
4242
{{if $.RepoTransfer}}
4343
<form method="post" action="{{$.RepoLink}}/action/accept_transfer?redirect_to={{$.RepoLink}}">
4444
{{$.CsrfTokenHtml}}
45-
<div data-tooltip-content="{{if $.CanUserAcceptOrRejectTransfer}}{{ctx.Locale.Tr "repo.transfer.accept_desc" $.RepoTransfer.Recipient.DisplayName}}{{else}}{{ctx.Locale.Tr "repo.transfer.no_permission_to_accept"}}{{end}}">
46-
<button type="submit" class="ui basic button {{if $.CanUserAcceptOrRejectTransfer}}primary {{end}} ok small"{{if not $.CanUserAcceptOrRejectTransfer}} disabled{{end}}>
45+
<div class="flex-text-inline" data-tooltip-content="{{if $.CanUserAcceptOrRejectTransfer}}{{ctx.Locale.Tr "repo.transfer.accept_desc" $.RepoTransfer.Recipient.DisplayName}}{{else}}{{ctx.Locale.Tr "repo.transfer.no_permission_to_accept"}}{{end}}">
46+
<button type="submit" class="ui compact small basic button {{if $.CanUserAcceptOrRejectTransfer}}primary {{end}} ok small"{{if not $.CanUserAcceptOrRejectTransfer}} disabled{{end}}>
4747
{{ctx.Locale.Tr "repo.transfer.accept"}}
4848
</button>
4949
</div>
5050
</form>
5151
<form method="post" action="{{$.RepoLink}}/action/reject_transfer?redirect_to={{$.RepoLink}}">
5252
{{$.CsrfTokenHtml}}
53-
<div data-tooltip-content="{{if $.CanUserAcceptOrRejectTransfer}}{{ctx.Locale.Tr "repo.transfer.reject_desc" $.RepoTransfer.Recipient.DisplayName}}{{else}}{{ctx.Locale.Tr "repo.transfer.no_permission_to_reject"}}{{end}}">
54-
<button type="submit" class="ui basic button {{if $.CanUserAcceptOrRejectTransfer}}red {{end}}ok small"{{if not $.CanUserAcceptOrRejectTransfer}} disabled{{end}}>
53+
<div class="flex-text-inline" data-tooltip-content="{{if $.CanUserAcceptOrRejectTransfer}}{{ctx.Locale.Tr "repo.transfer.reject_desc" $.RepoTransfer.Recipient.DisplayName}}{{else}}{{ctx.Locale.Tr "repo.transfer.no_permission_to_reject"}}{{end}}">
54+
<button type="submit" class="ui compact small basic button {{if $.CanUserAcceptOrRejectTransfer}}red {{end}}ok small"{{if not $.CanUserAcceptOrRejectTransfer}} disabled{{end}}>
5555
{{ctx.Locale.Tr "repo.transfer.reject"}}
5656
</button>
5757
</div>

‎templates/repo/issue/view_content/conversation.tmpl

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@
109109
</div>
110110
{{end}}
111111
</div>
112-
<div class="code-comment-buttons tw-flex tw-items-center tw-flex-wrap tw-mt-2 tw-mb-1 tw-mx-2">
112+
<div class="flex-text-block tw-flex-wrap tw-my-2">
113113
<div class="tw-flex-1">
114114
{{if $resolved}}
115115
<div class="ui grey text">
@@ -118,7 +118,7 @@
118118
</div>
119119
{{end}}
120120
</div>
121-
<div class="code-comment-buttons-buttons">
121+
<div class="flex-text-block">
122122
{{if and $.CanMarkConversation $hasReview (not $isReviewPending)}}
123123
<button class="ui tiny basic button resolve-conversation" data-origin="timeline" data-action="{{if not $resolved}}Resolve{{else}}UnResolve{{end}}" data-comment-id="{{$comment.ID}}" data-update-url="{{$.RepoLink}}/issues/resolve_conversation">
124124
{{if $resolved}}
@@ -129,8 +129,8 @@
129129
</button>
130130
{{end}}
131131
{{if and $.SignedUserID (not $.Repository.IsArchived)}}
132-
<button class="comment-form-reply ui primary tiny labeled icon button tw-ml-1 tw-mr-0">
133-
{{svg "octicon-reply" 16 "reply icon tw-mr-1"}}{{ctx.Locale.Tr "repo.diff.comment.reply"}}
132+
<button class="comment-form-reply ui primary icon tiny button">
133+
{{svg "octicon-reply" 12}}{{ctx.Locale.Tr "repo.diff.comment.reply"}}
134134
</button>
135135
{{end}}
136136
</div>

‎templates/repo/release/new.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@
100100
</div>
101101
<span class="help">{{ctx.Locale.Tr "repo.release.prerelease_helper"}}</span>
102102
<div class="divider tw-mt-0"></div>
103-
<div class="tw-flex tw-justify-end">
103+
<div class="flex-text-block tw-justify-end">
104104
{{if .PageIsEditRelease}}
105105
<a class="ui small button" href="{{.RepoLink}}/releases">
106106
{{ctx.Locale.Tr "repo.release.cancel"}}

‎templates/repo/release_tag_header.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
{{$canReadCode := $.Permission.CanRead ctx.Consts.RepoUnitTypeCode}}
33

44
{{if $canReadReleases}}
5-
<div class="tw-flex">
5+
<div class="flex-text-block">
66
<div class="tw-flex-1 tw-flex tw-items-center">
77
<h2 class="ui compact small menu small-menu-items">
88
<a class="{{if and .PageIsReleaseList (not .PageIsSingleTag)}}active {{end}}item" href="{{.RepoLink}}/releases">{{ctx.Locale.PrettyNumber .NumReleases}} {{ctx.Locale.TrN .NumReleases "repo.release" "repo.releases"}}</a>

‎templates/repo/star_unstar.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<form hx-boost="true" hx-target="this" method="post" action="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}unstar{{else}}star{{end}}">
1+
<form class="flex-text-inline" hx-boost="true" hx-target="this" method="post" action="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}unstar{{else}}star{{end}}">
22
<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.star_guest_user"}}"{{end}}>
33
{{$buttonText := ctx.Locale.Tr "repo.star"}}
44
{{if $.IsStaringRepo}}{{$buttonText = ctx.Locale.Tr "repo.unstar"}}{{end}}

‎templates/repo/watch_unwatch.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<form hx-boost="true" hx-target="this" method="post" action="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}unwatch{{else}}watch{{end}}">
1+
<form class="flex-text-inline" hx-boost="true" hx-target="this" method="post" action="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}unwatch{{else}}watch{{end}}">
22
<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.watch_guest_user"}}"{{end}}>
33
{{$buttonText := ctx.Locale.Tr "repo.watch"}}
44
{{if $.IsWatchingRepo}}{{$buttonText = ctx.Locale.Tr "repo.unwatch"}}{{end}}

‎templates/shared/actions/runner_list.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<div class="header">
1717
Registration Token
1818
</div>
19-
<div class="ui input">
19+
<div class="ui action input">
2020
<input type="text" value="{{.RegistrationToken}}" readonly>
2121
<button class="ui basic label button" aria-label="{{ctx.Locale.Tr "copy"}}" data-clipboard-text="{{.RegistrationToken}}">
2222
{{svg "octicon-copy" 14}}

‎web_src/css/base.css

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1037,12 +1037,13 @@ table th[data-sortt-desc] .svg {
10371037
text-align: left;
10381038
}
10391039

1040-
.ellipsis-button {
1041-
padding: 0 5px 8px !important;
1042-
display: inline-block !important;
1043-
font-weight: var(--font-weight-semibold) !important;
1044-
line-height: 6px !important;
1045-
vertical-align: middle !important;
1040+
.ui.button.ellipsis-button {
1041+
padding: 0 5px 8px;
1042+
display: inline-block;
1043+
font-weight: var(--font-weight-semibold);
1044+
line-height: 8px;
1045+
vertical-align: middle;
1046+
min-height: 0;
10461047
}
10471048

10481049
.precolors {

‎web_src/css/features/gitgraph.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,7 @@
116116
max-width: 200px;
117117
overflow: hidden;
118118
text-overflow: ellipsis;
119+
min-height: 0;
119120
}
120121

121122
#git-graph-container #graph-raw-list {

0 commit comments

Comments
 (0)