diff options
| author |  tobi <31960611+tsmethurst@users.noreply.github.com> | 2024-07-21 14:22:08 +0200 |
|---|---|---|
| committer |  GitHub <noreply@github.com> | 2024-07-21 14:22:08 +0200 |
| commit | 027a93facc73b78e3c3747ab796f4a14b1b4936f (patch) | |
| tree | 51838cd9fdf607ad46fdfa77a9424fdd8f5cd98d /web/template/profile.tmpl | |
| parent | [bugfix] update common get target account / status doing refresh async (#3124) (diff) | |
| download | gotosocial-027a93facc73b78e3c3747ab796f4a14b1b4936f.tar.xz | |
[feature/frontend] Respect `prefers-reduced-motion` for avatars, headers, and emojis (#3118)
* [feature/frontend] Respect `prefers-reduced-motion` for avatars, headers, and emojis
* go fmt
* fix tests
* use static version of instance thumbnail when appropriate
* use prefers-reduced-motion
* simplify account conversion a bit
* fix c&p error
Diffstat (limited to 'web/template/profile.tmpl')
| -rw-r--r-- | web/template/profile.tmpl | 47 |
1 files changed, 34 insertions, 13 deletions
diff --git a/web/template/profile.tmpl b/web/template/profile.tmpl index 256bbdccf..a06c842ab 100644 --- a/web/template/profile.tmpl +++ b/web/template/profile.tmpl @@ -94,14 +94,26 @@ alt="{{- template "avatarAlt" . -}}" title="{{- template "avatarAlt" . -}}" > - <img - class="avatar" - src="{{- .account.Avatar -}}" - alt="{{- template "avatarAlt" . -}}" - title="{{- template "avatarAlt" . -}}" - width="{{- template "avatarWidth" . -}}" - height="{{- template "avatarHeight" . -}}" - /> + <picture + aria-hidden="true" + > + {{- if .account.AvatarAttachment }} + <source + class="avatar" + srcset="{{- .account.AvatarStatic -}}" + type="{{- .account.AvatarAttachment.PreviewMIMEType -}}" + media="(prefers-reduced-motion: reduce)" + /> + {{- end }} + <img + class="avatar" + src="{{- .account.Avatar -}}" + alt="{{- template "avatarAlt" . -}}" + title="{{- template "avatarAlt" . -}}" + width="{{- template "avatarWidth" . -}}" + height="{{- template "avatarHeight" . -}}" + /> + </picture> </a> </div> {{- end }} @@ -115,11 +127,20 @@ {{- include "profileMovedTo" . | indent 2 }} {{- end }} <div class="header-image-wrapper"> - <img - src="{{- .account.Header -}}" - alt="{{- template "headerAlt" . -}}" - title="{{- template "headerAlt" . -}}" - /> + <picture> + {{- if .account.HeaderAttachment }} + <source + srcset="{{- .account.HeaderStatic -}}" + type="{{- .account.HeaderAttachment.PreviewMIMEType -}}" + media="(prefers-reduced-motion: reduce)" + /> + {{- end }} + <img + src="{{- .account.Header -}}" + alt="{{- template "headerAlt" . -}}" + title="{{- template "headerAlt" . -}}" + /> + </picture> </div> <div class="basic-info"> {{- with . }} |