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.
198 lines
9.7 KiB
HTML
198 lines
9.7 KiB
HTML
{{define "title"}}Message Inbox{{end}}
|
|
{{define "content"}}
|
|
<div class="container">
|
|
<section class="hero is-info is-bold">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<h1 class="title">Messages</h1>
|
|
<h2 class="subtitle">{{if .IsSentBox}}Sent{{else}}Inbox{{end}}</h2>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{$UserMap := .UserMap}}
|
|
{{$Request := .Request}}
|
|
|
|
<div class="block p-4">
|
|
<div class="columns">
|
|
<div class="column">
|
|
<div class="card">
|
|
<header class="card-header has-background-link">
|
|
<p class="card-header-title has-text-light">
|
|
{{if .ViewThread}}Conversation with {{.ReplyTo}}{{else}}Inbox{{end}}
|
|
</p>
|
|
</header>
|
|
|
|
{{if .ViewThread}}
|
|
<div class="card-content">
|
|
<div class="block">
|
|
<form action="/messages/compose" method="POST">
|
|
{{InputCSRF}}
|
|
<input type="hidden" name="to" value="{{.ReplyTo}}">
|
|
<input type="hidden" name="from" value="inbox">
|
|
<textarea class="textarea block" cols="80" rows="4"
|
|
name="message"
|
|
placeholder="Write a response"></textarea>
|
|
|
|
<div class="columns is-mobile">
|
|
<div class="column">
|
|
<button type="submit" class="button is-success">Send Reply</button>
|
|
</div>
|
|
<div class="column is-narrow">
|
|
<a href="/contact?intent=report&subject=report.message&id={{.MessageID}}"
|
|
class="button has-text-danger ml-4">
|
|
<span class="icon"><i class="fa fa-flag"></i></span>
|
|
<span>Report</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
<hr>
|
|
</div>
|
|
{{range .ViewThread}}
|
|
<div class="media block">
|
|
{{$SourceUser := $UserMap.Get .SourceUserID}}
|
|
<div class="media-left">
|
|
<figure class="image is-64x64">
|
|
{{if $SourceUser.ProfilePhoto.ID}}
|
|
<img src="{{PhotoURL $SourceUser.ProfilePhoto.CroppedFilename}}">
|
|
{{else}}
|
|
<img src="/static/img/shy.png">
|
|
{{end}}
|
|
</figure>
|
|
</div>
|
|
<div class="media-content">
|
|
<p class="title is-4">{{$SourceUser.NameOrUsername}}</p>
|
|
<p class="subtitle is-6">
|
|
<span class="icon"><i class="fa fa-user"></i></span>
|
|
<a href="/u/{{$SourceUser.Username}}">{{$SourceUser.Username}}</a>
|
|
{{if not $SourceUser.Certified}}
|
|
<span class="has-text-danger">
|
|
<span class="icon"><i class="fa fa-certificate"></i></span>
|
|
<span>Not Certified!</span>
|
|
</span>
|
|
{{end}}
|
|
|
|
{{if $SourceUser.IsAdmin}}
|
|
<span class="has-text-danger">
|
|
<span class="icon"><i class="fa fa-gavel"></i></span>
|
|
<span>Admin</span>
|
|
</span>
|
|
{{end}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="block content">
|
|
{{ToMarkdown .Message}}
|
|
</div>
|
|
<div class="block">
|
|
<em>Sent on {{.CreatedAt.Format "2006-01-02 15:04:05"}}</em>
|
|
{{if not .Read}}<span class="tag is-success ml-2">UNREAD</span>{{end}}
|
|
</div>
|
|
|
|
<hr class="block">
|
|
{{end}}
|
|
|
|
<!-- Pager footer -->
|
|
<div class="block">
|
|
<div class="level">
|
|
<div class="level-left">
|
|
<div>
|
|
Found <strong>{{.ThreadPager.Total}}</strong> message{{Pluralize64 .ThreadPager.Total}} in this thread
|
|
(page {{.ThreadPager.Page}} of {{.ThreadPager.Pages}}).
|
|
</div>
|
|
</div>
|
|
<div class="level-right">
|
|
{{if .ThreadPager.HasPrevious}}
|
|
<a href="{{$Request.URL.Path}}?page={{.ThreadPager.Previous}}" class="button">Previous</a>
|
|
{{end}}
|
|
{{if .ThreadPager.HasNext}}
|
|
<a href="{{$Request.URL.Path}}?page={{.ThreadPager.Next}}" class="button">Next Page</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<div class="card-content content">
|
|
<p>
|
|
You have <strong>{{.Unread}}</strong> unread message{{Pluralize64 .Unread}}. Select a message on the
|
|
other column to read the conversation here.
|
|
</p>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-one-third">
|
|
<div class="card block">
|
|
<header class="card-header has-background-link">
|
|
<p class="card-header-title has-text-light">Messages</p>
|
|
</header>
|
|
|
|
<div class="card-content">
|
|
<div class="tabs is-toggle">
|
|
<ul>
|
|
<li{{if not .IsSentBox}} class="is-active"{{end}}>
|
|
<a href="/messages">Inbox</a>
|
|
</li>
|
|
<li{{if .IsSentBox}} class="is-active"{{end}}>
|
|
<a href="/messages?box=sent">Sent</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<ul class="menu-list block">
|
|
{{$IsSentBox := .IsSentBox}}
|
|
{{range .Messages}}
|
|
<li>
|
|
<a href="/messages/read/{{.ID}}">
|
|
<div>
|
|
{{if $IsSentBox}}
|
|
{{$User := $UserMap.Get .TargetUserID}}
|
|
<strong>Sent to {{$User.Username}}</strong>
|
|
{{else}}
|
|
{{$User := $UserMap.Get .SourceUserID}}
|
|
<strong>From {{$User.Username}}</strong>
|
|
{{end}}
|
|
{{if not .Read}}
|
|
<span class="tag is-success">{{if $IsSentBox}}UNREAD{{else}}NEW{{end}}</span>
|
|
{{end}}
|
|
</div>
|
|
<div class="my-1">
|
|
<em>
|
|
{{Substring .Message 48}}…
|
|
</em>
|
|
</div>
|
|
<div>
|
|
Sent {{.CreatedAt.Format "2006-01-02 15:04:05"}}
|
|
</div>
|
|
</a>
|
|
</li>
|
|
{{end}}
|
|
</ul>
|
|
|
|
<!-- Pager footer -->
|
|
<div class="block">
|
|
<div>
|
|
Found <strong>{{.Pager.Total}}</strong> message{{Pluralize64 .Pager.Total}}
|
|
(page {{.Pager.Page}} of {{.Pager.Pages}}).
|
|
</div>
|
|
|
|
{{if .Pager.HasPrevious}}
|
|
<a href="/messages?{{if .IsSentBox}}box=sent&{{end}}page={{.Pager.Previous}}" class="button">Previous</a>
|
|
{{end}}
|
|
{{if .Pager.HasNext}}
|
|
<a href="/messages?{{if .IsSentBox}}box=sent&{{end}}page={{.Pager.Next}}" class="button">Next Page</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}} |