mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2024-11-24 10:15:47 +03:00
027a93facc
* [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
249 lines
No EOL
9.2 KiB
Cheetah
249 lines
No EOL
9.2 KiB
Cheetah
{{- /*
|
||
// GoToSocial
|
||
// Copyright (C) GoToSocial Authors admin@gotosocial.org
|
||
// SPDX-License-Identifier: AGPL-3.0-or-later
|
||
//
|
||
// This program is free software: you can redistribute it and/or modify
|
||
// it under the terms of the GNU Affero General Public License as published by
|
||
// the Free Software Foundation, either version 3 of the License, or
|
||
// (at your option) any later version.
|
||
//
|
||
// This program is distributed in the hope that it will be useful,
|
||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||
// GNU Affero General Public License for more details.
|
||
//
|
||
// You should have received a copy of the GNU Affero General Public License
|
||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||
*/ -}}
|
||
|
||
{{- define "profileMovedTo" -}}
|
||
{{- with .account.Moved }}
|
||
<div class="moved-to">
|
||
<b>
|
||
ℹ️ This account has permanently moved to
|
||
<a
|
||
href="{{ .URL }}"
|
||
class="nounderline"
|
||
rel="nofollow noreferrer noopener"
|
||
target="_blank"
|
||
>
|
||
@{{ .Username }}
|
||
</a>
|
||
</b>
|
||
</div>
|
||
{{- end }}
|
||
{{- end -}}
|
||
|
||
{{- define "defaultAvatarDimension" -}}
|
||
{{- /* 136 is the default width/height for 8.5rem avatars, double it to get a good look when expanded. */ -}}
|
||
272
|
||
{{- end -}}
|
||
|
||
{{- define "avatarWidth" -}}
|
||
{{- with .account }}
|
||
{{- if isNil .AvatarAttachment -}}
|
||
{{- template "defaultAvatarDimension" . -}}
|
||
{{- else -}}
|
||
{{- /* Use the avatar's proper dimensions. */ -}}
|
||
{{- .AvatarAttachment.Meta.Original.Width -}}
|
||
{{- end -}}
|
||
{{- end }}
|
||
{{- end -}}
|
||
|
||
{{- define "avatarHeight" -}}
|
||
{{- with .account }}
|
||
{{- if isNil .AvatarAttachment -}}
|
||
{{- template "defaultAvatarDimension" . -}}
|
||
{{- else -}}
|
||
{{- /* Use the avatar's proper dimensions. */ -}}
|
||
{{- .AvatarAttachment.Meta.Original.Height -}}
|
||
{{- end -}}
|
||
{{- end }}
|
||
{{- end -}}
|
||
|
||
{{- define "avatarAlt" -}}
|
||
Avatar for {{ .account.Username -}}
|
||
{{- if .account.AvatarDescription }}
|
||
{{- /* Add the avatar's image description. */ -}}
|
||
: {{ .account.AvatarDescription -}}
|
||
{{- end -}}
|
||
{{- end -}}
|
||
|
||
{{- define "headerAlt" -}}
|
||
Header for {{ .account.Username -}}
|
||
{{- if .account.HeaderDescription }}
|
||
{{- /* Add the header's image description. */ -}}
|
||
: {{ .account.HeaderDescription -}}
|
||
{{- end -}}
|
||
{{- end -}}
|
||
|
||
{{- define "avatar" -}}
|
||
{{- with . }}
|
||
<div
|
||
class="media photoswipe-gallery odd single avatar-image-wrapper"
|
||
role="group"
|
||
>
|
||
<a
|
||
class="photoswipe-slide"
|
||
href="{{- .account.Avatar -}}"
|
||
target="_blank"
|
||
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"
|
||
>
|
||
{{- 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 }}
|
||
{{- end -}}
|
||
|
||
{{- with . }}
|
||
<main class="profile">
|
||
<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">
|
||
<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 . }}
|
||
{{- include "avatar" . | indent 3 }}
|
||
{{- end }}
|
||
<dl class="namerole">
|
||
<dt class="sr-only">Display name</dt>
|
||
<dd class="displayname text-cutoff">
|
||
{{- if .account.DisplayName -}}
|
||
{{- emojify .account.Emojis (escape .account.DisplayName) -}}
|
||
{{- else -}}
|
||
{{- .account.Username -}}
|
||
{{- end -}}
|
||
</dd>
|
||
<dt class="sr-only">Username</dt>
|
||
<dd class="username text-cutoff">@{{- .account.Username -}}@{{- .instance.AccountDomain -}}</dd>
|
||
{{- if and (.account.Role) (ne .account.Role.Name "user") }}
|
||
<dt class="sr-only">Role</dt>
|
||
<dd class="role {{ .account.Role.Name -}}">{{- .account.Role.Name -}}</dd>
|
||
{{- end }}
|
||
</dl>
|
||
</div>
|
||
</section>
|
||
<div class="column-split">
|
||
<section class="about-user" role="region" aria-labelledby="about-header">
|
||
<div class="col-header">
|
||
<h3 id="about-header">About<span class="sr-only"> {{- .account.Username -}}</span></h3>
|
||
</div>
|
||
{{- if .account.Fields }}
|
||
{{- include "profile_fields.tmpl" . | indent 3 }}
|
||
{{- end }}
|
||
<h4 class="sr-only">Bio</h4>
|
||
<div class="bio">
|
||
{{- if .account.Note }}
|
||
{{ emojify .account.Emojis (noescape .account.Note) }}
|
||
{{- else }}
|
||
<p>This GoToSocial user hasn't written a bio yet!</p>
|
||
{{- end }}
|
||
</div>
|
||
<h4 class="sr-only">Stats</h4>
|
||
<dl class="accountstats">
|
||
<dt>Joined</dt>
|
||
<dd><time datetime="{{- .account.CreatedAt -}}">{{- .account.CreatedAt | timestampVague -}}</time></dd>
|
||
<dt>Posts</dt>
|
||
<dd>{{- .account.StatusesCount -}}</dd>
|
||
<dt>Followed by</dt>
|
||
<dd>{{- if .account.HideCollections -}}<i>hidden</i>{{- else -}}{{- .account.FollowersCount -}}{{- end -}}</dd>
|
||
<dt>Following</dt>
|
||
<dd>{{- if .account.HideCollections -}}<i>hidden</i>{{- else -}}{{- .account.FollowingCount -}}{{- end -}}</dd>
|
||
</dl>
|
||
</section>
|
||
<div class="statuses-wrapper" role="region" aria-label="Posts by {{ .account.Username -}}">
|
||
{{- if .pinned_statuses }}
|
||
<section class="pinned statuses" aria-labelledby="pinned">
|
||
<div class="col-header">
|
||
<h3 id="pinned">Pinned posts</h3>
|
||
<a href="#recent">jump to recent</a>
|
||
</div>
|
||
<div class="thread">
|
||
{{- range .pinned_statuses }}
|
||
<article
|
||
class="status expanded"
|
||
{{- includeAttr "status_attributes.tmpl" . | indentAttr 6 }}
|
||
>
|
||
{{- include "status.tmpl" . | indent 6 }}
|
||
</article>
|
||
{{- end }}
|
||
</div>
|
||
</section>
|
||
{{- end }}
|
||
<section class="recent statuses" aria-labelledby="recent">
|
||
<div class="col-header">
|
||
<h3 id="recent" tabindex="-1">Recent posts</h3>
|
||
{{- if .rssFeed }}
|
||
<a href="{{- .rssFeed -}}" class="rss-icon" aria-label="RSS feed">
|
||
<i class="fa fa-rss-square" aria-hidden="true"></i>
|
||
</a>
|
||
{{- end }}
|
||
</div>
|
||
<div class="thread">
|
||
{{- if not .statuses }}
|
||
<div data-nosnippet class="nothinghere">Nothing here!</div>
|
||
{{- else }}
|
||
{{- range .statuses }}
|
||
<article
|
||
class="status expanded"
|
||
{{- includeAttr "status_attributes.tmpl" . | indentAttr 6 }}
|
||
>
|
||
{{- include "status.tmpl" . | indent 6 }}
|
||
</article>
|
||
{{- end }}
|
||
{{- end }}
|
||
</div>
|
||
<nav class="backnextlinks">
|
||
{{- if .show_back_to_top }}
|
||
<a href="/@{{- .account.Username -}}">Back to top</a>
|
||
{{- end }}
|
||
{{- if .statuses_next }}
|
||
<a href="{{- .statuses_next -}}" class="next">Show older</a>
|
||
{{- end }}
|
||
</nav>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
{{- end }} |