diff --git a/src/components/common/NodeHorizontalCard/index.tsx b/src/components/common/NodeHorizontalCard/index.tsx index 309110ea..d132ee90 100644 --- a/src/components/common/NodeHorizontalCard/index.tsx +++ b/src/components/common/NodeHorizontalCard/index.tsx @@ -22,11 +22,7 @@ const NodeHorizontalCard: FC = ({ node, hasNew, onClick }) => (
= ({ item, isNew }) => (
diff --git a/src/containers/flow/FlowStamp/components/FlowRecent/styles.module.scss b/src/containers/flow/FlowStamp/components/FlowRecent/styles.module.scss index 4925f482..3b9050d4 100644 --- a/src/containers/flow/FlowStamp/components/FlowRecent/styles.module.scss +++ b/src/containers/flow/FlowStamp/components/FlowRecent/styles.module.scss @@ -1,7 +1,11 @@ -@import 'src/styles/variables'; +@import "src/styles/variables"; .recent { - @container sizer (width < #{$flow_hide_recents}) { + @media (max-width: $flow_hide_recents) { display: none; } } + +.updates { + +} diff --git a/src/containers/flow/FlowStamp/styles.module.scss b/src/containers/flow/FlowStamp/styles.module.scss index 550094c3..7140b0f2 100644 --- a/src/containers/flow/FlowStamp/styles.module.scss +++ b/src/containers/flow/FlowStamp/styles.module.scss @@ -108,7 +108,7 @@ } .whatsnew { - @container sizer (width < #{$flow_hide_recents}) { + @media (max-width: $flow_hide_recents) { display: none; } } diff --git a/src/containers/node/NodeComments/index.tsx b/src/containers/node/NodeComments/index.tsx index 816f6d19..71c3a547 100644 --- a/src/containers/node/NodeComments/index.tsx +++ b/src/containers/node/NodeComments/index.tsx @@ -68,7 +68,6 @@ const NodeComments: FC = observer(({ order }) => { return null; } - /** Scrolls down to new comments or specific one from anchor */ useEffect(() => { const anchor = location.hash?.replace('#', ''); diff --git a/src/layouts/FlowLayout/styles.module.scss b/src/layouts/FlowLayout/styles.module.scss index a1039328..c3b0d2e0 100644 --- a/src/layouts/FlowLayout/styles.module.scss +++ b/src/layouts/FlowLayout/styles.module.scss @@ -2,19 +2,6 @@ @import 'src/styles/variables'; -$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; @@ -27,7 +14,6 @@ $cols: math.div($content_width, $cell); .container { @include container; margin-top: $page_top_offset; - container: sizer / size; @include tablet { padding: 0 $gap; @@ -36,37 +22,9 @@ $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; + grid-template-rows: 50vh; - @include breakpoint(5); - @include breakpoint(4); - @include breakpoint(3) { - grid-template-rows: calc(66cqw - #{$gap}) auto; - } - - @include breakpoint(2) { - grid-template-rows: calc(100cqw - #{$gap}) auto; - } - - @container sizer (width < #{$flow_hide_recents}) { - .stamp { - grid-column-start: 1; - grid-row-end: span 1; - } - - .login { - display: flex; - grid-column: 1 / 2; - grid-row-end: span 2; - } - } + @include flow_grid; } .pad_last { @@ -94,6 +52,11 @@ $cols: math.div($content_width, $cell); justify-content: stretch; overflow: hidden; position: relative; + + @media (max-width: $flow_hide_recents) { + grid-column-start: 1; + grid-row-end: span 1; + } } .login { @@ -109,4 +72,10 @@ $cols: math.div($content_width, $cell); @include desktop { display: none; } + + @media (max-width: $flow_hide_recents) { + display: flex; + grid-column: 1 / 2; + grid-row-end: span 2; + } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 14360c91..caf9a29f 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -4,19 +4,14 @@ @import 'mixins'; @import 'animations'; -$gap: 8px; - $header_height: 64px; $cell: 250px; $fluid_cell: $cell; // smaller cell for fluid flow $cell_tablet: ($fluid_cell + 5) * 3 + 10; // flow breakpoint for tablet $cell_mobile: ($fluid_cell + 5) * 2 + 10; // flow breakpoint for mobile +$flow_hide_recents: $cell_tablet; // breakpoint, there recents will be hidden -$target_flow_cell_width: 225px; -$flow_tablet_cell_count: 3; -$flow_hide_recents: $target_flow_cell_width * $flow_tablet_cell_count + - ($flow_tablet_cell_count - 1) * $gap; - +$gap: 10px; $lab_gap: $gap * 2; $lab_gap_mobile: $gap * 2; $grid_line: 5px; @@ -38,16 +33,11 @@ $panel_size: 64px; $node_title_height: $panel_size; $upload_button_height: 52px; -$shadow_depth_1: - transparentize(black, 0.8) 0 1px, - inset $gray_90 0 1px; -$shadow_depth_2: - transparentize(black, 0.8) 0 2px, - inset $gray_90 0 1px; +$shadow_depth_1: transparentize(black, 0.8) 0 1px, inset $gray_90 0 1px; +$shadow_depth_2: transparentize(black, 0.8) 0 2px, inset $gray_90 0 1px; $comment_shadow: $shadow_depth_2; -$node_shadow: - transparentize(black, 0.8) 0 2px, +$node_shadow: transparentize(black, 0.8) 0 2px, transparentize(black, 0.8) 0 2px 4px; $tag_height: 26px;