Skip to content

Commit e50c3e8

Browse files
silverwindwxiaoguangGiteaBot
authored
Navbar styling rework (#25343)
- 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 <[email protected]> Co-authored-by: Giteabot <[email protected]>
1 parent 54259db commit e50c3e8

File tree

4 files changed

+177
-133
lines changed

4 files changed

+177
-133
lines changed

‎templates/base/head_navbar.tmpl

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -3,62 +3,63 @@
33
{{$notificationUnreadCount = call .NotificationUnreadCount}}
44
{{end}}
55

6-
<nav id="navbar" class="ui secondary stackable menu" aria-label="{{.locale.Tr "aria.navbar"}}">
7-
<div class="item">
6+
<nav id="navbar" aria-label="{{.locale.Tr "aria.navbar"}}">
7+
<div class="navbar-left ui secondary menu">
88
<!-- the logo -->
9-
<a href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{.locale.Tr "dashboard"}}{{else}}{{.locale.Tr "home"}}{{end}}">
9+
<a class="item" id="navbar-logo" href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{.locale.Tr "dashboard"}}{{else}}{{.locale.Tr "home"}}{{end}}">
1010
<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true">
1111
</a>
1212

1313
<!-- 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 -->
14-
<div class="ui secondary menu navbar-mobile-right gt-gap-2">
14+
<div class="ui secondary menu item navbar-mobile-right gt-gap-2">
1515
{{if .IsSigned}}
16-
<a class="item gt-mx-0 gt-p-3" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
16+
<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"}}">
1717
<div class="gt-relative">
1818
{{svg "octicon-bell"}}
1919
<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
2020
</div>
2121
</a>
2222
{{end}}
23-
<button class="item ui icon mini button gt-p-3 gt-m-0" id="navbar-expand-toggle">{{svg "octicon-three-bars"}}</button>
23+
<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>
2424
</div>
25-
</div>
2625

27-
<!-- navbar links -->
28-
{{if and .IsSigned .MustChangePassword}}
29-
{{/* No links */}}
30-
{{else if .IsSigned}}
31-
{{if not .UnitIssuesGlobalDisabled}}
32-
<a class="item{{if .PageIsIssues}} active{{end}}" href="{{AppSubUrl}}/issues">{{.locale.Tr "issues"}}</a>
33-
{{end}}
34-
{{if not .UnitPullsGlobalDisabled}}
35-
<a class="item{{if .PageIsPulls}} active{{end}}" href="{{AppSubUrl}}/pulls">{{.locale.Tr "pull_requests"}}</a>
36-
{{end}}
37-
{{if not (and .UnitIssuesGlobalDisabled .UnitPullsGlobalDisabled)}}
38-
{{if .ShowMilestonesDashboardPage}}
39-
<a class="item{{if .PageIsMilestonesDashboard}} active{{end}}" href="{{AppSubUrl}}/milestones">{{.locale.Tr "milestones"}}</a>
26+
27+
<!-- navbar links non-mobile -->
28+
{{if and .IsSigned .MustChangePassword}}
29+
{{/* No links */}}
30+
{{else if .IsSigned}}
31+
{{if not .UnitIssuesGlobalDisabled}}
32+
<a class="item{{if .PageIsIssues}} active{{end}}" href="{{AppSubUrl}}/issues">{{.locale.Tr "issues"}}</a>
4033
{{end}}
34+
{{if not .UnitPullsGlobalDisabled}}
35+
<a class="item{{if .PageIsPulls}} active{{end}}" href="{{AppSubUrl}}/pulls">{{.locale.Tr "pull_requests"}}</a>
36+
{{end}}
37+
{{if not (and .UnitIssuesGlobalDisabled .UnitPullsGlobalDisabled)}}
38+
{{if .ShowMilestonesDashboardPage}}
39+
<a class="item{{if .PageIsMilestonesDashboard}} active{{end}}" href="{{AppSubUrl}}/milestones">{{.locale.Tr "milestones"}}</a>
40+
{{end}}
41+
{{end}}
42+
<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
43+
{{else if .IsLandingPageOrganizations}}
44+
<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/organizations">{{.locale.Tr "explore"}}</a>
45+
{{else}}
46+
<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
4147
{{end}}
42-
<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
43-
{{else if .IsLandingPageOrganizations}}
44-
<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/organizations">{{.locale.Tr "explore"}}</a>
45-
{{else}}
46-
<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
47-
{{end}}
4848

49-
{{template "custom/extra_links" .}}
49+
{{template "custom/extra_links" .}}
5050

51-
{{if not .IsSigned}}
52-
<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io">{{.locale.Tr "help"}}</a>
53-
{{end}}
51+
{{if not .IsSigned}}
52+
<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io">{{.locale.Tr "help"}}</a>
53+
{{end}}
54+
</div>
5455

5556
<!-- the full dropdown menus -->
56-
<div class="right menu">
57+
<div class="navbar-right ui secondary menu">
5758
{{if and .IsSigned .MustChangePassword}}
5859
<div class="ui dropdown jump item" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
5960
<span class="text gt-df gt-ac">
6061
{{avatar $.Context .SignedUser 24 "gt-mr-2"}}
61-
<span class="mobile-only gt-ml-2">{{.SignedUser.Name}}</span>
62+
<span class="mobile-only gt-ml-3">{{.SignedUser.Name}}</span>
6263
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
6364
</span>
6465
<div class="menu user-menu">
@@ -75,14 +76,14 @@
7576
</div><!-- end dropdown avatar menu -->
7677
{{else if .IsSigned}}
7778
{{if EnableTimetracking}}
78-
<a class="active-stopwatch-trigger item ui gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}" title="{{.locale.Tr "active_stopwatch"}}">
79+
<a class="active-stopwatch-trigger item gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}" title="{{.locale.Tr "active_stopwatch"}}">
7980
<div class="gt-relative">
8081
{{svg "octicon-stopwatch"}}
8182
<span class="header-stopwatch-dot"></span>
8283
</div>
83-
<span class="mobile-only gt-ml-2">{{.locale.Tr "active_stopwatch"}}</span>
84+
<span class="mobile-only gt-ml-3">{{.locale.Tr "active_stopwatch"}}</span>
8485
</a>
85-
<div class="active-stopwatch-popup tippy-target gt-p-3">
86+
<div class="active-stopwatch-popup item tippy-target gt-p-3">
8687
<div class="gt-df gt-ac">
8788
<a class="stopwatch-link gt-df gt-ac" href="{{.ActiveStopwatch.IssueLink}}">
8889
{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
@@ -111,7 +112,7 @@
111112
</div>
112113
{{end}}
113114

114-
<a href="{{AppSubUrl}}/notifications" class="item not-mobile gt-mx-0" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
115+
<a class="item not-mobile gt-mx-0" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
115116
<div class="gt-relative">
116117
{{svg "octicon-bell"}}
117118
<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
@@ -144,7 +145,7 @@
144145
<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
145146
<span class="text gt-df gt-ac">
146147
{{avatar $.Context .SignedUser 24 "gt-mr-2"}}
147-
<span class="mobile-only gt-ml-2">{{.SignedUser.Name}}</span>
148+
<span class="mobile-only gt-ml-3">{{.SignedUser.Name}}</span>
148149
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
149150
</span>
150151
<div class="menu user-menu">

‎web_src/css/base.css

Lines changed: 0 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -930,102 +930,6 @@ img.ui.avatar,
930930
}
931931
}
932932

933-
#navbar {
934-
display: flex;
935-
align-items: center;
936-
background: var(--color-nav-bg);
937-
border-bottom: 1px solid var(--color-secondary);
938-
min-height: 52px;
939-
margin: 0 !important;
940-
}
941-
942-
#navbar a.item:hover {
943-
background: var(--color-nav-hover-bg);
944-
}
945-
946-
#navbar .navbar-mobile-right {
947-
margin-left: auto;
948-
}
949-
950-
#navbar .navbar-mobile-right a.item:hover {
951-
background: transparent;
952-
}
953-
954-
#navbar .secondary.menu > .item > .svg,
955-
#navbar .right.menu > .item > .svg {
956-
margin-right: 0;
957-
}
958-
959-
@media (max-width: 767.98px) {
960-
/* hide all items */
961-
#navbar .item {
962-
display: none;
963-
}
964-
/* show the first navbar item (logo and its mobile right items) */
965-
#navbar > .item:first-child {
966-
display: flex;
967-
padding-top: 5px;
968-
padding-bottom: 5px;
969-
}
970-
#navbar .navbar-mobile-right > .item {
971-
display: flex;
972-
}
973-
/* show items if the navbar is open */
974-
#navbar.navbar-menu-open .item {
975-
display: flex;
976-
}
977-
#navbar.navbar-menu-open > .item:first-child {
978-
padding-bottom: 0;
979-
}
980-
}
981-
982-
@media (min-width: 767.98px) {
983-
#navbar .navbar-mobile-right,
984-
#navbar .mobile-only {
985-
display: none;
986-
}
987-
#navbar .right.menu {
988-
padding-right: 1em;
989-
}
990-
}
991-
992-
#navbar .navbar-mobile-right .item {
993-
width: auto !important;
994-
}
995-
996-
#navbar a.item .notification_count {
997-
color: var(--color-nav-bg);
998-
padding: 0 3.75px;
999-
font-size: 12px;
1000-
line-height: 12px;
1001-
font-weight: var(--font-weight-bold);
1002-
}
1003-
1004-
#navbar a.item:hover .notification_count,
1005-
#navbar a.item:hover .header-stopwatch-dot {
1006-
border-color: var(--color-nav-hover-bg);
1007-
}
1008-
1009-
#navbar a.item .notification_count,
1010-
#navbar a.item .header-stopwatch-dot {
1011-
background: var(--color-primary);
1012-
border: 2px solid var(--color-nav-bg);
1013-
position: absolute;
1014-
left: 6px;
1015-
top: -9px;
1016-
min-width: 17px;
1017-
min-height: 17px;
1018-
border-radius: 17px;
1019-
display: flex;
1020-
align-items: center;
1021-
justify-content: center;
1022-
}
1023-
1024-
#navbar .right.menu {
1025-
width: 100%;
1026-
justify-content: flex-end;
1027-
}
1028-
1029933
.ui.pagination.menu .active.item {
1030934
color: var(--color-text);
1031935
background: var(--color-active);

‎web_src/css/index.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
@import "./modules/breadcrumb.css";
88
@import "./modules/card.css";
99
@import "./modules/comment.css";
10+
@import "./modules/navbar.css";
1011

1112
@import "./shared/issuelist.css";
1213
@import "./shared/milestone.css";

‎web_src/css/modules/navbar.css

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
#navbar {
2+
display: flex;
3+
align-items: center;
4+
justify-content: space-between;
5+
background: var(--color-nav-bg);
6+
border-bottom: 1px solid var(--color-secondary);
7+
margin: 0 !important;
8+
padding: 0 10px;
9+
}
10+
11+
#navbar,
12+
#navbar .navbar-left,
13+
#navbar .navbar-right {
14+
min-height: 49px; /* +1px border-bottom */
15+
}
16+
17+
#navbar .navbar-left,
18+
#navbar .navbar-right {
19+
margin: 0;
20+
display: flex;
21+
align-items: center;
22+
}
23+
24+
#navbar-logo {
25+
margin: 0;
26+
}
27+
28+
#navbar .item {
29+
min-height: 36px;
30+
min-width: 36px;
31+
padding-top: 3px;
32+
padding-bottom: 3px;
33+
display: flex;
34+
justify-content: center;
35+
}
36+
37+
#navbar a.item:hover,
38+
#navbar button.item:hover {
39+
background: var(--color-nav-hover-bg);
40+
}
41+
42+
#navbar .secondary.menu > .item > .svg,
43+
#navbar .right.menu > .item > .svg {
44+
margin-right: 0;
45+
}
46+
47+
@media (max-width: 767.98px) {
48+
#navbar {
49+
align-items: stretch;
50+
}
51+
/* hide all items */
52+
#navbar .item {
53+
display: none;
54+
}
55+
#navbar #navbar-logo {
56+
display: flex;
57+
}
58+
/* show the first navbar item (logo and its mobile right items) */
59+
#navbar .navbar-left {
60+
flex: 1;
61+
display: flex;
62+
justify-content: space-between;
63+
}
64+
#navbar .navbar-mobile-right {
65+
display: flex;
66+
margin-left: auto !important;
67+
width: auto !important;
68+
}
69+
#navbar .navbar-mobile-right > .item {
70+
display: flex;
71+
width: auto !important;
72+
}
73+
/* show items if the navbar is open */
74+
#navbar.navbar-menu-open {
75+
padding-bottom: 8px;
76+
}
77+
#navbar.navbar-menu-open,
78+
#navbar.navbar-menu-open .navbar-right {
79+
flex-direction: column;
80+
}
81+
#navbar.navbar-menu-open .navbar-left {
82+
display: flex;
83+
flex-wrap: wrap;
84+
}
85+
#navbar.navbar-menu-open .item {
86+
display: flex;
87+
width: 100%;
88+
}
89+
#navbar.navbar-menu-open .navbar-left #navbar-logo {
90+
justify-content: flex-start;
91+
width: 50%;
92+
min-height: 48px;
93+
}
94+
#navbar.navbar-menu-open .navbar-left .navbar-mobile-right {
95+
justify-content: flex-end;
96+
width: 50%;
97+
min-height: 48px;
98+
}
99+
#navbar.navbar-menu-open .mobile-right-item {
100+
width: auto !important;
101+
}
102+
}
103+
104+
@media (min-width: 767.98px) {
105+
#navbar .navbar-mobile-right,
106+
#navbar .mobile-only {
107+
display: none;
108+
}
109+
}
110+
111+
#navbar a.item .notification_count {
112+
color: var(--color-nav-bg);
113+
padding: 0 3.75px;
114+
font-size: 12px;
115+
line-height: 12px;
116+
font-weight: var(--font-weight-bold);
117+
}
118+
119+
#navbar a.item:hover .notification_count,
120+
#navbar a.item:hover .header-stopwatch-dot {
121+
border-color: var(--color-nav-hover-bg);
122+
}
123+
124+
#navbar a.item .notification_count,
125+
#navbar a.item .header-stopwatch-dot {
126+
background: var(--color-primary);
127+
border: 2px solid var(--color-nav-bg);
128+
position: absolute;
129+
left: 6px;
130+
top: -9px;
131+
min-width: 17px;
132+
min-height: 17px;
133+
border-radius: 17px;
134+
display: flex;
135+
align-items: center;
136+
justify-content: center;
137+
z-index: 1; /* prevent menu button background from overlaying icon */
138+
}

0 commit comments

Comments
 (0)