Skip to content

Commit 6a07558

Browse files
silverwindwxiaoguangGiteaBot
authored
Fix mobile navbar and misc cleanups (#25134)
- Fix and improve mobile navbar layout - Apply all cleanups suggested in #25111 - Make media query breakpoints match Fomantic's exactly - Clean up whitespace in class on navbar items Mobile navbar before and after: <img width="745" alt="Screenshot 2023-06-08 at 08 40 56" src="https://github.com/go-gitea/gitea/assets/115237/ca84b239-b10f-41db-8c06-dcf2b6dd9d28"> <img width="739" alt="Screenshot 2023-06-08 at 08 41 23" src="https://github.com/go-gitea/gitea/assets/115237/09133c54-eb7e-4110-858c-ead23c3b7521"> --------- Co-authored-by: wxiaoguang <[email protected]> Co-authored-by: Giteabot <[email protected]>
1 parent 623b3b5 commit 6a07558

23 files changed

+218
-260
lines changed

‎templates/base/head_navbar.tmpl

Lines changed: 67 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,88 @@
1-
<nav class="ui container secondary stackable main menu" id="navbar" aria-label="{{.locale.Tr "aria.navbar"}}">
2-
{{$notificationUnreadCount := 0}}
3-
{{if .IsSigned}}
4-
{{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}}
5-
{{end}}
6-
<div class="item brand gt-sb">
1+
{{$notificationUnreadCount := 0}}
2+
{{if and .IsSigned .NotificationUnreadCount}}
3+
{{$notificationUnreadCount = call .NotificationUnreadCount}}
4+
{{end}}
5+
6+
<nav id="navbar" class="ui secondary stackable menu" aria-label="{{.locale.Tr "aria.navbar"}}">
7+
<div class="item">
8+
<!-- the logo -->
79
<a href="{{AppSubUrl}}/" aria-label="{{if .IsSigned}}{{.locale.Tr "dashboard"}}{{else}}{{.locale.Tr "home"}}{{end}}">
810
<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true">
911
</a>
10-
<div class="gt-df gt-ac">
12+
13+
<!-- 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">
1115
{{if .IsSigned}}
12-
<a href="{{AppSubUrl}}/notifications" class="mobile-only gt-mr-4 gt-mt-3" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
13-
<span class="fitted item">
16+
<a class="item gt-mx-0 gt-p-3" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
17+
<div class="gt-relative">
1418
{{svg "octicon-bell"}}
15-
<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">
16-
{{$notificationUnreadCount}}
17-
</span>
18-
</span>
19+
<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
20+
</div>
1921
</a>
2022
{{end}}
21-
<button class="ui icon button mobile-only" id="navbar-expand-toggle">
22-
{{svg "octicon-three-bars"}}
23-
</button>
23+
<button class="item ui icon mini button gt-p-3 gt-m-0" id="navbar-expand-toggle">{{svg "octicon-three-bars"}}</button>
2424
</div>
2525
</div>
2626

27+
<!-- navbar links -->
2728
{{if and .IsSigned .MustChangePassword}}
2829
{{/* No links */}}
2930
{{else if .IsSigned}}
3031
{{if not .UnitIssuesGlobalDisabled}}
31-
<a class="item {{if .PageIsIssues}}active{{end}}" href="{{AppSubUrl}}/issues">{{.locale.Tr "issues"}}</a>
32+
<a class="item{{if .PageIsIssues}} active{{end}}" href="{{AppSubUrl}}/issues">{{.locale.Tr "issues"}}</a>
3233
{{end}}
3334
{{if not .UnitPullsGlobalDisabled}}
34-
<a class="item {{if .PageIsPulls}}active{{end}}" href="{{AppSubUrl}}/pulls">{{.locale.Tr "pull_requests"}}</a>
35+
<a class="item{{if .PageIsPulls}} active{{end}}" href="{{AppSubUrl}}/pulls">{{.locale.Tr "pull_requests"}}</a>
3536
{{end}}
3637
{{if not (and .UnitIssuesGlobalDisabled .UnitPullsGlobalDisabled)}}
37-
{{if .ShowMilestonesDashboardPage}}<a class="item {{if .PageIsMilestonesDashboard}}active{{end}}" href="{{AppSubUrl}}/milestones">{{.locale.Tr "milestones"}}</a>{{end}}
38+
{{if .ShowMilestonesDashboardPage}}
39+
<a class="item{{if .PageIsMilestonesDashboard}} active{{end}}" href="{{AppSubUrl}}/milestones">{{.locale.Tr "milestones"}}</a>
40+
{{end}}
3841
{{end}}
39-
<a class="item {{if .PageIsExplore}}active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
42+
<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
4043
{{else if .IsLandingPageOrganizations}}
41-
<a class="item {{if .PageIsExplore}}active{{end}}" href="{{AppSubUrl}}/explore/organizations">{{.locale.Tr "explore"}}</a>
44+
<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/organizations">{{.locale.Tr "explore"}}</a>
4245
{{else}}
43-
<a class="item {{if .PageIsExplore}}active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
46+
<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
4447
{{end}}
4548

4649
{{template "custom/extra_links" .}}
4750

48-
{{/* TODO
49-
<div class="item">
50-
<div class="ui icon input">
51-
<input class="searchbox" type="text" placeholder="{{.locale.Tr "search_project"}}">
52-
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
53-
</div>
54-
</div>
55-
*/}}
56-
51+
{{if not .IsSigned}}
52+
<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io">{{.locale.Tr "help"}}</a>
53+
{{end}}
5754

58-
{{if and .IsSigned .MustChangePassword}}
59-
<div class="right stackable menu">
60-
<div class="ui dropdown jump item" tabindex="-1" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
61-
<span class="text">
62-
{{avatar $.Context .SignedUser 24 "tiny"}}
63-
<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span>
64-
<span class="mobile-only">{{.SignedUser.Name}}</span>
65-
<span class="fitted not-mobile" tabindex="-1">{{svg "octicon-triangle-down"}}</span>
55+
<!-- the full dropdown menus -->
56+
<div class="right menu">
57+
{{if and .IsSigned .MustChangePassword}}
58+
<div class="ui dropdown jump item" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
59+
<span class="text gt-df gt-ac">
60+
{{avatar $.Context .SignedUser 24 "gt-mr-2"}}
61+
<span class="mobile-only gt-ml-2">{{.SignedUser.Name}}</span>
62+
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
6663
</span>
67-
<div class="menu user-menu" tabindex="-1">
64+
<div class="menu user-menu">
6865
<div class="ui header">
6966
{{.locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
7067
</div>
7168

7269
<div class="divider"></div>
7370
<a class="item link-action" href data-url="{{AppSubUrl}}/user/logout" data-redirect="{{AppSubUrl}}/">
7471
{{svg "octicon-sign-out"}}
75-
{{.locale.Tr "sign_out"}}<!-- Sign Out -->
72+
{{.locale.Tr "sign_out"}}
7673
</a>
7774
</div><!-- end content avatar menu -->
7875
</div><!-- end dropdown avatar menu -->
79-
</div>
80-
{{else if .IsSigned}}
81-
<div class="right stackable menu gt-mr-4">
76+
{{else if .IsSigned}}
8277
{{if EnableTimetracking}}
83-
<a class="active-stopwatch-trigger item ui gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}">
84-
<span class="fitted gt-relative">
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+
<div class="gt-relative">
8580
{{svg "octicon-stopwatch"}}
8681
<span class="header-stopwatch-dot"></span>
87-
<span class="sr-mobile-only">{{.locale.Tr "active_stopwatch"}}</span>
88-
</span>
82+
</div>
83+
<span class="mobile-only gt-ml-2">{{.locale.Tr "active_stopwatch"}}</span>
8984
</a>
90-
<div class="active-stopwatch-popup tippy-target">
85+
<div class="active-stopwatch-popup tippy-target gt-p-3">
9186
<div class="gt-df gt-ac">
9287
<a class="stopwatch-link gt-df gt-ac" href="{{.ActiveStopwatch.IssueLink}}">
9388
{{svg "octicon-issue-opened" 16 "gt-mr-3"}}
@@ -100,15 +95,15 @@
10095
{{.CsrfTokenHtml}}
10196
<button
10297
type="submit"
103-
class="ui button mini compact basic icon fitted"
98+
class="ui button mini compact basic icon"
10499
data-tooltip-content="{{.locale.Tr "repo.issues.stop_tracking"}}"
105100
>{{svg "octicon-square-fill"}}</button>
106101
</form>
107102
<form class="stopwatch-cancel" method="POST" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/cancel">
108103
{{.CsrfTokenHtml}}
109104
<button
110105
type="submit"
111-
class="ui button mini compact basic icon fitted"
106+
class="ui button mini compact basic icon"
112107
data-tooltip-content="{{.locale.Tr "repo.issues.cancel_tracking"}}"
113108
>{{svg "octicon-trash"}}</button>
114109
</form>
@@ -117,53 +112,50 @@
117112
{{end}}
118113

119114
<a href="{{AppSubUrl}}/notifications" class="item not-mobile gt-mx-0" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
120-
<span class="fitted item">
115+
<div class="gt-relative">
121116
{{svg "octicon-bell"}}
122-
<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">
123-
{{$notificationUnreadCount}}
124-
</span>
125-
</span>
117+
<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
118+
</div>
126119
</a>
127120

128121
<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{.locale.Tr "create_new"}}">
129122
<span class="text">
130-
<span class="fitted">{{svg "octicon-plus"}}</span>
131-
<span class="sr-mobile-only">{{.locale.Tr "create_new"}}</span>
132-
<span class="fitted not-mobile">{{svg "octicon-triangle-down"}}</span>
123+
{{svg "octicon-plus"}}
124+
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
125+
<span class="mobile-only">{{.locale.Tr "create_new"}}</span>
133126
</span>
134127
<div class="menu">
135128
<a class="item" href="{{AppSubUrl}}/repo/create">
136-
<span class="fitted">{{svg "octicon-plus"}}</span> {{.locale.Tr "new_repo"}}
129+
{{svg "octicon-plus"}} {{.locale.Tr "new_repo"}}
137130
</a>
138131
{{if not .DisableMigrations}}
139132
<a class="item" href="{{AppSubUrl}}/repo/migrate">
140-
<span class="fitted">{{svg "octicon-repo-push"}}</span> {{.locale.Tr "new_migrate"}}
133+
{{svg "octicon-repo-push"}} {{.locale.Tr "new_migrate"}}
141134
</a>
142135
{{end}}
143136
{{if .SignedUser.CanCreateOrganization}}
144137
<a class="item" href="{{AppSubUrl}}/org/create">
145-
<span class="fitted">{{svg "octicon-organization"}}</span> {{.locale.Tr "new_org"}}
138+
{{svg "octicon-organization"}} {{.locale.Tr "new_org"}}
146139
</a>
147140
{{end}}
148141
</div><!-- end content create new menu -->
149142
</div><!-- end dropdown menu create new -->
150143

151144
<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
152-
<span class="text">
153-
{{avatar $.Context .SignedUser 24 "tiny"}}
154-
<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span>
155-
<span class="mobile-only">{{.SignedUser.Name}}</span>
156-
<span class="fitted not-mobile" tabindex="-1">{{svg "octicon-triangle-down"}}</span>
145+
<span class="text gt-df gt-ac">
146+
{{avatar $.Context .SignedUser 24 "gt-mr-2"}}
147+
<span class="mobile-only gt-ml-2">{{.SignedUser.Name}}</span>
148+
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
157149
</span>
158-
<div class="menu user-menu" tabindex="-1">
150+
<div class="menu user-menu">
159151
<div class="ui header">
160152
{{.locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
161153
</div>
162154

163155
<div class="divider"></div>
164156
<a class="item" href="{{.SignedUser.HomeLink}}">
165157
{{svg "octicon-person"}}
166-
{{.locale.Tr "your_profile"}}<!-- Your profile -->
158+
{{.locale.Tr "your_profile"}}
167159
</a>
168160
{{if not .DisableStars}}
169161
<a class="item" href="{{.SignedUser.HomeLink}}?tab=stars">
@@ -173,15 +165,15 @@
173165
{{end}}
174166
<a class="item" href="{{AppSubUrl}}/notifications/subscriptions">
175167
{{svg "octicon-bell"}}
176-
{{.locale.Tr "notification.subscriptions"}}<!-- Subscriptions -->
168+
{{.locale.Tr "notification.subscriptions"}}
177169
</a>
178170
<a class="{{if .PageIsUserSettings}}active {{end}}item" href="{{AppSubUrl}}/user/settings">
179171
{{svg "octicon-tools"}}
180-
{{.locale.Tr "your_settings"}}<!-- Your settings -->
172+
{{.locale.Tr "your_settings"}}
181173
</a>
182174
<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io">
183175
{{svg "octicon-question"}}
184-
{{.locale.Tr "help"}}<!-- Help -->
176+
{{.locale.Tr "help"}}
185177
</a>
186178
{{if .IsAdmin}}
187179
<div class="divider"></div>
@@ -199,10 +191,7 @@
199191
</a>
200192
</div><!-- end content avatar menu -->
201193
</div><!-- end dropdown avatar menu -->
202-
</div><!-- end signed user right menu -->
203-
{{else}}
204-
<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io">{{.locale.Tr "help"}}</a>
205-
<div class="right stackable menu">
194+
{{else}}
206195
{{if .ShowRegistrationButton}}
207196
<a class="item{{if .PageIsSignUp}} active{{end}}" href="{{AppSubUrl}}/user/sign_up">
208197
{{svg "octicon-person"}} {{.locale.Tr "register"}}
@@ -211,6 +200,6 @@
211200
<a class="item{{if .PageIsSignIn}} active{{end}}" rel="nofollow" href="{{AppSubUrl}}/user/login{{if not .PageIsSignIn}}?redirect_to={{.CurrentURL}}{{end}}">
212201
{{svg "octicon-sign-in"}} {{.locale.Tr "sign_in"}}
213202
</a>
214-
</div><!-- end anonymous user right menu -->
215-
{{end}}
203+
{{end}}
204+
</div><!-- end full right menu -->
216205
</nav>

‎templates/org/home.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
{{if .Org.Website}}<div class="item">{{svg "octicon-link"}} <a target="_blank" rel="noopener noreferrer me" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}
2020
</div>
2121
</div>
22-
<div class="right stackable menu">
22+
<div class="right menu">
2323
<form method="post" action="{{.Link}}?action={{if $.IsFollowing}}unfollow{{else}}follow{{end}}&redirect_to={{$.Link}}">
2424
{{$.CsrfTokenHtml}}
2525
<button type="submit" class="ui basic button gt-mr-0">

‎templates/repo/settings/lfs_file_find.tmpl

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@
2929
<a class="ui primary sha label" href="{{$.RepoLink}}/commit/{{.String}}">{{ShortSha .String}}</a>
3030
{{end}}
3131
{{end}}
32-
<div class="mobile-only"></div>
3332
{{$.locale.Tr "repo.diff.commit"}}
3433
<a class="ui primary sha label" href="{{$.RepoLink}}/commit/{{.SHA}}">{{ShortSha .SHA}}</a>
3534
</td>

‎templates/status/500.tmpl

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,14 +15,16 @@
1515
</head>
1616
<body>
1717
<div class="full height">
18-
<nav class="ui container secondary stackable main menu" id="navbar">
18+
<nav class="ui secondary menu gt-border-secondary-bottom">
1919
<div class="ui container gt-df">
20-
<div class="item brand gt-f1">
20+
<div class="item gt-f1">
2121
<a href="{{AppSubUrl}}/" aria-label="{{.locale.Tr "home"}}">
2222
<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true">
2323
</a>
2424
</div>
25-
<button class="item ui icon button">{{svg "octicon-three-bars"}}</button>{{/* a fake button to make the UI looks better*/}}
25+
<div class="item">
26+
<button class="ui icon button disabled">{{svg "octicon-three-bars"}}</button>{{/* a fake button to make the UI looks better*/}}
27+
</div>
2628
</div>
2729
</nav>
2830
<div role="main" class="page-content status-page-500">

‎templates/user/dashboard/navbar.tmpl

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
{{end}}
7878

7979
{{if .ContextUser.IsOrganization}}
80-
<div class="right stackable menu">
80+
<div class="right menu">
8181
<a class="{{if .PageIsNews}}active {{end}}item gt-ml-auto" href="{{.ContextUser.DashboardLink}}{{if .Team}}/{{PathEscape .Team.Name}}{{end}}">
8282
{{svg "octicon-rss"}}&nbsp;{{.locale.Tr "activities"}}
8383
</a>

‎web_src/css/admin.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
width: calc(100% - 245px);
2121
}
2222

23-
@media (max-width: 767px) {
23+
@media (max-width: 767.98px) {
2424
.admin dl.admin-dl-horizontal dd {
2525
width: calc(100% - 185px);
2626
}
@@ -40,7 +40,7 @@
4040
white-space: nowrap;
4141
}
4242

43-
@media (max-width: 767px) {
43+
@media (max-width: 767.98px) {
4444
.admin dl.admin-dl-horizontal dt {
4545
width: 160px;
4646
}

0 commit comments

Comments
 (0)