From 46c17c8029a539d276d25585fd6d54153ffa592f Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Thu, 15 Jun 2023 00:40:15 +0800 Subject: [PATCH] Use flex to align SVG and text (#25163) The code can be as simple as: ```html
{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)
{{svg "octicon-alert"}} {{svg "octicon-x"}} text
(inline)
``` ![image](https://github.com/go-gitea/gitea/assets/2114189/1d3c10f1-0bc7-4c26-b236-bad537d5c465) --------- Co-authored-by: Giteabot --- templates/devtest/gitea-ui.tmpl | 100 ++++++++++++++++ templates/repo/commits_list_small.tmpl | 4 +- templates/repo/diff/compare.tmpl | 4 +- .../repo/issue/branch_selector_field.tmpl | 2 +- templates/repo/issue/view_content/pull.tmpl | 98 ++++++++-------- .../repo/issue/view_content/sidebar.tmpl | 4 +- .../view_content/update_branch_by_merge.tmpl | 9 +- templates/repo/issue/view_title.tmpl | 2 +- templates/repo/release_tag_header.tmpl | 2 +- templates/repo/wiki/view.tmpl | 2 +- web_src/css/base.css | 108 ++++++++++++------ web_src/css/modules/button.css | 4 - web_src/css/repo.css | 29 +---- web_src/js/components/DashboardRepoList.vue | 2 +- .../js/components/PullRequestMergeForm.vue | 2 +- .../js/components/RepoBranchTagSelector.vue | 2 +- web_src/js/features/repo-issue-content.js | 4 +- 17 files changed, 247 insertions(+), 131 deletions(-) diff --git a/templates/devtest/gitea-ui.tmpl b/templates/devtest/gitea-ui.tmpl index 516b73cf0..0da443aad 100644 --- a/templates/devtest/gitea-ui.tmpl +++ b/templates/devtest/gitea-ui.tmpl @@ -128,6 +128,106 @@
1y future: {{TimeSince .TimeFuture1y $.locale}}
+
+

SVG alignment

+ +

Text with SVG

+
{{svg "octicon-alert"}} {{svg "octicon-x"}} text (block)
+
{{svg "octicon-alert"}} {{svg "octicon-x"}} text
(inline)
+
+
{{svg "octicon-alert"}} flex every line
+
{{svg "octicon-alert"}} flex every item
+
+ +

Button with SVG

+
+ +
+ + 123 +
+
+ +

Input with SVG

+
+ +
+ +

Dropdown with SVG

+
+ + + + + +
+ + +
+
+ +
+ + +
+
+

ComboMarkdownEditor

ps: no JS code attached, so just a layout
diff --git a/templates/repo/commits_list_small.tmpl b/templates/repo/commits_list_small.tmpl index 900d85360..6bbc19529 100644 --- a/templates/repo/commits_list_small.tmpl +++ b/templates/repo/commits_list_small.tmpl @@ -6,9 +6,7 @@
{{svg "octicon-git-commit"}} {{if .User}} - - {{avatar $.root.Context .User}} - + {{avatar $.root.Context .User}} {{else}} {{avatarByEmail $.root.Context .Author.Email .Author.Name}} {{end}} diff --git a/templates/repo/diff/compare.tmpl b/templates/repo/diff/compare.tmpl index 01a1cfd54..4efe81682 100644 --- a/templates/repo/diff/compare.tmpl +++ b/templates/repo/diff/compare.tmpl @@ -44,7 +44,7 @@