{{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"> <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> <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}} <!-- 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"> <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}} <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}}"> {{template "avatar-96x96" .User}} </a> </div> <a href="/u/{{.User.Username}}">{{.User.Username}}</a> </div> <div class="column content"> {{ToMarkdown .Message}} {{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> <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}}