Skip to content

Commit

Permalink
[chore/frontend] Refactor status templates slightly, put polls behind…
Browse files Browse the repository at this point in the history 
… CWs if present (#2419)

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

* show when multiple-choice
  • Loading branch information
@tsmethurst
tsmethurst committed Dec 5, 2023
1 parent 18d850e commit dacfd41
Show file tree
Hide file tree
Showing 6 changed files with 243 additions and 178 deletions.
6 changes: 6 additions & 0 deletions internal/api/model/attachment.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,12 @@ type Attachment struct {
// A hash computed by the BlurHash algorithm, for generating colorful preview thumbnails when media has not been downloaded yet.
// See https://github.com/woltapp/blurhash
Blurhash *string `json:"blurhash"`

// Additional fields not exposed via JSON
// (used only internally for templating etc).

// Parent status of this media is sensitive.
Sensitive bool `json:"-"`
}

// MediaMeta models media metadata.
Expand Down
6 changes: 6 additions & 0 deletions internal/typeutils/internaltofrontend.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -721,6 +721,12 @@ func (c *Converter) StatusToWebStatus(
webStatus.WebPollOptions = webPollOptions
}

// Set additional templating
// variables on media attachments.
for _, a := range webStatus.MediaAttachments {
a.Sensitive = webStatus.Sensitive
}

return webStatus, nil
}

Expand Down
141 changes: 71 additions & 70 deletions web/source/css/status.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,17 +113,26 @@ main {
gap: 0.5rem;
}

details > summary {
.text-spoiler > summary, .text {
position: relative;
z-index: 2;
}

.text-spoiler > summary {
display: inline-block;
list-style: none;

padding-bottom: 0.5rem;

&::-webkit-details-marker {
display: none; /* Safari */
}

.button {
white-space: nowrap;
cursor: pointer;
padding: 0.2rem 0.3rem;
font-size: 1rem;
}
}

Expand All @@ -132,20 +141,12 @@ main {
grid-row: span 1;
grid-column: 1 / span 3;

position: relative;
z-index: 2;
display: flex;
flex-direction: column;
gap: 0.5rem;

width: 100%;

details > summary {
padding-bottom: 0.5rem;

.button {
padding: 0.2rem 0.3rem;
font-size: 1rem;
}
}

a {
color: $link-fg;
text-decoration: underline;
Expand Down Expand Up @@ -239,6 +240,64 @@ main {
border: $boxshadow-border;
border-radius: $br-inner;
}

.poll {
background-color: $gray2;
z-index: 2;

display: flex;
flex-direction: column;
border-radius: $br;
padding: 0.5rem;
margin: 0;
gap: 1rem;

.poll-options {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1rem;

.poll-option {
display: flex;
flex-direction: column;
gap: 0.1rem;

label {
cursor: default;
}

meter {
width: 100%;
}

.poll-vote-summary {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
white-space: nowrap;
}
}
}

.poll-info {
background-color: $gray4;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-radius: $br-inner;
padding: 0.25rem;
gap: 0.25rem;

span {
justify-self: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
}

.media {
Expand Down Expand Up @@ -391,64 +450,6 @@ main {
}
}

.poll {
background-color: $gray2;
z-index: 2;

display: flex;
flex-direction: column;
border-radius: $br;
padding: 0.5rem;
margin: 0;
gap: 1rem;

.poll-options {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1rem;

.poll-option {
display: flex;
flex-direction: column;
gap: 0.1rem;

label {
cursor: default;
}

meter {
width: 100%;
}

.poll-vote-summary {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
white-space: nowrap;
}
}
}

.poll-info {
background-color: $gray4;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-radius: $br-inner;
padding: 0.25rem;
gap: 0.25rem;

span {
justify-self: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}

.info {
display: flex;
background: $toot-info-bg;
Expand Down
163 changes: 58 additions & 105 deletions web/template/status.tmpl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Loading

0 comments on commit dacfd41

Please sign in to comment.