website/web/templates/forum/board_index.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

154 lines
5.8 KiB
HTML

{{define "title"}}{{.Forum.Title}}{{end}}
{{define "content"}}
<div class="block">
<section class="hero is-light is-success">
<div class="hero-body">
<div class="container">
<h1 class="title">
<a href="/f/{{.Forum.Fragment}}" class="has-text-light">
<span class="icon mr-4"><i class="fa fa-comments"></i></span>
<span>{{.Forum.Title}}</span>
</a>
</h1>
</div>
</div>
</section>
</div>
{{$Root := .}}
<div class="block p-4">
<div class="columns">
<div class="column">
<nav class="breadcrumb" aria-label="breadcrumbs">
<ul>
<li><a href="/forum">Forums</a></li>
<li class="is-active">
<a href="{{.Request.URL.Path}}" aria-current="page">{{.Forum.Title}}</a>
</li>
</ul>
</nav>
</div>
<div class="column is-narrow">
{{if or .CurrentUser.IsAdmin (not .Forum.Privileged) (eq .Forum.OwnerID .CurrentUser.ID)}}
<a href="/forum/post?to={{.Forum.Fragment}}" class="button is-primary">
<span class="icon"><i class="fa fa-plus"></i></span>
<span>New Thread</span>
</a>
{{end}}
</div>
</div>
</div>
<p class="block p-2">
Found <strong>{{.Pager.Total}}</strong> post{{Pluralize64 .Pager.Total}} on this forum
(page {{.Pager.Page}} of {{.Pager.Pages}}).
</p>
{{if .Forum.Privileged}}
<div class="block p-2 notification is-warning is-light">
<i class="fa fa-gavel mr-1"></i>
Only moderators may create new threads on this forum. You may be able to reply to threads here.
</div>
{{end}}
<div class="block p-2">
<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>
{{$Root := .}}
<div class="block p-2">
{{range .Threads}}
{{$Stats := $Root.ThreadMap.Get .ID}}
<div class="box has-background-success-light">
<div class="columns">
<div class="column is-2 has-text-centered pt-0 pb-1">
<div>
<a href="/u/{{.Comment.User.Username}}">
{{template "avatar-64x64" .Comment.User}}
</a>
</div>
<a href="/u/{{.Comment.User.Username}}">{{.Comment.User.Username}}</a>
</div>
<div class="column content pt-1 pb-0">
<a href="/forum/thread/{{.ID}}">
<h2 class="is-size-4 pt-0">
{{if .Pinned}}<sup class="fa fa-thumbtack has-text-success mr-2 is-size-6" title="Pinned"></sup>{{end}}
{{or .Title "Untitled"}}
</h2>
{{TrimEllipses .Comment.Message 256}}
</a>
<hr class="has-background-success my-2">
<div>
{{if .Pinned}}
<span class="tag is-success is-light mr-2">
<span class="icon"><i class="fa fa-thumbtack"></i></span>
<span>Pinned</span>
</span>
{{end}}
{{if .Explicit}}
<span class="tag is-danger is-light mr-2">
<span class="icon"><i class="fa fa-fire"></i></span>
<span>NSFW</span>
</span>
{{end}}
{{if .NoReply}}
<span class="tag is-warning is-light mr-2" title="This thread can not be replied to.">
<span class="icon"><i class="fa fa-ban"></i></span>
<span>No Reply</span>
</span>
{{end}}
<em title="{{.UpdatedAt.Format "2006-01-02 15:04:05"}}">Updated {{SincePrettyCoarse .UpdatedAt}} ago</em>
</div>
</div>
<div class="column is-narrow pb-1 pt-0 px-1">
<div class="columns is-mobile">
<div class="column has-text-centered pr-1">
<div class="box p-2">
<p class="is-size-7">Replies</p>
{{if $Stats}}
{{$Stats.Replies}}
{{else}}
err
{{end}}
</div>
</div>
<div class="column has-text-centered pl-1">
<div class="box p-2">
<p class="is-size-7">Views</p>
{{if $Stats}}
{{$Stats.Views}}
{{else}}
err
{{end}}
</div>
</div>
</div>
</div>
</div>
</div>
{{end}}
</div>
{{end}}