qugalet/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2024-11-29 15:12:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

redesign status template

Browse source
This commit is contained in:
f0x 2023-05-10 20:18:49 +02:00
parent 6392e00653
commit 4e81ac807e
5 changed files with 169 additions and 145 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
internal/router/template.go
View file

@ -22,6 +22,7 @@
"html/template" "html/template"
"os" "os"
"path/filepath" "path/filepath"
"strings"
"time" "time"
"github.com/gin-gonic/gin" "github.com/gin-gonic/gin"
@ -158,6 +159,15 @@ func emojify(emojis []apimodel.Emoji, inputText template.HTML) template.HTML {
return template.HTML(out) return template.HTML(out)
} }
func acctInstance(acct string) string {
parts := strings.Split(acct, "@")
if len(parts) > 1 {
return "@" + parts[1]
}
return ""
}
func LoadTemplateFunctions(engine *gin.Engine) { func LoadTemplateFunctions(engine *gin.Engine) {
engine.SetFuncMap(template.FuncMap{ engine.SetFuncMap(template.FuncMap{
"escape": escape, "escape": escape,
@ -169,5 +179,6 @@ func LoadTemplateFunctions(engine *gin.Engine) {
"timestampVague": timestampVague, "timestampVague": timestampVague,
"timestampPrecise": timestampPrecise, "timestampPrecise": timestampPrecise,
"emojify": emojify, "emojify": emojify,
"acctInstance": acctInstance,
}) })
} }

8
web/source/css/_colors.css
View file

@ -80,10 +80,12 @@ $button-danger-bg: $error3;
$button-danger-fg: $white1; $button-danger-fg: $white1;
$button-danger-hover-bg: $error2; $button-danger-hover-bg: $error2;
$toot-focus-bg: $gray5;
$toot-unfocus-bg: $gray2;
$toot-info-bg: $gray4; $toot-bg: $gray3;
$toot-info-bg: $gray2;
$toot-focus-bg: $gray5;
$toot-focus-info-bg: $gray4;
$no-img-desc-bg: $orange1; $no-img-desc-bg: $orange1;
$no-img-desc-fg: $gray1; $no-img-desc-fg: $gray1;

108
web/source/css/status.css
View file

@ -31,13 +31,13 @@ main {
} }
.toot { .toot {
background: $toot-unfocus-bg; background: $toot-bg;
box-shadow: $boxshadow; box-shadow: $boxshadow;
border: $boxshadow-border; border: $boxshadow-border;
border-radius: $br;
position: relative; position: relative;
margin-bottom: $br; margin-bottom: $br;
padding-top: 1.5rem; padding-top: 0.75rem;
padding-bottom: 0.7rem;
a { a {
position: relative; position: relative;
@ -46,26 +46,24 @@ main {
text-decoration: none; text-decoration: none;
} }
.contentgrid { .author > a {
padding: 0 1.5rem; padding: 0 0.75rem;
display: grid; display: grid;
grid-template-columns: 4rem 1fr auto; grid-template-columns: 3.5rem 1fr auto;
grid-template-rows: 1.5rem auto auto auto; grid-template-rows: auto auto;
column-gap: 0.5rem; grid-template-areas:
} "avatar display date"
"avatar user .";
.not-expanded { gap: 0 0.5rem;
color: $fg-reduced;
grid-column: 3;
grid-row: 1;
}
.avatar { .avatar {
grid-row: span 3; grid-area: avatar;
aspect-ratio: 1/1; height: 3.5rem;
display: flex; width: 3.5rem;
border: 0.2rem solid $avatar-border; object-fit: cover;
border-radius: 0.4rem;
border: 0.15rem solid $avatar-border;
border-radius: $br;
overflow: hidden; /* hides corners from img overflowing */ overflow: hidden; /* hides corners from img overflowing */
img { img {
@ -87,41 +85,40 @@ main {
} }
.displayname { .displayname {
grid-area: display;
font-weight: bold; font-weight: bold;
font-size: 1.5rem; font-size: 1rem;
line-height: 2rem; line-height: 1.3rem;
margin-top: -0.5rem; /* margin-top: -0.5rem; */
} }
.username { .username {
grid-area: user;
color: $link-fg; color: $link-fg;
font-size: 1rem; font-size: 1rem;
line-height: 1.3rem; line-height: 1.3rem;
} }
input.spoiler:checked ~ .content { .timestamp {
display: none; grid-area: date;
color: $fg-reduced;
}
} }
.spoiler { .body {
padding: 0 0.75rem;
}
details > summary {
list-style: none;
padding-bottom: 0.5rem; padding-bottom: 0.5rem;
display: inline-block;
display: flex; .button {
align-items: center;
flex-wrap: wrap;
gap: 0.4rem;
.spoiler-text {
word-break: break-word;
}
label {
padding: 0.2rem 0.3rem; padding: 0.2rem 0.3rem;
cursor: pointer; cursor: pointer;
font-size: 1rem; font-size: 1rem;
} }
label:hover {
}
} }
.text { .text {
@ -358,14 +355,14 @@ main {
} }
.info { .info {
display: flex;
background: $toot-info-bg; background: $toot-info-bg;
color: $fg-reduced; color: $fg-reduced;
display: none;
border-top: 0.15rem solid $toot-info-border; border-top: 0.15rem solid $toot-info-border;
padding: 0.5rem 1.5rem; padding: 0.5rem 0.75rem;
div { div, time {
padding-right: 1.3rem; padding-right: 1rem;
} }
.stats { .stats {
@ -406,39 +403,16 @@ main {
background: $toot-focus-bg; background: $toot-focus-bg;
padding-bottom: 0; padding-bottom: 0;
.contentgrid { .info {
.displayname { background: $toot-focus-info-bg;
grid-column: span 2;
} }
.not-expanded { .not-expanded {
display: none; display: none;
} }
}
.info {
display: flex;
}
.media { .media {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
} }
} }
footer + div { /* something weird from the devstack.. */
display: none;
}
@media screen and (max-width: 89ch) {
.toot {
.contentgrid {
grid-template-rows: 1.5rem 1.3rem 1.3rem auto;
}
.username, .not-expanded {
grid-column: 2;
grid-row: auto;
}
}
}

95
web/template/status.tmpl
View file

@ -17,33 +17,52 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>. // along with this program. If not, see <http://www.gnu.org/licenses/>.
*/ -}} */ -}}
<div data-nosnippet class="contentgrid"> <section class="author">
<a href="{{.Account.URL}}" class="avatar"><img src="{{.Account.Avatar}}" alt=""></a> <a href="{{.Account.URL}}">
<a href="{{.Account.URL}}" class="displayname">{{if .Account.DisplayName}}{{emojify .Account.Emojis (escape .Account.DisplayName)}}{{else}}{{.Account.Username}}{{end}}</a> <img class="avatar" src="{{.Account.Avatar}}" alt="">
<a href="{{.Account.URL}}" class="username">@{{.Account.Acct}}</a> <span class="displayname">
<div class="not-expanded"> {{if .Account.DisplayName}}
<span class="date">{{.CreatedAt | timestamp}}</span> {{emojify .Account.Emojis (escape .Account.DisplayName)}}
</div> {{else}}
{{.Account.Username}}
{{end}}
<span class="sr-only">.</span>
</span>
<span class="username">@{{.Account.Username}}<span class="sr-only">, </span>{{acctInstance .Account.Acct}}</span>
<!-- <div class="not-expanded timestamp">
<time datetime="{{.CreatedAt}}">{{.CreatedAt | timestamp}}</time>
</div> -->
</a>
</section>
<section class="body">
<div class="text"> <div class="text">
{{if .SpoilerText}} {{if .SpoilerText}}
<input class="spoiler" id="hideSpoiler-{{.ID}}" type="checkbox" style="display: none" aria-hidden="true" checked="true" /> <details class="spoiler-details">
<div class="spoiler"> <summary>
<span class="spoiler-text">{{emojify .Emojis (escape .SpoilerText)}}</span> <span class="spoiler-text">{{emojify .Emojis (escape .SpoilerText)}}</span>
<label class="button spoiler-label" for="hideSpoiler-{{.ID}}" tabindex="0">Toggle visibility</label> <span class="button" role="button" tabindex="0">Toggle visibility</span>
</div> </summary>
{{end}}
<div class="content"> <div class="content">
{{emojify .Emojis (noescape .Content)}} {{emojify .Emojis (noescape .Content)}}
</div> </div>
</details>
{{else}}
<div class="content">
{{emojify .Emojis (noescape .Content)}}
</div>
{{end}}
</div> </div>
{{with .MediaAttachments}} {{with .MediaAttachments}}
<div class="media photoswipe-gallery {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}"> <div
class="media photoswipe-gallery {{(len .) | oddOrEven }}{{if eq (len .) 1}} single{{end}}{{if eq (len .) 2}} double{{end}}">
{{range .}} {{range .}}
<div class="media-wrapper"> <div class="media-wrapper">
{{if not .Description}} {{if not .Description}}
<div class="no-image-desc" aria-hidden="true" ><i class="fa fa-info-circle"></i><span>Missing media description</span></div> <div class="no-image-desc" aria-hidden="true"><i class="fa fa-info-circle"></i><span>Missing media
description</span></div>
{{end}} {{end}}
<input type="checkbox" id="sensitiveMedia-{{.ID}}" class="sensitive-checkbox hidden" {{if not $.Sensitive}}checked{{end}}/> <input type="checkbox" id="sensitiveMedia-{{.ID}}" class="sensitive-checkbox hidden"
{{if not $.Sensitive}}checked{{end}} />
<div class="sensitive"> <div class="sensitive">
<div class="open"> <div class="open">
<label for="sensitiveMedia-{{.ID}}" class="button" role="button" tabindex="0"> <label for="sensitiveMedia-{{.ID}}" class="button" role="button" tabindex="0">
@ -62,26 +81,44 @@
</span> </span>
</div> </div>
{{ end }} {{ end }}
<a href="{{.URL}}" <a href="{{.URL}}" target="_blank" {{if .Description}}title="{{.Description}}" {{end}}
target="_blank" data-pswp-width="{{.Meta.Original.Width}}px" data-pswp-height="{{.Meta.Original.Height}}px"
{{if .Description}}title="{{.Description}}"{{end}} {{if eq .Type "video"}}data-pswp-type="video" {{end}} data-cropped="true">
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}}" /> <img src="{{.PreviewURL}}" {{if .Description}}alt="{{.Description}}" {{end}} data-blurhash="{{.Blurhash}}" />
</a> </a>
</div> </div>
{{end}} {{end}}
</div> </div>
{{end}} {{end}}
</section>
<aside class="info">
<time id="date" datetime="{{.CreatedAt}}">{{.CreatedAt | timestampPrecise}}</time>
<div class="stats" role="group">
<div id="replies">
<span aria-hidden="true">
<i class="fa fa-reply-all"></i> {{.RepliesCount}}
</span>
<span class="sr-only">{{.RepliesCount}} replies</span>
</div> </div>
<div class="info"> <div id="favorites">
<div id="date">{{.CreatedAt | timestampPrecise}}</div> <span aria-hidden="true">
<div class="stats"> <i class="fa fa-star"></i> {{.FavouritesCount}}
<div id="replies"><i aria-label="Replies" class="fa fa-reply-all"></i> {{.RepliesCount}}</div> </span>
<div id="boosts"><i aria-label="Boosts" class="fa fa-retweet"></i> {{.ReblogsCount}}</div> <span class="sr-only">{{.FavouritesCount}} favourite{{if .FavouritesCount | eq 1 | not}}s{{end}}</span>
<div id="favorites"><i aria-label="Favorites" class="fa fa-star"></i> {{.FavouritesCount}}</div>
</div> </div>
<div id="boosts">
<span aria-hidden="true">
<i class="fa fa-retweet"></i> 2
</span>
<span class="sr-only">{{.ReblogsCount}} boost{{if .ReblogsCount | eq 1 | not}}s{{end}}</span>
</div> </div>
<a data-nosnippet href="{{.URL}}" class="toot-link">View toot</a> {{if .Pinned}}
<div>
<i class="fa fa-thumb-tack" aria-hidden="true"></i>
<span class="sr-only">pinned</span>
</div>
{{end}}
</div>
</aside>
<a data-nosnippet href="{{.URL}}" class="toot-link">Open
thread</a>

16
web/template/thread.tmpl
View file

@ -19,20 +19,20 @@
{{ template "header.tmpl" .}} {{ template "header.tmpl" .}}
<main> <main>
<div data-nosnippet class="thread"> <section data-nosnippet class="thread">
{{range .context.Ancestors}} {{range .context.Ancestors}}
<div class="toot" id="{{.ID}}"> <article class="toot" id="{{.ID}}">
{{ template "status.tmpl" .}} {{ template "status.tmpl" .}}
</div> </article>
{{end}} {{end}}
<div class="toot expanded" id="{{.status.ID}}"> <article class="toot expanded" id="{{.status.ID}}">
{{ template "status.tmpl" .status}} {{ template "status.tmpl" .status}}
</div> </article>
{{range .context.Descendants}} {{range .context.Descendants}}
<div class="toot" id="{{.ID}}"> <article class="toot" id="{{.ID}}">
{{ template "status.tmpl" .}} {{ template "status.tmpl" .}}
</div> </article>
{{end}} {{end}}
</div> </section>
</main> </main>
{{ template "footer.tmpl" .}} {{ template "footer.tmpl" .}}