diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/source/css/status.css | 34 | ||||
| -rw-r--r-- | web/template/status.tmpl | 87 |
2 files changed, 86 insertions, 35 deletions
diff --git a/web/source/css/status.css b/web/source/css/status.css index 4f80a400a..3edd11a44 100644 --- a/web/source/css/status.css +++ b/web/source/css/status.css @@ -339,6 +339,40 @@ main { object-fit: contain; background: $gray1; } + + .unknown-attachment { + .placeholder { + width: 100%; + height: 100%; + padding: 0.8rem; + border: 0.2rem dashed $white2; + + display: flex; + flex-direction: column; + align-items: center; + gap: 0.25rem; + + color: $white2; + + .placeholder-external-link { + align-self: end; + font-size: 2.5rem; + } + + .placeholder-icon { + width: 100%; + font-size: 3.5rem; + text-align: center; + margin-top: auto; + } + + .placeholder-link-to { + width: 100%; + text-align: center; + margin-bottom: auto; + } + } + } } } diff --git a/web/template/status.tmpl b/web/template/status.tmpl index 08cbdcf01..5e264a339 100644 --- a/web/template/status.tmpl +++ b/web/template/status.tmpl @@ -53,42 +53,59 @@ <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> + {{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}} - <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}} - <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> - {{end}} - </details> - </div> - {{end}} + {{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}} {{.RemoteURL}}" + {{else}} + title="Link to external media. {{.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}} </div> {{end}} |