styles
/
gts-web
Archived
1
Fork 0
Code Issues Pull Requests Releases Activity

moved profile stats under the header image

This commit is contained in:
Dym Sohin 2023-08-26 05:45:17 +02:00
parent 355a36e209
commit a86645a576
2 changed files with 36 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
assets/dist/profile.css vendored
View File

@ -1,4 +1,3 @@
/*
GoToSocial
Copyright (C) 2021-2023 GoToSocial Authors admin@gotosocial.org
@ -78,9 +77,9 @@
grid-template-columns: var(--avatar-size) auto 1fr;
grid-template-rows: var(--overlap) var(--name-size) auto;
grid-template-areas:
"avatar . ."
"avatar displayname displayname"
"avatar username role";
" avatar . . . "
" avatar displayname displayname stats "
" avatar username role stats ";
margin: 1rem;
margin-top: calc(-1 * var(--overlap));
@ -156,9 +155,10 @@
grid-template-columns: auto 1fr;
grid-template-rows: var(--avatar-size) var(--name-size) auto;
grid-template-areas:
"avatar avatar"
"displayname displayname"
"username role";
" avatar avatar "
" displayname displayname "
" username role "
" stats stats ";
}
.profile .header .basic-info .displayname {
@ -220,6 +220,7 @@
.profile .toots .toot {
border-radius: 0;
padding-top: 0;
}
.profile .toots .toot .info {
@ -257,20 +258,20 @@
.profile .about-user .fields {
background: var(--profile-bg);
display: grid;
grid-template-columns: 6rem auto;
grid-template-columns: auto auto;
padding: 0.5rem;
}
.profile .about-user .fields > * {
padding: 0.5rem;
}
.profile .about-user .fields > b {
align-self: flex-end;
justify-self: center;
align-self: center;
justify-self: flex-end;
}
.profile .about-user .fields > span {
}
.profile .about-user .fields > span + b,
.profile .about-user .fields > span + b + span {
.profile .about-user .fields > span + b {
border-top: 0.1rem solid var(--gray2);
}
@ -279,18 +280,20 @@
padding: 1rem;
}
.profile .about-user .accountstats {
background: var(--bg-accent);
padding: 0.5rem;
.profile .accountstats {
grid-area: stats;
display: grid;
grid-template-columns: 6rem auto;
gap: 0.5rem 1rem;
grid-auto-flow: column;
grid-template: repeat(2, 1fr) / repeat(4, auto);
gap: 0 1rem;
align-self: center;
}
.profile .about-user .accountstats > b {
justify-self: end;
font-weight: normal;
}
.profile .about-user .accountstats > b + * {
justify-self: start;
.profile .accountstats > * {
padding: 0.5rem;
justify-self: center;
}
.profile .accountstats > b {
border-bottom: 0.1rem solid var(--gray2);
}

16
template/profile.tmpl
View File

@ -48,9 +48,17 @@
{{ end }}
</div>
{{ end }}
<div class="accountstats">
<b>joined</b><time datetime="{{.account.CreatedAt}}">{{.account.CreatedAt | timestampVague}}</time>
<b>posts</b><span>{{.account.StatusesCount}}</span>
<b>followers</b><span>{{.account.FollowersCount}}</span>
<b>follows</b><span>{{.account.FollowingCount}}</span>
</div>
</div>
</div>
<div class="column-split">
<section class="about-user">
@ -70,12 +78,6 @@
{{ end }}
</div>
<div class="accountstats">
<b>join</b><time datetime="{{.account.CreatedAt}}">{{.account.CreatedAt | timestampVague}}</time>
<b>posts</b><span>{{.account.StatusesCount}}</span>
<b>follows</b><span>{{.account.FollowingCount}}</span>
<b>followers</b><span>{{.account.FollowersCount}}</span>
</div>
</section>
<section class="toots">
@ -97,7 +99,7 @@
<h2 id="recent" tabindex="-1">Recent posts</h2>
{{ if .rssFeed }}
<a href="{{ .rssFeed }}" class="rss-icon" aria-label="RSS feed">
<i class="fa fa-rss-square" aria-hidden="true"></i>
<img src="/rss.svg" width="24" height="24">
</a>
{{ end }}
</div>