website/web/templates/photo/permalink.html

301 lines
15 KiB
HTML
Raw Normal View History

2022-08-29 04:01:11 +00:00
{{define "title"}}Photo: {{or .Photo.Caption "No caption"}}{{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">
2022-09-09 04:52:50 +00:00
<div class="column is-narrow mr-2">
{{template "avatar-24x24" .User}}
</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>
2023-06-26 06:03:41 +00:00
<div class="card-image has-text-centered">
<!-- GIF video? -->
{{if HasSuffix .Photo.Filename ".mp4"}}
<video autoplay loop controls>
<source src="{{PhotoURL .Photo.Filename}}" type="video/mp4">
</video>
{{else}}
<img src="{{PhotoURL .Photo.Filename}}">
{{end}}
</div>
<div class="card-content">
{{if .Photo.Caption}}
{{.Photo.Caption}}
{{else}}<em>No caption</em>{{end}}
2023-09-14 04:28:38 +00:00
<!-- Who likes this photo? -->
{{template "like-example" .}}
<!-- 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"
2022-08-27 03:07:55 +00:00
placeholder="Add your comment"
required></textarea>
<p class="help">
2023-02-06 04:26:36 +00:00
<a href="/markdown" target="_blank">Markdown formatting</a> 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}}
2023-06-16 02:40:40 +00:00
<div class="box has-background-link-light" id="p{{.ID}}">
<div class="columns">
<div class="column is-2 has-text-centered">
<div>
<a href="/u/{{.User.Username}}">
2022-09-09 04:52:50 +00:00
{{template "avatar-96x96" .User}}
</a>
</div>
<a href="/u/{{.User.Username}}">{{.User.Username}}</a>
</div>
<div class="column content">
{{ToMarkdown .Message}}
2022-08-29 03:56:26 +00:00
{{if .IsEdited}}
<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">
{{$Like := $Root.CommentLikeMap.Get .ID}}
<a href="#" class="has-text-dark nonshy-like-button"
data-table-name="comments" data-table-id="{{.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>
</a>
</div>
2023-09-14 04:28:38 +00:00
<div class="column is-narrow">
<!-- Button to inspect the likes -->
<a href="#" class="has-text-dark"
onclick="ShowLikeModal('comments', {{.ID}}); return false">
<span class="icon"><i class="fa fa-eye"></i></span>
<span>Likes</span>
</a>
</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>
2023-06-26 06:03:41 +00:00
{{end}}