diff --git a/src/components/flow/FlowRecent/index.tsx b/src/components/flow/FlowRecent/index.tsx index 53ac700e..755e4d04 100644 --- a/src/components/flow/FlowRecent/index.tsx +++ b/src/components/flow/FlowRecent/index.tsx @@ -1,6 +1,7 @@ import React, { FC } from 'react'; import { IFlowState } from '~/redux/flow/reducer'; import { FlowRecentItem } from '../FlowRecentItem'; +import styles from './styles.module.scss'; interface IProps { recent: IFlowState['recent']; @@ -10,8 +11,13 @@ interface IProps { const FlowRecent: FC = ({ recent, updated }) => { return ( <> - {updated && updated.map(node => )} - {recent && recent.map(node => )} +
+ {updated && updated.map(node => )} +
+ +
+ {recent && recent.map(node => )} +
); }; diff --git a/src/components/flow/FlowRecent/styles.module.scss b/src/components/flow/FlowRecent/styles.module.scss index e69de29b..3b9050d4 100644 --- a/src/components/flow/FlowRecent/styles.module.scss +++ b/src/components/flow/FlowRecent/styles.module.scss @@ -0,0 +1,11 @@ +@import "src/styles/variables"; + +.recent { + @media (max-width: $flow_hide_recents) { + display: none; + } +} + +.updates { + +} diff --git a/src/components/flow/FlowSearchResults/styles.module.scss b/src/components/flow/FlowSearchResults/styles.module.scss index 5433988d..2f736f55 100644 --- a/src/components/flow/FlowSearchResults/styles.module.scss +++ b/src/components/flow/FlowSearchResults/styles.module.scss @@ -14,6 +14,7 @@ opacity: 0.3; fill: transparentize(white, 0.7); stroke: none; + min-height: 250px; } .nothing { diff --git a/src/components/flow/FlowStamp/index.tsx b/src/components/flow/FlowStamp/index.tsx index 1b1fb640..e11e872c 100644 --- a/src/components/flow/FlowStamp/index.tsx +++ b/src/components/flow/FlowStamp/index.tsx @@ -8,6 +8,7 @@ import { FlowSearchResults } from '../FlowSearchResults'; import { Icon } from '~/components/input/Icon'; import { Group } from '~/components/containers/Group'; import { Toggle } from '~/components/input/Toggle'; +import classNames from 'classnames'; interface IProps { recent: IFlowState['recent']; @@ -80,7 +81,7 @@ const FlowStamp: FC = ({ ) : ( <> -
+
Что нового?
diff --git a/src/components/flow/FlowStamp/styles.module.scss b/src/components/flow/FlowStamp/styles.module.scss index a27f25e6..d7c061d4 100644 --- a/src/components/flow/FlowStamp/styles.module.scss +++ b/src/components/flow/FlowStamp/styles.module.scss @@ -117,3 +117,9 @@ display: none; } } + +.whatsnew { + @media (max-width: $flow_hide_recents) { + display: none; + } +} diff --git a/src/components/media/ImagePreloader/index.tsx b/src/components/media/ImagePreloader/index.tsx index 7431f315..243bdcf3 100644 --- a/src/components/media/ImagePreloader/index.tsx +++ b/src/components/media/ImagePreloader/index.tsx @@ -24,7 +24,7 @@ const ImagePreloader: FC = ({ file, onLoad, onClick, className }) => { const [hasError, setHasError] = useState(false); const onImageLoad = useCallback(() => { - setLoaded(true); + setLoaded(false); setHasError(false); if (onLoad) { diff --git a/src/layouts/FlowLayout/styles.module.scss b/src/layouts/FlowLayout/styles.module.scss index bbd78158..d79e7e53 100644 --- a/src/layouts/FlowLayout/styles.module.scss +++ b/src/layouts/FlowLayout/styles.module.scss @@ -1,7 +1,5 @@ @import "src/styles/variables"; -$fluid_cell: 250px; - .wrap { max-width: 2000px; padding: 0 40px 40px 40px; @@ -12,7 +10,7 @@ $fluid_cell: 250px; $cols: $content_width / $cell; @mixin fluid { - @media(min-width: 640px) { + @media(min-width: $content_width) { .fluid & { @content } @@ -49,10 +47,20 @@ $cols: $content_width / $cell; grid-auto-rows: $fluid_cell; } - @media (max-width: ($cell + 5) * 2) { + @media (max-width: ($cell + 10) * 3) { + grid-template-columns: repeat(auto-fill, minmax($fluid_cell - 20, 1fr)); + grid-auto-rows: $fluid_cell; + grid-template-rows: calc(50vw - 10px) $fluid_cell; + } + + @media (max-width: $cell_tablet) { + grid-template-rows: calc(50vw - 10px) auto $fluid_cell; + } + + @media (max-width: $cell_mobile) { // rework stamp, so it will be shown as smaller one on mobiles - grid-template-columns: repeat(auto-fit, minmax($cell / 1.5 - 5, 1fr)); - grid-template-rows: 50vh $cell; + grid-template-columns: repeat(auto-fill, minmax($fluid_cell*0.75, 1fr)); + grid-template-rows: calc(100vw - 10px) auto $fluid_cell; } } @@ -76,7 +84,7 @@ $cols: $content_width / $cell; grid-row-end: span 2; grid-column-end: span 4; - @media(max-width: ($cell + 5) * 3) { + @media(max-width: $content_width) { grid-column-end: -1; } } @@ -90,4 +98,9 @@ $cols: $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; + } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 7a8e4bc9..ebb6df7f 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -2,6 +2,11 @@ $header_height: 64px; $cell: 280px; +$fluid_cell: 250px; // 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 + $gap: 10px; $lab_gap: $gap * 3; $lab_gap_mobile: $gap * 2;