community
/
gitea
3
0
Fork 0
Code Issues 1 Pull Requests Releases Wiki Activity

Apply compact padding to small buttons with svg icons (#29471) 

The buttons on the repo release tab were larger in height than on other
tabs because one of them contained the RSS icon which stretched the
button height by 3px. Workaround this problem by applying the "compact"
padding to any such button. They are within 0.4px in height now to
non-icon buttons.

Before:

<img width="406" alt="Screenshot 2024-02-28 at 15 30 23"
src="https://github.com/go-gitea/gitea/assets/115237/805bb93a-6fe4-40a0-82d1-03001bee8ecf">

After:

<img width="407" alt="Screenshot 2024-02-28 at 15 38 43"
src="https://github.com/go-gitea/gitea/assets/115237/27707588-890f-4852-ab08-105a57eda880">


For comparison, button on issue tab:

<img width="452" alt="Screenshot 2024-02-28 at 15 31 46"
src="https://github.com/go-gitea/gitea/assets/115237/74ac13d5-d016-49ba-9dd9-40ed32a748e9">
This commit is contained in:
silverwind 2024-02-28 21:26:12 +01:00 committed by GitHub
parent 252047ed2e
commit 850fc2516e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
templates/repo/release_tag_header.tmpl
View File

@ -13,7 +13,7 @@
</div>
{{if .EnableFeed}}
<a class="ui small button" href="{{.RepoLink}}/{{if .PageIsTagList}}tags{{else}}releases{{end}}.rss">
{{svg "octicon-rss" 18}} {{ctx.Locale.Tr "rss_feed"}}
{{svg "octicon-rss" 16}} {{ctx.Locale.Tr "rss_feed"}}
</a>
{{end}}
{{if and (not .PageIsTagList) .CanCreateRelease}}

7
web_src/css/modules/button.css
View File

@ -85,6 +85,13 @@ It needs some tricks to tweak the left/right borders with active state */
box-shadow: 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;
}
.ui.labeled.button.disabled > .button,
.ui.basic.buttons .button,
.ui.basic.button,