GitHub
/
gitea
mirror of https://github.com/go-gitea/gitea.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fix button alignments and remove unnecessary styles (#34206) 

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
pull/34228/head
Kerwin Bryant 8 months ago committed by GitHub
parent
a4f22a3e80
commit
bde014e46d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
22 changed files with 98 additions and 166 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      templates/devtest/gitea-ui.tmpl
  2. 2
      templates/repo/clone_panel.tmpl
  3. 2
      templates/repo/diff/box.tmpl
  4. 16
      templates/repo/diff/conversation.tmpl
  5. 4
      templates/repo/graph.tmpl
  6. 6
      templates/repo/graph/commits.tmpl
  7. 10
      templates/repo/header.tmpl
  8. 8
      templates/repo/issue/view_content/conversation.tmpl
  9. 2
      templates/repo/release/new.tmpl
  10. 2
      templates/repo/release_tag_header.tmpl
  11. 2
      templates/repo/star_unstar.tmpl
  12. 2
      templates/repo/watch_unwatch.tmpl
  13. 2
      templates/shared/actions/runner_list.tmpl
  14. 13
      web_src/css/base.css
  15. 1
      web_src/css/features/gitgraph.css
  16. 103
      web_src/css/modules/button.css
  17. 13
      web_src/css/repo.css
  18. 3
      web_src/css/repo/clone.css
  19. 44
      web_src/css/repo/header.css
  20. 5
      web_src/css/repo/list-header.css
  21. 2
      web_src/js/components/DiffCommitSelector.vue
  22. 4
      web_src/js/components/RepoBranchTagSelector.vue

18
templates/devtest/gitea-ui.tmpl
Unescape View File

@ -9,16 +9,16 @@
<a class="silenced" href="#">silenced</a> <a class="silenced" href="#">silenced</a>
</div> </div>
<h1>Button</h1> <h1>Button</h1>
<div> ".ui.button" styles:
Style: <div class="flex-text-block tw-gap-4">
<label><input type="checkbox" name="button-style-compact" value="compact">compact</label> <label class="gt-checkbox"><input type="radio" name="button-style-size" value="">(normal)</label>
<label><input type="radio" name="button-style-size" value="">(normal)</label> <label class="gt-checkbox"><input type="radio" name="button-style-size" value="small">small</label>
<label><input type="radio" name="button-style-size" value="tiny">tiny</label> <label class="gt-checkbox"><input type="radio" name="button-style-size" value="tiny">tiny</label>
<label><input type="radio" name="button-style-size" value="mini">mini</label> <label class="gt-checkbox"><input type="radio" name="button-style-size" value="mini">mini</label>
</div> </div>
<div> <div class="flex-text-block tw-gap-4">
State: <label class="gt-checkbox"><input type="checkbox" name="button-style-compact" value="compact">compact</label>
<label><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label> <label class="gt-checkbox"><input type="checkbox" name="button-state-disabled" value="disabled">disabled</label>
</div> </div>
<div id="devtest-button-samples"> <div id="devtest-button-samples">
<ul class="button-sample-groups"> <ul class="button-sample-groups">

2
templates/repo/clone_panel.tmpl
Unescape View File

@ -1,4 +1,4 @@
<button class="ui primary button js-btn-clone-panel"> <button class="ui compact primary button js-btn-clone-panel">
{{svg "octicon-code" 16}} {{svg "octicon-code" 16}}
<span>{{ctx.Locale.Tr "repo.code"}}</span> <span>{{ctx.Locale.Tr "repo.code"}}</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}

2
templates/repo/diff/box.tmpl
Unescape View File

@ -37,7 +37,7 @@
{{if .PageIsPullFiles}} {{if .PageIsPullFiles}}
<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"}}"> <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"}}">
{{/* the following will be replaced by vue component, but this avoids any loading artifacts till the vue component is initialized */}} {{/* the following will be replaced by vue component, but this avoids any loading artifacts till the vue component is initialized */}}
<div class="ui jump dropdown basic button custom"> <div class="ui jump dropdown tiny basic button custom">
{{svg "octicon-git-commit"}} {{svg "octicon-git-commit"}}
</div> </div>
</div> </div>

16
templates/repo/diff/conversation.tmpl
Unescape View File

@ -36,21 +36,21 @@
{{end}} {{end}}
<div id="code-comments-{{$comment.ID}}" class="field comment-code-cloud {{if $resolved}}tw-hidden{{end}}"> <div id="code-comments-{{$comment.ID}}" class="field comment-code-cloud {{if $resolved}}tw-hidden{{end}}">
<div class="comment-list"> <div class="comment-list">
<ui class="ui comments"> <div class="ui comments">
{{template "repo/diff/comments" dict "root" $ "comments" .comments}} {{template "repo/diff/comments" dict "root" $ "comments" .comments}}
</ui> </div>
</div> </div>
<div class="tw-flex tw-justify-end tw-items-center tw-gap-2 tw-mt-2 tw-flex-wrap"> <div class="flex-text-block tw-mt-2 tw-flex-wrap tw-justify-end">
<div class="ui buttons"> <div class="ui buttons">
<button class="ui icon tiny basic button previous-conversation"> <button class="ui icon tiny basic button previous-conversation">
{{svg "octicon-arrow-up" 12 "icon"}} {{ctx.Locale.Tr "repo.issues.previous"}} {{svg "octicon-arrow-up" 12}} {{ctx.Locale.Tr "repo.issues.previous"}}
</button> </button>
<button class="ui icon tiny basic button next-conversation"> <button class="ui icon tiny basic button next-conversation">
{{svg "octicon-arrow-down" 12 "icon"}} {{ctx.Locale.Tr "repo.issues.next"}} {{svg "octicon-arrow-down" 12}} {{ctx.Locale.Tr "repo.issues.next"}}
</button> </button>
</div> </div>
{{if and $.CanMarkConversation $hasReview (not $isReviewPending)}} {{if and $.CanMarkConversation $hasReview (not $isReviewPending)}}
<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"> <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">
{{if $resolved}} {{if $resolved}}
{{ctx.Locale.Tr "repo.issues.review.un_resolve_conversation"}} {{ctx.Locale.Tr "repo.issues.review.un_resolve_conversation"}}
{{else}} {{else}}
@ -59,8 +59,8 @@
</button> </button>
{{end}} {{end}}
{{if and $.SignedUserID (not $.Repository.IsArchived)}} {{if and $.SignedUserID (not $.Repository.IsArchived)}}
<button class="comment-form-reply ui primary tiny labeled icon button tw-mr-0"> <button class="comment-form-reply ui primary icon tiny button">
{{svg "octicon-reply" 16 "reply icon tw-mr-1"}}{{ctx.Locale.Tr "repo.diff.comment.reply"}} {{svg "octicon-reply" 12}}{{ctx.Locale.Tr "repo.diff.comment.reply"}}
</button> </button>
{{end}} {{end}}
</div> </div>

4
templates/repo/graph.tmpl
Unescape View File

@ -45,8 +45,8 @@
{{end}} {{end}}
</div> </div>
</div> </div>
<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> <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>
<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> <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>
</div> </div>
</h2> </h2>
<div class="ui dividing"></div> <div class="ui dividing"></div>

6
templates/repo/graph/commits.tmpl
Unescape View File

@ -17,18 +17,18 @@
{{if eq $refGroup "pull"}} {{if eq $refGroup "pull"}}
{{if or (not $.HidePRRefs) (SliceUtils.Contains $.SelectedBranches .Name)}} {{if or (not $.HidePRRefs) (SliceUtils.Contains $.SelectedBranches .Name)}}
<!-- it's intended to use issues not pulls, if it's a pull you will get redirected --> <!-- it's intended to use issues not pulls, if it's a pull you will get redirected -->
<a class="ui labelled basic tiny button" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled ctx ctx.Consts.RepoUnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}"> <a class="ui basic tiny button" href="{{$.RepoLink}}/{{if $.Repository.UnitEnabled ctx ctx.Consts.RepoUnitTypePullRequests}}pulls{{else}}issues{{end}}/{{.ShortName|PathEscape}}">
{{svg "octicon-git-pull-request"}} #{{.ShortName}} {{svg "octicon-git-pull-request"}} #{{.ShortName}}
</a> </a>
{{end}} {{end}}
{{else if eq $refGroup "tags"}} {{else if eq $refGroup "tags"}}
{{- template "repo/tag/name" dict "RepoLink" $.Repository.Link "TagName" .ShortName -}} {{- template "repo/tag/name" dict "RepoLink" $.Repository.Link "TagName" .ShortName -}}
{{else if eq $refGroup "remotes"}} {{else if eq $refGroup "remotes"}}
<a class="ui labelled basic tiny button" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}"> <a class="ui basic tiny button" href="{{$.RepoLink}}/src/commit/{{$commit.Rev|PathEscape}}">
{{svg "octicon-cross-reference"}} {{.ShortName}} {{svg "octicon-cross-reference"}} {{.ShortName}}
</a> </a>
{{else if eq $refGroup "heads"}} {{else if eq $refGroup "heads"}}
<a class="ui labelled basic tiny button" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}"> <a class="ui basic tiny button" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
{{svg "octicon-git-branch"}} {{.ShortName}} {{svg "octicon-git-branch"}} {{.ShortName}}
</a> </a>
{{else}} {{else}}

10
templates/repo/header.tmpl
Unescape View File

@ -38,20 +38,20 @@
</div> </div>
</div> </div>
{{if not (or .IsBeingCreated .IsBroken)}} {{if not (or .IsBeingCreated .IsBroken)}}
<div class="repo-buttons"> <div class="flex-text-block tw-flex-wrap">
{{if $.RepoTransfer}} {{if $.RepoTransfer}}
<form method="post" action="{{$.RepoLink}}/action/accept_transfer?redirect_to={{$.RepoLink}}"> <form method="post" action="{{$.RepoLink}}/action/accept_transfer?redirect_to={{$.RepoLink}}">
{{$.CsrfTokenHtml}} {{$.CsrfTokenHtml}}
<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}}"> <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}}">
<button type="submit" class="ui basic button {{if $.CanUserAcceptOrRejectTransfer}}primary {{end}} ok small"{{if not $.CanUserAcceptOrRejectTransfer}} disabled{{end}}> <button type="submit" class="ui compact small basic button {{if $.CanUserAcceptOrRejectTransfer}}primary {{end}} ok small"{{if not $.CanUserAcceptOrRejectTransfer}} disabled{{end}}>
{{ctx.Locale.Tr "repo.transfer.accept"}} {{ctx.Locale.Tr "repo.transfer.accept"}}
</button> </button>
</div> </div>
</form> </form>
<form method="post" action="{{$.RepoLink}}/action/reject_transfer?redirect_to={{$.RepoLink}}"> <form method="post" action="{{$.RepoLink}}/action/reject_transfer?redirect_to={{$.RepoLink}}">
{{$.CsrfTokenHtml}} {{$.CsrfTokenHtml}}
<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}}"> <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}}">
<button type="submit" class="ui basic button {{if $.CanUserAcceptOrRejectTransfer}}red {{end}}ok small"{{if not $.CanUserAcceptOrRejectTransfer}} disabled{{end}}> <button type="submit" class="ui compact small basic button {{if $.CanUserAcceptOrRejectTransfer}}red {{end}}ok small"{{if not $.CanUserAcceptOrRejectTransfer}} disabled{{end}}>
{{ctx.Locale.Tr "repo.transfer.reject"}} {{ctx.Locale.Tr "repo.transfer.reject"}}
</button> </button>
</div> </div>

8
templates/repo/issue/view_content/conversation.tmpl
Unescape View File

@ -109,7 +109,7 @@
</div> </div>
{{end}} {{end}}
</div> </div>
<div class="code-comment-buttons tw-flex tw-items-center tw-flex-wrap tw-mt-2 tw-mb-1 tw-mx-2"> <div class="flex-text-block tw-flex-wrap tw-my-2">
<div class="tw-flex-1"> <div class="tw-flex-1">
{{if $resolved}} {{if $resolved}}
<div class="ui grey text"> <div class="ui grey text">
@ -118,7 +118,7 @@
</div> </div>
{{end}} {{end}}
</div> </div>
<div class="code-comment-buttons-buttons"> <div class="flex-text-block">
{{if and $.CanMarkConversation $hasReview (not $isReviewPending)}} {{if and $.CanMarkConversation $hasReview (not $isReviewPending)}}
<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"> <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">
{{if $resolved}} {{if $resolved}}
@ -129,8 +129,8 @@
</button> </button>
{{end}} {{end}}
{{if and $.SignedUserID (not $.Repository.IsArchived)}} {{if and $.SignedUserID (not $.Repository.IsArchived)}}
<button class="comment-form-reply ui primary tiny labeled icon button tw-ml-1 tw-mr-0"> <button class="comment-form-reply ui primary icon tiny button">
{{svg "octicon-reply" 16 "reply icon tw-mr-1"}}{{ctx.Locale.Tr "repo.diff.comment.reply"}} {{svg "octicon-reply" 12}}{{ctx.Locale.Tr "repo.diff.comment.reply"}}
</button> </button>
{{end}} {{end}}
</div> </div>

2
templates/repo/release/new.tmpl
Unescape View File

@ -100,7 +100,7 @@
</div> </div>
<span class="help">{{ctx.Locale.Tr "repo.release.prerelease_helper"}}</span> <span class="help">{{ctx.Locale.Tr "repo.release.prerelease_helper"}}</span>
<div class="divider tw-mt-0"></div> <div class="divider tw-mt-0"></div>
<div class="tw-flex tw-justify-end"> <div class="flex-text-block tw-justify-end">
{{if .PageIsEditRelease}} {{if .PageIsEditRelease}}
<a class="ui small button" href="{{.RepoLink}}/releases"> <a class="ui small button" href="{{.RepoLink}}/releases">
{{ctx.Locale.Tr "repo.release.cancel"}} {{ctx.Locale.Tr "repo.release.cancel"}}

2
templates/repo/release_tag_header.tmpl
Unescape View File

@ -2,7 +2,7 @@
{{$canReadCode := $.Permission.CanRead ctx.Consts.RepoUnitTypeCode}} {{$canReadCode := $.Permission.CanRead ctx.Consts.RepoUnitTypeCode}}
{{if $canReadReleases}} {{if $canReadReleases}}
<div class="tw-flex"> <div class="flex-text-block">
<div class="tw-flex-1 tw-flex tw-items-center"> <div class="tw-flex-1 tw-flex tw-items-center">
<h2 class="ui compact small menu small-menu-items"> <h2 class="ui compact small menu small-menu-items">
<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> <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>

2
templates/repo/star_unstar.tmpl
Unescape View File

@ -1,4 +1,4 @@
<form hx-boost="true" hx-target="this" method="post" action="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}unstar{{else}}star{{end}}"> <form class="flex-text-inline" hx-boost="true" hx-target="this" method="post" action="{{$.RepoLink}}/action/{{if $.IsStaringRepo}}unstar{{else}}star{{end}}">
<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.star_guest_user"}}"{{end}}> <div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.star_guest_user"}}"{{end}}>
{{$buttonText := ctx.Locale.Tr "repo.star"}} {{$buttonText := ctx.Locale.Tr "repo.star"}}
{{if $.IsStaringRepo}}{{$buttonText = ctx.Locale.Tr "repo.unstar"}}{{end}} {{if $.IsStaringRepo}}{{$buttonText = ctx.Locale.Tr "repo.unstar"}}{{end}}

2
templates/repo/watch_unwatch.tmpl
Unescape View File

@ -1,4 +1,4 @@
<form hx-boost="true" hx-target="this" method="post" action="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}unwatch{{else}}watch{{end}}"> <form class="flex-text-inline" hx-boost="true" hx-target="this" method="post" action="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}unwatch{{else}}watch{{end}}">
<div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.watch_guest_user"}}"{{end}}> <div class="ui labeled button" {{if not $.IsSigned}}data-tooltip-content="{{ctx.Locale.Tr "repo.watch_guest_user"}}"{{end}}>
{{$buttonText := ctx.Locale.Tr "repo.watch"}} {{$buttonText := ctx.Locale.Tr "repo.watch"}}
{{if $.IsWatchingRepo}}{{$buttonText = ctx.Locale.Tr "repo.unwatch"}}{{end}} {{if $.IsWatchingRepo}}{{$buttonText = ctx.Locale.Tr "repo.unwatch"}}{{end}}

2
templates/shared/actions/runner_list.tmpl
Unescape View File

@ -16,7 +16,7 @@
<div class="header"> <div class="header">
Registration Token Registration Token
</div> </div>
<div class="ui input"> <div class="ui action input">
<input type="text" value="{{.RegistrationToken}}" readonly> <input type="text" value="{{.RegistrationToken}}" readonly>
<button class="ui basic label button" aria-label="{{ctx.Locale.Tr "copy"}}" data-clipboard-text="{{.RegistrationToken}}"> <button class="ui basic label button" aria-label="{{ctx.Locale.Tr "copy"}}" data-clipboard-text="{{.RegistrationToken}}">
{{svg "octicon-copy" 14}} {{svg "octicon-copy" 14}}

13
web_src/css/base.css
Unescape View File

@ -1037,12 +1037,13 @@ table th[data-sortt-desc] .svg {
text-align: left; text-align: left;
} }
.ellipsis-button { .ui.button.ellipsis-button {
padding: 0 5px 8px !important; padding: 0 5px 8px;
display: inline-block !important; display: inline-block;
font-weight: var(--font-weight-semibold) !important; font-weight: var(--font-weight-semibold);
line-height: 6px !important; line-height: 8px;
vertical-align: middle !important; vertical-align: middle;
min-height: 0;
} }
.precolors { .precolors {

1
web_src/css/features/gitgraph.css
Unescape View File

@ -116,6 +116,7 @@
max-width: 200px; max-width: 200px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
min-height: 0;
} }
#git-graph-container #graph-raw-list { #git-graph-container #graph-raw-list {

103
web_src/css/modules/button.css
Unescape View File

@ -1,20 +1,15 @@
/* based on Fomantic UI checkbox module, with just the parts extracted that we use. If you find any
unused rules here after refactoring, please remove them. */
.ui.button { .ui.button {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-flex;
min-height: 1em;
outline: none; outline: none;
vertical-align: baseline;
font-family: var(--fonts-regular); font-family: var(--fonts-regular);
margin: 0 0.25em 0 0; margin: 0 0.25em 0 0;
padding: 0.78571429em 1.5em;
font-weight: var(--font-weight-normal); font-weight: var(--font-weight-normal);
font-size: 1rem;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
line-height: 1; line-height: 1;
border-radius: 0.28571429rem; border-radius: var(--border-radius);
user-select: none; user-select: none;
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
justify-content: center; justify-content: center;
@ -58,12 +53,13 @@
pointer-events: none !important; pointer-events: none !important;
} }
/* there is no "ui labeled icon button" support" because it is not used */
.ui.labeled.button:not(.icon) { .ui.labeled.button:not(.icon) {
display: inline-flex;
flex-direction: row; flex-direction: row;
background: none; background: none;
padding: 0 !important; padding: 0;
border: none; border: none;
min-height: unset;
} }
.ui.labeled.button > .button { .ui.labeled.button > .button {
margin: 0; margin: 0;
@ -102,47 +98,60 @@
margin: 0 -0.21428571em 0 0.42857143em; margin: 0 -0.21428571em 0 0.42857143em;
} }
/* reference sizes (not exactly at the moment): normal: padding-x=21, height=38 ; compact: padding-x=15, height=32 */
.ui.button { /* stylelint-disable-line no-duplicate-selectors */
min-height: 38px;
padding: 0.57em /* around 8px */ 1.43em /* around 20px */;
}
.ui.compact.buttons .button, .ui.compact.buttons .button,
.ui.compact.button { .ui.compact.button {
padding: 0.58928571em 1.125em; padding: 0.42em /* around 8px */ 1.07em /* around 15px */;
min-height: 32px;
} }
.ui.compact.icon.buttons .button, .ui.compact.icon.buttons .button,
.ui.compact.icon.button { .ui.compact.icon.button {
padding: 0.58928571em; padding: 0.57em /* around 8px */;
}
.ui.compact.labeled.icon.button {
padding: 0.58928571em 3.69642857em;
}
.ui.compact.labeled.icon.button > .icon {
padding: 0.58928571em 0;
} }
.ui.buttons .button, /* reference size: mini: padding-x=16, height=30 ; compact: padding-x=12, height=26 */
.ui.button {
font-size: 1rem;
}
.ui.mini.buttons .dropdown, .ui.mini.buttons .dropdown,
.ui.mini.buttons .dropdown .menu > .item, .ui.mini.buttons .dropdown .menu > .item,
.ui.mini.buttons .button, .ui.mini.buttons .button,
.ui.ui.ui.ui.mini.button { .ui.ui.ui.ui.mini.button {
font-size: 0.78571429rem; font-size: 11px;
min-height: 30px;
}
.ui.ui.ui.ui.mini.button.compact {
min-height: 26px;
} }
/* reference size: tiny: padding-x=18, height=32 ; compact: padding-x=13, height=28 */
.ui.tiny.buttons .dropdown, .ui.tiny.buttons .dropdown,
.ui.tiny.buttons .dropdown .menu > .item, .ui.tiny.buttons .dropdown .menu > .item,
.ui.tiny.buttons .button, .ui.tiny.buttons .button,
.ui.ui.ui.ui.tiny.button { .ui.ui.ui.ui.tiny.button {
font-size: 0.85714286rem; font-size: 12px;
min-height: 32px;
}
.ui.ui.ui.ui.tiny.button.compact {
min-height: 28px;
} }
/* reference size: small: padding-x=19, height=34 ; compact: padding-x=14, height=30 */
.ui.small.buttons .dropdown, .ui.small.buttons .dropdown,
.ui.small.buttons .dropdown .menu > .item, .ui.small.buttons .dropdown .menu > .item,
.ui.small.buttons .button, .ui.small.buttons .button,
.ui.ui.ui.ui.small.button { .ui.ui.ui.ui.small.button {
font-size: 0.92857143rem; font-size: 13px;
min-height: 34px;
}
.ui.ui.ui.ui.small.button.compact {
min-height: 30px;
} }
.ui.icon.buttons .button, .ui.icon.buttons .button,
.ui.icon.button:not(.compact) { .ui.icon.button:not(.compact) {
padding: 0.78571429em; padding: 0.57em;
} }
.ui.icon.buttons .button > .icon, .ui.icon.buttons .button > .icon,
.ui.icon.button > .icon { .ui.icon.button > .icon {
@ -152,12 +161,12 @@
.ui.basic.buttons .button, .ui.basic.buttons .button,
.ui.basic.button { .ui.basic.button {
border-radius: 0.28571429rem; border-radius: var(--border-radius);
background: none; background: none;
} }
.ui.basic.buttons { .ui.basic.buttons {
border: 1px solid var(--color-secondary); border: 1px solid var(--color-secondary);
border-radius: 0.28571429rem; border-radius: var(--border-radius);
} }
.ui.basic.buttons .button { .ui.basic.buttons .button {
border-radius: 0; border-radius: 0;
@ -188,29 +197,6 @@
background: var(--color-active); background: var(--color-active);
} }
.ui.labeled.icon.button {
position: relative;
padding-left: 4.07142857em !important;
padding-right: 1.5em !important;
}
.ui.labeled.icon.button > .icon {
position: absolute;
top: 0;
left: 0;
height: 100%;
line-height: 1;
border-radius: 0;
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;
text-align: center;
animation: none;
padding: 0.78571429em 0;
margin: 0;
width: 2.57142857em;
background: var(--color-hover);
}
.ui.button.toggle.active { .ui.button.toggle.active {
background-color: var(--color-green); background-color: var(--color-green);
color: var(--color-white); color: var(--color-white);
@ -379,12 +365,12 @@ It needs some tricks to tweak the left/right borders with active state */
.ui.buttons .button:first-child { .ui.buttons .button:first-child {
border-left: none; border-left: none;
margin-left: 0; margin-left: 0;
border-top-left-radius: 0.28571429rem; border-top-left-radius: var(--border-radius);
border-bottom-left-radius: 0.28571429rem; border-bottom-left-radius: var(--border-radius);
} }
.ui.buttons .button:last-child { .ui.buttons .button:last-child {
border-top-right-radius: 0.28571429rem; border-top-right-radius: var(--border-radius);
border-bottom-right-radius: 0.28571429rem; border-bottom-right-radius: var(--border-radius);
} }
.ui.buttons .button:hover { .ui.buttons .button:hover {
@ -414,10 +400,3 @@ It needs some tricks to tweak the left/right borders with active state */
.ui.buttons .button.active + .button { .ui.buttons .button.active + .button {
border-left: none; border-left: none;
} }
/* apply the vertical padding of .compact to non-compact buttons when they contain a svg as they
would otherwise appear too large. Seen on "RSS Feed" button on repo releases tab. */
.ui.small.button:not(.compact):has(.svg) {
padding-top: 0.58928571em;
padding-bottom: 0.58928571em;
}

13
web_src/css/repo.css
Unescape View File

@ -1629,21 +1629,17 @@ td .commit-summary {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
flex-wrap: wrap;
} }
.repo-button-row-left { .repo-button-row-left {
flex-grow: 1; flex-grow: 1;
} }
.repo-button-row .button { .repo-button-row .ui.button {
padding: 6px 10px !important;
height: 30px;
flex-shrink: 0; flex-shrink: 0;
margin: 0; margin: 0;
} min-height: 30px;
.repo-button-row .button.dropdown:not(.icon) {
padding-right: 22px !important; /* normal buttons have !important paddings, so we need to override it for dropdown (Add File) icons */
} }
tbody.commit-list { tbody.commit-list {
@ -2221,10 +2217,11 @@ tbody.commit-list {
max-width: min(400px, 90vw); max-width: min(400px, 90vw);
} }
.branch-selector-dropdown .branch-dropdown-button { .branch-selector-dropdown .ui.button.branch-dropdown-button {
margin: 0; margin: 0;
max-width: 340px; max-width: 340px;
line-height: var(--line-height-default); line-height: var(--line-height-default);
padding: 0 0.5em 0 0.75em;
} }
/* FIXME: These media selectors are not ideal (just keep them from old code). /* FIXME: These media selectors are not ideal (just keep them from old code).

3
web_src/css/repo/clone.css
Unescape View File

@ -1,7 +1,7 @@
/* only used by "repo/empty.tmpl" */ /* only used by "repo/empty.tmpl" */
.clone-buttons-combo { .clone-buttons-combo {
display: flex; display: flex;
align-items: center; align-items: stretch;
flex: 1; flex: 1;
} }
@ -11,7 +11,6 @@
.ui.action.input.clone-buttons-combo input { .ui.action.input.clone-buttons-combo input {
border-radius: 0; /* override fomantic border-radius for ".ui.input > input" */ border-radius: 0; /* override fomantic border-radius for ".ui.input > input" */
height: 30px;
} }
/* used by the clone-panel popup */ /* used by the clone-panel popup */

44
web_src/css/repo/header.css
Unescape View File

@ -27,47 +27,3 @@
.repo-header .flex-item-trailing { .repo-header .flex-item-trailing {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.repo-buttons {
align-items: center;
display: flex;
flex-flow: row wrap;
word-break: keep-all;
gap: 0.25em;
}
.repo-buttons button[disabled] ~ .label {
opacity: var(--opacity-disabled);
color: var(--color-text-dark);
background: var(--color-light-mimic-enabled) !important;
}
.repo-buttons button[disabled] ~ .label:hover {
color: var(--color-primary-dark-1);
}
.repo-buttons .ui.labeled.button.disabled {
pointer-events: inherit !important;
}
.repo-buttons .ui.labeled.button.disabled > .label {
color: var(--color-text-dark);
background: var(--color-light-mimic-enabled) !important;
}
.repo-buttons .ui.labeled.button.disabled > .label:hover {
color: var(--color-primary-dark-1);
}
.repo-buttons .ui.labeled.button.disabled > .button {
pointer-events: none !important;
}
@media (max-width: 767.98px) {
.repo-buttons .ui.button,
.repo-buttons .ui.label {
padding-left: 8px;
padding-right: 8px;
margin: 0;
}
}

5
web_src/css/repo/list-header.css
Unescape View File

@ -1,6 +1,6 @@
.list-header { .list-header {
display: flex; display: flex;
align-items: center; align-items: stretch;
flex-wrap: wrap; flex-wrap: wrap;
gap: .5rem; gap: .5rem;
} }
@ -8,9 +8,8 @@
.list-header-search { .list-header-search {
display: flex; display: flex;
flex: 1; flex: 1;
align-items: center; align-items: stretch;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center;
min-width: 200px; /* to enable flexbox wrapping on mobile */ min-width: 200px; /* to enable flexbox wrapping on mobile */
} }

2
web_src/js/components/DiffCommitSelector.vue
Unescape View File

@ -212,7 +212,7 @@ export default defineComponent({
<div class="ui scrolling dropdown custom diff-commit-selector"> <div class="ui scrolling dropdown custom diff-commit-selector">
<button <button
ref="expandBtn" ref="expandBtn"
class="ui basic button" class="ui tiny basic button"
@click.stop="toggleMenu()" @click.stop="toggleMenu()"
:data-tooltip-content="locale.filter_changes_by_commit" :data-tooltip-content="locale.filter_changes_by_commit"
aria-haspopup="true" aria-haspopup="true"

4
web_src/js/components/RepoBranchTagSelector.vue
Unescape View File

@ -217,13 +217,13 @@ export default defineComponent({
</script> </script>
<template> <template>
<div class="ui dropdown custom branch-selector-dropdown ellipsis-text-items"> <div class="ui dropdown custom branch-selector-dropdown ellipsis-text-items">
<div tabindex="0" class="ui button branch-dropdown-button" @click="menuVisible = !menuVisible"> <div tabindex="0" class="ui compact button branch-dropdown-button" @click="menuVisible = !menuVisible">
<span class="flex-text-block gt-ellipsis"> <span class="flex-text-block gt-ellipsis">
<template v-if="dropdownFixedText">{{ dropdownFixedText }}</template> <template v-if="dropdownFixedText">{{ dropdownFixedText }}</template>
<template v-else> <template v-else>
<svg-icon v-if="currentRefType === 'tag'" name="octicon-tag"/> <svg-icon v-if="currentRefType === 'tag'" name="octicon-tag"/>
<svg-icon v-else name="octicon-git-branch"/> <svg-icon v-else name="octicon-git-branch"/>
<strong ref="dropdownRefName" class="tw-ml-2 tw-inline-block gt-ellipsis">{{ currentRefShortName }}</strong> <strong ref="dropdownRefName" class="tw-inline-block gt-ellipsis">{{ currentRefShortName }}</strong>
</template> </template>
</span> </span>
<svg-icon name="octicon-triangle-down" :size="14" class="dropdown icon"/> <svg-icon name="octicon-triangle-down" :size="14" class="dropdown icon"/>

Write Preview
Loading…
Cancel
Save