[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
This commit is contained in:
tobi 2024-07-21 14:22:08 +02:00 committed by GitHub
commit 027a93facc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 435 additions and 140 deletions

View file

@ -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 . }}