Mirrors/gitea
0
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-05-18 01:20:31 +02:00
Code Issues Activity

Add admin badge to navbar avatar (#36790)

Browse Source 
Replace the standalone site admin icon in the navbar with a
Discord-style shield badge on the user avatar.

<img width="278" height="73" alt="image"
src="https://github.com/user-attachments/assets/0b074006-30b9-43c6-8ef2-2120e32e139a"
/>


Fixes: https://github.com/go-gitea/gitea/issues/35904

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
silverwind 2026-03-01 21:48:47 +01:00 committed by GitHub
parent bc9817b317
commit c3b1e7372e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
templates/base/head_navbar.tmpl
View File

@ -87,8 +87,11 @@
</div><!-- end dropdown menu create new --> </div><!-- end dropdown menu create new -->
<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}"> <div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
<span class="text"> <span class="text tw-flex tw-items-center">
{{ctx.AvatarUtils.Avatar .SignedUser 24 "tw-mr-1"}} <span class="navbar-avatar">
{{ctx.AvatarUtils.Avatar .SignedUser 24 "tw-mr-2"}}
{{if .IsAdmin}}{{svg "octicon-shield-check" 16 "navbar-admin-badge"}}{{end}}
</span>
<span class="only-mobile">{{.SignedUser.Name}}</span> <span class="only-mobile">{{.SignedUser.Name}}</span>
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span> <span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
</span> </span>

5
templates/base/head_navbar_icons.tmpl
View File

@ -17,9 +17,4 @@
<span class="notification_count{{if not $notificationUnreadCount}} tw-hidden{{end}}">{{$notificationUnreadCount}}</span> <span class="notification_count{{if not $notificationUnreadCount}} tw-hidden{{end}}">{{$notificationUnreadCount}}</span>
</div> </div>
</a> </a>
{{if $data.IsSiteAdmin}}
<a class="item {{$itemExtraClass}}" href="{{AppSubUrl}}/-/admin" data-tooltip-content="{{ctx.Locale.Tr "admin_panel"}}">
{{svg "octicon-server"}}
</a>
{{end}}
{{end}} {{end}}

19
web_src/css/modules/navbar.css
View File

@ -102,12 +102,14 @@
} }
#navbar a.item:hover .notification_count, #navbar a.item:hover .notification_count,
#navbar a.item:hover .header-stopwatch-dot { #navbar a.item:hover .header-stopwatch-dot,
#navbar .item.active .navbar-admin-badge {
border-color: var(--color-nav-hover-bg); border-color: var(--color-nav-hover-bg);
} }
#navbar a.item .notification_count, #navbar a.item .notification_count,
#navbar a.item .header-stopwatch-dot { #navbar a.item .header-stopwatch-dot,
#navbar .item .navbar-admin-badge {
color: var(--color-nav-bg); color: var(--color-nav-bg);
padding: 0 3.75px; padding: 0 3.75px;
font-size: 12px; font-size: 12px;
@ -127,6 +129,19 @@
z-index: 1; /* prevent menu button background from overlaying icon */ z-index: 1; /* prevent menu button background from overlaying icon */
user-select: none; user-select: none;
white-space: nowrap; white-space: nowrap;
overflow: visible;
}
.navbar-avatar {
position: relative;
display: inline-flex;
}
#navbar .item .navbar-admin-badge {
position: absolute;
bottom: calc(100% - 29px);
left: calc(100% - 18px);
padding: 1.5px;
} }
.secondary-nav { .secondary-nav {