Noah
aa8d719fc4
* Add ability to (un)subscribe from comment threads on Forums and Photos. * Creating a forum post, replying to a post or adding a comment to a photo automatically subscribes you to be notified when somebody else adds a comment to the thing later. * At the top of each comment thread is a link to disable or re-enable your subscription. You can join a subscription without even needing to comment. If you click to disable notifications, they stay disabled even if you add another comment later.
280 lines
14 KiB
HTML
280 lines
14 KiB
HTML
{{define "title"}}Upload a Photo{{end}}
|
|
{{define "content"}}
|
|
<div class="container">
|
|
<section class="hero is-info is-bold">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<h1 class="title">
|
|
<span class="icon mr-4">
|
|
<i class="fa fa-image"></i>
|
|
</span>
|
|
<span>{{or .Photo.Caption "Photo"}}</span>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{{ $Root := . }}
|
|
{{ $User := .CurrentUser }}
|
|
{{ $Comments := .CommentMap.Get .Photo.ID }}
|
|
|
|
<div class="block p-4">
|
|
<nav class="breadcrumb" aria-label="breadcrumbs">
|
|
<ul>
|
|
<li>
|
|
<a href="/u/{{.User.Username}}">
|
|
<span class="icon"><i class="fa fa-user"></i></span>
|
|
<span>{{.User.Username}}</span>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/photo/u/{{.User.Username}}">Photos</a>
|
|
</li>
|
|
<li class="is-active">
|
|
<a href="{{.Request.URL.Path}}" aria-current="page">Comments</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="block p-4">
|
|
|
|
<!-- Photo Card -->
|
|
<div class="card block">
|
|
<header class="card-header {{if .Photo.Explicit}}has-background-danger{{else}}has-background-link{{end}}">
|
|
<div class="card-header-title has-text-light">
|
|
<div class="columns is-mobile is-gapless nonshy-fullwidth">
|
|
<div class="column is-narrow">
|
|
<figure class="image is-24x24 mr-2">
|
|
{{if gt .User.ProfilePhoto.ID 0}}
|
|
<img src="{{PhotoURL .User.ProfilePhoto.CroppedFilename}}" class="is-rounded">
|
|
{{else}}
|
|
<img src="/static/img/shy.png" class="is-rounded has-background-warning">
|
|
{{end}}
|
|
</figure>
|
|
</div>
|
|
<div class="column">
|
|
<a href="/u/{{.User.Username}}" class="has-text-light">
|
|
{{.User.Username}}
|
|
<i class="fa fa-external-link ml-2"></i>
|
|
</a>
|
|
</div>
|
|
<div class="column is-narrow">
|
|
<span class="icon">
|
|
{{if eq .Photo.Visibility "friends"}}
|
|
<i class="fa fa-user-group has-text-warning" title="Friends"></i>
|
|
{{else if eq .Photo.Visibility "private"}}
|
|
<i class="fa fa-lock has-text-private-light" title="Private"></i>
|
|
{{else}}
|
|
<i class="fa fa-eye has-text-link-light" title="Public"></i>
|
|
{{end}}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="card-image">
|
|
<figure class="image">
|
|
<img src="{{PhotoURL .Photo.Filename}}">
|
|
</figure>
|
|
</div>
|
|
|
|
<div class="card-content">
|
|
{{if .Photo.Caption}}
|
|
{{.Photo.Caption}}
|
|
{{else}}<em>No caption</em>{{end}}
|
|
|
|
<!-- Like & Comments buttons -->
|
|
<div class="mt-4 mb-2 columns is-centered is-mobile is-gapless">
|
|
<div class="column is-narrow mr-2">
|
|
{{$Like := .LikeMap.Get .Photo.ID}}
|
|
<button type="button" class="button is-small nonshy-like-button"
|
|
data-table-name="photos" data-table-id="{{.Photo.ID}}"
|
|
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>
|
|
<div class="column is-narrow">
|
|
<a href="/photo/view?id={{.Photo.ID}}#comments" class="button is-small">
|
|
<span class="icon"><i class="fa fa-comment"></i></span>
|
|
<span>{{$Comments}} Comment{{Pluralize64 $Comments}}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Photo controls buttons (edit/delete/report) -->
|
|
<div class="my-0 columns is-centered is-mobile is-gapless">
|
|
<!-- Owned photo: have edit/delete buttons too -->
|
|
{{if or .IsOwnPhoto .CurrentUser.IsAdmin}}
|
|
<div class="column is-narrow">
|
|
<a href="/photo/edit?id={{.Photo.ID}}" class="button is-small">
|
|
<span class="icon"><i class="fa fa-edit"></i></span>
|
|
<span>Edit</span>
|
|
</a>
|
|
</div>
|
|
<div class="column is-narrow ml-2">
|
|
<a href="/photo/delete?id={{.Photo.ID}}" class="button is-small has-text-danger">
|
|
<span class="icon"><i class="fa fa-trash"></i></span>
|
|
<span>Delete</span>
|
|
</a>
|
|
</div>
|
|
{{end}}
|
|
|
|
<!-- Report button except on your own pic -->
|
|
{{if not .IsOwnPhoto}}
|
|
<div class="column is-narrow ml-2">
|
|
<a href="/contact?intent=report&subject=report.photo&id={{.Photo.ID}}" class="button is-small has-text-danger">
|
|
<span class="icon"><i class="fa fa-flag"></i></span>
|
|
<span>Report</span>
|
|
</a>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
|
|
</div><!-- /photo card -->
|
|
|
|
<!-- Comments Card -->
|
|
<div class="card" id="comments">
|
|
<header class="card-header has-background-success">
|
|
<p class="card-header-title has-text-light">
|
|
<span class="icon mr-2"><i class="fa fa-comment"></i></span>
|
|
<span>{{$Comments}} Comment{{Pluralize64 $Comments}}</span>
|
|
</p>
|
|
</header>
|
|
|
|
<div class="card-content">
|
|
<form action="/comments" method="POST">
|
|
{{InputCSRF}}
|
|
<input type="hidden" name="table_name" value="photos">
|
|
<input type="hidden" name="table_id" value="{{.Photo.ID}}">
|
|
<input type="hidden" name="next" value="{{.Request.URL.Path}}?id={{.Photo.ID}}">
|
|
|
|
<div class="field">
|
|
<label for="message">Add your comment</label>
|
|
<textarea class="textarea" cols="80" rows="4"
|
|
name="message" id="message"
|
|
placeholder="Add your comment"
|
|
required></textarea>
|
|
<p class="help">
|
|
Markdown formatting supported.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="field has-text-centered">
|
|
<button type="submit" class="button is-link"
|
|
name="intent" value="preview">
|
|
Preview
|
|
</button>
|
|
|
|
<button type="submit" class="button is-success"
|
|
name="intent" value="submit">
|
|
Post Comment
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<hr class="is-dark">
|
|
|
|
{{if not .IsOwnPhoto}}
|
|
<p class="mb-4">
|
|
<a href="/comments/subscription?table_name=photos&table_id={{.Photo.ID}}&next={{UrlEncode .Request.URL.String}}&subscribe={{if not .IsSubscribed}}true{{else}}false{{end}}">
|
|
<span class="icon"><i class="fa fa-bell{{if not .IsSubscribed}}-slash{{end}}"></i></span>
|
|
<span>
|
|
{{if .IsSubscribed}}
|
|
Disable notifications about this comment thread
|
|
{{else}}
|
|
Enable notifications about this comment thread
|
|
{{end}}
|
|
</span>
|
|
</a>
|
|
</p>
|
|
{{end}}
|
|
|
|
{{if eq $Comments 0}}
|
|
<p>
|
|
<em>There are no comments yet.</em>
|
|
</p>
|
|
{{else}}
|
|
{{range .Comments}}
|
|
<div class="box has-background-link-light">
|
|
<div class="columns">
|
|
<div class="column is-2 has-text-centered">
|
|
<div>
|
|
<a href="/u/{{.User.Username}}">
|
|
<figure class="image is-96x96 is-inline-block">
|
|
{{if .User.ProfilePhoto.ID}}
|
|
<img src="{{PhotoURL .User.ProfilePhoto.CroppedFilename}}">
|
|
{{else}}
|
|
<img src="/static/img/shy.png">
|
|
{{end}}
|
|
</figure>
|
|
</a>
|
|
</div>
|
|
<a href="/u/{{.User.Username}}">{{.User.Username}}</a>
|
|
</div>
|
|
|
|
<div class="column content">
|
|
{{ToMarkdown .Message}}
|
|
|
|
{{if .UpdatedAt.After .CreatedAt}}
|
|
<div class="mt-4">
|
|
<em title="{{.UpdatedAt.Format "2006-01-02 15:04:05"}}">
|
|
<small>Edited {{SincePrettyCoarse .UpdatedAt}} ago</small>
|
|
</em>
|
|
</div>
|
|
{{end}}
|
|
|
|
<hr class="has-background-grey mb-2">
|
|
|
|
<div class="columns is-mobile is-multiline is-size-7 mb-0">
|
|
<div class="column is-narrow">
|
|
<span title="{{.CreatedAt.Format "2006-01-02 15:04:05"}}">
|
|
{{SincePrettyCoarse .CreatedAt}} ago
|
|
</span>
|
|
</div>
|
|
|
|
<div class="column is-narrow">
|
|
<a href="/contact?intent=report&subject=report.comment&id={{.ID}}" class="has-text-dark">
|
|
<span class="icon"><i class="fa fa-flag"></i></span>
|
|
<span>Report</span>
|
|
</a>
|
|
</div>
|
|
|
|
{{if or $Root.CurrentUser.IsAdmin (eq $Root.CurrentUser.ID .User.ID)}}
|
|
<div class="column is-narrow">
|
|
<a href="/comments?table_name=photos&table_id={{$Root.Photo.ID}}&edit={{.ID}}&next={{UrlEncode $Root.Request.URL.Path "?id=" $Root.Photo.ID}}" class="has-text-dark">
|
|
<span class="icon"><i class="fa fa-edit"></i></span>
|
|
<span>Edit</span>
|
|
</a>
|
|
</div>
|
|
{{end}}
|
|
|
|
<!-- The poster, the photo owner, and the admin can delete the comment -->
|
|
{{if or $Root.CurrentUser.IsAdmin (eq $Root.CurrentUser.ID .User.ID) $Root.IsOwnPhoto}}
|
|
<div class="column is-narrow">
|
|
<a href="/comments?table_name=photos&table_id={{$Root.Photo.ID}}&edit={{.ID}}&delete=true&next={{UrlEncode $Root.Request.URL.Path "?id=" $Root.Photo.ID}}" onclick="return confirm('Are you sure you want to delete this comment?')" class="has-text-dark">
|
|
<span class="icon"><i class="fa fa-trash"></i></span>
|
|
<span>Delete</span>
|
|
</a>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
{{end}} |