diff --git a/src/layouts/FlowLayout/styles.module.scss b/src/layouts/FlowLayout/styles.module.scss index 4a9bec2f..a1039328 100644 --- a/src/layouts/FlowLayout/styles.module.scss +++ b/src/layouts/FlowLayout/styles.module.scss @@ -4,6 +4,17 @@ $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; @@ -15,9 +26,8 @@ $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; @@ -28,18 +38,20 @@ $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 flow_grid() { - grid-template-rows: 40vh; - } - - @include flow_breakpoint(5); - @include flow_breakpoint(4); - @include flow_breakpoint(3) { + @include breakpoint(5); + @include breakpoint(4); + @include breakpoint(3) { grid-template-rows: calc(66cqw - #{$gap}) auto; } - @include flow_breakpoint(2) { + @include breakpoint(2) { grid-template-rows: calc(100cqw - #{$gap}) auto; } diff --git a/src/layouts/ProfileLayout/index.tsx b/src/layouts/ProfileLayout/index.tsx index e2f50377..48c0afdc 100644 --- a/src/layouts/ProfileLayout/index.tsx +++ b/src/layouts/ProfileLayout/index.tsx @@ -26,64 +26,7 @@ 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 8c8aac39..5de4d336 100644 --- a/src/layouts/ProfileLayout/styles.module.scss +++ b/src/layouts/ProfileLayout/styles.module.scss @@ -1,29 +1,17 @@ @import 'src/styles/variables'; .wrap { - @include flow_container(); + display: grid; + grid-template-columns: auto; + grid-column-gap: $gap; 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 { - @include flow_grid(); - - @include flow_breakpoint(4); - @include flow_breakpoint(3); - @include flow_breakpoint(2) { - .left { - grid-column: 1 / -1; - } - } + grid-template-columns: 250px 5fr; + display: grid; + column-gap: $gap; + row-gap: $gap; } .row { @@ -31,7 +19,20 @@ height: 100%; } -.left { - grid-row-start: 1; - grid-row-end: span 3; +.description { + font: $font_14_semibold; +} + +.stamp { + grid-row-end: span 2; +} + +.nodes { + @include flow_grid(); +} + +.content { + display: flex; + flex-direction: column; + gap: $gap; } diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss index ac2264b7..98978bbf 100644 --- a/src/styles/_mixins.scss +++ b/src/styles/_mixins.scss @@ -1,25 +1,19 @@ @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 { @@ -28,9 +22,7 @@ } @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; } @@ -44,9 +36,7 @@ } @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() { @@ -200,49 +190,49 @@ cursor: pointer; } -/** Creates container for container-query flow. - -Should wrap div with @flow_grid and @flow_breakpoint mixins -**/ -@mixin flow_container { - container: sizer / inline-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; - gap: #{$gap}; - grid-template-columns: repeat(5, 1fr); - grid-auto-rows: calc((100cqw - 4 * #{$gap} / 2) / 5); + + grid-template-columns: repeat(auto-fit, minmax($cell - 5, 1fr)); + grid-auto-flow: row dense; + grid-column-gap: $gap; + grid-row-gap: $gap; + grid-auto-rows: $cell; - @content; -} + // 4 cells + @media (max-width: ($cell * 5 + $gap * 4 + 55)) { + grid-auto-rows: calc(25vw - 30px); + } -/** Makes a breakpoint for target cell width, + // 3 cells + @media (max-width: ($cell * 4 + $gap * 3 + 55)) { + grid-auto-rows: calc(33vw - 30px); + } -Pass your rules for that breakpoint in @content: + // 2 cells + @media (max-width: ($cell * 3 + $gap * 2 + 55)) { + grid-auto-rows: calc(50vw - 40px); + } -@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; + // < 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); } }