diff options
| -rw-r--r-- | web/source/css/_profile-header.css | 42 | ||||
| -rw-r--r-- | web/template/profile_header.tmpl | 62 | ||||
| -rw-r--r-- | web/template/status_attachment.tmpl | 3 |
3 files changed, 65 insertions, 42 deletions
diff --git a/web/source/css/_profile-header.css b/web/source/css/_profile-header.css index cba67ffa1..3b14edab8 100644 --- a/web/source/css/_profile-header.css +++ b/web/source/css/_profile-header.css @@ -20,8 +20,20 @@ .profile .profile-header { background: $profile-bg; border-radius: $br; - overflow: hidden; - margin-bottom: 1rem; + + /* + Link to open media in slide + should fill entire media wrapper. + */ + a.photoswipe-slide { + display: inline-block; + height: 100%; + width: 100%; + + &:focus-visible { + outline: $button-focus-outline; + } + } .moved-to { padding: 1rem; @@ -30,8 +42,10 @@ .header-image-wrapper { position: relative; - padding-top: 33.33%; /* aspect-ratio 1/3 */ - + aspect-ratio: 3; + height: 100%; + width: 100%; + img { position: absolute; top: 0; @@ -66,6 +80,7 @@ margin: 1rem; margin-top: calc(-1 * $overlap); gap: 0 1rem; + padding-bottom: 1rem; .avatar-image-wrapper { grid-area: avatar; @@ -82,22 +97,11 @@ width: $avatar-size; /* - Link to open media in slide - should fill entire media wrapper. + Offset to avoid clashing with + thick border around avatars. */ - a.photoswipe-slide { - display: inline-block; - height: 100%; - width: 100%; - - /* - Offset to avoid clashing with - thick border around avatars. - */ - &:focus-visible { - outline: $button-focus-outline; - outline-offset: 0.25rem; - } + a.photoswipe-slide:focus-visible { + outline-offset: 0.25rem; } .avatar { diff --git a/web/template/profile_header.tmpl b/web/template/profile_header.tmpl index 4be900287..de3dfc8fc 100644 --- a/web/template/profile_header.tmpl +++ b/web/template/profile_header.tmpl @@ -80,10 +80,7 @@ {{- define "avatar" -}} {{- with . }} -<div - class="photoswipe-gallery odd single avatar-image-wrapper" - role="group" -> +<div class="photoswipe-gallery odd single avatar-image-wrapper" role="group"> <a class="photoswipe-slide" href="{{- .account.Avatar -}}" @@ -91,12 +88,9 @@ data-pswp-width="{{- template "avatarWidth" . -}}px" data-pswp-height="{{- template "avatarHeight" . -}}px" data-cropped="true" - alt="{{- template "avatarAlt" . -}}" title="{{- template "avatarAlt" . -}}" > - <picture - aria-hidden="true" - > + <picture> {{- if .account.AvatarAttachment }} <source class="avatar" @@ -109,7 +103,6 @@ class="avatar u-photo" src="{{- .account.Avatar -}}" alt="{{- template "avatarAlt" . -}}" - title="{{- template "avatarAlt" . -}}" width="{{- template "avatarWidth" . -}}" height="{{- template "avatarHeight" . -}}" /> @@ -119,31 +112,60 @@ {{- end }} {{- end -}} +{{- define "header" -}} {{- with . }} -<h2 class="sr-only">Profile for {{ .account.Username -}}</h2> -<section class="profile-header" role="region" aria-label="Basic info"> - {{- if .account.Moved }} - {{- include "profileMovedTo" . | indent 2 }} - {{- end }} - <div class="header-image-wrapper"> +{{- if .account.HeaderAttachment }} +<div class="photoswipe-gallery odd single header-image-wrapper" role="group"> + <a + class="photoswipe-slide" + href="{{- .account.Header -}}" + target="_blank" + data-pswp-width="{{- .account.HeaderAttachment.Meta.Original.Width -}}px" + data-pswp-height="{{- .account.HeaderAttachment.Meta.Original.Height -}}px" + data-cropped="true" + 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" . -}}" + width="{{- .account.HeaderAttachment.Meta.Original.Width -}}" + height="{{- .account.HeaderAttachment.Meta.Original.Height -}}" /> </picture> - </div> + </a> +</div> +{{- else }} +<div class="header-image-wrapper"> + <picture> + <img + src="{{- .account.Header -}}" + alt="{{- template "headerAlt" . -}}" + title="{{- template "headerAlt" . -}}" + /> + </picture> +</div> +{{- end }} +{{- end }} +{{- end -}} + +{{- with . }} +<h2 class="sr-only">Profile for {{ .account.Username -}}</h2> +<section class="profile-header" role="region" aria-label="Basic info"> + {{- if .account.Moved }} + {{- include "profileMovedTo" . | indent 1 }} + {{- end }} + {{- with . }} + {{- include "header" . | indent 1 }} + {{- end }} <div class="basic-info"> {{- with . }} - {{- include "avatar" . | indent 3 }} + {{- include "avatar" . | indent 2 }} {{- end }} <dl class="namerole"> <dt class="sr-only">Display name</dt> diff --git a/web/template/status_attachment.tmpl b/web/template/status_attachment.tmpl index a60ef4137..d04f11d5d 100644 --- a/web/template/status_attachment.tmpl +++ b/web/template/status_attachment.tmpl @@ -24,7 +24,6 @@ loading="lazy" {{- if .Description }} alt="{{- .Description -}}" - title="{{- .Description -}}" {{- end }} width="{{- .Meta.Small.Width -}}" height="{{- .Meta.Small.Height -}}" @@ -37,7 +36,6 @@ loading="lazy" {{- if .Description }} alt="{{- .Description -}}" - title="{{- .Description -}}" {{- end }} width="518" height="460" @@ -138,7 +136,6 @@ data-pswp-height="{{- .Item.Meta.Original.Height -}}px" data-cropped="true" {{- if .Item.Description }} - alt="{{- .Item.Description -}}" title="{{- .Item.Description -}}" {{- end }} > |