diff options
| author |  f0x52 <f0x@cthu.lu> | 2022-08-14 19:22:13 +0200 |
|---|---|---|
| committer |  GitHub <noreply@github.com> | 2022-08-14 19:22:13 +0200 |
| commit | 52fe681ba21fd17622a35cb773d28e2376be1b0a (patch) | |
| tree | efbc57451a99ef91524bf62158ebafdc635ef3cc /web/template | |
| parent | [frontend] Style scrollbars site-wide (not just in code) (#753) (diff) | |
| download | gotosocial-52fe681ba21fd17622a35cb773d28e2376be1b0a.tar.xz | |
[frontend] Sensitive media spoilers (#752)
* sensitive media spoilers
* small tweaks, use pointer-events (thanks @owl!)
* allow hiding all media
* add button roles
* add tabindices
* s/Show media/Show sensitive media/
* show hovering alt-text on hidden sensitive images
Co-authored-by: tobi <31960611+tsmethurst@users.noreply.github.com>
Diffstat (limited to 'web/template')
| -rw-r--r-- | web/template/status.tmpl | 33 |
1 files changed, 23 insertions, 10 deletions
diff --git a/web/template/status.tmpl b/web/template/status.tmpl index 2216b48d5..decad4764 100644 --- a/web/template/status.tmpl +++ b/web/template/status.tmpl @@ -7,7 +7,7 @@ <input class="spoiler" id="hideSpoiler-{{.ID}}" type="checkbox" style="display: none" aria-hidden="true" checked="true" /> <div class="spoiler"> <span class="spoiler-text">{{.SpoilerText}}</span> - <label class="button spoiler-label" for="hideSpoiler-{{.ID}}">Toggle visibility</label> + <label class="button spoiler-label" for="hideSpoiler-{{.ID}}" tabindex="0">Toggle visibility</label> </div> {{end}} <div class="content"> @@ -15,16 +15,29 @@ </div> </div> {{with .MediaAttachments}} - <div class="media photoswipe-gallery {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}"> - {{range .}} - <a href="{{.URL}}" target="_blank" title="{{.Description}}" data-pswp-width="{{.Meta.Original.Width}}px" data-pswp-height="{{.Meta.Original.Height}}px"> - {{if not .Description}} - <div class="no-image-desc" aria-hidden="true" ><i class="fa fa-info-circle"></i><span>Missing image description</span></div> - {{end}} - <img src="{{.PreviewURL}}" alt="{{.Description}}"/> - </a> - {{end}} + <div class="media photoswipe-gallery {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}"> + {{range .}} + <div class="media-wrapper"> + {{if not .Description}} + <div class="no-image-desc" aria-hidden="true" ><i class="fa fa-info-circle"></i><span>Missing image description</span></div> + {{end}} + <input type="checkbox" id="sensitiveMedia-{{.ID}}" class="sensitive-checkbox hidden" {{if not $.Sensitive}}checked{{end}}/> + <div class="sensitive"> + <div class="open"> + <label for="sensitiveMedia-{{.ID}}" class="button" role="button" tabindex="0"> + <i class="fa fa-eye-slash" title="Hide sensitive media"></i> + </label> + </div> + <div class="closed" {{if .Description}}title="{{.Description}}"{{end}}> + <label for="sensitiveMedia-{{.ID}}" class="button" role="button" tabindex="0">Show sensitive media</label> + </div> + </div> + <a href="{{.URL}}" target="_blank" {{if .Description}}title="{{.Description}}"{{end}} data-pswp-width="{{.Meta.Original.Width}}px" data-pswp-height="{{.Meta.Original.Height}}px"> + <img src="{{.PreviewURL}}" {{if .Description}}alt="{{.Description}}"{{end}} data-blurhash="{{.Blurhash}}"/> + </a> </div> + {{end}} + </div> {{end}} </div> <div class="info"> |