Noah Petherbridge
e80d4e6ad6
* 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.
253 lines
10 KiB
HTML
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">
|
|
© {{.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}} |