qugalet/gotosocial
1
0
Fork 0
mirror of https://github.com/superseriousbusiness/gotosocial.git synced 2025-01-08 07:30:13 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix variable use, mobile

Browse source
This commit is contained in:
f0x 2023-05-10 20:18:50 +02:00
parent 86471e010a
commit b59000382f
5 changed files with 85 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -69,8 +69,10 @@ $border-accent: $orange2;
$link-fg: $fg-accent; $link-fg: $fg-accent;
$role-moderator: $orange1; $role-admin: $orange2;
$role-admin: $blue2; $role-mod: $blue2;
$profile-bg: $gray4;
$button-bg: $blue2; $button-bg: $blue2;
$button-fg: $gray1; $button-fg: $gray1;
@ -80,7 +82,6 @@ $button-danger-bg: $error3;
$button-danger-fg: $white1; $button-danger-fg: $white1;
$button-danger-hover-bg: $error2; $button-danger-hover-bg: $error2;
$toot-bg: $gray3; $toot-bg: $gray3;
$toot-info-bg: $gray2; $toot-info-bg: $gray2;

72
web/source/css/profile.css
View file

@ -21,9 +21,7 @@
grid-template-columns: 1fr min(92%, 65rem) 1fr; grid-template-columns: 1fr min(92%, 65rem) 1fr;
} }
main.profile { .profile {
background: $gray2;
background: transparent;
padding: 0.5rem; padding: 0.5rem;
border-radius: $br; border-radius: $br;
@ -34,8 +32,8 @@ main.profile {
} }
} }
main.profile .header { .profile .header {
background: $bg-accent; background: $profile-bg;
border-radius: $br; border-radius: $br;
overflow: hidden; overflow: hidden;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -59,13 +57,13 @@ main.profile .header {
Basic info container has the user's avatar, display- and username, and role Basic info container has the user's avatar, display- and username, and role
It's partially overlapped over the header image, by a negative margin-top It's partially overlapped over the header image, by a negative margin-top
*/ */
$avatar-size: 8.5rem;
$name-size: 3rem;
$username-size: 2rem;
$overlap: calc($avatar-size - $name-size - $username-size);
.basic-info { .basic-info {
$avatar-size: 8.5rem;
$name-size: 3rem;
$username-size: 2rem;
$overlap: calc($avatar-size - $name-size - $username-size);
position: relative; position: relative;
display: grid; display: grid;
box-sizing: border-box; box-sizing: border-box;
@ -98,7 +96,7 @@ main.profile .header {
.displayname { .displayname {
grid-area: displayname; grid-area: displayname;
line-height: $name-size; line-height: $name-size;
font-size: 2rem; font-size: 1.5rem;
font-weight: bold; font-weight: bold;
} }
@ -114,10 +112,13 @@ main.profile .header {
} }
.role { .role {
background: $bg;
color: $fg;
border: 0.13rem solid $bg;
grid-area: role; grid-area: role;
align-self: center; align-self: center;
justify-self: start; justify-self: start;
border: 0.13rem solid $gray1;
border-radius: $br; border-radius: $br;
padding: 0.3rem; padding: 0.3rem;
@ -127,21 +128,36 @@ main.profile .header {
font-weight: bold; font-weight: bold;
&.admin { &.admin {
background: $gray1; color: $role-admin;
color: $orange2; border-color: $role-admin;
border-color: $orange2;
} }
&.moderator { &.moderator {
background: $gray1; color: $role-mod;
color: $blue2; border-color: $role-mod;
border-color: $blue1;
} }
} }
} }
} }
main.profile { @media screen and (max-width: 750px) {
.profile .header {
.basic-info {
grid-template-columns: auto 1fr;
grid-template-rows: $avatar-size $name-size auto;
grid-template-areas:
"avatar avatar"
"displayname displayname"
"username role";
.displayname {
font-size: 1.4rem;
}
}
}
}
.profile {
.col-header { .col-header {
display: flex; display: flex;
justify-content: start; justify-content: start;
@ -149,7 +165,7 @@ main.profile {
align-items: center; align-items: center;
margin: 0; margin: 0;
background: $gray4; background: $profile-bg;
border-top-left-radius: $br; border-top-left-radius: $br;
border-top-right-radius: $br; border-top-right-radius: $br;
padding: 0.75rem; padding: 0.75rem;
@ -172,7 +188,7 @@ main.profile {
} }
} }
main.profile .toots { .profile .toots {
flex: 65 25rem; flex: 65 25rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -189,7 +205,7 @@ main.profile .toots {
} }
} }
main.profile .about-user { .profile .about-user {
flex: 35 14rem; flex: 35 14rem;
border-radius: $br; border-radius: $br;
overflow: hidden; overflow: hidden;
@ -199,10 +215,10 @@ main.profile .about-user {
} }
.fields { .fields {
background: $gray4; background: $profile-bg;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 0.5rem; padding: 0 0.5rem;
padding-top: 0.25rem; padding-top: 0.25rem;
.field { .field {
@ -219,9 +235,9 @@ main.profile .about-user {
} }
.bio { .bio {
background: $gray4; background: $profile-bg;
padding: 0 0.75rem; padding: 1rem 0.75rem;
padding-bottom: 0.75rem; padding-bottom: 1.25rem;
} }
.accountstats { .accountstats {

26
web/source/settings/components/fake-profile.jsx
View file

@ -24,17 +24,23 @@ const React = require("react");
module.exports = function FakeProfile({ avatar, header, display_name, username, role }) { module.exports = function FakeProfile({ avatar, header, display_name, username, role }) {
return ( // Keep in sync with web/template/profile.tmpl return ( // Keep in sync with web/template/profile.tmpl
<div className="profile"> <div className="profile">
<div className="headerimage"> <div class="header">
<img className="headerpreview" src={header} alt={header ? `header image for ${username}` : "None set"} /> <div class="header-image">
</div> <img src={header} alt={header ? `header image for ${username}` : "None set"} />
<div className="basic"> </div>
<div id="profile-basic-filler2"></div> <div class="basic-info" aria-hidden="true">
<span className="avatar"><img className="avatarpreview" src={avatar} alt={avatar ? `avatar image for ${username}` : "None set"} /></span> <a class="avatar" href="{{.account.Avatar}}">
<div className="displayname">{display_name.trim().length > 0 ? display_name : username}</div> <img src={avatar} alt={avatar ? `avatar image for ${username}` : "None set"} />
<div className="usernamecontainer"> </a>
<div className="username"><span>@{username}</span></div> <span class="displayname text-cutoff">
{display_name.trim().length > 0 ? display_name : username}
<span class="sr-only">.</span>
</span>
<span class="username text-cutoff">@{username}</span>
{(role && role != "user") && {(role && role != "user") &&
<div className={`role ${role}`}>{role}</div> <div className={`role ${role}`}>
<span class="sr-only">Role: </span>{role}
</div>
} }
</div> </div>
</div> </div>

27
web/source/settings/components/fake-toot.jsx
View file

@ -31,19 +31,22 @@ module.exports = function FakeToot({ children }) {
} } = query.useVerifyCredentialsQuery(); } } = query.useVerifyCredentialsQuery();
return ( return (
<div className="toot expanded"> <article className="toot expanded">
<div className="contentgrid"> <section className="author">
<span className="avatar"> <a>
<img src={account.avatar} alt="" /> <img className="avatar" src={account.avatar} alt="" />
</span> <span className="displayname">
<span className="displayname">{account.display_name.trim().length > 0 ? account.display_name : account.username}</span> {account.display_name.trim().length > 0 ? account.display_name : account.username}
<span className="username">@{account.username}</span> <span className="sr-only">.</span>
</span>
<span className="username">@{account.username}</span>
</a>
</section>
<section className="body">
<div className="text"> <div className="text">
<div className="content"> {children}
{children}
</div>
</div> </div>
</div> </section>
</div> </article>
); );
}; };

21
web/source/settings/style.css
View file

@ -51,12 +51,6 @@ header {
} }
} }
main section {
box-shadow: none;
border-radius: none;
border: none;
}
#root { #root {
display: grid; display: grid;
grid-template-columns: 1fr minmax(auto, 60rem) 1fr; grid-template-columns: 1fr minmax(auto, 60rem) 1fr;
@ -64,6 +58,10 @@ main section {
box-sizing: border-box; box-sizing: border-box;
section.with-sidebar { section.with-sidebar {
background: $bg-accent;
padding: 2rem;
border-radius: $br;
& > div, & > form { & > div, & > form {
border-left: 0.2rem solid $border-accent; border-left: 0.2rem solid $border-accent;
padding-left: 0.4rem; padding-left: 0.4rem;
@ -240,10 +238,6 @@ nav.menu-tree {
text-transform: capitalize; text-transform: capitalize;
} }
section {
margin-bottom: 1rem;
}
input, select, textarea { input, select, textarea {
box-sizing: border-box; box-sizing: border-box;
} }
@ -405,11 +399,8 @@ section.with-sidebar > div, section.with-sidebar > form {
grid-template-rows: 100%; grid-template-rows: 100%;
gap: 1rem; gap: 1rem;
.profile { .profile .header {
.basic { border: 0.1rem solid $gray1;
margin-bottom: 0.5rem;
/* margin-top: 0; */
}
} }
.files { .files {