upstream/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2026-02-19 01:57:48 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix: improve alignment of icons in navbar (#11259)

Browse source 
Add `flex` or `inline-flex` to the direct parent element of the SVG icon in the navigation bar to make the overall alignment look better.

Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11259
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: panc <pan0xc@foxmail.com>
Co-committed-by: panc <pan0xc@foxmail.com>
This commit is contained in:
panc 2026-02-15 19:11:43 +01:00 committed by Gusted
parent e00471b00e
commit d6fc66c066
2 changed files with 17 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
templates/base/head_navbar.tmpl
View file

@ -14,7 +14,7 @@
<div class="ui secondary menu item navbar-mobile-right only-mobile">
{{if .IsSigned}}
<a id="mobile-notifications-icon" class="item tw-w-auto tw-p-2" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
<div class="tw-relative">
<div class="notification-icon-relative">
{{svg "octicon-bell"}}
<span class="notification_count{{if not $notificationUnreadCount}} tw-hidden{{end}}">{{$notificationUnreadCount}}</span>
</div>
@ -59,7 +59,7 @@
<summary data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
{{ctx.AvatarUtils.Avatar .SignedUser 24}}
<span class="only-mobile tw-ml-2">{{.SignedUser.Name}}</span>
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
<span class="not-mobile dropdown-icon">{{svg "octicon-triangle-down"}}</span>
</summary>
<div class="content">
<span class="header">
@ -78,8 +78,8 @@
</details>
{{else if .IsSigned}}
{{if EnableTimetracking}}
<a class="active-stopwatch-trigger item tw-mx-0{{if not .ActiveStopwatch}} tw-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}">
<div class="tw-relative">
<a class="active-stopwatch-trigger item tw-mx-0{{if not .ActiveStopwatch}} tw-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}" data-tippy-content="{{ctx.Locale.Tr "active_stopwatch"}}" aria-label="{{ctx.Locale.Tr "active_stopwatch"}}">
<div class="notification-icon-relative">
{{svg "octicon-stopwatch"}}
<span class="header-stopwatch-dot"></span>
</div>
@ -113,7 +113,7 @@
{{end}}
<a class="item not-mobile tw-mx-0" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
<div class="tw-relative">
<div class="notification-icon-relative">
{{svg "octicon-bell"}}
<span class="notification_count{{if not $notificationUnreadCount}} tw-hidden{{end}}">{{$notificationUnreadCount}}</span>
</div>
@ -122,7 +122,7 @@
<details class="dropdown dir-rtl">
<summary data-tooltip-content="{{ctx.Locale.Tr "create_new"}}">
{{svg "octicon-plus"}}
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
<span class="not-mobile dropdown-icon">{{svg "octicon-triangle-down"}}</span>
<span class="only-mobile">{{ctx.Locale.Tr "create_new"}}</span>
</summary>
<div class="content">
@ -154,7 +154,7 @@
<summary data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
{{ctx.AvatarUtils.Avatar .SignedUser 24}}
<span class="only-mobile tw-ml-2">{{.SignedUser.Name}}</span>
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
<span class="not-mobile dropdown-icon">{{svg "octicon-triangle-down"}}</span>
</summary>
<div class="content">
<span class="header">

10
web_src/css/modules/navbar.css
View file

@ -44,6 +44,12 @@
margin-right: 0;
}
/* icon with notification counter - positioned relative container */
#navbar .notification-icon-relative {
position: relative;
display: flex;
}
@media (max-width: 767.98px) {
#navbar {
align-items: stretch;
@ -123,6 +129,10 @@
min-height: 38px;
}
#navbar details.dropdown .dropdown-icon {
display: contents;
}
#navbar a.item .notification_count {
color: var(--color-nav-bg);
padding: 0 3.75px;