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

16
template/profile.tmpl
View File

@ -48,9 +48,17 @@
{{ end }} {{ end }}
</div> </div>
{{ end }} {{ 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>
</div>
<div class="column-split"> <div class="column-split">
<section class="about-user"> <section class="about-user">
@ -70,12 +78,6 @@
{{ end }} {{ end }}
</div> </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>
<section class="toots"> <section class="toots">
@ -97,7 +99,7 @@
<h2 id="recent" tabindex="-1">Recent posts</h2> <h2 id="recent" tabindex="-1">Recent posts</h2>
{{ if .rssFeed }} {{ if .rssFeed }}
<a href="{{ .rssFeed }}" class="rss-icon" aria-label="RSS feed"> <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> </a>
{{ end }} {{ end }}
</div> </div>