Nulo/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Navbar styling rework (#25343)

Browse source 
- Extract navbar CSS to own file
- Reduce height from 52px to 50px
- Give every item a hover effect of of 36px, including the logo and on
mobile
- Consistent horizontal padding of 10px left and right

<img width="549" alt="Screenshot 2023-06-18 at 13 41 16"
src="https://github.com/go-gitea/gitea/assets/115237/0b00d101-253e-4b1f-9ee2-322d60fb2e26">

<img width="98" alt="Screenshot 2023-06-18 at 14 03 43"
src="https://github.com/go-gitea/gitea/assets/115237/4ef5d98b-4d1e-45de-822e-c2c844e19876">
<img width="234" alt="Screenshot 2023-06-18 at 14 03 18"
src="https://github.com/go-gitea/gitea/assets/115237/a4d9b04b-83de-42aa-a9ce-f010a9690688">

<img width="873" alt="Screenshot 2023-06-18 at 13 58 28"
src="https://github.com/go-gitea/gitea/assets/115237/8cb8e31e-2adf-40c8-ae3f-d00d011b4d1b">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind 2023-06-20 22:35:25 +02:00 committed by GitHub
parent 54259dbf37
commit e50c3e8431
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 181 additions and 137 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

83
templates/base/head_navbar.tmpl
View file

@ -3,62 +3,63 @@
{{$notificationUnreadCount = call .NotificationUnreadCount}} {{$notificationUnreadCount = call .NotificationUnreadCount}}
{{end}} {{end}}
<nav id="navbar" class="ui secondary stackable menu" aria-label="{{.locale.Tr "aria.navbar"}}"> <nav id="navbar" aria-label="{{.locale.Tr "aria.navbar"}}">
<div class="item"> <div class="navbar-left ui secondary menu">
<!-- the logo --> <!-- the logo -->
<a href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{.locale.Tr "dashboard"}}{{else}}{{.locale.Tr "home"}}{{end}}"> <a class="item" id="navbar-logo" href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{.locale.Tr "dashboard"}}{{else}}{{.locale.Tr "home"}}{{end}}">
<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true"> <img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true">
</a> </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 --> <!-- 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 navbar-mobile-right gt-gap-2"> <div class="ui secondary menu item navbar-mobile-right gt-gap-2">
{{if .IsSigned}} {{if .IsSigned}}
<a class="item gt-mx-0 gt-p-3" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}"> <a class="item mobile-right-item gt-mr-2 gt-p-3" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
<div class="gt-relative"> <div class="gt-relative">
{{svg "octicon-bell"}} {{svg "octicon-bell"}}
<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span> <span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
</div> </div>
</a> </a>
{{end}} {{end}}
<button class="item ui icon mini button gt-p-3 gt-m-0" id="navbar-expand-toggle">{{svg "octicon-three-bars"}}</button> <button class="item mobile-right-item ui icon mini button gt-p-3 gt-m-0" id="navbar-expand-toggle">{{svg "octicon-three-bars"}}</button>
</div> </div>
<!-- navbar links non-mobile -->
{{if and .IsSigned .MustChangePassword}}
{{/* No links */}}
{{else if .IsSigned}}
{{if not .UnitIssuesGlobalDisabled}}
<a class="item{{if .PageIsIssues}} active{{end}}" href="{{AppSubUrl}}/issues">{{.locale.Tr "issues"}}</a>
{{end}}
{{if not .UnitPullsGlobalDisabled}}
<a class="item{{if .PageIsPulls}} active{{end}}" href="{{AppSubUrl}}/pulls">{{.locale.Tr "pull_requests"}}</a>
{{end}}
{{if not (and .UnitIssuesGlobalDisabled .UnitPullsGlobalDisabled)}}
{{if .ShowMilestonesDashboardPage}}
<a class="item{{if .PageIsMilestonesDashboard}} active{{end}}" href="{{AppSubUrl}}/milestones">{{.locale.Tr "milestones"}}</a>
{{end}}
{{end}}
<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
{{else if .IsLandingPageOrganizations}}
<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/organizations">{{.locale.Tr "explore"}}</a>
{{else}}
<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
{{end}}
{{template "custom/extra_links" .}}
{{if not .IsSigned}}
<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io">{{.locale.Tr "help"}}</a>
{{end}}
</div> </div>
<!-- navbar links -->
{{if and .IsSigned .MustChangePassword}}
{{/* No links */}}
{{else if .IsSigned}}
{{if not .UnitIssuesGlobalDisabled}}
<a class="item{{if .PageIsIssues}} active{{end}}" href="{{AppSubUrl}}/issues">{{.locale.Tr "issues"}}</a>
{{end}}
{{if not .UnitPullsGlobalDisabled}}
<a class="item{{if .PageIsPulls}} active{{end}}" href="{{AppSubUrl}}/pulls">{{.locale.Tr "pull_requests"}}</a>
{{end}}
{{if not (and .UnitIssuesGlobalDisabled .UnitPullsGlobalDisabled)}}
{{if .ShowMilestonesDashboardPage}}
<a class="item{{if .PageIsMilestonesDashboard}} active{{end}}" href="{{AppSubUrl}}/milestones">{{.locale.Tr "milestones"}}</a>
{{end}}
{{end}}
<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
{{else if .IsLandingPageOrganizations}}
<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/organizations">{{.locale.Tr "explore"}}</a>
{{else}}
<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
{{end}}
{{template "custom/extra_links" .}}
{{if not .IsSigned}}
<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io">{{.locale.Tr "help"}}</a>
{{end}}
<!-- the full dropdown menus --> <!-- the full dropdown menus -->
<div class="right menu"> <div class="navbar-right ui secondary menu">
{{if and .IsSigned .MustChangePassword}} {{if and .IsSigned .MustChangePassword}}
<div class="ui dropdown jump item" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}"> <div class="ui dropdown jump item" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
<span class="text gt-df gt-ac"> <span class="text gt-df gt-ac">
{{avatar $.Context .SignedUser 24 "gt-mr-2"}} {{avatar $.Context .SignedUser 24 "gt-mr-2"}}
<span class="mobile-only gt-ml-2">{{.SignedUser.Name}}</span> <span class="mobile-only gt-ml-3">{{.SignedUser.Name}}</span>
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span> <span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
</span> </span>
<div class="menu user-menu"> <div class="menu user-menu">
@ -75,14 +76,14 @@
</div><!-- end dropdown avatar menu --> </div><!-- end dropdown avatar menu -->
{{else if .IsSigned}} {{else if .IsSigned}}
{{if EnableTimetracking}} {{if EnableTimetracking}}
<a class="active-stopwatch-trigger item ui gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}" title="{{.locale.Tr "active_stopwatch"}}"> <a class="active-stopwatch-trigger item gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}" title="{{.locale.Tr "active_stopwatch"}}">
<div class="gt-relative"> <div class="gt-relative">
{{svg "octicon-stopwatch"}} {{svg "octicon-stopwatch"}}
<span class="header-stopwatch-dot"></span> <span class="header-stopwatch-dot"></span>
</div> </div>
<span class="mobile-only gt-ml-2">{{.locale.Tr "active_stopwatch"}}</span> <span class="mobile-only gt-ml-3">{{.locale.Tr "active_stopwatch"}}</span>
</a> </a>
<div class="active-stopwatch-popup tippy-target gt-p-3"> <div class="active-stopwatch-popup item tippy-target gt-p-3">
<div class="gt-df gt-ac"> <div class="gt-df gt-ac">
<a class="stopwatch-link gt-df gt-ac" href="{{.ActiveStopwatch.IssueLink}}"> <a class="stopwatch-link gt-df gt-ac" href="{{.ActiveStopwatch.IssueLink}}">
{{svg "octicon-issue-opened" 16 "gt-mr-3"}} {{svg "octicon-issue-opened" 16 "gt-mr-3"}}
@ -111,7 +112,7 @@
</div> </div>
{{end}} {{end}}
<a href="{{AppSubUrl}}/notifications" class="item not-mobile gt-mx-0" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}"> <a class="item not-mobile gt-mx-0" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
<div class="gt-relative"> <div class="gt-relative">
{{svg "octicon-bell"}} {{svg "octicon-bell"}}
<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span> <span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
@ -144,7 +145,7 @@
<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}"> <div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
<span class="text gt-df gt-ac"> <span class="text gt-df gt-ac">
{{avatar $.Context .SignedUser 24 "gt-mr-2"}} {{avatar $.Context .SignedUser 24 "gt-mr-2"}}
<span class="mobile-only gt-ml-2">{{.SignedUser.Name}}</span> <span class="mobile-only gt-ml-3">{{.SignedUser.Name}}</span>
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span> <span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
</span> </span>
<div class="menu user-menu"> <div class="menu user-menu">

96
web_src/css/base.css
View file

@ -930,102 +930,6 @@ img.ui.avatar,
} }
} }
#navbar {
display: flex;
align-items: center;
background: var(--color-nav-bg);
border-bottom: 1px solid var(--color-secondary);
min-height: 52px;
margin: 0 !important;
}
#navbar a.item:hover {
background: var(--color-nav-hover-bg);
}
#navbar .navbar-mobile-right {
margin-left: auto;
}
#navbar .navbar-mobile-right a.item:hover {
background: transparent;
}
#navbar .secondary.menu > .item > .svg,
#navbar .right.menu > .item > .svg {
margin-right: 0;
}
@media (max-width: 767.98px) {
/* hide all items */
#navbar .item {
display: none;
}
/* show the first navbar item (logo and its mobile right items) */
#navbar > .item:first-child {
display: flex;
padding-top: 5px;
padding-bottom: 5px;
}
#navbar .navbar-mobile-right > .item {
display: flex;
}
/* show items if the navbar is open */
#navbar.navbar-menu-open .item {
display: flex;
}
#navbar.navbar-menu-open > .item:first-child {
padding-bottom: 0;
}
}
@media (min-width: 767.98px) {
#navbar .navbar-mobile-right,
#navbar .mobile-only {
display: none;
}
#navbar .right.menu {
padding-right: 1em;
}
}
#navbar .navbar-mobile-right .item {
width: auto !important;
}
#navbar a.item .notification_count {
color: var(--color-nav-bg);
padding: 0 3.75px;
font-size: 12px;
line-height: 12px;
font-weight: var(--font-weight-bold);
}
#navbar a.item:hover .notification_count,
#navbar a.item:hover .header-stopwatch-dot {
border-color: var(--color-nav-hover-bg);
}
#navbar a.item .notification_count,
#navbar a.item .header-stopwatch-dot {
background: var(--color-primary);
border: 2px solid var(--color-nav-bg);
position: absolute;
left: 6px;
top: -9px;
min-width: 17px;
min-height: 17px;
border-radius: 17px;
display: flex;
align-items: center;
justify-content: center;
}
#navbar .right.menu {
width: 100%;
justify-content: flex-end;
}
.ui.pagination.menu .active.item { .ui.pagination.menu .active.item {
color: var(--color-text); color: var(--color-text);
background: var(--color-active); background: var(--color-active);

1
web_src/css/index.css
View file

@ -7,6 +7,7 @@
@import "./modules/breadcrumb.css"; @import "./modules/breadcrumb.css";
@import "./modules/card.css"; @import "./modules/card.css";
@import "./modules/comment.css"; @import "./modules/comment.css";
@import "./modules/navbar.css";
@import "./shared/issuelist.css"; @import "./shared/issuelist.css";
@import "./shared/milestone.css"; @import "./shared/milestone.css";

138
web_src/css/modules/navbar.css Normal file
View file

@ -0,0 +1,138 @@
#navbar {
display: flex;
align-items: center;
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;
}
#navbar-logo {
margin: 0;
}
#navbar .item {
min-height: 36px;
min-width: 36px;
padding-top: 3px;
padding-bottom: 3px;
display: flex;
justify-content: center;
}
#navbar a.item:hover,
#navbar button.item:hover {
background: var(--color-nav-hover-bg);
}
#navbar .secondary.menu > .item > .svg,
#navbar .right.menu > .item > .svg {
margin-right: 0;
}
@media (max-width: 767.98px) {
#navbar {
align-items: stretch;
}
/* hide all items */
#navbar .item {
display: none;
}
#navbar #navbar-logo {
display: flex;
}
/* show the first navbar item (logo and its mobile right items) */
#navbar .navbar-left {
flex: 1;
display: flex;
justify-content: space-between;
}
#navbar .navbar-mobile-right {
display: flex;
margin-left: auto !important;
width: auto !important;
}
#navbar .navbar-mobile-right > .item {
display: flex;
width: auto !important;
}
/* show items if the navbar is open */
#navbar.navbar-menu-open {
padding-bottom: 8px;
}
#navbar.navbar-menu-open,
#navbar.navbar-menu-open .navbar-right {
flex-direction: column;
}
#navbar.navbar-menu-open .navbar-left {
display: flex;
flex-wrap: wrap;
}
#navbar.navbar-menu-open .item {
display: flex;
width: 100%;
}
#navbar.navbar-menu-open .navbar-left #navbar-logo {
justify-content: flex-start;
width: 50%;
min-height: 48px;
}
#navbar.navbar-menu-open .navbar-left .navbar-mobile-right {
justify-content: flex-end;
width: 50%;
min-height: 48px;
}
#navbar.navbar-menu-open .mobile-right-item {
width: auto !important;
}
}
@media (min-width: 767.98px) {
#navbar .navbar-mobile-right,
#navbar .mobile-only {
display: none;
}
}
#navbar a.item .notification_count {
color: var(--color-nav-bg);
padding: 0 3.75px;
font-size: 12px;
line-height: 12px;
font-weight: var(--font-weight-bold);
}
#navbar a.item:hover .notification_count,
#navbar a.item:hover .header-stopwatch-dot {
border-color: var(--color-nav-hover-bg);
}
#navbar a.item .notification_count,
#navbar a.item .header-stopwatch-dot {
background: var(--color-primary);
border: 2px solid var(--color-nav-bg);
position: absolute;
left: 6px;
top: -9px;
min-width: 17px;
min-height: 17px;
border-radius: 17px;
display: flex;
align-items: center;
justify-content: center;
z-index: 1; /* prevent menu button background from overlaying icon */
}