SuperSeriousBusiness/GoToSocial
1
1
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial synced 2025-06-05 21:59:39 +02:00
Code Issues Projects Releases Wiki Activity

[feature] Serialize local account role via API, and show it via web view (#1045)

Browse Source 
* [feature] Add 'role' field to api serialization of local accounts

* [chore] Add a bit of license text while I'm here

* [frogend] render account role on same line as username in web view of profile

* style tweaking on role badges, general profile header layout

* profile stats wrapping

* don't render standard 'user' role on web view

Co-authored-by: f0x <f0x@cthu.lu>
This commit is contained in:
tobi
2022-11-15 10:19:32 +01:00
committed by GitHub
parent 4cd00d546c
commit a39a664525
10 changed files with 167 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/source/css/_colors.css
View File

@@ -62,6 +62,9 @@ $border-accent: $orange2;
$link-fg: $fg-accent;
$role-moderator: $orange1;
$role-admin: $blue2;
$button-bg: $blue2;
$button-fg: $gray1;
$button-hover-bg: $blue3;

1
web/source/css/base.css
View File

@@ -60,6 +60,7 @@ body {
display: grid;
min-height: 100%;
min-width: 100%;
width: 100vw;
grid-template-columns: auto minmax(auto, 90ch) auto;
grid-template-columns: auto min(92%, 90ch) auto;

104
web/source/css/profile.css
View File

@@ -31,10 +31,11 @@ main {
background: $bg-accent;
display: grid;
grid-template-rows: auto auto auto;
grid-template-columns: auto;
grid-template-columns: 100%;
gap: 0.5rem;
margin-bottom: 0.2rem;
overflow-x: hidden;
position: relative;
border-radius: $br;
box-shadow: $boxshadow;
@@ -56,12 +57,12 @@ main {
}
.basic {
max-height: 10rem;
margin-top: -7rem;
height: 8.5rem;
margin-top: -6.5rem;
display: grid;
grid-template-columns: 1rem auto 1fr;
grid-template-rows: auto auto auto;
grid-template-columns: 1rem 8.5rem 1fr;
grid-template-rows: 3rem 3rem 2.5rem;
grid-template-areas:
". avatar ."
@@ -97,44 +98,80 @@ main {
a, div {
color: inherit;
text-decoration: none;
padding: 0.5rem;
}
.displayname {
grid-area: displayname;
padding-right: 1rem;
font-weight: bold;
font-size: 2rem;
line-height: 2.2rem;
line-height: 3rem;
background: $bg-trans;
word-break: break-all;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-height: 6rem;
padding: 0 0.5rem;
}
.username {
display: flex;
flex-wrap: wrap;
.usernamecontainer {
height: 2.5rem;
display: grid;
grid-template-columns: auto 1fr;
grid-area: username;
padding-top: 0;
margin-top: 0.25rem;
padding-bottom: 0.25rem;
/* justify-content: space-between; */
padding: 0;
gap: 0.5rem;
position: relative;
color: $fg-accent;
font-weight: bold;
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
user-select: all;
.username {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
user-select: all;
line-height: 2.5rem;
padding-left: 0;
margin-left: 0.5rem;
}
.role {
justify-self: start;
align-self: center;
line-height: 1.1rem;
font-size: 0.9rem;
margin-right: 0.2rem;
padding: 0.2rem;
padding-top: 0.1rem;
border: 0.1rem solid $gray1;
border-radius: $br;
font-variant: small-caps;
}
.role.admin {
background: $gray1;
color: $orange2;
border-color: $orange2;
}
.role.moderator {
background: $gray1;
color: $blue2;
border-color: $blue1;
}
}
}
@media screen and (max-width: 600px) {
.basic {
max-height: initial;
margin-top: -7.5vh;
& {
gap: 0.1rem;
}
.basic {
height: initial;
display: flex;
flex-direction: column;
@@ -151,12 +188,18 @@ main {
.displayname {
padding-left: 1rem;
font-size: 5vw;
font-size: 1.5rem;
line-height: 2rem;
margin-top: 0.5rem;
align-self: stretch;
}
.username {
.usernamecontainer {
padding-left: 1rem;
.username {
margin-left: 0;
}
}
}
}
@@ -171,7 +214,7 @@ main {
}
.bio {
margin-top: 0.5rem;
margin-top: 0;
margin-bottom: 0.5rem;
margin-left: 1rem;
margin-right: 1rem;
@@ -188,12 +231,19 @@ main {
.accountstats {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
border-radius: 0 0 $br $br;
border-top: 0.1rem solid $bg;
.entry-group {
flex: 1 1 auto;
min-width: 50%;
display: flex;
}
.entry {
padding: 1rem 1.2rem;
white-space: nowrap;
width: 50%;
margin: 1.2rem 0.5rem;
text-align: center;
}
}