From a96c73f9790772d6fa34f462dfd5a87f9a4b0e21 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Fri, 12 May 2023 12:23:53 +0200
Subject: [PATCH] Remove svg.svg class, restore .rss-icon (#24667)
Fix regression from https://github.com/go-gitea/gitea/pull/24476 where
the `svg.svg` class misaligns SVG icons across the site and streched
buttons unintentionally in vertical height.
Before (button 30.3px):
<img width="157" alt="Screenshot 2023-05-11 at 22 09 42"
src="https://github.com/go-gitea/gitea/assets/115237/0fd137ab-ab52-4cf8-afca-c45776d526d0">
After (button 30px):
<img width="160" alt="Screenshot 2023-05-11 at 22 09 59"
src="https://github.com/go-gitea/gitea/assets/115237/4b741f4b-0fd2-4fae-9bee-16a7deb098e8">
[vertical-align:
middle](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align)
is not suitable to align icons to text because
> Aligns the middle of the element with the baseline plus half the
x-height of the parent.
Example of `vertical-align: middle` from MDN:
<img width="232" alt="Screenshot 2023-05-11 at 22 29 28"
src="https://github.com/go-gitea/gitea/assets/115237/179fb756-85a1-4cab-8219-1a4958f333e2">
So I think the
[existing](https://github.com/go-gitea/gitea/blob/365bb77a5497d492836bf823cf780c823db27e8c/web_src/css/svg.css#L3)
`vertical-align: text-top` is generally still the best bet:
<img width="241" alt="Screenshot 2023-05-11 at 22 34 24"
src="https://github.com/go-gitea/gitea/assets/115237/0cd6edf5-12c0-4bdb-8771-a900f5ba2d35">
Co-authored-by: Giteabot <teabot@gitea.io>
---
templates/org/home.tmpl | 2 +-
templates/repo/header.tmpl | 2 +-
templates/repo/release_tag_header.tmpl | 2 +-
web_src/css/base.css | 11 +++++------
web_src/js/components/RepoBranchTagSelector.vue | 2 +-
5 files changed, 9 insertions(+), 10 deletions(-)
diff --git a/templates/org/home.tmpl b/templates/org/home.tmpl
index 27f0df0b38..97047c71cc 100644
--- a/templates/org/home.tmpl
+++ b/templates/org/home.tmpl
@@ -10,7 +10,7 @@
{{if .Org.Visibility.IsPrivate}}<span class="ui large basic horizontal label">{{.locale.Tr "org.settings.visibility.private_shortname"}}</span>{{end}}
</span>
{{if .EnableFeed}}
- <a class="muted" href="{{.Org.HomeLink}}.rss" data-tooltip-content="{{.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 24}}</a>
+ <a class="rss-icon gt-mx-3" href="{{.Org.HomeLink}}.rss" data-tooltip-content="{{.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 24}}</a>
{{end}}
</div>
{{if $.RenderedDescription}}<div class="render-content markup">{{$.RenderedDescription|Str2html}}</div>{{end}}
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index b2fd0710af..03f5a2e78f 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -36,7 +36,7 @@
{{end}}
</div>
{{if $.EnableFeed}}
- <a class="muted gt-ml-3" href="{{$.RepoLink}}.rss" data-tooltip-content="{{$.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</a>
+ <a class="rss-icon gt-ml-3" href="{{$.RepoLink}}.rss" data-tooltip-content="{{$.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</a>
{{end}}
</div>
{{if $.IsPullMirror}}
diff --git a/templates/repo/release_tag_header.tmpl b/templates/repo/release_tag_header.tmpl
index 6d022eebcc..d8f60a2c6c 100644
--- a/templates/repo/release_tag_header.tmpl
+++ b/templates/repo/release_tag_header.tmpl
@@ -11,7 +11,7 @@
{{end}}
</h2>
{{if .EnableFeed}}
- <a class="muted gt-mx-3" href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss" data-tooltip-content="{{.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</a>
+ <a class="rss-icon gt-mx-3" href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss" data-tooltip-content="{{.locale.Tr "rss_feed"}}">{{svg "octicon-rss" 18}}</a>
{{end}}
</div>
{{if and (not .PageIsTagList) .CanCreateRelease}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index aa86d140fe..3663511fef 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -364,12 +364,6 @@ a.label,
text-decoration: none !important;
}
-/* for most cases, we only use our svg icon as inline icon, so we need to make them inline-block and vertical-align: middle */
-svg.svg {
- display: inline-block;
- vertical-align: middle;
-}
-
.ui.red.labels .label,
.ui.ui.ui.red.label,
.ui.red.button,
@@ -2595,6 +2589,11 @@ a.ui.basic.label:hover {
line-height: .67em;
}
+.rss-icon {
+ display: inline-flex;
+ color: var(--color-text-light-1);
+}
+
table th[data-sortt-asc]:hover,
table th[data-sortt-desc]:hover {
background: rgba(0, 0, 0, 0.1) !important;
diff --git a/web_src/js/components/RepoBranchTagSelector.vue b/web_src/js/components/RepoBranchTagSelector.vue
index f02918da9a..6be09251bc 100644
--- a/web_src/js/components/RepoBranchTagSelector.vue
+++ b/web_src/js/components/RepoBranchTagSelector.vue
@@ -39,7 +39,7 @@
<div class="scrolling menu" ref="scrollContainer">
<div v-for="(item, index) in filteredItems" :key="item.name" class="item" :class="{selected: item.selected, active: active === index}" @click="selectItem(item)" :ref="'listItem' + index">
{{ item.name }}
- <a v-if="enableFeed && mode === 'branches'" role="button" class="ui compact right muted" :href="rssURLPrefix + item.url" target="_blank" @click.stop>
+ <a v-if="enableFeed && mode === 'branches'" role="button" class="rss-icon ui compact right" :href="rssURLPrefix + item.url" target="_blank" @click.stop>
<svg-icon name="octicon-rss" :size="14"/>
</a>
</div>