mirror of
https://github.com/superseriousbusiness/gotosocial.git
synced 2025-01-07 15:10:12 +00:00
fix variable use, mobile
This commit is contained in:
f0x
parent
86471e010a
commit
b59000382f
|
|
@ -69,8 +69,10 @@ $border-accent: $orange2;
|
|||
|
||||
$link-fg: $fg-accent;
|
||||
|
||||
$role-moderator: $orange1;
|
||||
$role-admin: $blue2;
|
||||
$role-admin: $orange2;
|
||||
$role-mod: $blue2;
|
||||
|
||||
$profile-bg: $gray4;
|
||||
|
||||
$button-bg: $blue2;
|
||||
$button-fg: $gray1;
|
||||
|
|
@ -80,7 +82,6 @@ $button-danger-bg: $error3;
|
|||
$button-danger-fg: $white1;
|
||||
$button-danger-hover-bg: $error2;
|
||||
|
||||
|
||||
$toot-bg: $gray3;
|
||||
$toot-info-bg: $gray2;
|
||||
|
||||
|
|
|
|||
|
|
@ -21,9 +21,7 @@
|
|||
grid-template-columns: 1fr min(92%, 65rem) 1fr;
|
||||
}
|
||||
|
||||
main.profile {
|
||||
background: $gray2;
|
||||
background: transparent;
|
||||
.profile {
|
||||
padding: 0.5rem;
|
||||
border-radius: $br;
|
||||
|
||||
|
|
@ -34,8 +32,8 @@ main.profile {
|
|||
}
|
||||
}
|
||||
|
||||
main.profile .header {
|
||||
background: $bg-accent;
|
||||
.profile .header {
|
||||
background: $profile-bg;
|
||||
border-radius: $br;
|
||||
overflow: hidden;
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -59,13 +57,13 @@ main.profile .header {
|
|||
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
|
||||
*/
|
||||
$avatar-size: 8.5rem;
|
||||
$name-size: 3rem;
|
||||
$username-size: 2rem;
|
||||
|
||||
$overlap: calc($avatar-size - $name-size - $username-size);
|
||||
|
||||
.basic-info {
|
||||
$avatar-size: 8.5rem;
|
||||
$name-size: 3rem;
|
||||
$username-size: 2rem;
|
||||
|
||||
$overlap: calc($avatar-size - $name-size - $username-size);
|
||||
|
||||
position: relative;
|
||||
display: grid;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -98,7 +96,7 @@ main.profile .header {
|
|||
.displayname {
|
||||
grid-area: displayname;
|
||||
line-height: $name-size;
|
||||
font-size: 2rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
|
@ -114,10 +112,13 @@ main.profile .header {
|
|||
}
|
||||
|
||||
.role {
|
||||
background: $bg;
|
||||
color: $fg;
|
||||
border: 0.13rem solid $bg;
|
||||
|
||||
grid-area: role;
|
||||
align-self: center;
|
||||
justify-self: start;
|
||||
border: 0.13rem solid $gray1;
|
||||
border-radius: $br;
|
||||
padding: 0.3rem;
|
||||
|
||||
|
|
@ -127,21 +128,36 @@ main.profile .header {
|
|||
font-weight: bold;
|
||||
|
||||
&.admin {
|
||||
background: $gray1;
|
||||
color: $orange2;
|
||||
border-color: $orange2;
|
||||
color: $role-admin;
|
||||
border-color: $role-admin;
|
||||
}
|
||||
|
||||
&.moderator {
|
||||
background: $gray1;
|
||||
color: $blue2;
|
||||
border-color: $blue1;
|
||||
color: $role-mod;
|
||||
border-color: $role-mod;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
display: flex;
|
||||
justify-content: start;
|
||||
|
|
@ -149,7 +165,7 @@ main.profile {
|
|||
align-items: center;
|
||||
|
||||
margin: 0;
|
||||
background: $gray4;
|
||||
background: $profile-bg;
|
||||
border-top-left-radius: $br;
|
||||
border-top-right-radius: $br;
|
||||
padding: 0.75rem;
|
||||
|
|
@ -172,7 +188,7 @@ main.profile {
|
|||
}
|
||||
}
|
||||
|
||||
main.profile .toots {
|
||||
.profile .toots {
|
||||
flex: 65 25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -189,7 +205,7 @@ main.profile .toots {
|
|||
}
|
||||
}
|
||||
|
||||
main.profile .about-user {
|
||||
.profile .about-user {
|
||||
flex: 35 14rem;
|
||||
border-radius: $br;
|
||||
overflow: hidden;
|
||||
|
|
@ -199,10 +215,10 @@ main.profile .about-user {
|
|||
}
|
||||
|
||||
.fields {
|
||||
background: $gray4;
|
||||
background: $profile-bg;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.5rem;
|
||||
padding: 0 0.5rem;
|
||||
padding-top: 0.25rem;
|
||||
|
||||
.field {
|
||||
|
|
@ -219,9 +235,9 @@ main.profile .about-user {
|
|||
}
|
||||
|
||||
.bio {
|
||||
background: $gray4;
|
||||
padding: 0 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
background: $profile-bg;
|
||||
padding: 1rem 0.75rem;
|
||||
padding-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.accountstats {
|
||||
|
|
|
|||
|
|
@ -24,17 +24,23 @@ const React = require("react");
|
|||
module.exports = function FakeProfile({ avatar, header, display_name, username, role }) {
|
||||
return ( // Keep in sync with web/template/profile.tmpl
|
||||
<div className="profile">
|
||||
<div className="headerimage">
|
||||
<img className="headerpreview" src={header} alt={header ? `header image for ${username}` : "None set"} />
|
||||
</div>
|
||||
<div className="basic">
|
||||
<div id="profile-basic-filler2"></div>
|
||||
<span className="avatar"><img className="avatarpreview" src={avatar} alt={avatar ? `avatar image for ${username}` : "None set"} /></span>
|
||||
<div className="displayname">{display_name.trim().length > 0 ? display_name : username}</div>
|
||||
<div className="usernamecontainer">
|
||||
<div className="username"><span>@{username}</span></div>
|
||||
<div class="header">
|
||||
<div class="header-image">
|
||||
<img src={header} alt={header ? `header image for ${username}` : "None set"} />
|
||||
</div>
|
||||
<div class="basic-info" aria-hidden="true">
|
||||
<a class="avatar" href="{{.account.Avatar}}">
|
||||
<img src={avatar} alt={avatar ? `avatar image for ${username}` : "None set"} />
|
||||
</a>
|
||||
<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") &&
|
||||
<div className={`role ${role}`}>{role}</div>
|
||||
<div className={`role ${role}`}>
|
||||
<span class="sr-only">Role: </span>{role}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,19 +31,22 @@ module.exports = function FakeToot({ children }) {
|
|||
} } = query.useVerifyCredentialsQuery();
|
||||
|
||||
return (
|
||||
<div className="toot expanded">
|
||||
<div className="contentgrid">
|
||||
<span className="avatar">
|
||||
<img src={account.avatar} alt="" />
|
||||
</span>
|
||||
<span className="displayname">{account.display_name.trim().length > 0 ? account.display_name : account.username}</span>
|
||||
<span className="username">@{account.username}</span>
|
||||
<article className="toot expanded">
|
||||
<section className="author">
|
||||
<a>
|
||||
<img className="avatar" src={account.avatar} alt="" />
|
||||
<span className="displayname">
|
||||
{account.display_name.trim().length > 0 ? account.display_name : account.username}
|
||||
<span className="sr-only">.</span>
|
||||
</span>
|
||||
<span className="username">@{account.username}</span>
|
||||
</a>
|
||||
</section>
|
||||
<section className="body">
|
||||
<div className="text">
|
||||
<div className="content">
|
||||
{children}
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
);
|
||||
};
|
||||
|
|
@ -51,12 +51,6 @@ header {
|
|||
}
|
||||
}
|
||||
|
||||
main section {
|
||||
box-shadow: none;
|
||||
border-radius: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#root {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr minmax(auto, 60rem) 1fr;
|
||||
|
|
@ -64,6 +58,10 @@ main section {
|
|||
box-sizing: border-box;
|
||||
|
||||
section.with-sidebar {
|
||||
background: $bg-accent;
|
||||
padding: 2rem;
|
||||
border-radius: $br;
|
||||
|
||||
& > div, & > form {
|
||||
border-left: 0.2rem solid $border-accent;
|
||||
padding-left: 0.4rem;
|
||||
|
|
@ -240,10 +238,6 @@ nav.menu-tree {
|
|||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
input, select, textarea {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -405,11 +399,8 @@ section.with-sidebar > div, section.with-sidebar > form {
|
|||
grid-template-rows: 100%;
|
||||
gap: 1rem;
|
||||
|
||||
.profile {
|
||||
.basic {
|
||||
margin-bottom: 0.5rem;
|
||||
/* margin-top: 0; */
|
||||
}
|
||||
.profile .header {
|
||||
border: 0.1rem solid $gray1;
|
||||
}
|
||||
|
||||
.files {
|
||||
|
|
|
|||
Loading…
Reference in a new issue