website/web/templates/forum/newest.html
Noah 8085e092bc Forum Reply Enhancements + Better Pagers
* Enhance user experience replying to a forum thread. An inline reply textarea
  is added to page footers, "Quote" buttons on posts will quote the markdown
  source and focus the reply textarea, and "Reply" buttons will put an
  "@ mention" and focus the reply textarea. Users with scripts disabled will
  still be sent to the regular reply page as before.
* Improve all pagers by adding a "QueryPlus" template function that merges the
  page number with other current query parameters.
* Fix private profile picture avatars not displaying in your Notifications for
  profile pics you're allowed to see.
2022-09-10 12:09:46 -07:00

272 lines
12 KiB
HTML

{{define "title"}}Newest Posts - Forums{{end}}
{{define "content"}}
<div class="block">
<section class="hero is-light is-success">
<div class="hero-body">
<h1 class="title">
<span class="icon mr-4"><i class="fa fa-comments"></i></span>
<span>Forums</span>
</h1>
<h2 class="subtitle">
Newest Posts
</h2>
</div>
</section>
</div>
{{$Root := .}}
<div class="block p-4 mb-0">
<div class="tabs is-boxed">
<ul>
<li>
<a href="/forum">
Categories
</a>
</li>
<li class="is-active">
<a href="/forum/newest">
Newest
</a>
</li>
</ul>
</div>
</div>
<div class="p-4">
Found {{.Pager.Total}} posts (page {{.Pager.Page}} of {{.Pager.Pages}})
</div>
<div class="p-4">
<nav class="pagination" role="navigation" aria-label="pagination">
<a class="pagination-previous{{if not .Pager.HasPrevious}} is-disabled{{end}}" title="Previous"
href="{{.Request.URL.Path}}?{{QueryPlus "page" .Pager.Previous}}">Previous</a>
<a class="pagination-next{{if not .Pager.HasNext}} is-disabled{{end}}" title="Next"
href="{{.Request.URL.Path}}?{{QueryPlus "page" .Pager.Next}}">Next page</a>
<ul class="pagination-list">
{{$Root := .}}
{{range .Pager.Iter}}
<li>
<a class="pagination-link{{if .IsCurrent}} is-current{{end}}"
aria-label="Page {{.Page}}"
href="{{$Root.Request.URL.Path}}?{{QueryPlus "page" .Page}}">
{{.Page}}
</a>
</li>
{{end}}
</ul>
</nav>
</div>
<div class="p-4">
{{range .RecentPosts}}
{{$User := .Thread.Comment.User}}
<div class="card block has-background-link-light">
<div class="card-content">
<div class="columns">
<div class="column is-narrow has-text-centered pt-0 pb-1">
<a href="/u/{{$User.Username}}">
{{template "avatar-96x96" $User}}
<div>
<a href="/u/{{$User.Username}}" class="is-size-7">{{$User.Username}}</a>
</div>
</a>
</div>
<div class="column py-0">
<h2 class="is-size-4 pt-0">
<a href="/forum/thread/{{.ThreadID}}" class="has-text-dark has-text-weight-bold">
{{.Thread.Title}}
{{if .Thread.Pinned}}
<sup class="has-text-success fa fa-thumbtack is-size-6 ml-1"></sup>
{{end}}
{{if .Thread.Explicit}}
<sup class="has-text-danger fa fa-fire is-size-6 ml-1"></sup>
{{end}}
{{if .Thread.NoReply}}
<sup class="has-text-warning-dark fa fa-ban is-size-6 ml-1"></sup>
{{end}}
</a>
</h2>
<a href="/forum/thread/{{.ThreadID}}" class="has-text-dark">
{{TrimEllipses .Thread.Comment.Message 256}}
</a>
<div class="is-size-7 is-italic is-grey pt-1">
{{if eq .Comment.ID .Thread.CommentID}}new {{end}}thread by {{.Thread.Comment.User.Username}}
in <a href="/f/{{.Forum.Fragment}}">
{{.Forum.Title}}
{{if .Forum.Privileged}}
<small class="has-text-warning-dark fa fa-gavel"></small>
{{end}}
{{if .Forum.Explicit}}
<small class="has-text-danger fa fa-fire"></small>
{{end}}
</a>
&ndash;
{{SincePrettyCoarse .Thread.Comment.UpdatedAt}} ago
</div>
<!-- If a reply to a thread, show the reply too -->
{{if ne .Comment.ID .Thread.CommentID}}
<hr class="has-background-grey my-2">
<div class="columns is-multiline is-gapless mb-0">
<div class="column is-narrow">
<a href="/forum/thread/{{.ThreadID}}?page=-1" class="has-text-grey">
<h2 class="is-size-5 py-0 is-italic has-text-grey">
<span class="icon"><i class="fa fa-reply"></i></span>
Comment added by
</h2>
</a>
</div>
<div class="column is-narrow">
<div class="columns is-gapless is-mobile">
<div class="column is-narrow mx-2">
<a href="/u/{{.Comment.User.Username}}">
{{template "avatar-32x32" .Comment.User}}
</a>
</div>
<div class="column is-narrow">
<h2 class="is-size-5 py-0">
<a href="/u/{{.Comment.User.Username}}" class="has-text-dark">{{.Comment.User.Username}}</a>
</h2>
</div>
</div>
</div>
</div>
<a href="/forum/thread/{{.ThreadID}}?page=-1" class="has-text-dark">
{{TrimEllipses .Comment.Message 256}}
</a>
<div class="is-size-7 is-italic is-grey mt-1">
{{SincePrettyCoarse .Comment.UpdatedAt}} ago
</div>
{{end}}
</div>
</div>
</div>
</div>
{{end}}
</div>
{{range .Categories}}
<div class="block p-4">
<h1 class="title">{{.Category}}</h1>
{{if eq (len .Forums) 0}}
<em>
There are no forums under this category.
{{if not $Root.CurrentUser.Explicit}}Your content filters (non-explicit) may be hiding some forums.{{end}}
</em>
{{else}}
{{range .Forums}}
{{$Stats := $Root.ForumMap.Get .ID}}
<div class="card block has-background-primary-light">
<div class="card-content">
<div class="columns">
<div class="column is-3 pt-0 pb-1">
<h2 class="is-size-4">
<strong><a href="/f/{{.Fragment}}">{{.Title}}</a></strong>
</h2>
<div class="content mb-1">
{{if .Description}}
{{ToMarkdown .Description}}
{{else}}
<em>No description</em>
{{end}}
</div>
<div>
{{if .Explicit}}
<span class="tag is-danger is-light">
<span class="icon"><i class="fa fa-fire"></i></span>
<span>Explicit</span>
</span>
{{end}}
{{if .Privileged}}
<span class="tag is-warning is-light">
<span class="icon"><i class="fa fa-gavel"></i></span>
<span>Privileged</span>
</span>
{{end}}
</div>
</div>
<div class="column py-1">
<div class="box has-background-success-light">
<h2 class="subtitle mb-1">Latest Post</h2>
{{if $Stats.RecentThread}}
<a href="/forum/thread/{{$Stats.RecentThread.ID}}">
<strong>{{$Stats.RecentThread.Title}}</strong>
</a>
<em>by {{$Stats.RecentThread.Comment.User.Username}}</em>
<div>
<em>
{{if and $Stats.RecentPost (not (eq $Stats.RecentPost.ID $Stats.RecentThread.CommentID))}}
<small>Last comment by {{$Stats.RecentPost.User.Username}}</small>
{{end}}
<small title="{{$Stats.RecentThread.UpdatedAt.Format "2006-01-02 15:04:05"}}">{{SincePrettyCoarse $Stats.RecentThread.UpdatedAt}} ago</small>
</em>
</div>
{{else}}
<em>No posts found.</em>
{{end}}
</div>
</div>
<div class="column is-3 py-1">
<div class="columns is-mobile is-gapless">
<div class="column has-text-centered mr-1">
<div class="box has-background-warning-light p-2">
<p class="is-size-7">Topics</p>
{{if $Stats}}
{{$Stats.Threads}}
{{else}}
err
{{end}}
</div>
</div>
<div class="column has-text-centered mx-1">
<div class="box has-background-warning-light p-2">
<p class="is-size-7">Posts</p>
{{if $Stats}}
{{$Stats.Posts}}
{{else}}
err
{{end}}
</div>
</div>
<div class="column has-text-centered ml-1">
<div class="box has-background-warning-light p-2">
<p class="is-size-7">Users</p>
{{if $Stats}}
{{$Stats.Users}}
{{else}}
err
{{end}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{end}}
{{end}}
</div>
{{end}}<!-- range .Categories -->
{{end}}