gotosocial/web/template/profile.tmpl
tobi 0ff52b71f2
[chore] Refactor HTML templates and CSS (#2480)
* [chore] Refactor HTML templates and CSS

* eslint

* ignore "Local"

* rss tests

* fiddle with OG just a tiny bit

* dick around with polls a bit more so SR stops saying "clickable"

* remove break

* oh lord

* don't lazy load avatar

* fix ogmeta tests

* clean up some cruft

* catch remaining calls to c.HTML

* fix error rendering + stack overflow in tag

* allow templating attributes

* fix indent

* set aria-hidden on status complementary content, since it's already present in the label anyway

* tidy up templating calls a little

* try to make styling a bit more consistent + readable

* fix up some remaining CSS issues

* fix up reports
2023-12-27 11:23:52 +01:00

139 lines
No EOL
5.9 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/>.
*/ -}}
{{- with . }}
<main class="profile">
<h2 class="sr-only">Profile for {{ .account.Username -}}</h2>
<section class="profile-header" role="region" aria-label="Basic info">
<div class="header-image-wrapper">
<img
src="{{- .account.Header -}}"
alt="Header for {{ .account.Username -}}"
title="Header for {{ .account.Username -}}"
/>
</div>
<div class="basic-info">
<a class="avatar" href="{{- .account.Avatar -}}">
<img
src="{{- .account.Avatar -}}"
alt="Avatar for {{ .account.Username -}}"
title="Avatar for {{ .account.Username -}}"
/>
</a>
<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">&nbsp;{{- .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>{{- .account.FollowersCount -}}</dd>
<dt>Following</dt>
<dd>{{- .account.FollowingCount -}}</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 }}