Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use flex to align SVG and text #25163

Merged
merged 9 commits into from
Jun 14, 2023
Merged

Use flex to align SVG and text #25163

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ad8ff73
fix alignment
wxiaoguang Jun 9, 2023
8c2685c
improve
wxiaoguang Jun 13, 2023
30437a7
clean up
wxiaoguang Jun 13, 2023
6eaf170
clean up
wxiaoguang Jun 13, 2023
9213ad0
clean up
wxiaoguang Jun 13, 2023
669e64b
more demo
wxiaoguang Jun 13, 2023
88026b5
Merge branch 'main' into fix-svg-alignment
wxiaoguang Jun 13, 2023
f5220b6
improve demo
wxiaoguang Jun 14, 2023
d4ac745
Merge branch 'main' into fix-svg-alignment
GiteaBot Jun 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 100 additions & 0 deletions templates/devtest/gitea-ui.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,106 @@
<div>1y future: {{TimeSince .TimeFuture1y $.locale}}</div>
</div>

<div>
<h1>SVG alignment</h1>

<h2>Text with SVG</h2>
<div class="flex-text-block">{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)</div>
<div><div class="flex-text-inline">{{svg "octicon-alert"}} {{svg "octicon-x"}} text</div> (inline)</div>
<div class="flex-items-block">
<div class="item">{{svg "octicon-alert"}} flex every line</div>
<div class="item">{{svg "octicon-alert"}} flex every item</div>
</div>

<h2>Button with SVG</h2>
<div>
<button class="ui red button">{{svg "octicon-alert" 24}} {{svg "octicon-x" 24}} text</button>
<div class="ui labeled button">
<button class="ui basic button">labeled button</button>
<a class="ui basic label">123</a>
</div>
</div>

<h2>Input with SVG</h2>
<div>
<div class="ui icon search input">
<i class="icon">{{svg "octicon-search"}}</i>
<input type="text" placeholder="place holder">
</div>
</div>

<h2>Dropdown with SVG</h2>
<div>
<div class="ui dropdown" style="border: 1px red dashed" data-tooltip-content="border for demo purpose only">
<span class="text">simple</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<div class="item">item</div>
</div>
</div>
<div class="ui button dropdown">
<span class="text">button dropdown</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<div class="item">item</div>
</div>
</div>
<div class="ui search selection dropdown">
<span class="text">search ...</span>
<input name="value" class="search">
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
{{svg "octicon-x" 14 "remove icon"}}
<div class="menu">
<div class="item">item</div>
</div>
</div>
<div class="ui multiple selection dropdown">
<input class="hidden" value="1">
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
{{svg "octicon-x" 14 "remove icon"}}
<div class="default text">empty multiple dropdown</div>
<div class="menu">
<div class="item">item</div>
</div>
</div>
<div class="ui multiple clearable search selection dropdown">
<input type="hidden" value="1">
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
{{svg "octicon-x" 14 "remove icon"}}
<div class="default text">clearable search dropdown</div>
<div class="menu">
<div class="item" data-value="1">item</div>
</div>
</div>
<div class="ui buttons">
<button class="ui button">Button with Dropdown</button>
<div class="ui dropdown button icon">
{{svg "octicon-triangle-down"}}
<div class="menu">
<div class="item">item</div>
</div>
</div>
</div>
</div>

<div>
<div class="ui dropdown mini button">
<span class="text">small dropdown</span>
{{svg "octicon-triangle-down" 12 "dropdown icon"}}
<div class="menu">
<div class="item">item</div>
</div>
</div>
<div class="ui dropdown large button">
<span class="text">large dropdown</span>
{{svg "octicon-triangle-down" 18 "dropdown icon"}}
<div class="menu">
<div class="item">item</div>
</div>
</div>
</div>
</div>

<div>
<h1>ComboMarkdownEditor</h1>
<div>ps: no JS code attached, so just a layout</div>
Expand Down
4 changes: 1 addition & 3 deletions templates/repo/commits_list_small.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,7 @@
<div class="singular-commit" id="{{$tag}}">
<span class="badge badge-commit">{{svg "octicon-git-commit"}}</span>
{{if .User}}
<a href="{{.User.HomeLink}}">
{{avatar $.root.Context .User}}
</a>
<a class="avatar" href="{{.User.HomeLink}}">{{avatar $.root.Context .User}}</a>
{{else}}
{{avatarByEmail $.root.Context .Author.Email .Author.Name}}
{{end}}
Expand Down
4 changes: 2 additions & 2 deletions templates/repo/diff/compare.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
</div>
<div class="menu">
<div class="ui icon search input">
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
<i class="icon">{{svg "octicon-filter" 16}}</i>
<input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}...">
</div>
<div class="header">
Expand Down Expand Up @@ -113,7 +113,7 @@
</div>
<div class="menu">
<div class="ui icon search input">
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
<i class="icon">{{svg "octicon-filter" 16}}</i>
<input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}...">
</div>
<div class="header">
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/issue/branch_selector_field.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
</div>
<div class="menu">
<div class="ui icon search input">
<i class="icon gt-df gt-ac gt-jc gt-m-0">{{svg "octicon-filter" 16}}</i>
<i class="icon">{{svg "octicon-filter" 16}}</i>
<input name="search" placeholder="{{.locale.Tr "repo.filter_branch_and_tag"}}...">
</div>
<div class="header">
Expand Down
98 changes: 48 additions & 50 deletions templates/repo/issue/view_content/pull.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,13 @@
<div class="content">
{{template "repo/pulls/status" .}}
{{$showGeneralMergeForm := false}}
<div class="ui attached merge-section segment {{if not $.LatestCommitStatus}}no-header{{end}}">
<div class="ui attached merge-section segment {{if not $.LatestCommitStatus}}no-header{{end}} flex-items-block">
{{if .Issue.PullRequest.HasMerged}}
{{if .IsPullBranchDeletable}}
<div class="item item-section text gt-f1">
<div class="item-section-left">
<h3 class="gt-mb-3">
{{$.locale.Tr "repo.pulls.merged_success"}}
{{$.locale.Tr "repo.pulls.merged_success"}}
</h3>
<div class="merge-section-info">
{{$.locale.Tr "repo.pulls.merged_info_text" (printf "<code>%s</code>" (.HeadTarget | Escape)) | Str2html}}
Expand Down Expand Up @@ -58,93 +58,91 @@
{{end}}
</div>
{{else if .IsPullFilesConflicted}}
<div class="item text">
<div class="item">
{{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.files_conflicted"}}
<ul>
{{range .ConflictedFiles}}
<li>{{.}}</li>
{{end}}
</ul>
</div>
<ul>
{{range .ConflictedFiles}}
<li>{{.}}</li>
{{end}}
</ul>
{{else if .IsPullRequestBroken}}
<div class="item">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
{{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.data_broken"}}
</div>
{{else if .IsPullWorkInProgress}}
<div class="item toggle-wip gt-df gt-ac gt-sb" data-title="{{.Issue.Title}}" data-wip-prefix="{{(.WorkInProgressPrefix|Escape)}}" data-update-url="{{.Issue.Link}}/title">
<div>
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
<div class="item toggle-wip" data-title="{{.Issue.Title}}" data-wip-prefix="{{(.WorkInProgressPrefix|Escape)}}" data-update-url="{{.Issue.Link}}/title">
<div class="item-section-left flex-text-inline gt-f1">
{{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.cannot_merge_work_in_progress"}}
</div>
<div>
{{if or .HasIssuesOrPullsWritePermission .IsIssuePoster}}
<button class="ui compact button">
{{$.locale.Tr "repo.pulls.remove_prefix" (.WorkInProgressPrefix|Escape) | Safe}}
</button>
{{end}}
</div>
{{if or .HasIssuesOrPullsWritePermission .IsIssuePoster}}
<button class="ui compact button">
{{$.locale.Tr "repo.pulls.remove_prefix" (.WorkInProgressPrefix|Escape) | Safe}}
</button>
{{end}}
</div>
{{template "repo/issue/view_content/update_branch_by_merge" $}}
{{else if .Issue.PullRequest.IsChecking}}
<div class="item">
<i class="icon icon-octicon">{{svg "octicon-sync"}}</i>
{{svg "octicon-sync"}}
{{$.locale.Tr "repo.pulls.is_checking"}}
</div>
{{else if .Issue.PullRequest.IsAncestor}}
<div class="item">
<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
{{svg "octicon-alert"}}
{{$.locale.Tr "repo.pulls.is_ancestor"}}
</div>
{{else if or .Issue.PullRequest.CanAutoMerge .Issue.PullRequest.IsEmpty}}
{{if .IsBlockedByApprovals}}
<div class="item">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
{{$.locale.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .ProtectedBranch.RequiredApprovals}}
{{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.blocked_by_approvals" .GrantedApprovals .ProtectedBranch.RequiredApprovals}}
</div>
{{else if .IsBlockedByRejection}}
<div class="item">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
{{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.blocked_by_rejection"}}
</div>
{{else if .IsBlockedByOfficialReviewRequests}}
<div class="item">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
{{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.blocked_by_official_review_requests"}}
</div>
{{else if .IsBlockedByOutdatedBranch}}
<div class="item">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
{{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
</div>
{{else if .IsBlockedByChangedProtectedFiles}}
<div class="item">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
{{svg "octicon-x"}}
{{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}}
<ul>
{{range .ChangedProtectedFiles}}
<li>{{.}}</li>
{{end}}
</ul>
</div>
<ul>
{{range .ChangedProtectedFiles}}
<li>{{.}}</li>
{{end}}
</ul>
{{else if and .EnableStatusCheck (or .RequiredStatusCheckState.IsError .RequiredStatusCheckState.IsFailure)}}
<div class="item">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
{{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.required_status_check_failed"}}
</div>
{{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}}
<div class="item">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
{{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.required_status_check_missing"}}
</div>
{{else if and .AllowMerge .RequireSigned (not .WillSign)}}
<div class="item">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
{{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.require_signed_wont_sign"}}
</div>
<div class="item">
<i class="icon icon-octicon">{{svg "octicon-unlock"}}</i>
{{svg "octicon-unlock"}}
{{$.locale.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason)}}
</div>
{{end}}
Expand All @@ -158,23 +156,23 @@
{{if $canMergeNow}}
{{if $notAllOverridableChecksOk}}
<div class="item">
<i class="icon icon-octicon">{{svg "octicon-dot-fill"}}</i>
{{svg "octicon-dot-fill"}}
{{$.locale.Tr "repo.pulls.required_status_check_administrator"}}
</div>
{{else}}
<div class="item">
<i class="icon icon-octicon">{{svg "octicon-check"}}</i>
{{svg "octicon-check"}}
{{$.locale.Tr "repo.pulls.can_auto_merge_desc"}}
</div>
{{end}}
{{if .WillSign}}
<div class="item">
<i class="icon icon-octicon">{{svg "octicon-lock" 16 "text green"}}</i>
{{svg "octicon-lock" 16 "text green"}}
{{$.locale.Tr "repo.signing.will_sign" .SigningKey}}
</div>
{{else if .IsSigned}}
<div class="item">
<i class="icon icon-octicon">{{svg "octicon-unlock"}}</i>
{{svg "octicon-unlock"}}
{{$.locale.Tr (printf "repo.signing.wont_sign.%s" .WontSignReason)}}
</div>
{{end}}
Expand All @@ -184,7 +182,7 @@
<div class="ui divider"></div>

<div class="item">
<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
{{svg "octicon-alert"}}
{{$.locale.Tr "repo.pulls.is_empty"}}
</div>
{{end}}
Expand Down Expand Up @@ -315,19 +313,19 @@
</div>
{{else if .IsBlockedByOutdatedBranch}}
<div class="item text red">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
{{svg "octicon-x"}}
{{$.locale.Tr "repo.pulls.blocked_by_outdated_branch"}}
</div>
{{else if .IsBlockedByChangedProtectedFiles}}
<div class="item text red">
<i class="icon icon-octicon">{{svg "octicon-x"}}</i>
{{svg "octicon-x"}}
{{$.locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n" | Safe}}
<ul>
{{range .ChangedProtectedFiles}}
<li>{{.}}</li>
{{end}}
</ul>
</div>
<ul>
{{range .ChangedProtectedFiles}}
<li>{{.}}</li>
{{end}}
</ul>
{{else if and .EnableStatusCheck (not .RequiredStatusCheckState.IsSuccess)}}
<div class="item text red">
{{svg "octicon-x"}}
Expand Down
4 changes: 2 additions & 2 deletions templates/repo/issue/view_content/sidebar.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -273,7 +273,7 @@
<form method="POST" action="{{.Issue.Link}}/watch">
<input type="hidden" name="watch" value="{{if $.IssueWatch.IsWatching}}0{{else}}1{{end}}">
{{$.CsrfTokenHtml}}
<button class="fluid ui button gt-df gt-jc">
<button class="fluid ui button">
{{if $.IssueWatch.IsWatching}}
{{svg "octicon-mute" 16 "gt-mr-3"}}
{{.locale.Tr "repo.issues.unsubscribe"}}
Expand Down Expand Up @@ -558,7 +558,7 @@
{{if or .PinEnabled .Issue.IsPinned}}
<form class="gt-mt-2" method="POST" {{if $.NewPinAllowed}}action="{{.Issue.Link}}/pin"{{else}}data-tooltip-content="{{.locale.Tr "repo.issues.max_pinned"}}"{{end}}>
{{$.CsrfTokenHtml}}
<button class="fluid ui button gt-df gt-jc {{if not $.NewPinAllowed}}disabled{{end}}">
<button class="fluid ui button {{if not $.NewPinAllowed}}disabled{{end}}">
{{if not .Issue.IsPinned}}
{{svg "octicon-pin" 16 "gt-mr-3"}}
{{.locale.Tr "pin"}}
Expand Down
9 changes: 4 additions & 5 deletions templates/repo/issue/view_content/update_branch_by_merge.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{{if and (gt $.Issue.PullRequest.CommitsBehind 0) (not $.Issue.IsClosed) (not $.Issue.PullRequest.IsChecking) (not $.IsPullFilesConflicted) (not $.IsPullRequestBroken)}}
<div class="ui divider"></div>
<div class="item item-section">
<div class="item-section-left">
<i class="icon icon-octicon">{{svg "octicon-alert"}}</i>
<div class="item-section-left flex-text-inline">
{{svg "octicon-alert"}}
{{$.locale.Tr "repo.pulls.outdated_with_base_branch"}}
</div>
<div class="item-section-right">
Expand All @@ -14,9 +14,8 @@
{{$.locale.Tr "repo.pulls.update_branch"}}
</span>
</button>

<div class="ui dropdown icon button no-text">
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="ui dropdown icon button">
{{svg "octicon-triangle-down"}}
<div class="menu">
<a class="item active selected" data-do="{{$.Link}}/update">{{$.locale.Tr "repo.pulls.update_branch"}}</a>
<a class="item" data-do="{{$.Link}}/update?style=rebase">{{$.locale.Tr "repo.pulls.update_branch_rebase"}}</a>
Expand Down
Loading