mirror of
https://github.com/muerwre/vault-frontend.git
synced 2025-04-24 20:36:40 +07:00
made first good profile layout
This commit is contained in:
Fedor Katurov
parent
42f8f96e34
commit
1d0ecc54a9
4 changed files with 144 additions and 93 deletions
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,19 +1,25 @@
|
|||
@use 'sass:math';
|
||||
|
||||
@mixin outer_shadow() {
|
||||
box-shadow: inset $gray_90 1px 1px, transparentize(black, 0.8) 1px 1px,
|
||||
box-shadow:
|
||||
inset $gray_90 1px 1px,
|
||||
transparentize(black, 0.8) 1px 1px,
|
||||
transparentize(black, 0.6) 0 1px 5px;
|
||||
}
|
||||
|
||||
// same as outer shadow, but higher
|
||||
@mixin dropdown_shadow {
|
||||
box-shadow: inset $gray_90 1px 1px, transparentize(black, 0.8) 1px 1px,
|
||||
box-shadow:
|
||||
inset $gray_90 1px 1px,
|
||||
transparentize(black, 0.8) 1px 1px,
|
||||
transparentize(black, 0.6) 5px 5px 10px;
|
||||
}
|
||||
|
||||
@mixin row_shadow() {
|
||||
&:not(:last-child) {
|
||||
box-shadow: $gray_90 0 1px, inset transparentize(black, 0.8) 0 -1px;
|
||||
box-shadow:
|
||||
$gray_90 0 1px,
|
||||
inset transparentize(black, 0.8) 0 -1px;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
|
|
@ -22,7 +28,9 @@
|
|||
}
|
||||
|
||||
@mixin inner_shadow() {
|
||||
box-shadow: inset $gray_90 -1px -1px, inset transparentize(black, 0.9) 1px 1px,
|
||||
box-shadow:
|
||||
inset $gray_90 -1px -1px,
|
||||
inset transparentize(black, 0.9) 1px 1px,
|
||||
inset transparentize(black, 0.9) 0 0 10px;
|
||||
}
|
||||
|
||||
|
|
@ -36,7 +44,9 @@
|
|||
}
|
||||
|
||||
@mixin input_shadow() {
|
||||
box-shadow: inset $gray_90 0 -1px, inset transparentize(black, 0.8) 0 1px;
|
||||
box-shadow:
|
||||
inset $gray_90 0 -1px,
|
||||
inset transparentize(black, 0.8) 0 1px;
|
||||
}
|
||||
|
||||
@mixin modal_mixin() {
|
||||
|
|
@ -190,49 +200,49 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
/** Creates container for container-query flow.
|
||||
|
||||
Should wrap div with @flow_grid and @flow_breakpoint mixins
|
||||
**/
|
||||
@mixin flow_container {
|
||||
container: sizer / size;
|
||||
}
|
||||
|
||||
/** Setups flow grid.
|
||||
|
||||
Should be wrapped with div that uses @include flow_container() for correct work
|
||||
|
||||
Pass your custom rows here, like:
|
||||
|
||||
@include flow_grid {
|
||||
grid-template-rows: 220px; // will add 220px first row
|
||||
}
|
||||
**/
|
||||
@mixin flow_grid {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
display: grid;
|
||||
|
||||
grid-template-columns: repeat(auto-fit, minmax($cell - 5, 1fr));
|
||||
|
||||
gap: #{$gap};
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
grid-auto-rows: calc((100cqw - 4 * #{$gap} / 2) / 5);
|
||||
grid-auto-flow: row dense;
|
||||
grid-column-gap: $gap;
|
||||
grid-row-gap: $gap;
|
||||
grid-auto-rows: $cell;
|
||||
|
||||
// 4 cells
|
||||
@media (max-width: ($cell * 5 + $gap * 4 + 55)) {
|
||||
grid-auto-rows: calc(25vw - 30px);
|
||||
}
|
||||
@content;
|
||||
}
|
||||
|
||||
// 3 cells
|
||||
@media (max-width: ($cell * 4 + $gap * 3 + 55)) {
|
||||
grid-auto-rows: calc(33vw - 30px);
|
||||
}
|
||||
/** Makes a breakpoint for target cell width,
|
||||
|
||||
// 2 cells
|
||||
@media (max-width: ($cell * 3 + $gap * 2 + 55)) {
|
||||
grid-auto-rows: calc(50vw - 40px);
|
||||
}
|
||||
Pass your rules for that breakpoint in @content:
|
||||
|
||||
// < 870px
|
||||
@media (max-width: (($cell + 10) * 3)) {
|
||||
grid-template-columns: repeat(auto-fill, minmax($fluid_cell - 20, 1fr));
|
||||
grid-template-rows: calc(50vw - 10px) $fluid_cell;
|
||||
}
|
||||
|
||||
// < 776px
|
||||
@media (max-width: $cell_tablet) {
|
||||
grid-template-rows: calc(66vw - 10px) auto calc(50vw - 40px);
|
||||
}
|
||||
|
||||
// < 520px
|
||||
@media (max-width: $cell_mobile) {
|
||||
grid-template-columns: repeat(auto-fill, minmax(calc(50vw - 20px), 1fr));
|
||||
grid-template-rows: calc(100vw - 10px) auto;
|
||||
grid-auto-rows: calc(50vw - 10px);
|
||||
@include flow_breakpoint(2) { // defines breakpoint for 2 cells
|
||||
background: red; // will paint element red at 2 cells resolution;
|
||||
}
|
||||
**/
|
||||
@mixin flow_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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue