fixed flow search for mobile

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<IProps> = ({ recent, updated }) => {
   return (
     <>
+      <div className={styles.updates}>
         {updated && updated.map(node => <FlowRecentItem node={node} key={node.id} has_new />)}
+      </div>
+
+      <div className={styles.recent}>
         {recent && recent.map(node => <FlowRecentItem node={node} key={node.id} />)}
+      </div>
     </>
   );
 };

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 {
+
+}

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 {

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<IProps> = ({
           </>
         ) : (
           <>
-            <div className={styles.label}>
+            <div className={classNames(styles.label, styles.whatsnew)}>
               <span className={styles.label_text}>Что нового?</span>
               <span className="line" />
             </div>

src/components/flow/FlowStamp/styles.module.scss

@@ -117,3 +117,9 @@
     display: none;
   }
 }
+
+.whatsnew {
+  @media (max-width: $flow_hide_recents) {
+    display: none;
+  }
+}

src/components/media/ImagePreloader/index.tsx

@@ -24,7 +24,7 @@ const ImagePreloader: FC<IProps> = ({ file, onLoad, onClick, className }) => {
   const [hasError, setHasError] = useState(false);
 
   const onImageLoad = useCallback(() => {
-    setLoaded(true);
+    setLoaded(false);
     setHasError(false);
 
     if (onLoad) {

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;
+  }
 }

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;