[chore/frontend] Refactor status templates slightly, put polls behind CWs if present (#2419)

* [chore/frontend] Reorder templates, allow polls to be inside content warnings

* show when multiple-choice

1 files changed, 58 insertions, 105 deletions

diff --git a/web/template/status.tmpl b/web/template/status.tmpl
index 59725a470..d4df926f0 100644
--- a/web/template/status.tmpl
+++ b/web/template/status.tmpl
@@ -17,127 +17,80 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */ -}}
 
+<a data-nosnippet href="{{- .URL -}}" class="toot-link">Open thread</a>
 <section class="author">
-	<a href="{{.Account.URL}}">
-		<img class="avatar" src="{{.Account.Avatar}}" alt="">
-		<span class="displayname">
-			{{if .Account.DisplayName}}
-			{{emojify .Account.Emojis (escape .Account.DisplayName)}}
-			{{else}}
-			{{.Account.Username}}
-			{{end}}
-			<span class="sr-only">.</span>
+	<a href="{{- .Account.URL -}}">
+		<img class="avatar" src="{{- .Account.Avatar -}}" alt="">
+		<span aria-hidden="true" class="displayname">
+			{{- if .Account.DisplayName -}}
+			{{- emojify .Account.Emojis (escape .Account.DisplayName) -}}
+			{{- else -}}
+			{{- .Account.Username -}}
+			{{- end -}}
+		</span>
+		<span aria-hidden="true" class="username">@{{- .Account.Username -}}</span>
+		<span class="sr-only">
+			{{- if .Account.DisplayName -}}
+			{{- emojify .Account.Emojis (escape .Account.DisplayName) -}}. Username: @{{ .Account.Acct -}}.
+			{{- else -}}
+			@{{- .Account.Acct -}}.
+			{{- end -}}
 		</span>
-		<span class="username">@{{.Account.Username}}<span class="sr-only">, </span>{{acctInstance .Account.Acct}}</span>
 	</a>
 </section>
 <section class="body">
-	<div class="text">
-		{{if .SpoilerText}}
-		<details class="text-spoiler">
-			<summary>
-				<span class="spoiler-text" lang="{{ .LanguageTag.TagStr }}">{{emojify .Emojis (escape .SpoilerText)}}</span>
-				<span class="button" role="button" tabindex="0">Toggle visibility</span>
-			</summary>
-			<div class="content" lang="{{ .LanguageTag.TagStr }}">
-				{{emojify .Emojis (noescape .Content)}}
+	{{- if .SpoilerText }}
+	<details class="text-spoiler">
+		<summary>
+			<span class="spoiler-text" lang="{{- .LanguageTag.TagStr -}}">{{- emojify .Emojis (escape .SpoilerText) -}}</span>
+			<span class="button" role="button" tabindex="0">Toggle visibility</span>
+		</summary>
+		<div class="text">
+			<div class="content" lang="{{- .LanguageTag.TagStr -}}">
+				{{ emojify .Emojis (noescape .Content) }}
 			</div>
-		</details>
-		{{else}}
-		<div class="content" lang="{{ .LanguageTag.TagStr }}">
-			{{emojify .Emojis (noescape .Content)}}
+			{{- if .Poll }}
+			{{ template "status_poll.tmpl" . }}
+			{{- end }}
 		</div>
-		{{end}}
-	</div>
-	{{with .MediaAttachments}}
-	<div
-		class="media photoswipe-gallery {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}">
-		{{range $index, $media := .}}
-			{{with $media}}
-				<div class="media-wrapper">
-					<details class="{{.Type}}-spoiler media-spoiler" {{if not $.Sensitive}}open{{end}}>
-						<summary>
-							<div class="show sensitive button" aria-hidden="true">
-								Show sensitive media
-							</div>
-							<span class="eye button" role="button" tabindex="0" aria-label="Toggle media">
-								<i class="hide fa fa-fw fa-eye-slash" aria-hidden="true"></i>
-								<i class="show fa fa-fw fa-eye" aria-hidden="true"></i>
-							</span>
-
-							{{if eq .Type "video"}}
-								<video {{if .Description}} title="{{.Description}}" {{end}}>
-									<source type="video/mp4" src="{{.URL}}" />
-								</video>
-							{{else if eq .Type "image"}}
-								<img {{if .Description}} title="{{.Description}}" {{end}} src="{{.PreviewURL}}" />
-							{{end}}
-						</summary>
-						{{if eq .Type "video"}}
-							<video class="plyr-video photoswipe-slide" controls {{if .Description}}alt="{{.Description}}"
-								title="{{.Description}}" {{end}} data-pswp-index="{{$index}}" data-pswp-width="{{.Meta.Original.Width}}px"
-								data-pswp-height="{{.Meta.Original.Height}}px">
-								<source type="video/mp4" src="{{.URL}}" />
-							</video>
-						{{else if eq .Type "image"}}
-							<a class="photoswipe-slide" href="{{.URL}}" target="_blank" {{if .Description}}title="{{.Description}}" {{end}}
-								data-pswp-width="{{.Meta.Original.Width}}px" data-pswp-height="{{.Meta.Original.Height}}px"
-								data-cropped="true">
-								<img src="{{.PreviewURL}}" {{if .Description}}alt="{{.Description}}" {{end}} />
-							</a>
-						{{else}}
-							<a
-								class="unknown-attachment"
-								href="{{.RemoteURL}}"
-								target="_blank"
-								{{if .Description}}
-									title="Link to external media: {{.Description}}&#10;&#13;{{.RemoteURL}}"
-								{{else}}
-									title="Link to external media.&#10;&#13;{{.RemoteURL}}"
-								{{end}}
-							>
-								<div class="placeholder" aria-hidden="true">
-									<i class="placeholder-external-link fa fa-external-link"></i>
-									<i class="placeholder-icon fa fa-file-text"></i>
-									<div class="placeholder-link-to">External media</div>
-								</div>
-							</a>
-						{{end}}
-					</details>
-				</div>
-			{{end}}
-		{{end}}
+	</details>
+	{{- else }}
+	<div class="text">
+		<div class="content" lang="{{- .LanguageTag.TagStr -}}">
+			{{ emojify .Emojis (noescape .Content) }}
+		</div>
+		{{- if .Poll }}
+		{{ template "status_poll.tmpl" . }}
+		{{- end }}
 	</div>
-	{{end}}
-	{{- if .Poll -}}{{ template "poll.tmpl" . }}{{ end -}}
+	{{- end }}
+	{{- if .MediaAttachments }}
+	{{ template "status_attachments.tmpl" . }}
+	{{- end }}
 </section>
 <aside class="info">
-	<time datetime="{{.CreatedAt}}">{{.CreatedAt | timestampPrecise}}</time>
+	<time datetime="{{- .CreatedAt -}}">{{- .CreatedAt | timestampPrecise -}}</time>
 	<div class="stats" role="group">
 		<div class="stats-item">
-			<span aria-hidden="true"><i class="fa fa-reply-all"></i> {{.RepliesCount}}</span>
-			<span class="sr-only">{{.RepliesCount}} {{if .RepliesCount | eq 1}}reply{{else}}replies{{end}}</span>
+			<span aria-hidden="true"><i class="fa fa-reply-all"></i> {{ .RepliesCount -}}</span>
+			<span class="sr-only">{{- .RepliesCount }} {{ if .RepliesCount | eq 1 }}reply{{ else }}replies{{ end -}}</span>
 		</div>
 		<div class="stats-item">
-			<span aria-hidden="true"><i class="fa fa-star"></i> {{.FavouritesCount}}</span>
-			<span class="sr-only">{{.FavouritesCount}} favourite{{if .FavouritesCount | eq 1 | not}}s{{end}}</span>
+			<span aria-hidden="true"><i class="fa fa-star"></i> {{ .FavouritesCount -}}</span>
+			<span class="sr-only">{{- .FavouritesCount }} {{ if .FavouritesCount | eq 1 }}favourite{{ else }}favourites{{ end -}}</span>
 		</div>
 		<div class="stats-item">
-			<span aria-hidden="true"><i class="fa fa-retweet"></i> {{.ReblogsCount}}</span>
-			<span class="sr-only">{{.ReblogsCount}} boost{{if .ReblogsCount | eq 1 | not}}s{{end}}</span>
+			<span aria-hidden="true"><i class="fa fa-retweet"></i> {{ .ReblogsCount -}}</span>
+			<span class="sr-only">{{- .ReblogsCount }} {{ if .ReblogsCount | eq 1 }}boost{{ else }}boosts{{ end -}}</span>
 		</div>
-		{{if .Pinned}}
-			<div class="stats-item">
-				<i class="fa fa-thumb-tack" aria-hidden="true"></i>
-				<span class="sr-only">pinned</span>
-			</div>
-		{{end}}
-		{{ if .LanguageTag.DisplayStr }}
-			<div class="stats-item language" title="Language: {{ .LanguageTag.DisplayStr }}">
-				{{ .LanguageTag.TagStr }}
-			</div>
-		{{ end }}
+		{{- if .Pinned }}
+		<div class="stats-item">
+			<i class="fa fa-thumb-tack" aria-hidden="true"></i>
+			<span class="sr-only">pinned</span>
+		</div>
+		{{- end }}
+		{{- if .LanguageTag.DisplayStr }}
+		<div class="stats-item language" title="Language: {{ .LanguageTag.DisplayStr }}">{{ .LanguageTag.TagStr }}</div>
+		{{- end }}
 	</div>
 </aside>
-<a data-nosnippet href="{{.URL}}" class="toot-link">Open
-	thread</a>
\ No newline at end of file