mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues Releases Wiki Activity

Improve navbar: add "admin" tip, add "active" style (#32927)

Browse Source 
By the way, remove all "tw-" patches and unused styles.
pull/32880/head^2
wxiaoguang 1 month ago committed by GitHub
parent 1c9b022c4d
commit 4774151e53
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 46 additions and 51 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 27
      templates/base/head_navbar.tmpl
  2. 70
      web_src/css/modules/navbar.css

27
templates/base/head_navbar.tmpl
Unescape View File

@ -11,9 +11,9 @@
</a>
<!-- mobile right menu, it must be here because in mobile view, each item is a flex column, the first item is a full row column -->
<div class="ui secondary menu item navbar-mobile-right only-mobile">
<div class="ui secondary menu navbar-mobile-right only-mobile">
{{if and .IsSigned EnableTimetracking .ActiveStopwatch}}
<a id="mobile-stopwatch-icon" class="active-stopwatch item tw-mx-0" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-seconds="{{.ActiveStopwatch.Seconds}}">
<a id="mobile-stopwatch-icon" class="active-stopwatch item" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-seconds="{{.ActiveStopwatch.Seconds}}">
<div class="tw-relative">
{{svg "octicon-stopwatch"}}
<span class="header-stopwatch-dot"></span>
@ -21,14 +21,14 @@
</a>
{{end}}
{{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"}}">
<a id="mobile-notifications-icon" class="item" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
<div class="tw-relative">
{{svg "octicon-bell"}}
<span class="notification_count{{if not $notificationUnreadCount}} tw-hidden{{end}}">{{$notificationUnreadCount}}</span>
</div>
</a>
{{end}}
<button class="item tw-w-auto ui icon mini button tw-p-2 tw-m-0" id="navbar-expand-toggle" aria-label="{{ctx.Locale.Tr "home.nav_menu"}}">{{svg "octicon-three-bars"}}</button>
<button class="item ui icon mini button tw-m-0" id="navbar-expand-toggle" aria-label="{{ctx.Locale.Tr "home.nav_menu"}}">{{svg "octicon-three-bars"}}</button>
</div>
<!-- navbar links non-mobile -->
@ -64,9 +64,9 @@
<div class="navbar-right">
{{if and .IsSigned .MustChangePassword}}
<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
<span class="text tw-flex tw-items-center">
<span class="text">
{{ctx.AvatarUtils.Avatar .SignedUser 24 "tw-mr-1"}}
<span class="only-mobile tw-ml-2">{{.SignedUser.Name}}</span>
<span class="only-mobile">{{.SignedUser.Name}}</span>
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
</span>
<div class="menu user-menu">
@ -83,7 +83,7 @@
</div><!-- end dropdown avatar menu -->
{{else if .IsSigned}}
{{if and EnableTimetracking .ActiveStopwatch}}
<a class="item not-mobile active-stopwatch tw-mx-0" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-seconds="{{.ActiveStopwatch.Seconds}}">
<a class="item not-mobile active-stopwatch" href="{{.ActiveStopwatch.IssueLink}}" title="{{ctx.Locale.Tr "active_stopwatch"}}" data-seconds="{{.ActiveStopwatch.Seconds}}">
<div class="tw-relative">
{{svg "octicon-stopwatch"}}
<span class="header-stopwatch-dot"></span>
@ -91,14 +91,14 @@
</a>
{{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"}}">
<a class="item not-mobile" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{ctx.Locale.Tr "notifications"}}" aria-label="{{ctx.Locale.Tr "notifications"}}">
<div class="tw-relative">
{{svg "octicon-bell"}}
<span class="notification_count{{if not $notificationUnreadCount}} tw-hidden{{end}}">{{$notificationUnreadCount}}</span>
</div>
</a>
<div class="ui dropdown jump item tw-mx-0 tw-pr-2" data-tooltip-content="{{ctx.Locale.Tr "create_new"}}">
<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "create_new"}}">
<span class="text">
{{svg "octicon-plus"}}
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
@ -121,12 +121,14 @@
</div><!-- end content create new menu -->
</div><!-- end dropdown menu create new -->
<div class="ui dropdown jump item tw-mx-0 tw-pr-2" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
<span class="text tw-flex tw-items-center">
<div class="ui dropdown jump item" data-tooltip-content="{{ctx.Locale.Tr "user_profile_and_more"}}">
<span class="text">
{{ctx.AvatarUtils.Avatar .SignedUser 24 "tw-mr-1"}}
<span class="only-mobile tw-ml-2">{{.SignedUser.Name}}</span>
<span class="only-mobile">{{.SignedUser.Name}}</span>
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
</span>
{{/* do not localize it, here it needs the fixed length (width) to make UI comfortable */}}
{{if .IsAdmin}}<span class="navbar-profile-admin">admin</span>{{end}}
<div class="menu user-menu">
<div class="ui header">
{{ctx.Locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
@ -157,7 +159,6 @@
</a>
{{if .IsAdmin}}
<div class="divider"></div>
<a class="{{if .PageIsAdmin}}active {{end}}item" href="{{AppSubUrl}}/-/admin">
{{svg "octicon-server"}}
{{ctx.Locale.Tr "admin_panel"}}

70
web_src/css/modules/navbar.css
Unescape View File

@ -4,51 +4,34 @@
justify-content: space-between;
background: var(--color-nav-bg);
border-bottom: 1px solid var(--color-secondary);
margin: 0 !important;
padding: 0 10px;
}
#navbar,
#navbar .navbar-left,
#navbar .navbar-right {
min-height: 49px; /* +1px border-bottom */
}
#navbar .navbar-left,
#navbar .navbar-right {
margin: 0;
display: flex;
align-items: center;
gap: 5px;
}
#navbar-logo {
margin: 0;
min-height: 49px; /* +1px border-bottom */
}
.navbar-left > .item,
.navbar-right > .item {
.navbar-right > .item,
.navbar-mobile-right > .item {
flex: 0 0 auto;
display: flex;
align-items: center;
color: var(--color-nav-text);
position: relative;
text-decoration: none;
line-height: var(--line-height-default);
flex: 0 0 auto;
font-weight: var(--font-weight-normal);
align-items: center;
padding: .78571429em .92857143em;
border-radius: .28571429rem;
}
#navbar .item {
min-height: 36px;
min-width: 36px;
padding-top: 3px;
padding-bottom: 3px;
display: flex;
padding: 3px 13px;
border-radius: 4px;
}
#navbar .dropdown .item {
justify-content: stretch;
#navbar .item.active {
background: var(--color-active);
}
#navbar a.item:hover,
@ -56,9 +39,8 @@
background: var(--color-nav-hover-bg);
}
#navbar .secondary.menu > .item > .svg,
#navbar .right.menu > .item > .svg {
margin-right: 0;
#navbar .item.ui.dropdown {
padding-right: 5px;
}
@media (max-width: 767.98px) {
@ -80,12 +62,12 @@
}
#navbar .navbar-mobile-right {
display: flex;
margin: 0 0 0 auto !important;
width: auto !important;
margin: 0 0 0 auto;
width: auto;
}
#navbar .navbar-mobile-right > .item {
display: flex;
width: auto !important;
width: auto;
}
/* show items if the navbar is open */
#navbar.navbar-menu-open {
@ -96,13 +78,12 @@
flex-direction: column;
}
#navbar.navbar-menu-open .navbar-left {
display: flex;
flex-wrap: wrap;
}
#navbar.navbar-menu-open .item {
#navbar.navbar-menu-open .navbar-left > .item,
#navbar.navbar-menu-open .navbar-right > .item {
display: flex;
width: 100%;
margin: 0;
}
#navbar.navbar-menu-open .navbar-left #navbar-logo {
justify-content: flex-start;
@ -111,14 +92,27 @@
#navbar.navbar-menu-open .navbar-left .navbar-mobile-right {
justify-content: flex-end;
width: 50%;
min-height: 48px;
min-height: 49px;
}
#navbar #mobile-stopwatch-icon,
#navbar #mobile-notifications-icon {
margin-right: 6px !important;
margin-right: 6px;
}
}
#navbar .ui.dropdown .navbar-profile-admin {
display: block;
position: absolute;
font-size: 10px;
font-weight: var(--font-weight-bold);
color: var(--color-nav-bg);
background: var(--color-primary);
padding: 2px 4px;
border-radius: 10px;
top: -1px;
left: 18px;
}
#navbar a.item:hover .notification_count,
#navbar a.item:hover .header-stopwatch-dot {
border-color: var(--color-nav-hover-bg);

Write Preview
Loading…
Cancel
Save