RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 10:34:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix inconsistent gap on profile page components

Browse Source
This commit is contained in:
SrGooglo 2024-09-13 19:40:53 +00:00
parent 9146839dec
commit f6fe72842d
3 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/app/src/pages/account/index.jsx
View File

@ -151,13 +151,13 @@ export default class Account extends React.Component {
} }
return <div return <div
id="profile"
className={classnames( className={classnames(
"accountProfile", "account-profile",
{ {
["withCover"]: user.cover, ["withCover"]: user.cover,
} }
)} )}
id="profile"
> >
{ {
user.cover && <div user.cover && <div
@ -171,7 +171,7 @@ export default class Account extends React.Component {
} }
<div className="panels"> <div className="panels">
<div className="leftPanel"> <div className="left-panel">
<UserCard <UserCard
user={user} user={user}
/> />
@ -194,7 +194,7 @@ export default class Account extends React.Component {
</div> </div>
<div <div
className="centerPanel" className="center-panel"
ref={this.contentRef} ref={this.contentRef}
> >
<AnimatePresence mode="wait"> <AnimatePresence mode="wait">
@ -220,7 +220,7 @@ export default class Account extends React.Component {
</AnimatePresence> </AnimatePresence>
</div> </div>
<div className="rightPanel"> <div className="right-panel">
<antd.Menu <antd.Menu
className="tabMenu" className="tabMenu"
mode={app.isMobile ? "horizontal" : "vertical"} mode={app.isMobile ? "horizontal" : "vertical"}

24
packages/app/src/pages/account/index.less
View File

@ -4,7 +4,7 @@
@stickyCardTop: 20px; @stickyCardTop: 20px;
@withCoverPanelElevation: 100px; @withCoverPanelElevation: 100px;
.accountProfile { .account-profile {
position: relative; position: relative;
display: flex; display: flex;
@ -14,9 +14,11 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
gap: @default-gap;
&.withCover { &.withCover {
.panels { .panels {
.leftPanel { .left-panel {
position: sticky; position: sticky;
top: calc(@withCoverPanelElevation + @stickyCardTop); top: calc(@withCoverPanelElevation + @stickyCardTop);
@ -42,7 +44,7 @@
.panels { .panels {
padding-top: 0; padding-top: 0;
.leftPanel { .left-panel {
transform: translate(0, 0); transform: translate(0, 0);
.actions { .actions {
@ -64,8 +66,6 @@
height: 25vh; height: 25vh;
min-height: 25vh; min-height: 25vh;
margin-bottom: 10px;
background-position: center; background-position: center;
background-size: cover; background-size: cover;
@ -86,12 +86,12 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 20px; gap: @default-gap;
height: 100%; height: 100%;
width: 100%; width: 100%;
.leftPanel { .left-panel {
position: sticky; position: sticky;
top: @stickyCardTop; top: @stickyCardTop;
@ -117,7 +117,7 @@
min-width: 400px; min-width: 400px;
padding: 20px; padding: 20px;
margin-top: 20px; margin-top: @default-gap;
background-color: var(--background-color-accent); background-color: var(--background-color-accent);
border-radius: 12px; border-radius: 12px;
@ -132,7 +132,7 @@
} }
} }
.centerPanel { .center-panel {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -167,7 +167,7 @@
} }
} }
.rightPanel { .right-panel {
position: sticky; position: sticky;
top: @stickyCardTop; top: @stickyCardTop;
@ -214,7 +214,7 @@
@media (max-width: 1720px) { @media (max-width: 1720px) {
.panels { .panels {
.leftPanel { .left-panel {
.userCard { .userCard {
width: 300px; width: 300px;
min-width: 300px; min-width: 300px;
@ -226,7 +226,7 @@
} }
} }
.rightPanel { .right-panel {
width: fit-content; width: fit-content;
min-width: 60px; min-width: 60px;

1
packages/app/src/styles/vars.less
View File

@ -12,6 +12,7 @@
@card-shadow-top: 0 -4px 3px 0 rgba(63, 63, 68, 0.05), 0 0 0 2px var(--shadow-color); @card-shadow-top: 0 -4px 3px 0 rgba(63, 63, 68, 0.05), 0 0 0 2px var(--shadow-color);
@default-object-padding: 10px; @default-object-padding: 10px;
@default-gap: 20px;
@menu-selected-item-dash-width: 3px; @menu-selected-item-dash-width: 3px;
@menu-selected-item-dash-height: 50%; @menu-selected-item-dash-height: 50%;