867 lines
51 KiB
HTML
867 lines
51 KiB
HTML
{{define "title"}}My Dashboard{{end}}
|
|
{{define "content"}}
|
|
<div class="container">
|
|
<section class="hero is-info is-bold">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<h1 class="title">User Dashboard</h1>
|
|
<h2 class="subtitle">to your account</h2>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="block p-4">
|
|
<div class="columns">
|
|
<div class="column">
|
|
<!-- Onboarding Checklist -->
|
|
{{if or (not .CurrentUser.Certified) (not .CurrentUser.ProfilePhoto.ID)}}
|
|
<div class="card block">
|
|
<header class="card-header has-background-danger">
|
|
<p class="card-header-title has-text-light">
|
|
<span class="icon"><i class="fa fa-check"></i></span>
|
|
<span>Onboarding Checklist</span>
|
|
</p>
|
|
</header>
|
|
|
|
<div class="card-content">
|
|
<p class="block">
|
|
You're almost there! Please review the following checklist items to gain
|
|
full access to this website. Members are expected to have a face picture
|
|
as their default Profile Pic and upload a Verification Photo to become
|
|
certified as being a real person.
|
|
</p>
|
|
|
|
<aside class="menu">
|
|
<ul class="menu-list">
|
|
<li>
|
|
<a href="/photo/upload?intent=profile_pic">
|
|
<div class="columns is-mobile is-gapless">
|
|
<div class="column is-narrow mr-2">
|
|
{{if .CurrentUser.ProfilePhoto.ID}}
|
|
<span class="icon"><i class="fa fa-circle-check has-text-success"></i></span>
|
|
{{else}}
|
|
<span class="icon"><i class="fa fa-circle-xmark has-text-danger"></i></span>
|
|
{{end}}
|
|
</div>
|
|
<div class="column">
|
|
Upload a Profile Picture to your account that shows your face
|
|
|
|
<p class="help">
|
|
Click here to upload a new profile picture
|
|
<i class="fa fa-external-link ml-1"></i>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/photo/certification">
|
|
<div class="columns is-mobile is-gapless">
|
|
<div class="column is-narrow mr-2">
|
|
{{if .CurrentUser.Certified}}
|
|
<span class="icon"><i class="fa fa-circle-check has-text-success"></i></span>
|
|
{{else}}
|
|
<span class="icon"><i class="fa fa-circle-xmark has-text-danger"></i></span>
|
|
{{end}}
|
|
</div>
|
|
<div class="column">
|
|
Get certified by uploading a verification selfie
|
|
|
|
<p class="help">
|
|
Click here to go to the Certification Photo upload page
|
|
<i class="fa fa-external-link ml-1"></i>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
<!-- "Very Private" Restricted Account warning for certified users -->
|
|
{{if and .CurrentUser.Certified .IsShyUser}}
|
|
<div class="card block">
|
|
<header class="card-header has-background-danger">
|
|
<p class="card-header-title has-text-light">
|
|
<span class="icon"><i class="fa fa-exclamation-triangle"></i></span>
|
|
<span>Your profile page is too private</span>
|
|
</p>
|
|
</header>
|
|
|
|
<div class="card-content">
|
|
<p class="block">
|
|
You are considered to be a <strong>Shy Account</strong> because your profile and
|
|
photos are all set to Private or Friends-only visibility, so that to other members
|
|
of {{PrettyTitle}} you appear like a blank, faceless profile.
|
|
</p>
|
|
|
|
<p class="block">
|
|
While in this restricted state, you are grouped into a cohort with other members who
|
|
are as shy as you are and have limited contact options to connect with our other,
|
|
{{PrettyTitle}} members who are sharing their nudes on public.
|
|
</p>
|
|
|
|
<p class="block">
|
|
<a href="/faq#shy-faqs">Click here to learn more</a> about your Shy Account. To
|
|
remedy this, please see the following steps:
|
|
</p>
|
|
|
|
<aside class="menu">
|
|
<ul class="menu-list">
|
|
<li>
|
|
<a href="/settings">
|
|
{{if eq .CurrentUser.Visibility "public"}}
|
|
<span class="icon"><i class="fa fa-circle-check has-text-success"></i></span>
|
|
{{else}}
|
|
<span class="icon"><i class="fa fa-circle-xmark has-text-danger"></i></span>
|
|
{{end}}
|
|
<span>
|
|
Have your profile visibility set to <strong>Public</strong>.
|
|
{{if not (eq .CurrentUser.Visibility "public")}}
|
|
<span class="icon"><i class="fa fa-external-link"></i></span>
|
|
{{end}}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
|
|
<li>
|
|
<a href="/u/{{.CurrentUser.Username}}/photos">
|
|
{{if .HasPublicPhoto}}
|
|
<span class="icon"><i class="fa fa-circle-check has-text-success"></i></span>
|
|
{{else}}
|
|
<span class="icon"><i class="fa fa-circle-xmark has-text-danger"></i></span>
|
|
{{end}}
|
|
<span>
|
|
Have at least one <strong>Public</strong> photo on your profile.
|
|
{{if not .HasPublicPhoto}}
|
|
<span class="icon"><i class="fa fa-external-link"></i></span>
|
|
{{end}}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
<!-- New Feature -->
|
|
{{if not (.CurrentUser.GetProfileField "hero-color-start")}}
|
|
<div class="card block">
|
|
<header class="card-header has-background-success">
|
|
<p class="card-header-title has-text-light">
|
|
<i class="fa fa-gift mr-2"></i>
|
|
New Feature: Profile Look & Feel
|
|
</p>
|
|
</header>
|
|
|
|
<div class="card-content">
|
|
<p class="block">
|
|
A new feature is now available:
|
|
<a href="/settings#look">customize your profile page look & feel!</a>
|
|
</p>
|
|
|
|
<p class="block">
|
|
You can now personalize your profile page with a custom color scheme for
|
|
your header and profile cards. In the future, it will also be possible to
|
|
set a custom wallpaper background image and stylize your profile page
|
|
even further!
|
|
</p>
|
|
|
|
<p class="block">
|
|
Check it out on your Settings > <a href="/settings#look">Look & Feel</a>
|
|
page!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
|
|
<div class="card block">
|
|
<header class="card-header has-background-link">
|
|
<p class="card-header-title has-text-light">My Account</p>
|
|
</header>
|
|
|
|
<div class="card-content">
|
|
<aside class="menu">
|
|
<ul class="menu-list">
|
|
<li>
|
|
<a href="/u/{{.CurrentUser.Username}}">
|
|
<span class="icon"><i class="fa fa-user"></i></span>
|
|
My Profile
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/u/{{.CurrentUser.Username}}/photos">
|
|
<span class="icon"><i class="fa fa-image"></i></span>
|
|
My Photos
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/photo/upload">
|
|
<span class="icon"><i class="fa fa-upload"></i></span>
|
|
Upload Photos
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/photo/private">
|
|
<span class="icon"><i class="fa fa-eye"></i></span>
|
|
Manage Private Photos
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/settings">
|
|
<span class="icon"><i class="fa fa-edit"></i></span>
|
|
Edit Profile & Settings
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/photo/certification">
|
|
<span class="icon"><i class="fa fa-certificate"></i></span>
|
|
Certification Photo
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/users/blocked">
|
|
<span class="icon"><i class="fa fa-hand"></i></span>
|
|
Blocked Users
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/notes/me">
|
|
<span class="icon"><i class="fa fa-pen-to-square mr-1"></i></span>
|
|
My User Notes
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/logout">
|
|
<span class="icon"><i class="fa fa-arrow-right-from-bracket"></i></span>
|
|
Log out
|
|
</a>
|
|
</li>
|
|
{{if .SessionImpersonated}}
|
|
<li>
|
|
<a href="/admin/unimpersonate" class="has-text-danger">
|
|
<span class="icon"><i class="fa fa-ghost"></i></span>
|
|
<span>Unimpersonate</span>
|
|
</a>
|
|
</li>
|
|
{{end}}
|
|
<li>
|
|
<a href="/settings#deactivate">
|
|
<span class="icon"><i class="fa fa-trash"></i></span>
|
|
Delete account
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{$Root := .}}
|
|
|
|
<div class="column">
|
|
<div class="card" id="notifications">
|
|
<header class="card-header has-background-warning">
|
|
<p class="card-header-title">Notifications</p>
|
|
</header>
|
|
|
|
<div class="card-content">
|
|
<!-- Notifications header row: tablets on upwards -->
|
|
<div class="is-hidden-mobile">
|
|
<form method="POST" action="{{.Request.URL.Path}}">
|
|
{{InputCSRF}}
|
|
<div class="columns mb-2">
|
|
<div class="column">
|
|
{{if gt .NavUnreadNotifications 0}}
|
|
{{.NavUnreadNotifications}} unread notification{{Pluralize64 .NavUnreadNotifications}}.
|
|
{{else}}
|
|
No unread notifications.
|
|
{{end}}
|
|
</div>
|
|
<div class="column is-narrow has-text-right">
|
|
<button type="submit" name="intent" value="clear-all"
|
|
class="button is-danger is-light is-small"
|
|
onclick="return window.confirm('Are you sure you want to REMOVE all notifications?')"
|
|
title="Remove all notifications from your feed">
|
|
<i class="fa fa-xmark mr-1"></i>
|
|
Clear all
|
|
</button>
|
|
|
|
<button type="submit" name="intent" value="read-notifications"
|
|
class="button is-link is-light is-small">
|
|
<i class="fa fa-check mr-1"></i>
|
|
Mark all as read
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Notifications header: for mobiles only version -->
|
|
<div class="is-hidden-tablet">
|
|
<p>
|
|
{{if gt .NavUnreadNotifications 0}}
|
|
{{.NavUnreadNotifications}} unread notification{{Pluralize64 .NavUnreadNotifications}}.
|
|
{{else}}
|
|
No unread notifications.
|
|
{{end}}
|
|
</p>
|
|
<form method="POST" action="{{.Request.URL.Path}}">
|
|
{{InputCSRF}}
|
|
<div class="my-2 has-text-right">
|
|
<button type="submit" name="intent" value="clear-all"
|
|
class="button is-danger is-light is-small"
|
|
onclick="return window.confirm('Are you sure you want to REMOVE all notifications?')">
|
|
<i class="fa fa-xmark mr-1"></i>
|
|
Clear all
|
|
</button>
|
|
|
|
<button type="submit" name="intent" value="read-notifications"
|
|
class="button is-link is-light is-small">
|
|
<i class="fa fa-check mr-1"></i>
|
|
Mark all as read
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<hr>
|
|
</div>
|
|
|
|
<!-- Filters -->
|
|
<div class="block">
|
|
<form action="{{.Request.URL.Path}}" method="GET">
|
|
|
|
<div class="card nonshy-collapsible-mobile nonshy-collapsible-always mb-5">
|
|
<header class="card-header has-background-link-light">
|
|
<p class="card-header-title has-text-dark">
|
|
<i class="fa fa-list mr-2"></i> Notification Types
|
|
</p>
|
|
<button class="card-header-icon" type="button">
|
|
<span class="icon">
|
|
<i class="fa fa-angle-up"></i>
|
|
</span>
|
|
</button>
|
|
</header>
|
|
<div class="card-content">
|
|
|
|
<p class="block">
|
|
<a href="/settings#notifications">
|
|
<i class="fa fa-gear mr-1"></i>
|
|
Manage notification settings
|
|
</a>
|
|
</p>
|
|
|
|
<div class="columns is-multiline mb-0">
|
|
|
|
<div class="column is-half">
|
|
<div class="field">
|
|
<label class="checkbox">
|
|
<input type="checkbox"
|
|
name="likes"
|
|
value="true"
|
|
{{if .Filters.Likes}}checked{{end}}
|
|
>
|
|
Likes
|
|
<p class="help">
|
|
on your photos, profile or comments
|
|
</p>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-half">
|
|
<div class="field">
|
|
<label class="checkbox">
|
|
<input type="checkbox"
|
|
name="comments"
|
|
value="true"
|
|
{{if .Filters.Comments}}checked{{end}}
|
|
>
|
|
Comments
|
|
<p class="help">
|
|
on your photos
|
|
</p>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-half">
|
|
<div class="field">
|
|
<label class="checkbox">
|
|
<input type="checkbox"
|
|
name="photos"
|
|
value="true"
|
|
{{if .Filters.NewPhotos}}checked{{end}}
|
|
>
|
|
New Photos
|
|
<p class="help">
|
|
of your friends
|
|
</p>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-half">
|
|
<div class="field">
|
|
<label class="checkbox">
|
|
<input type="checkbox"
|
|
name="replies"
|
|
value="true"
|
|
{{if .Filters.AlsoCommented}}checked{{end}}
|
|
>
|
|
Replies
|
|
<p class="help">
|
|
on comment threads you follow
|
|
</p>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-half">
|
|
<div class="field">
|
|
<label class="checkbox">
|
|
<input type="checkbox"
|
|
name="private"
|
|
value="true"
|
|
{{if .Filters.PrivatePhoto}}checked{{end}}
|
|
>
|
|
Private photos
|
|
<p class="help">
|
|
unlock notifications
|
|
</p>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-half">
|
|
<div class="field">
|
|
<label class="checkbox">
|
|
<input type="checkbox"
|
|
name="misc"
|
|
value="true"
|
|
{{if .Filters.Misc}}checked{{end}}
|
|
>
|
|
Miscellaneous
|
|
<p class="help">
|
|
new friends, certification photos, etc.
|
|
</p>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="block has-text-centered">
|
|
<a href="{{.Request.URL.Path}}" class="button">
|
|
Reset
|
|
</a>
|
|
<button type="submit" class="button is-success">
|
|
Apply Filters
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<table class="table is-striped is-fullwidth is-hoverable">
|
|
<tbody>
|
|
{{range .Notifications}}
|
|
{{$Body := $Root.NotifMap.Get .ID}}
|
|
<tr>
|
|
<td class="nonshy-notification-row" data-notification-id="{{.ID}}">
|
|
<!-- Delete button for just this notification -->
|
|
<button type="button"
|
|
class="button is-danger px-2 py-1 is-small nonshy-notif-delete-button"
|
|
data-notification-id="{{.ID}}"
|
|
title="Remove this notification from your feed">
|
|
<i class="fa fa-xmark mr"></i>
|
|
</button>
|
|
|
|
<div class="columns">
|
|
<div class="column is-narrow has-text-centered">
|
|
{{if not .Read}}
|
|
<div class="mb-2 nonshy-notification-new">
|
|
<strong class="tag is-success">NEW!</strong>
|
|
</div>
|
|
{{end}}
|
|
<a href="/u/{{.AboutUser.Username}}">
|
|
{{template "avatar-48x48" .AboutUser}}
|
|
</a>
|
|
</div>
|
|
<div class="column">
|
|
<div class="mb-1">
|
|
{{if eq .Type "like"}}
|
|
<span class="icon"><i class="fa fa-heart has-text-danger"></i></span>
|
|
<span>
|
|
<a href="/u/{{.AboutUser.Username}}"><strong>{{.AboutUser.Username}}</strong></a>
|
|
liked your
|
|
{{if eq .TableName "photos"}}
|
|
{{if $Body.Photo}}
|
|
<a href="/photo/view?id={{$Body.Photo.ID}}">photo</a>.
|
|
{{else}}
|
|
photo.
|
|
{{end}}
|
|
{{else if eq .TableName "users"}}
|
|
profile page.
|
|
{{else if eq .TableName "comments"}}
|
|
{{if .Link}}
|
|
<a href="{{.Link}}">comment</a>:
|
|
{{else}}
|
|
comment.
|
|
{{end}}
|
|
{{else}}
|
|
{{.TableName}}.
|
|
{{end}}
|
|
</span>
|
|
{{else if eq .Type "comment"}}
|
|
<span class="icon"><i class="fa fa-comment has-text-success"></i></span>
|
|
<span>
|
|
<a href="/u/{{.AboutUser.Username}}"><strong>{{.AboutUser.Username}}</strong></a>
|
|
commented on your
|
|
<a href="{{.Link}}">
|
|
{{if eq .TableName "photos"}}
|
|
photo:
|
|
{{else}}
|
|
{{.TableName}}:
|
|
{{end}}
|
|
</a>
|
|
</span>
|
|
{{else if eq .Type "also_comment"}}
|
|
<span class="icon"><i class="fa fa-comment has-text-success"></i></span>
|
|
<span>
|
|
<a href="/u/{{.AboutUser.Username}}"><strong>{{.AboutUser.Username}}</strong></a>
|
|
also commented on a
|
|
<a href="{{.Link}}">
|
|
{{if eq .TableName "photos"}}
|
|
photo
|
|
{{else}}
|
|
{{.TableName}}
|
|
{{end}}
|
|
</a>
|
|
that you replied to:
|
|
</span>
|
|
{{else if eq .Type "also_posted"}}
|
|
<span class="icon"><i class="fa fa-comments has-text-success"></i></span>
|
|
<span>
|
|
<a href="/u/{{.AboutUser.Username}}"><strong>{{.AboutUser.Username}}</strong></a>
|
|
replied to <a href="{{.Link}}">a forum thread</a> that you follow:
|
|
</span>
|
|
{{else if eq .Type "friendship_approved"}}
|
|
<span class="icon"><i class="fa fa-user-group has-text-success"></i></span>
|
|
<span>
|
|
<a href="/u/{{.AboutUser.Username}}"><strong>{{.AboutUser.Username}}</strong></a>
|
|
accepted your friend request!
|
|
</span>
|
|
{{else if eq .Type "private_photo"}}
|
|
<span class="icon"><i class="fa fa-unlock has-text-private"></i></span>
|
|
<span>
|
|
<a href="/u/{{.AboutUser.Username}}"><strong>{{.AboutUser.Username}}</strong></a>
|
|
has granted you access to see their
|
|
<a href="{{.Link}}" class="has-text-private">private photos</a>!
|
|
</span>
|
|
{{else if eq .Type "new_photo"}}
|
|
<span class="icon">
|
|
{{if and $Body.Photo (eq $Body.Photo.Visibility "private")}}
|
|
<i class="fa fa-eye {{if $Body.Photo.Explicit}}has-text-danger{{else}}has-text-private{{end}}"></i>
|
|
{{else}}
|
|
<i class="fa fa-image {{if $Body.Photo.Explicit}}has-text-danger{{else}}has-text-link{{end}}"></i>
|
|
{{end}}
|
|
</span>
|
|
<span>
|
|
<a href="/u/{{.AboutUser.Username}}"><strong>{{.AboutUser.Username}}</strong></a>
|
|
has uploaded a new
|
|
{{if and $Body.Photo (eq $Body.Photo.Visibility "private")}}
|
|
<span class="has-text-private">private photo!</span>
|
|
{{else}}
|
|
photo!
|
|
{{end}}
|
|
</span>
|
|
{{else if eq .Type "cert_approved"}}
|
|
<span class="icon"><i class="fa fa-certificate has-text-success"></i></span>
|
|
<span>
|
|
Your <strong>certification photo</strong> was approved!
|
|
</span>
|
|
{{else if eq .Type "cert_secondary"}}
|
|
<span class="icon"><i class="fa fa-certificate has-text-warning"></i></span>
|
|
<span>
|
|
About your <strong>certification photo:</strong>
|
|
</span>
|
|
{{else if eq .Type "cert_rejected"}}
|
|
<span class="icon"><i class="fa fa-certificate has-text-danger"></i></span>
|
|
<span>
|
|
Your <strong>certification photo</strong> was rejected!
|
|
</span>
|
|
{{else}}
|
|
{{.AboutUser.Username}} {{.Type}} {{.TableName}} {{.TableID}}
|
|
{{end}}
|
|
</div>
|
|
|
|
<!-- Attached message? -->
|
|
{{if .Message}}
|
|
<div class="block content mb-1">
|
|
<blockquote class="p-2 pl-4">{{ToMarkdown (TrimEllipses .Message 256)}}</blockquote>
|
|
</div>
|
|
{{end}}
|
|
|
|
<!-- Attached forum thread? -->
|
|
{{if $Body.Thread}}
|
|
<div>
|
|
On thread: <a href="{{.Link}}">{{$Body.Thread.Title}}</a>
|
|
</div>
|
|
{{end}}
|
|
|
|
<!-- Photo caption? -->
|
|
{{if $Body.Photo}}
|
|
<div class="block">
|
|
<!-- If it's a comment, have a link to view it -->
|
|
{{if eq .Type "comment"}}
|
|
<div class="is-size-7 pt-1">
|
|
<span class="icon"><i class="fa fa-arrow-right"></i></span>
|
|
<a href="{{.Link}}">See all comments</a>
|
|
</div>
|
|
{{else}}
|
|
<em>{{or $Body.Photo.Caption "No caption."}}</em>
|
|
{{end}}
|
|
|
|
<!-- Admin action: mark this pic explicit? -->
|
|
{{if and ($Root.CurrentUser.IsAdmin) (not $Body.Photo.Explicit)}}
|
|
<div class="mt-2">
|
|
<a href="/admin/photo/mark-explicit?photo_id={{$Body.Photo.ID}}&next={{$Root.Request.URL}}"
|
|
class="has-text-danger is-size-7"
|
|
onclick="return confirm('Do you want to mark this photo as Explicit?')">
|
|
<i class="fa fa-peace mr-1"></i>
|
|
Mark photo as Explicit
|
|
</a>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
|
|
<hr class="has-background-light mb-1">
|
|
<small title="{{.CreatedAt.Format "2006-01-02 15:04:05"}}">
|
|
{{SincePrettyCoarse .CreatedAt}} ago.
|
|
|
|
<!-- Contextual "Unsubscribe" buttons -->
|
|
{{if or (eq .Type "also_posted") (eq .Type "also_comment")}}
|
|
<small>
|
|
<a href="#"
|
|
data-link="/comments/subscription?table_name={{.TableName}}&table_id={{.TableID}}&next={{UrlEncode $Root.Request.URL.String}}&subscribe=false"
|
|
data-confirm="Do you want to TURN OFF notifications about this comment thread?"
|
|
class="has-text-warning is-small nonshy-mute-notification-link"
|
|
title="Turn off notifications about this thread">
|
|
<i class="fa fa-microphone-slash mr-1"></i> Mute this thread
|
|
</a>
|
|
</small>
|
|
{{else if eq .Type "new_photo"}}
|
|
<small>
|
|
<a href="#"
|
|
data-link="/comments/subscription?table_name=friend.photos&table_id={{.AboutUser.Username}}&next={{UrlEncode $Root.Request.URL.String}}&subscribe=false"
|
|
data-confirm="Do you want to TURN OFF notifications about @{{.AboutUser.Username}}'s new photo uploads?\n\nNote: to re-subscribe to their new photo notifications, see the link at the top of @{{.AboutUser.Username}}'s Photo Gallery page."
|
|
class="has-text-warning is-small nonshy-mute-notification-link"
|
|
title="Turn off notifications about @{{.AboutUser.Username}}'s new photo uploads">
|
|
<i class="fa fa-microphone-slash mr-1"></i> Mute these notifications
|
|
</a>
|
|
</small>
|
|
{{end}}
|
|
</small>
|
|
</div>
|
|
|
|
<!-- Attached photo? -->
|
|
{{if $Body.PhotoID}}
|
|
<div class="column is-one-quarter is-clipped">
|
|
<!-- GIF video? -->
|
|
{{if HasSuffix $Body.Photo.Filename ".mp4"}}
|
|
<video loop controls controlsList="nodownload" playsinline
|
|
{{if $Body.Photo.AltText}}title="{{$Body.Photo.AltText}}"{{end}}
|
|
{{if BlurExplicit $Body.Photo}}class="blurred-explicit"
|
|
{{else if (not (eq ($Root.CurrentUser.GetProfileField "autoplay_gif") "false"))}}autoplay
|
|
{{end}}>
|
|
<source src="{{PhotoURL $Body.Photo.Filename}}" type="video/mp4">
|
|
</video>
|
|
<div>
|
|
<a href="/photo/view?id={{$Body.Photo.ID}}" class="is-size-7">
|
|
<i class="fa fa-arrow-right"></i> View GIF
|
|
</a>
|
|
</div>
|
|
{{else}}
|
|
<a href="/photo/view?id={{$Body.Photo.ID}}">
|
|
<img src="{{PhotoURL $Body.Photo.Filename}}" loading="lazy"
|
|
{{if BlurExplicit $Body.Photo}} class="blurred-explicit"{{end}}
|
|
{{if $Body.Photo.AltText}}title="{{$Body.Photo.AltText}}" alt="{{$Body.Photo.AltText}}"{{end}}>
|
|
</a>
|
|
{{end}}
|
|
|
|
{{if $Body.Photo.Caption}}
|
|
<small>{{$Body.Photo.Caption}}</small>
|
|
{{else}}
|
|
<small><em>No caption.</em></small>
|
|
{{end}}
|
|
|
|
<!-- Like button for the photo right here -->
|
|
{{if ne $Body.Photo.UserID $Root.CurrentUser.ID}}
|
|
<div class="mt-1">
|
|
{{$Like := $Root.PhotoLikeMap.Get $Body.PhotoID}}
|
|
<button type="button" class="button is-small nonshy-like-button"
|
|
data-table-name="photos" data-table-id="{{$Body.PhotoID}}"
|
|
title="Like">
|
|
<span class="icon{{if $Like.UserLikes}} has-text-danger{{end}}"><i class="fa fa-heart"></i></span>
|
|
<span class="nonshy-likes">
|
|
Like
|
|
{{if gt $Like.Count 0}}
|
|
({{$Like.Count}})
|
|
{{end}}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
|
|
</td>
|
|
</tr>
|
|
{{end}}
|
|
</tbody>
|
|
</table>
|
|
|
|
{{if .Pager.HasNext}}
|
|
<div class="has-text-centered">
|
|
<a href="{{.Request.URL.Path}}?{{QueryPlus "page" .Pager.Next}}" class="button">View older notifications</a>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
// Notifications helper.
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
let busy = false;
|
|
|
|
// For delete buttons: if they click thru the first confirm, do not ask every single time
|
|
// for the rest of the current page load.
|
|
let dontAskAgain = false;
|
|
|
|
// Bind to the notification table rows.
|
|
(document.querySelectorAll(".nonshy-notification-row") || []).forEach(node => {
|
|
let $newBadge = node.querySelector(".nonshy-notification-new"),
|
|
$deleteButton = node.querySelector(".nonshy-notif-delete-button"),
|
|
ID = node.dataset.notificationId;
|
|
|
|
// Delete buttons for individual notifications.
|
|
$deleteButton.addEventListener("click", (e) => {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
if (!dontAskAgain) {
|
|
if (!window.confirm(
|
|
"Do you want to DELETE this notification?\n\nNote: If you click Ok, you will not be asked "+
|
|
"the next time you want to delete another notification until your next page reload."
|
|
)) {
|
|
return;
|
|
}
|
|
dontAskAgain = true;
|
|
}
|
|
|
|
busy = true;
|
|
return fetch("/v1/notifications/delete", {
|
|
method: "POST",
|
|
mode: "same-origin",
|
|
cache: "no-cache",
|
|
credentials: "same-origin",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
"id": parseInt(ID),
|
|
}),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
console.log(data);
|
|
|
|
// Hide the notification row immediately.
|
|
node.style.display = 'none';
|
|
}).catch(resp => {
|
|
window.alert(resp);
|
|
}).finally(() => {
|
|
busy = false;
|
|
});
|
|
});
|
|
|
|
// If the notification doesn't have a "NEW!" badge, no action needed.
|
|
if ($newBadge === null) return;
|
|
|
|
// Collect any hyperlinks in this row.
|
|
let links = Array.from(node.querySelectorAll("a"));
|
|
links.push(node);
|
|
|
|
// Apply a "click" handler to the notification row as a whole, and to all of the hyperlinks in it.
|
|
// For the hyperlinks: prevent the browser following the link UNTIL the successful ajax request to
|
|
// mark the notification "read" has run.
|
|
links.forEach(link => {
|
|
link.addEventListener("click", (e) => {
|
|
if (busy) return;
|
|
|
|
// In case it's a hyperlink, grab the href.
|
|
let href = link.attributes.href;
|
|
if (href !== undefined) {
|
|
e.preventDefault();
|
|
href = href.textContent;
|
|
}
|
|
|
|
$newBadge.style.display = "none";
|
|
|
|
busy = true;
|
|
return fetch("/v1/notifications/read", {
|
|
method: "POST",
|
|
mode: "same-origin",
|
|
cache: "no-cache",
|
|
credentials: "same-origin",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
},
|
|
body: JSON.stringify({
|
|
"id": parseInt(ID),
|
|
}),
|
|
})
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
console.log(data);
|
|
}).catch(resp => {
|
|
window.alert(resp);
|
|
}).finally(() => {
|
|
busy = false;
|
|
if (href !== undefined && href !== "#") {
|
|
window.location.href = href;
|
|
}
|
|
});
|
|
})
|
|
});
|
|
});
|
|
|
|
// "Mute notification" links.
|
|
// NOTE: to avoid conflict with the "mark notification as read, then follow href" code
|
|
// above, the mute buttons href is made safer and this function will get its follow-thru
|
|
// URL from a data attribute.
|
|
(document.querySelectorAll(".nonshy-mute-notification-link") || []).forEach(node => {
|
|
node.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
const link = node.dataset.link,
|
|
prompt = node.dataset.confirm.replace(/\\n/g, "\n");
|
|
if (!window.confirm(prompt)) return;
|
|
|
|
window.location = link;
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{{end}}
|