diff --git a/src/layouts/FlowLayout/styles.module.scss b/src/layouts/FlowLayout/styles.module.scss index a1039328..4a9bec2f 100644 --- a/src/layouts/FlowLayout/styles.module.scss +++ b/src/layouts/FlowLayout/styles.module.scss @@ -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; } diff --git a/src/layouts/ProfileLayout/index.tsx b/src/layouts/ProfileLayout/index.tsx index 48c0afdc..e2f50377 100644 --- a/src/layouts/ProfileLayout/index.tsx +++ b/src/layouts/ProfileLayout/index.tsx @@ -26,7 +26,64 @@ const ProfileLayout: FC = observer(({ username }) => { return (
-
+ { + +

+ 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. +

+

+ 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! +

+

+ 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. +

+

+ 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. +

+

+ 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. +

+ + } + + = observer(({ username }) => { isLoading={isLoading} /> -
+ - {profile.description} - -
- {}} /> -
+ {}} /> + {}} />
); diff --git a/src/layouts/ProfileLayout/styles.module.scss b/src/layouts/ProfileLayout/styles.module.scss index 5de4d336..8c8aac39 100644 --- a/src/layouts/ProfileLayout/styles.module.scss +++ b/src/layouts/ProfileLayout/styles.module.scss @@ -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; } diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index 98978bbf..e4cf1b60 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -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; } }