muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

made first good profile layout

Browse source
This commit is contained in:
Fedor Katurov 2025-01-27 15:05:56 +07:00
parent 42f8f96e34
commit 1d0ecc54a9
4 changed files with 144 additions and 93 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/layouts/FlowLayout/styles.module.scss
View file

@ -4,17 +4,6 @@
$target_flow_cell_width: 225px;
/** Makes a breakpoint for target cell width **/
@mixin breakpoint($columns) {
@container sizer (max-width: #{$target_flow_cell_width* $columns}) {
grid-template-columns: repeat(#{$columns}, 1fr);
grid-auto-rows: calc(
(100cqw - #{$columns - 1} * #{$gap} / 2) / #{$columns}
);
@content;
}
}
.wrap {
max-width: 2000px;
padding: 0 40px 40px 40px;
@ -26,8 +15,9 @@ $cols: math.div($content_width, $cell);
.container {
@include container;
@include flow_container;
margin-top: $page_top_offset;
container: sizer / size;
@include tablet {
padding: 0 $gap;
@ -38,20 +28,18 @@ $cols: math.div($content_width, $cell);
.grid {
width: 100%;
min-height: 200px;
display: grid;
gap: #{$gap};
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: calc((100cqw - 4 * #{$gap} / 2) / 5);
grid-template-rows: 40vh;
grid-auto-flow: row dense;
@include breakpoint(5);
@include breakpoint(4);
@include breakpoint(3) {
@include flow_grid() {
grid-template-rows: 40vh;
}
@include flow_breakpoint(5);
@include flow_breakpoint(4);
@include flow_breakpoint(3) {
grid-template-rows: calc(66cqw - #{$gap}) auto;
}
@include breakpoint(2) {
@include flow_breakpoint(2) {
grid-template-rows: calc(100cqw - #{$gap}) auto;
}

68
src/layouts/ProfileLayout/index.tsx
View file

@ -26,7 +26,64 @@ const ProfileLayout: FC<Props> = observer(({ username }) => {
return (
<Container className={styles.wrap}>
<div className={styles.grid}>
<div className={styles.stamp}>
{
<Card className={styles.description}>
<p>
Inceptos cubilia velit faucibus mattis enim, massa conubia primis
torquent orci etiam? Pharetra arcu maecenas eget aptent auctor
massa habitant metus faucibus enim rhoncus. Laoreet fusce odio
litora primis senectus leo risus tristique semper augue tempor
arcu. Gravida sed cubilia malesuada hac proin parturient cubilia
habitant vulputate erat laoreet egestas. Condimentum.
</p>
<p>
Porta dui non eget varius pretium blandit fusce luctus sem
fermentum ac. At, porta iaculis primis! Mus aenean quam himenaeos
est vel interdum nostra sociosqu sodales sodales. Senectus
penatibus erat penatibus orci a suspendisse purus tristique
habitant rutrum ornare maecenas. Sapien vestibulum est ad
ridiculus viverra curae; suscipit penatibus lectus. A parturient
viverra morbi. Elit class primis laoreet, fusce integer pulvinar
facilisi. Dapibus scelerisque, leo mattis non primis dis. Sapien
lobortis mauris platea porttitor per class natoque maecenas fusce!
Est tellus sed leo!
</p>
<p>
Eros enim ac posuere vel mollis duis vivamus vivamus in est.
Elementum nostra himenaeos donec augue fermentum nascetur faucibus
dui lobortis. Hac per conubia a nunc primis. Tempus tempus erat
quam platea viverra nibh laoreet at aenean. Convallis habitasse,
luctus libero dis natoque suspendisse commodo hac? Natoque velit
pulvinar fusce posuere aliquam amet non. Dui phasellus netus
luctus. Potenti nostra tristique maecenas quisque egestas sociis!
A a sociosqu molestie sed blandit sapien sed pellentesque. Nisi
purus auctor aliquam tortor auctor faucibus. Quisque, ullamcorper
nisi tellus dignissim tempus.
</p>
<p>
Orci dis tincidunt porttitor amet ad hendrerit proin sollicitudin
mi. Amet sodales mi vivamus lacus sociosqu eleifend eros blandit
quisque mus dignissim imperdiet? Viverra suscipit metus eleifend
cras nibh nisl, fusce cum nascetur nibh. Sagittis cubilia
vulputate mauris lobortis! Rhoncus, ultrices magna ut condimentum.
Accumsan consequat penatibus vehicula varius nulla magna arcu leo
primis. Lacus pretium facilisis luctus quis sodales torquent
tempor? Nam scelerisque hendrerit diam ante cubilia volutpat. Nisi
curae; accumsan phasellus cursus orci tempus dolor ridiculus?
Taciti dis scelerisque sit.
</p>
<p>
Ligula odio aliquam donec platea? Ut; urna per praesent erat
conubia fermentum. Dis dapibus vulputate quisque odio cum et
vivamus ut. Risus accumsan cubilia ante nisi cum. Vulputate tempor
platea eget eleifend auctor rhoncus, vivamus vel ut? Nunc turpis
inceptos molestie molestie. Class libero eros volutpat placerat
quisque. Inceptos litora, felis.
</p>
</Card>
}
<Card className={styles.left} seamless>
<Sticky>
<ProfilePageLeft
description={profile.description}
@ -35,13 +92,10 @@ const ProfileLayout: FC<Props> = observer(({ username }) => {
isLoading={isLoading}
/>
</Sticky>
</div>
</Card>
<Card className={styles.description}>{profile.description}</Card>
<div className={styles.nodes}>
<FlowGrid nodes={nodes} user={user} onChangeCellView={() => {}} />
</div>
<FlowGrid nodes={nodes} user={user} onChangeCellView={() => {}} />
<FlowGrid nodes={nodes} user={user} onChangeCellView={() => {}} />
</div>
</Container>
);

45
src/layouts/ProfileLayout/styles.module.scss
View file

@ -1,17 +1,29 @@
@import 'src/styles/variables';
.wrap {
display: grid;
grid-template-columns: auto;
grid-column-gap: $gap;
@include flow_container();
margin-top: $page_top_offset;
}
.description {
grid-column: 2 / -3;
grid-row: 1 / 4;
height: 100%;
font: $font_14_medium;
overflow: auto;
height: 100%;
}
.grid {
grid-template-columns: 250px 5fr;
display: grid;
column-gap: $gap;
row-gap: $gap;
@include flow_grid();
@include flow_breakpoint(4);
@include flow_breakpoint(3);
@include flow_breakpoint(2) {
.left {
grid-column: 1 / -1;
}
}
}
.row {
@ -19,20 +31,7 @@
height: 100%;
}
.description {
font: $font_14_semibold;
}
.stamp {
grid-row-end: span 2;
}
.nodes {
@include flow_grid();
}
.content {
display: flex;
flex-direction: column;
gap: $gap;
.left {
grid-row-start: 1;
grid-row-end: span 3;
}