diff options
Diffstat (limited to 'web/template')
| -rw-r--r-- | web/template/header.tmpl | 55 | ||||
| -rw-r--r-- | web/template/profile.tmpl | 202 | ||||
| -rw-r--r-- | web/template/status.tmpl | 149 | ||||
| -rw-r--r-- | web/template/thread.tmpl | 16 |
4 files changed, 263 insertions, 159 deletions
diff --git a/web/template/header.tmpl b/web/template/header.tmpl index addd0953e..05e47991a 100644 --- a/web/template/header.tmpl +++ b/web/template/header.tmpl @@ -21,46 +21,61 @@ <!-- header.tmpl --> <html lang="en"> + <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="robots" content="{{ if .robotsMeta }}{{ .robotsMeta }}{{ else }}noindex, nofollow{{ end }}"> - {{ if .ogMeta }}{{ if .ogMeta.Locale }}<meta name="og:locale" content="{{ .ogMeta.Locale }}"> - {{ end }}<meta property="og:type" content="{{ .ogMeta.Type }}"> + {{ if .ogMeta }}{{ if .ogMeta.Locale }} + <meta name="og:locale" content="{{ .ogMeta.Locale }}"> + {{ end }} + <meta property="og:type" content="{{ .ogMeta.Type }}"> <meta property="og:title" content="{{ .ogMeta.Title }}"> <meta property="og:url" content="{{ .ogMeta.URL }}"> <meta property="og:site_name" content="{{ .ogMeta.SiteName }}"> <meta property="og:description" {{ .ogMeta.Description | noescapeAttr }}> - {{ if .ogMeta.ArticlePublisher }}<meta property="og:article:publisher" content="{{ .ogMeta.ArticlePublisher }}"> + {{ if .ogMeta.ArticlePublisher }} + <meta property="og:article:publisher" content="{{ .ogMeta.ArticlePublisher }}"> <meta property="og:article:author" content="{{ .ogMeta.ArticleAuthor }}"> <meta property="og:article:modified_time" content="{{ .ogMeta.ArticleModifiedTime }}"> <meta property="og:article:published_time" content="{{ .ogMeta.ArticlePublishedTime }}"> - {{ end }}{{ if .ogMeta.ProfileUsername }}<meta property="og:profile:username" content="{{ .ogMeta.ProfileUsername }}"> - {{ end }}<meta property="og:image" content="{{ .ogMeta.Image }}"> - {{ if .ogMeta.ImageAlt }}<meta property="og:image:alt" content="{{ .ogMeta.ImageAlt }}"> - {{ end }}{{ if .ogMeta.ImageWidth }}<meta property="og:image:width" content="{{ .ogMeta.ImageWidth }}"> + {{ end }}{{ if .ogMeta.ProfileUsername }} + <meta property="og:profile:username" content="{{ .ogMeta.ProfileUsername }}"> + {{ end }} + <meta property="og:image" content="{{ .ogMeta.Image }}"> + {{ if .ogMeta.ImageAlt }} + <meta property="og:image:alt" content="{{ .ogMeta.ImageAlt }}"> + {{ end }}{{ if .ogMeta.ImageWidth }} + <meta property="og:image:width" content="{{ .ogMeta.ImageWidth }}"> <meta property="og:image:height" content="{{ .ogMeta.ImageHeight }}"> - {{ end }}{{ end }}<link rel="shortcut icon" href="{{ .instance.Thumbnail }}" type="{{ if .instance.ThumbnailType }}{{ .instance.ThumbnailType }}{{ else }}image/png{{ end }}"> - {{ if .rssFeed }}<link rel="alternate" type="application/rss+xml" href="{{ .rssFeed }}" title="{{ if .ogMeta }}{{ .ogMeta.Title }}{{ else }}{{.instance.Title}}{{ end }}">{{ end }} + {{ end }}{{ end }} + <link rel="shortcut icon" href="{{ .instance.Thumbnail }}" + type="{{ if .instance.ThumbnailType }}{{ .instance.ThumbnailType }}{{ else }}image/png{{ end }}"> + {{ if .rssFeed }} + <link rel="alternate" type="application/rss+xml" href="{{ .rssFeed }}" + title="{{ if .ogMeta }}{{ .ogMeta.Title }}{{ else }}{{.instance.Title}}{{ end }}">{{ end }} <link rel="preload" href="/assets/dist/_colors.css" as="style"> <link rel="preload" href="/assets/dist/base.css" as="style"> - {{range .stylesheets}}<link rel="preload" href="{{.}}" as="style"> - {{end}}<link rel="stylesheet" href="/assets/dist/_colors.css"> + {{range .stylesheets}} + <link rel="preload" href="{{.}}" as="style"> + {{end}} + <link rel="stylesheet" href="/assets/dist/_colors.css"> <link rel="stylesheet" href="/assets/dist/base.css"> - {{range .stylesheets}}<link rel="stylesheet" href="{{.}}"> + {{range .stylesheets}} + <link rel="stylesheet" href="{{.}}"> {{end}}<title>{{ if .ogMeta }}{{ .ogMeta.Title }}{{ else }}{{.instance.Title}} - GoToSocial{{ end }}</title> </head> + <body> <div class="page"> <header> - <a aria-label="instance homepage" href="/" class="nounderline header"> - <img src="{{ .instance.Thumbnail }}" alt="{{ if .instance.ThumbnailDescription }}{{ .instance.ThumbnailDescription }}{{ else }}Instance Logo{{ end }}"/> - <div> - <h1> - {{.instance.Title}} - </h1> - </div> + <a aria-label="{{.instance.Title}}. Go to instance homepage" href="/" class="nounderline header"> + <img src="{{ .instance.Thumbnail }}" + alt="{{ if .instance.ThumbnailDescription }}{{ .instance.ThumbnailDescription }}{{ else }}Instance Logo{{ end }}" /> + <h1> + {{.instance.Title}} + </h1> </a> </header> - <div class="content"> + <div class="content">
\ No newline at end of file diff --git a/web/template/profile.tmpl b/web/template/profile.tmpl index c7665c69e..a9842b44c 100644 --- a/web/template/profile.tmpl +++ b/web/template/profile.tmpl @@ -18,80 +18,130 @@ */ -}} {{ template "header.tmpl" .}} -<main> - <div class="profile"> - <div class="headerimage"> - {{ if .account.Header }} - <img - src="{{.account.Header}}" - alt="{{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}}'s header" - /> - {{ end }} - </div> - <div class="basic"> - <div id="profile-basic-filler2"></div> - <a href="{{.account.Avatar}}" class="avatar"><img src="{{.account.Avatar}}" alt="{{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}}'s avatar"></a> - <div class="displayname">{{if .account.DisplayName}}{{emojify .account.Emojis (escape .account.DisplayName)}}{{else}}{{.account.Username}}{{end}}</div> - <div class="usernamecontainer"> - <div class="username">@{{ .account.Username }}@{{ .instance.AccountDomain }}</div> - {{- /* Only render account role if 1. it's present and 2. it's not equal to the standard 'user' role */ -}} - {{ if and (.account.Role) (ne .account.Role.Name "user") }}<div class="role {{ .account.Role.Name }}">{{ .account.Role.Name }}</div>{{ end }} - </div> - </div> - <div class="detailed"> - <div class="bio"> - {{ if .account.Note }}{{emojify .account.Emojis (noescape .account.Note)}}{{else}}This GoToSocial user hasn't written a bio yet!{{end}} - </div> - </div> - <div class="accountstats"> - <div class="entry-group"> - <div class="entry">Joined <b>{{.account.CreatedAt | timestampVague}}</b></div> - <div class="entry">Followed by <b>{{.account.FollowersCount}}</b></div> - </div> - <div class="entry-group"> - <div class="entry">Following <b>{{.account.FollowingCount}}</b></div> - <div class="entry">Posted <b>{{.account.StatusesCount}}</b></div> - </div> - </div> - </div> - {{ if .pinned_statuses }} - <h2 id="pinned"> - <span>Pinned toots</span> - </h2> - <div class="thread"> - {{ range .pinned_statuses }} - <div class="toot expanded"> - {{ template "status.tmpl" .}} - </div> - {{ end }} - </div> - {{ end }} - <h2 id="recent"> - <span>Latest public toots</span> - {{ if .rssFeed }} - <a href="{{ .rssFeed }}" aria-label="RSS feed"> - <i class="rss-icon fa fa-rss-square" aria-hidden="true"></i> - </a> - {{ end }} - </h2> - {{ if not .statuses }} - <div data-nosnippet class="nothinghere">Nothing here!</div> - {{ else }} - <div class="thread"> - {{ range .statuses }} - <div class="toot expanded"> - {{ template "status.tmpl" .}} - </div> - {{ end }} - </div> - {{ end }} - <div 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 }} - </div> + +<main class="profile"> + <div class="header"> + <div class="header-image"> + {{ if .account.Header }} + <img src="{{.account.Header}}" alt="" /> + {{ end }} + </div> + <div class="basic-info" aria-hidden="true"> + <a class="avatar" href="{{.account.Avatar}}"> + <img src="{{.account.Avatar}}" alt=""> + </a> + <span class="displayname text-cutoff"> + {{if .account.DisplayName}} + {{emojify .account.Emojis (escape .account.DisplayName)}} + {{else}} + {{.account.Username}} + {{end}} + <span class="sr-only">.</span> + </span> + <span class="username text-cutoff">@{{.account.Username}}<span class="sr-only">, + </span>{{acctInstance .account.Acct}}</span> + {{- /* Only render account role if 1. it's present and 2. it's not equal to the standard 'user' role */ -}} + {{ if and (.account.Role) (ne .account.Role.Name "user") }} + <div class="role {{ .account.Role.Name }}"> + {{ .account.Role.Name }} + </div> + {{ end }} + </div> + <div class="sr-only"> + Profile for + {{if .account.DisplayName}}{{.account.DisplayName}}{{else}}{{.account.Username}}{{end}}. + Username @{{.account.Username}}, {{acctInstance .account.Acct}}. + {{ if and (.account.Role) (ne .account.Role.Name "user") }} + Role: {{ .account.Role.Name }} + {{ end }} + </div> + </div> + + <div class="column-split"> + + <section class="about-user"> + <div class="col-header"> + <h3>About</h3> + </div> + + <div class="fields"> + {{ range .account.Fields }} + <div class="field"> + <b>{{emojify $.account.Emojis (noescape .Name)}}</b> + <span>{{emojify $.account.Emojis (noescape .Value)}}</span> + </div> + {{ end }} + </div> + + <div class="bio"> + {{ if .account.Note }} + {{emojify .account.Emojis (noescape .account.Note)}} + {{else}} + This GoToSocial user hasn't written a bio yet! + {{end}} + </div> + + <div class="sr-only" role="group"> + <span>Joined on {{.account.CreatedAt | timestampVague}}.</span> + <span>{{.account.StatusesCount}} post{{if .account.StatusesCount | eq 1 | not}}s{{end}}.</span> + <span>Followed by {{.account.FollowersCount}}.</span> + <span>Following {{.account.FollowingCount}}.</span> + </div> + + <div class="accountstats" aria-hidden="true"> + <b>Joined</b><time datetime="{{.account.CreatedAt}}">{{.account.CreatedAt | timestampVague}}</time> + <b>Posts</b><span>{{.account.StatusesCount}}</span> + <b>Followed by</b><span>{{.account.FollowersCount}}</span> + <b>Following</b><span>{{.account.FollowingCount}}</span> + </div> + </section> + + <section class="toots"> + {{ if .pinned_statuses }} + <div class="col-header"> + <h3>Pinned posts</h3> + <a href="#recent">jump to recent</a> + </div> + <section class="thread"> + {{ range .pinned_statuses }} + <article class="toot expanded" id="{{.ID}}"> + {{ template "status.tmpl" .}} + </article> + {{ end }} + </section> + {{ end }} + + <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> + + <section class="thread"> + {{ if not .statuses }} + <div data-nosnippet class="nothinghere">Nothing here!</div> + {{ else }} + {{ range .statuses }} + <article class="toot expanded" id="{{.ID}}"> + {{ template "status.tmpl" .}} + </article> + {{ end }} + {{ end }} + </section> + + <div 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 }} + </div> + </section> + </div> </main> -{{ template "footer.tmpl" .}} + +{{ template "footer.tmpl" .}}
\ No newline at end of file diff --git a/web/template/status.tmpl b/web/template/status.tmpl index f31219a9e..a8c9792ab 100644 --- a/web/template/status.tmpl +++ b/web/template/status.tmpl @@ -17,71 +17,110 @@ // along with this program. If not, see <http://www.gnu.org/licenses/>. */ -}} -<div data-nosnippet class="contentgrid"> - <a href="{{.Account.URL}}" class="avatar"><img src="{{.Account.Avatar}}" alt=""></a> - <a href="{{.Account.URL}}" class="displayname">{{if .Account.DisplayName}}{{emojify .Account.Emojis (escape .Account.DisplayName)}}{{else}}{{.Account.Username}}{{end}}</a> - <a href="{{.Account.URL}}" class="username">@{{.Account.Acct}}</a> - <div class="not-expanded"> - <span class="date">{{.CreatedAt | timestamp}}</span> - </div> +<section class="author"> + <a href="{{.Account.URL}}"> + <img class="avatar" src="{{.Account.Avatar}}" alt=""> + <span class="displayname"> + {{if .Account.DisplayName}} + {{emojify .Account.Emojis (escape .Account.DisplayName)}} + {{else}} + {{.Account.Username}} + {{end}} + <span class="sr-only">.</span> + </span> + <span class="username">@{{.Account.Username}}<span class="sr-only">, </span>{{acctInstance .Account.Acct}}</span> + </a> +</section> +<section class="body"> <div class="text"> {{if .SpoilerText}} - <input class="spoiler" id="hideSpoiler-{{.ID}}" type="checkbox" style="display: none" aria-hidden="true" checked="true" /> - <div class="spoiler"> - <span class="spoiler-text">{{emojify .Emojis (escape .SpoilerText)}}</span> - <label class="button spoiler-label" for="hideSpoiler-{{.ID}}" tabindex="0">Toggle visibility</label> - </div> - {{end}} + <details class="text-spoiler"> + <summary> + <span class="spoiler-text">{{emojify .Emojis (escape .SpoilerText)}}</span> + <span class="button" role="button" tabindex="0">Toggle visibility</span> + </summary> + <div class="content"> + {{emojify .Emojis (noescape .Content)}} + </div> + </details> + {{else}} <div class="content"> {{emojify .Emojis (noescape .Content)}} </div> + {{end}} </div> {{with .MediaAttachments}} - <div class="media photoswipe-gallery {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}"> - {{range .}} + <div + class="media photoswipe-gallery {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}"> + {{range $index, $media := .}} + {{with $media}} <div class="media-wrapper"> - {{if not .Description}} - <div class="no-image-desc" aria-hidden="true" ><i class="fa fa-info-circle"></i><span>Missing media description</span></div> - {{end}} - <input type="checkbox" id="sensitiveMedia-{{.ID}}" class="sensitive-checkbox hidden" {{if not $.Sensitive}}checked{{end}}/> - <div class="sensitive"> - <div class="open"> - <label for="sensitiveMedia-{{.ID}}" class="button" role="button" tabindex="0"> - <i class="fa fa-eye-slash" title="Hide sensitive media"></i> - </label> - </div> - <div class="closed" {{if .Description}}title="{{.Description}}"{{end}}> - <label for="sensitiveMedia-{{.ID}}" class="button" role="button" tabindex="0">Show sensitive media</label> - </div> - </div> - {{ if eq .Type "video" }} - <div class="video-play"> - <span class="icon-span fa-stack" aria-hidden="true"> - <i class="icon-bg fa fa-fw fa-circle fa-stack-1x"></i> - <i class="icon fa fa-fw fa-play-circle fa-stack-1x"></i> - </span> - </div> - {{ end }} - <a href="{{.URL}}" - target="_blank" - {{if .Description}}title="{{.Description}}"{{end}} - data-pswp-width="{{.Meta.Original.Width}}px" - data-pswp-height="{{.Meta.Original.Height}}px" - {{if eq .Type "video"}}data-pswp-type="video"{{end}} - data-cropped="true"> - <img src="{{.PreviewURL}}" {{if .Description}}alt="{{.Description}}"{{end}} data-blurhash="{{.Blurhash}}"/> - </a> + <details class="{{.Type}}-spoiler" {{if not $.Sensitive}}open{{end}}> + <summary> + <div class="show sensitive button" aria-hidden="true"> + Show sensitive media + </div> + <span class="eye button" role="button" tabindex="0" aria-label="Toggle media"> + <i class="hide fa fa-fw fa-eye-slash" aria-hidden="true"></i> + <i class="show fa fa-fw fa-eye" aria-hidden="true"></i> + </span> + + {{if eq .Type "video"}} + <video {{if .Description}} title="{{.Description}}" {{end}}> + <source type="video/mp4" src="{{.URL}}" /> + </video> + {{else}} + <img {{if .Description}} title="{{.Description}}" {{end}} src="{{.PreviewURL}}" /> + {{end}} + </summary> + {{if eq .Type "video"}} + <video class="plyr-video photoswipe-slide" controls {{if .Description}}alt="{{.Description}}" + title="{{.Description}}" {{end}} data-pswp-index="{{$index}}" data-pswp-width="{{.Meta.Original.Width}}px" + data-pswp-height="{{.Meta.Original.Height}}px"> + <source type="video/mp4" src="{{.URL}}" /> + </video> + {{else}} + <a class="photoswipe-slide" href="{{.URL}}" target="_blank" {{if .Description}}title="{{.Description}}" {{end}} + data-pswp-width="{{.Meta.Original.Width}}px" data-pswp-height="{{.Meta.Original.Height}}px" + data-cropped="true"> + <img src="{{.PreviewURL}}" {{if .Description}}alt="{{.Description}}" {{end}} /> + </a> + {{end}} + </details> </div> {{end}} + {{end}} </div> {{end}} -</div> -<div class="info"> - <div id="date">{{.CreatedAt | timestampPrecise}}</div> - <div class="stats"> - <div id="replies"><i aria-label="Replies" class="fa fa-reply-all"></i> {{.RepliesCount}}</div> - <div id="boosts"><i aria-label="Boosts" class="fa fa-retweet"></i> {{.ReblogsCount}}</div> - <div id="favorites"><i aria-label="Favorites" class="fa fa-star"></i> {{.FavouritesCount}}</div> +</section> +<aside class="info"> + <time datetime="{{.CreatedAt}}">{{.CreatedAt | timestampPrecise}}</time> + <div class="stats" role="group"> + <div> + <span aria-hidden="true"> + <i class="fa fa-reply-all"></i> {{.RepliesCount}} + </span> + <span class="sr-only">{{.RepliesCount}} {{if .RepliesCount | eq 1}}reply{{else}}replies{{end}}</span> + </div> + <div> + <span aria-hidden="true"> + <i class="fa fa-star"></i> {{.FavouritesCount}} + </span> + <span class="sr-only">{{.FavouritesCount}} favourite{{if .FavouritesCount | eq 1 | not}}s{{end}}</span> + </div> + <div> + <span aria-hidden="true"> + <i class="fa fa-retweet"></i> {{.ReblogsCount}} + </span> + <span class="sr-only">{{.ReblogsCount}} boost{{if .ReblogsCount | eq 1 | not}}s{{end}}</span> + </div> + {{if .Pinned}} + <div> + <i class="fa fa-thumb-tack" aria-hidden="true"></i> + <span class="sr-only">pinned</span> + </div> + {{end}} </div> -</div> -<a data-nosnippet href="{{.URL}}" class="toot-link">View toot</a> +</aside> +<a data-nosnippet href="{{.URL}}" class="toot-link">Open + thread</a>
\ No newline at end of file diff --git a/web/template/thread.tmpl b/web/template/thread.tmpl index 5e4e3f7d4..f2b61019d 100644 --- a/web/template/thread.tmpl +++ b/web/template/thread.tmpl @@ -19,20 +19,20 @@ {{ template "header.tmpl" .}} <main> - <div data-nosnippet class="thread"> + <section data-nosnippet class="thread"> {{range .context.Ancestors}} - <div class="toot" id="{{.ID}}"> + <article class="toot" id="{{.ID}}"> {{ template "status.tmpl" .}} - </div> + </article> {{end}} - <div class="toot expanded" id="{{.status.ID}}"> + <article class="toot expanded" id="{{.status.ID}}"> {{ template "status.tmpl" .status}} - </div> + </article> {{range .context.Descendants}} - <div class="toot" id="{{.ID}}"> + <article class="toot" id="{{.ID}}"> {{ template "status.tmpl" .}} - </div> + </article> {{end}} - </div> + </section> </main> {{ template "footer.tmpl" .}}
\ No newline at end of file |