2022-08-29 04:01:11 +00:00
{{define "title"}}Photo: {{or .Photo.Caption "No caption"}}{{end}}
2022-08-27 02:50:33 +00:00
{{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 >
2024-02-11 00:17:15 +00:00
< a href = "/u/{{.User.Username}}/photos" > Photos< / a >
2022-08-27 02:50:33 +00:00
< / 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}}
2022-08-27 02:50:33 +00:00
< / 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-09-20 01:24:57 +00:00
< div class = "card-image has-text-centered is-clipped" >
2023-06-26 06:03:41 +00:00
<!-- GIF video? -->
{{if HasSuffix .Photo.Filename ".mp4"}}
2024-01-27 22:44:30 +00:00
< video loop controls controlsList = "nodownload"
2024-03-16 06:19:26 +00:00
{{if .Photo.AltText}}title="{{.Photo.AltText}}"{{end}}
2023-09-24 18:41:19 +00:00
{{if BlurExplicit .Photo}}class="blurred-explicit"
{{else if (not (eq ($Root.CurrentUser.GetProfileField "autoplay_gif") "false"))}}autoplay
{{end}}>
2023-06-26 06:03:41 +00:00
< source src = "{{PhotoURL .Photo.Filename}}" type = "video/mp4" >
< / video >
{{else}}
2024-03-16 06:19:26 +00:00
< img src = "{{PhotoURL .Photo.Filename}}"
{{if BlurExplicit .Photo}} class="blurred-explicit"{{end}}
{{if .Photo.AltText}}alt="{{.Photo.AltText}}" title="{{.Photo.AltText}}"{{end}}>
2023-06-26 06:03:41 +00:00
{{end}}
2022-08-27 02:50:33 +00:00
< / div >
< div class = "card-content" >
{{if .Photo.Caption}}
{{.Photo.Caption}}
{{else}}< em > No caption< / em > {{end}}
2024-03-16 05:02:24 +00:00
<!-- Alt Text -->
{{if .Photo.AltText}}
< div class = "box my-4 py-3 px-4 is-size-7" >
< strong class = "tag is-grey mr-2 cursor-default" > Alt Text< / strong >
< span class = "line-breakable" > {{.Photo.AltText}}< / span >
< / div >
{{end}}
2024-03-16 20:29:28 +00:00
<!-- Quick mark photo as explicit -->
2024-03-20 02:41:17 +00:00
{{if and (not .Photo.Explicit) (ne .Photo.UserID .CurrentUser.ID)}}
2024-02-26 01:40:23 +00:00
< div class = "mt-2" >
2024-03-16 20:29:28 +00:00
< a href = "#"
class="has-text-danger is-size-7 nonshy-mark-explicit"
data-photo-id="{{.Photo.ID}}" data-photo-url="{{PhotoURL .Photo.Filename}}">
< i class = "fa fa-fire mr-1" > < / i >
Should this photo be marked Explicit?
2024-02-26 01:40:23 +00:00
< / a >
< / div >
{{end}}
2023-09-14 04:28:38 +00:00
<!-- Who likes this photo? -->
{{template "like-example" .}}
2022-08-27 02:50:33 +00:00
<!-- 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 >
2024-04-02 00:53:19 +00:00
< div class = "card-content px-4" >
2022-08-27 02:50:33 +00:00
< 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 >
2022-08-27 02:50:33 +00:00
< p class = "help" >
2023-02-06 04:26:36 +00:00
< a href = "/markdown" target = "_blank" > Markdown formatting< / a > supported.
2022-08-27 02:50:33 +00:00
< / 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" >
2022-08-27 18:42:48 +00:00
{{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}}
2022-08-27 02:50:33 +00:00
{{if eq $Comments 0}}
< p >
< em > There are no comments yet.< / em >
< / p >
{{else}}
{{range .Comments}}
2024-03-30 23:11:55 +00:00
< div class = "box has-background-link-light has-text-dark" id = "p{{.ID}}" >
2022-08-27 02:50:33 +00:00
< 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}}
2022-08-27 02:50:33 +00:00
< / a >
< / div >
2023-12-21 23:09:23 +00:00
< a href = "/u/{{.User.Username}}" > {{.User.NameOrUsername}}< / a >
2022-08-27 02:50:33 +00:00
< / div >
< div class = "column content" >
{{ToMarkdown .Message}}
2022-08-29 03:56:26 +00:00
{{if .IsEdited}}
2022-08-27 02:50:33 +00:00
< 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 >
2022-08-30 03:00:15 +00:00
< 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 >
2022-08-27 02:50:33 +00:00
< 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}}
2024-01-06 06:14:42 +00:00
<!-- Copy link to clipboard -->
< div class = "column is-narrow" >
< a href = "/go/comment?id={{.ID}}" onclick = "navigator.clipboard.writeText(this.href); window.location='#p{{.ID}}'; return false"
class="has-text-dark"
title="Copy link to clipboard">
< span class = "icon" > < i class = "fa fa-paragraph" > < / i > < / span >
2024-01-06 06:25:05 +00:00
< span > Link< / span >
2024-01-06 06:14:42 +00:00
< / a >
< / div >
2022-08-27 02:50:33 +00:00
< / div >
< / div >
< / div >
< / div >
{{end}}
{{end}}
< / div >
< / div >
< / div >
< / div >
2024-03-16 20:29:28 +00:00
<!-- Mark Explicit modal -->
{{template "mark-explicit-modal" .}}
2023-06-26 06:03:41 +00:00
{{end}}
