website/web/templates/friend/friends.html
Noah 6c91c67c97 More Private User Avatars
* Users who set their Profile Picture to "friends only" or "private" can have
  their avatar be private all over the website to users who are not their
  friends or not granted access.
* Users who are not your friends see a yellow placeholder avatar, and users
  not granted access to a private Profile Pic sees a purple avatar.
* Admin users see these same placeholder avatars most places too (on search,
  forums, comments, etc.) if the user did not friend or grant the admin. But
  admins ALWAYS see it on their Profile Page directly, for ability to moderate.
* Fix marking Notifications as read: clicking the link in an unread notification
  now will wait on the ajax request to finish before allowing the redirect.
* Update the FAQ
2022-09-08 21:42:20 -07:00

139 lines
6.2 KiB
HTML

{{define "title"}}Friends{{end}}
{{define "content"}}
<div class="container">
{{$Root := .}}
<section class="hero is-link is-bold">
<div class="hero-body">
<div class="container">
<h1 class="title">Friends</h1>
</div>
</div>
</section>
<div class="p-4 is-text-centered">
<div class="level">
<div class="level-item">
<div class="tabs is-toggle">
<ul>
<li{{if and (not .IsRequests) (not .IsPending)}} class="is-active"{{end}}>
<a href="/friends">My Friends</a>
</li>
<li{{if .IsRequests}} class="is-active"{{end}}>
<a href="/friends?view=requests">
Requests
{{if .NavFriendRequests}}<span class="tag is-warning ml-2">{{.NavFriendRequests}}</span>{{end}}
</a>
</li>
<li{{if .IsPending}} class="is-active"{{end}}>
<a href="/friends?view=pending">
Sent
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="p-4">
<div class="block">
{{if .IsPending}}
You have sent {{.Pager.Total}} friend request{{Pluralize64 .Pager.Total}} which
{{Pluralize64 .Pager.Total "has" "have"}} not been approved yet.
{{else}}
You have {{.Pager.Total}} friend{{if .IsRequests}} request{{end}}{{Pluralize64 .Pager.Total}}
(page {{.Pager.Page}} of {{.Pager.Pages}}).
{{end}}
</div>
<div class="block">
<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}}?{{if .IsRequests}}view=requests&{{end}}page={{.Pager.Previous}}">Previous</a>
<a class="pagination-next{{if not .Pager.HasNext}} is-disabled{{end}}" title="Next"
href="{{.Request.URL.Path}}?{{if .IsRequests}}view=requests&{{end}}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}}?{{if $Root.IsRequests}}view=requests&{{end}}page={{.Page}}">
{{.Page}}
</a>
</li>
{{end}}
</ul>
</nav>
</div>
<div class="columns is-multiline">
{{range .Friends}}
<div class="column is-half-tablet is-one-third-desktop">
<form action="/friends/add" method="POST">
{{InputCSRF}}
<input type="hidden" name="username" value="{{.Username}}">
<div class="card">
<div class="card-content">
<div class="media block">
<div class="media-left">
{{template "avatar-64x64" .}}
</div>
<div class="media-content">
<p class="title is-4">
<a href="/u/{{.Username}}" class="has-text-dark">{{.NameOrUsername}}</a>
</p>
<p class="subtitle is-6">
<span class="icon"><i class="fa fa-user"></i></span>
<a href="/u/{{.Username}}">{{.Username}}</a>
{{if not .Certified}}
<span class="has-text-danger">
<span class="icon"><i class="fa fa-certificate"></i></span>
<span>Not Certified!</span>
</span>
{{end}}
{{if .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>
{{if $Root.IsRequests}}
<footer class="card-footer">
<button type="submit" name="verdict" value="approve" class="card-footer-item button is-success">
<span class="icon"><i class="fa fa-check"></i></span>
<span>Approve</span>
</button>
<button type="submit" name="verdict" value="reject" class="card-footer-item button is-danger">
<span class="icon"><i class="fa fa-xmark"></i></span>
<span>Reject</span>
</button>
</footer>
{{else}}
<footer class="card-footer">
<button type="submit" name="verdict" value="remove" class="card-footer-item button is-danger is-outlined"
onclick="return confirm('Are you sure you want to remove this friendship?')">
<span class="icon"><i class="fa fa-xmark"></i></span>
<span>{{if $Root.IsPending}}Cancel{{else}}Remove{{end}}</span>
</button>
</footer>
{{end}}
</div>
</form>
</div>
{{end}}<!-- range .Friends -->
</div>
</div>
</div>
{{end}}