diff options
| author | silverwind <me@silverwind.io> | 2023-05-12 12:23:53 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-05-12 10:23:53 +0000 |
| commit | a96c73f9790772d6fa34f462dfd5a87f9a4b0e21 (patch) | |
| tree | 04db24f225109e40ee1f39ace3ff033b5d994277 /web_src/js | |
| parent | 4b808133414e39348f56d691883426947bf2d322 (diff) | |
| download | gitea-a96c73f9790772d6fa34f462dfd5a87f9a4b0e21.tar.gz gitea-a96c73f9790772d6fa34f462dfd5a87f9a4b0e21.zip | |
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>
Diffstat (limited to 'web_src/js')
| -rw-r--r-- | web_src/js/components/RepoBranchTagSelector.vue | 2 |
1 files changed, 1 insertions, 1 deletions
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> |