mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2025-12-01 06:13:31 -06:00
[feature] Allow user to choose "gallery" style web layout
This commit is contained in:
tobi
parent
d3c3d34aae
commit
7e689edbe3
82 changed files with 2840 additions and 1154 deletions
|
|
@ -17,200 +17,15 @@
|
|||
// 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 u-photo"
|
||||
src="{{- .account.Avatar -}}"
|
||||
alt="{{- template "avatarAlt" . -}}"
|
||||
title="{{- template "avatarAlt" . -}}"
|
||||
width="{{- template "avatarWidth" . -}}"
|
||||
height="{{- template "avatarHeight" . -}}"
|
||||
/>
|
||||
</picture>
|
||||
</a>
|
||||
</div>
|
||||
{{- end }}
|
||||
{{- end -}}
|
||||
|
||||
{{- with . }}
|
||||
<main class="profile h-card">
|
||||
<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 p-name">
|
||||
{{- if .account.DisplayName -}}
|
||||
{{- emojify .account.Emojis (escape .account.DisplayName) -}}
|
||||
{{- else -}}
|
||||
{{- .account.Username -}}
|
||||
{{- end -}}
|
||||
</dd>
|
||||
<div class="bot-username-wrapper">
|
||||
{{- if .account.Bot }}
|
||||
<dt class="sr-only">Bot account</dt>
|
||||
<dd>
|
||||
<span class="sr-only">true</span>
|
||||
<div
|
||||
class="bot-legend-wrapper"
|
||||
aria-hidden="true"
|
||||
title="This is a bot account."
|
||||
>
|
||||
<i class="bot-icon fa fa-microchip"></i>
|
||||
<span class="bot-legend">bot</span>
|
||||
</div>
|
||||
</dd>
|
||||
{{- end }}
|
||||
<dt class="sr-only">Username</dt>
|
||||
<dd class="username text-cutoff p-nickname">@{{- .account.Username -}}@{{- .instance.AccountDomain -}}</dd>
|
||||
</div>
|
||||
{{- if .account.Roles }}
|
||||
<dt class="sr-only">Role</dt>
|
||||
{{- range .account.Roles }}
|
||||
<dd class="role {{ .Name -}}">{{- .Name -}}</dd>
|
||||
{{- end }}
|
||||
{{- end }}
|
||||
</dl>
|
||||
<a class="u-url u-uid hidden" rel="me" href="/@{{- .account.Username -}}"></a>
|
||||
</div>
|
||||
</section>
|
||||
{{- with . }}
|
||||
{{- include "profile_header.tmpl" . | indent 1 }}
|
||||
{{- end }}
|
||||
<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 p-note">
|
||||
{{- 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>
|
||||
{{- with . }}
|
||||
{{- include "profile_about_user.tmpl" . | indent 2 }}
|
||||
{{- end }}
|
||||
<div class="statuses-wrapper" role="region" aria-label="Posts by {{ .account.Username -}}">
|
||||
{{- if .pinned_statuses }}
|
||||
<section class="pinned statuses h-feed" aria-labelledby="pinned">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue