Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix mobile navbar and misc cleanups #25134

Merged
merged 20 commits into from
Jun 9, 2023
Merged

Fix mobile navbar and misc cleanups #25134

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
33f31d0
Navbar and media query cleanups
silverwind Jun 8, 2023
ed52eca
rename shown to navbar-menu-open, refactor to vanilla js
silverwind Jun 8, 2023
3f5459a
refactor
wxiaoguang Jun 8, 2023
d7a11f2
revert tippy default theme
wxiaoguang Jun 8, 2023
4da5532
padding tweaks
silverwind Jun 8, 2023
1010fb1
change defaults for tippy
silverwind Jun 8, 2023
ab6965b
default theme to role
silverwind Jun 8, 2023
fa10574
reduce navbar height for mobile view
wxiaoguang Jun 8, 2023
252f84c
fine tune margin&padding
wxiaoguang Jun 8, 2023
9f8e0e5
fix for notification number
wxiaoguang Jun 8, 2023
61fb168
fix icon and tweak circle
silverwind Jun 8, 2023
239acda
add wrapper for positioning
silverwind Jun 8, 2023
06a6730
remove hover on mobile bell
silverwind Jun 8, 2023
1adbf7d
fix regression in stopwatch popup, make stopwatch circle the same as …
silverwind Jun 8, 2023
9dc564a
fix hiding of code-line-menu
silverwind Jun 8, 2023
bf74125
improve alignment of code-line-button
silverwind Jun 8, 2023
536a16c
only add padding-right for "right menu" on desktop, fine tune 500 page
wxiaoguang Jun 9, 2023
7733c00
Merge branch 'main' into navclean
GiteaBot Jun 9, 2023
5278753
Merge branch 'main' into navclean
GiteaBot Jun 9, 2023
062ac58
Merge branch 'main' into navclean
GiteaBot Jun 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 63 additions & 79 deletions templates/base/head_navbar.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,91 +1,83 @@
<nav class="ui container secondary stackable main menu" id="navbar" aria-label="{{.locale.Tr "aria.navbar"}}">
{{$notificationUnreadCount := 0}}
{{if .IsSigned}}
{{if .NotificationUnreadCount}}{{$notificationUnreadCount = call .NotificationUnreadCount}}{{end}}
{{end}}
<div class="item brand gt-sb">
{{$notificationUnreadCount := 0}}
{{if and .IsSigned .NotificationUnreadCount}}
{{$notificationUnreadCount = call .NotificationUnreadCount}}
{{end}}

<nav id="navbar" class="ui secondary stackable menu" aria-label="{{.locale.Tr "aria.navbar"}}">
<div class="item">
<!-- the logo -->
<a 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">
</a>
<div class="gt-df gt-ac">

<!-- 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">
{{if .IsSigned}}
<a href="{{AppSubUrl}}/notifications" class="mobile-only gt-mr-4 gt-mt-3" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
<span class="fitted item">
{{svg "octicon-bell"}}
<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">
{{$notificationUnreadCount}}
</span>
</span>
<a class="item" href="{{AppSubUrl}}/notifications" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
{{svg "octicon-bell"}}
<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
</a>
{{end}}
<button class="ui icon button mobile-only" id="navbar-expand-toggle">
{{svg "octicon-three-bars"}}
</button>
<div class="item gt-px-0">
<button class="ui icon button" id="navbar-expand-toggle">{{svg "octicon-three-bars"}}</button>
</div>
</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>
<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>
<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}}
{{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>
<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>
<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>
<a class="item{{if .PageIsExplore}} active{{end}}" href="{{AppSubUrl}}/explore/repos">{{.locale.Tr "explore"}}</a>
{{end}}

{{template "custom/extra_links" .}}

{{/* TODO
<div class="item">
<div class="ui icon input">
<input class="searchbox" type="text" placeholder="{{.locale.Tr "search_project"}}">
<i class="icon gt-df gt-ac gt-jc">{{svg "octicon-search" 16}}</i>
</div>
</div>
*/}}

{{if not .IsSigned}}
<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io">{{.locale.Tr "help"}}</a>
{{end}}

{{if and .IsSigned .MustChangePassword}}
<div class="right stackable menu">
<div class="ui dropdown jump item" tabindex="-1" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
<!-- the full dropdown menus -->
<div class="right menu gt-pr-4">
{{if and .IsSigned .MustChangePassword}}
<div class="ui dropdown jump item" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
<span class="text">
{{avatar $.Context .SignedUser 24 "tiny"}}
<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span>
<span class="mobile-only">{{.SignedUser.Name}}</span>
<span class="fitted not-mobile" tabindex="-1">{{svg "octicon-triangle-down"}}</span>
{{avatar $.Context .SignedUser 24 "gt-mr-0"}}
<span class="mobile-only gt-ml-2">{{.SignedUser.Name}}</span>
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
</span>
<div class="menu user-menu" tabindex="-1">
<div class="menu user-menu">
<div class="ui header">
{{.locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
</div>

<div class="divider"></div>
<a class="item link-action" href data-url="{{AppSubUrl}}/user/logout" data-redirect="{{AppSubUrl}}/">
{{svg "octicon-sign-out"}}
{{.locale.Tr "sign_out"}}<!-- Sign Out -->
{{.locale.Tr "sign_out"}}
</a>
</div><!-- end content avatar menu -->
</div><!-- end dropdown avatar menu -->
</div>
{{else if .IsSigned}}
<div class="right stackable menu gt-mr-4">
{{else if .IsSigned}}
{{if EnableTimetracking}}
<a class="active-stopwatch-trigger item ui gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}">
<span class="fitted gt-relative">
{{svg "octicon-stopwatch"}}
<span class="header-stopwatch-dot"></span>
<span class="sr-mobile-only">{{.locale.Tr "active_stopwatch"}}</span>
</span>
<a class="active-stopwatch-trigger item ui gt-mx-0{{if not .ActiveStopwatch}} gt-hidden{{end}}" href="{{.ActiveStopwatch.IssueLink}}" title="{{.locale.Tr "active_stopwatch"}}">
{{svg "octicon-stopwatch"}}<span class="header-stopwatch-dot"></span>
<span class="mobile-only">{{.locale.Tr "active_stopwatch"}}</span>
</a>
<div class="active-stopwatch-popup tippy-target">
<div class="gt-df gt-ac">
Expand All @@ -100,15 +92,15 @@
{{.CsrfTokenHtml}}
<button
type="submit"
class="ui button mini compact basic icon fitted"
class="ui button mini compact basic icon"
data-tooltip-content="{{.locale.Tr "repo.issues.stop_tracking"}}"
>{{svg "octicon-square-fill"}}</button>
</form>
<form class="stopwatch-cancel" method="POST" action="{{.ActiveStopwatch.IssueLink}}/times/stopwatch/cancel">
{{.CsrfTokenHtml}}
<button
type="submit"
class="ui button mini compact basic icon fitted"
class="ui button mini compact basic icon"
data-tooltip-content="{{.locale.Tr "repo.issues.cancel_tracking"}}"
>{{svg "octicon-trash"}}</button>
</form>
Expand All @@ -117,53 +109,48 @@
{{end}}

<a href="{{AppSubUrl}}/notifications" class="item not-mobile gt-mx-0" data-tooltip-content="{{.locale.Tr "notifications"}}" aria-label="{{.locale.Tr "notifications"}}">
<span class="fitted item">
{{svg "octicon-bell"}}
<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">
{{$notificationUnreadCount}}
</span>
</span>
{{svg "octicon-bell"}}
<span class="notification_count{{if not $notificationUnreadCount}} gt-hidden{{end}}">{{$notificationUnreadCount}}</span>
</a>

<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{.locale.Tr "create_new"}}">
<span class="text">
<span class="fitted">{{svg "octicon-plus"}}</span>
<span class="sr-mobile-only">{{.locale.Tr "create_new"}}</span>
<span class="fitted not-mobile">{{svg "octicon-triangle-down"}}</span>
{{svg "octicon-plus"}}
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
<span class="mobile-only">{{.locale.Tr "create_new"}}</span>
</span>
<div class="menu">
<a class="item" href="{{AppSubUrl}}/repo/create">
<span class="fitted">{{svg "octicon-plus"}}</span> {{.locale.Tr "new_repo"}}
{{svg "octicon-plus"}} {{.locale.Tr "new_repo"}}
</a>
{{if not .DisableMigrations}}
<a class="item" href="{{AppSubUrl}}/repo/migrate">
<span class="fitted">{{svg "octicon-repo-push"}}</span> {{.locale.Tr "new_migrate"}}
{{svg "octicon-repo-push"}} {{.locale.Tr "new_migrate"}}
</a>
{{end}}
{{if .SignedUser.CanCreateOrganization}}
<a class="item" href="{{AppSubUrl}}/org/create">
<span class="fitted">{{svg "octicon-organization"}}</span> {{.locale.Tr "new_org"}}
{{svg "octicon-organization"}} {{.locale.Tr "new_org"}}
</a>
{{end}}
</div><!-- end content create new menu -->
</div><!-- end dropdown menu create new -->

<div class="ui dropdown jump item gt-mx-0 gt-pr-3" data-tooltip-content="{{.locale.Tr "user_profile_and_more"}}">
<span class="text">
{{avatar $.Context .SignedUser 24 "tiny"}}
<span class="sr-only">{{.locale.Tr "user_profile_and_more"}}</span>
<span class="mobile-only">{{.SignedUser.Name}}</span>
<span class="fitted not-mobile" tabindex="-1">{{svg "octicon-triangle-down"}}</span>
{{avatar $.Context .SignedUser 24 "gt-mr-0"}}
<span class="mobile-only gt-ml-2">{{.SignedUser.Name}}</span>
<span class="not-mobile">{{svg "octicon-triangle-down"}}</span>
</span>
<div class="menu user-menu" tabindex="-1">
<div class="menu user-menu">
<div class="ui header">
{{.locale.Tr "signed_in_as"}} <strong>{{.SignedUser.Name}}</strong>
</div>

<div class="divider"></div>
<a class="item" href="{{.SignedUser.HomeLink}}">
{{svg "octicon-person"}}
{{.locale.Tr "your_profile"}}<!-- Your profile -->
{{.locale.Tr "your_profile"}}
</a>
{{if not .DisableStars}}
<a class="item" href="{{.SignedUser.HomeLink}}?tab=stars">
Expand All @@ -173,15 +160,15 @@
{{end}}
<a class="item" href="{{AppSubUrl}}/notifications/subscriptions">
{{svg "octicon-bell"}}
{{.locale.Tr "notification.subscriptions"}}<!-- Subscriptions -->
{{.locale.Tr "notification.subscriptions"}}
</a>
<a class="{{if .PageIsUserSettings}}active {{end}}item" href="{{AppSubUrl}}/user/settings">
{{svg "octicon-tools"}}
{{.locale.Tr "your_settings"}}<!-- Your settings -->
{{.locale.Tr "your_settings"}}
</a>
<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io">
{{svg "octicon-question"}}
{{.locale.Tr "help"}}<!-- Help -->
{{.locale.Tr "help"}}
</a>
{{if .IsAdmin}}
<div class="divider"></div>
Expand All @@ -199,10 +186,7 @@
</a>
</div><!-- end content avatar menu -->
</div><!-- end dropdown avatar menu -->
</div><!-- end signed user right menu -->
{{else}}
<a class="item" target="_blank" rel="noopener noreferrer" href="https://docs.gitea.io">{{.locale.Tr "help"}}</a>
<div class="right stackable menu">
{{else}}
{{if .ShowRegistrationButton}}
<a class="item{{if .PageIsSignUp}} active{{end}}" href="{{AppSubUrl}}/user/sign_up">
{{svg "octicon-person"}} {{.locale.Tr "register"}}
Expand All @@ -211,6 +195,6 @@
<a class="item{{if .PageIsSignIn}} active{{end}}" rel="nofollow" href="{{AppSubUrl}}/user/login{{if not .PageIsSignIn}}?redirect_to={{.CurrentURL}}{{end}}">
{{svg "octicon-sign-in"}} {{.locale.Tr "sign_in"}}
</a>
</div><!-- end anonymous user right menu -->
{{end}}
{{end}}
</div><!-- end full right menu -->
</nav>
2 changes: 1 addition & 1 deletion templates/org/home.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
{{if .Org.Website}}<div class="item">{{svg "octicon-link"}} <a target="_blank" rel="noopener noreferrer me" href="{{.Org.Website}}">{{.Org.Website}}</a></div>{{end}}
</div>
</div>
<div class="right stackable menu">
<div class="right menu">
<form method="post" action="{{.Link}}?action={{if $.IsFollowing}}unfollow{{else}}follow{{end}}&redirect_to={{$.Link}}">
{{$.CsrfTokenHtml}}
<button type="submit" class="ui basic button gt-mr-0">
Expand Down
1 change: 0 additions & 1 deletion templates/repo/settings/lfs_file_find.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@
<a class="ui primary sha label" href="{{$.RepoLink}}/commit/{{.String}}">{{ShortSha .String}}</a>
{{end}}
{{end}}
<div class="mobile-only"></div>
{{$.locale.Tr "repo.diff.commit"}}
<a class="ui primary sha label" href="{{$.RepoLink}}/commit/{{.SHA}}">{{ShortSha .SHA}}</a>
</td>
Expand Down
8 changes: 5 additions & 3 deletions templates/status/500.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,16 @@
</head>
<body>
<div class="full height">
<nav class="ui container secondary stackable main menu" id="navbar">
<nav class="ui secondary menu">
<div class="ui container gt-df">
<div class="item brand gt-f1">
<div class="item gt-f1">
<a href="{{AppSubUrl}}/" aria-label="{{.locale.Tr "home"}}">
<img width="30" height="30" src="{{AssetUrlPrefix}}/img/logo.svg" alt="{{.locale.Tr "logo"}}" aria-hidden="true">
</a>
</div>
<button class="item ui icon button">{{svg "octicon-three-bars"}}</button>{{/* a fake button to make the UI looks better*/}}
<div class="item">
<button class="ui icon button disabled">{{svg "octicon-three-bars"}}</button>{{/* a fake button to make the UI looks better*/}}
</div>
</div>
</nav>
<div role="main" class="page-content status-page-500">
Expand Down
2 changes: 1 addition & 1 deletion templates/user/dashboard/navbar.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
{{end}}

{{if .ContextUser.IsOrganization}}
<div class="right stackable menu">
<div class="right menu">
<a class="{{if .PageIsNews}}active {{end}}item gt-ml-auto" href="{{.ContextUser.DashboardLink}}{{if .Team}}/{{PathEscape .Team.Name}}{{end}}">
{{svg "octicon-rss"}}&nbsp;{{.locale.Tr "activities"}}
</a>
Expand Down
4 changes: 2 additions & 2 deletions web_src/css/admin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
width: calc(100% - 245px);
}

@media (max-width: 767px) {
@media (max-width: 767.98px) {
.admin dl.admin-dl-horizontal dd {
width: calc(100% - 185px);
}
Expand All @@ -40,7 +40,7 @@
white-space: nowrap;
}

@media (max-width: 767px) {
@media (max-width: 767.98px) {
.admin dl.admin-dl-horizontal dt {
width: 160px;
}
Expand Down
Loading