website/web/templates/base.html
Noah fb0e3651b0 iPad Friendly Nav Bar + Mobile NavBar Notifications
* iPad in landscape mode was "desktop" size so got the full nav bar but
  the "More" drop-down was unusable. Add work-arounds for large touch
  devices to make the nav bar functional.
* "Click" on the "More" button will pin it open so that the drop-down
  doesn't rely solely on mouseover events. Clicking off the open
  drop-down or clicking again on "More" toggles it hidden.
* The logged-in user menu now drops its menu on hover like "More" did.
* The logged-in user menu adds "TouchStart" events: touching the menu
  button toggles its drop-down to appear, canceling the link to "/me"
  that clicking the menu button does on desktops. Clicking off the open
  drop-down closes it.
* Add notification indicators for "mobile" devices which only showed the
  brand and hamburger menu by default. Next to the hamburger button will
  be badges for number of friend requests or messages, with icons. Click
  the badge to go to the relevant page, or it hints that there are
  notifications in the drop-down.
2022-08-21 21:35:01 -07:00

253 lines
10 KiB
HTML

{{define "title"}}Untitled{{end}}
{{define "base"}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link rel="stylesheet" href="/static/fontawesome-free-6.1.2-web/css/all.css">
<link rel="stylesheet" href="/static/css/theme.css">
<title>{{template "title" .}} - {{ .Title }}</title>
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="/">
{{ PrettyTitle }}
</a>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div id="navbarBasicExample" class="navbar-menu">
<div class="navbar-start">
{{if not .LoggedIn}}
<a class="navbar-item" href="/">
<span class="icon"><i class="fa fa-home"></i></span>
<span>Home</span>
</a>
<a class="navbar-item" href="/about">
About
</a>
<a class="navbar-item" href="/faq">
FAQ
</a>
{{end}}
{{if .LoggedIn}}
<a class="navbar-item" href="/me">
<span class="icon"><i class="fa fa-house-user"></i></span>
<span>Home</span>
</a>
<a class="navbar-item" href="/photo/gallery">
<span class="icon"><i class="fa fa-image"></i></span>
<span>Gallery</span>
</a>
<!-- <a class="navbar-item" href="/forums">
<span class="icon"><i class="fa fa-comments"></i></span>
<span>Forums</span>
</a> -->
<a class="navbar-item" href="/friends{{if gt .NavFriendRequests 0}}?view=requests{{end}}">
<span class="icon"><i class="fa fa-user-group"></i></span>
<span>Friends</span>
{{if .NavFriendRequests}}<span class="tag is-warning ml-1">{{.NavFriendRequests}}</span>{{end}}
</a>
<a class="navbar-item" href="/messages">
<span class="icon"><i class="fa fa-envelope"></i></span>
<span>Messages</span>
{{if .NavUnreadMessages}}<span class="tag is-warning ml-1">{{.NavUnreadMessages}}</span>{{end}}
</a>
{{end}}
<div id="navbar-more" class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown is-active">
{{if .LoggedIn}}
<a class="navbar-item" href="/members">
<span class="icon"><i class="fa fa-people-group"></i></span>
<span>People</span>
</a>
{{end}}
<a class="navbar-item" href="/about">
About
</a>
<a class="navbar-item" href="/faq">
FAQ
</a>
<a class="navbar-item" href="/tos">
Terms of Service
</a>
<a class="navbar-item" href="/privacy">
Privacy Policy
</a>
<a class="navbar-item" href="/contact">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item" href="/contact?intent=report">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
{{if .LoggedIn }}
<div id="navbar-user" class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link" href="/me">
<div class="columns is-mobile is-gapless">
<div class="column is-narrow">
<figure class="image is-24x24 mr-2">
{{if gt .CurrentUser.ProfilePhoto.ID 0}}
<img src="{{PhotoURL .CurrentUser.ProfilePhoto.CroppedFilename}}" class="is-rounded">
{{else}}
<img src="/static/img/shy.png" class="is-rounded has-background-warning">
{{end}}
</figure>
</div>
<div class="column">
{{.CurrentUser.Username}}
{{if .NavAdminNotifications}}<span class="tag is-danger ml-1">{{.NavAdminNotifications}}</span>{{end}}
</div>
</div>
</a>
<div class="navbar-dropdown is-right is-hoverable">
<a class="navbar-item" href="/me">Dashboard</a>
<a class="navbar-item" href="/u/{{.CurrentUser.Username}}">My Profile</a>
<a class="navbar-item" href="/photo/u/{{.CurrentUser.Username}}">My Photos</a>
<a class="navbar-item" href="/photo/upload">Upload Photo</a>
<a class="navbar-item" href="/settings">Settings</a>
{{if .CurrentUser.IsAdmin}}
<a class="navbar-item has-text-danger" href="/admin">
Admin
{{if .NavAdminNotifications}}<span class="tag is-danger ml-1">{{.NavAdminNotifications}}</span>{{end}}
</a>
{{end}}
{{if .SessionImpersonated}}
<a href="/admin/unimpersonate" class="navbar-item has-text-danger">
<span class="icon"><i class="fa fa-ghost"></i></span>
<span>Unimpersonate</span>
</a>
{{end}}
<a class="navbar-item" href="/logout">Log out</a>
</div>
</div>
{{ else }}
<div class="navbar-item">
<div class="buttons">
<a class="button is-primary" href="/signup">
<strong>Sign up</strong>
</a>
<a class="button is-light" href="/login">
Log in
</a>
</div>
</div>
{{end}}
</div>
</div>
</nav>
<!-- Mobile: notifications badge next to hamburger menu -->
{{if gt .NavTotalNotifications 0}}
<div class="mobile nonshy-mobile-notification">
{{if gt .NavFriendRequests 0}}
<a class="tag is-warning" href="/friends?view=requests">
<span class="icon"><i class="fa fa-user-group"></i></span>
<span>{{.NavFriendRequests}}</span>
</a>
{{end}}
{{if gt .NavUnreadMessages 0}}
<a class="tag is-warning" href="/messages">
<span class="icon"><i class="fa fa-envelope"></i></span>
<span>{{.NavUnreadMessages}}</span>
</a>
{{end}}
{{if gt .NavAdminNotifications 0}}
<a class="tag is-danger" href="/admin">
<span class="icon"><i class="fa fa-gavel"></i></span>
<span>{{.NavAdminNotifications}}</span>
</a>
{{end}}
</div>
{{end}}
<div class="container is-fullhd">
{{if .Flashes}}
<div class="notification block is-success">
<!-- <button class="delete"></button> -->
{{range .Flashes}}
<div class="block">{{.}}</div>
{{end}}
</div>
{{end}}
{{if .Errors}}
<div class="notification block is-danger">
<!-- <button class="delete"></button> -->
{{range .Errors}}
<div class="block">{{.}}</div>
{{end}}
</div>
{{end}}
{{template "content" .}}
<div class="block has-text-centered has-text-grey">
&copy; {{.YYYY}} {{.Title}}
<div class="columns">
<div class="column">
<a href="/">Home</a>
</div>
<div class="column">
<a href="/about">About</a>
</div>
{{if .LoggedIn}}
<div class="column">
<a href="/me">User Dashboard</a>
</div>
<div class="column">
<a href="/u/{{.CurrentUser.Username}}">My Profile</a>
</div>
<div class="column">
<a href="/settings">Settings</a>
</div>
<div class="column">
<a href="/logout">Log out</a>
</div>
{{else}}
<div class="column">
<a href="/login">Log in</a>
</div>
<div class="column">
<a href="/signup">Sign up</a>
</div>
{{end}}
</div>
</div>
</div>
<script type="text/javascript" src="/static/js/bulma.js"></script>
</body>
</html>
{{end}}