#35 added containers everywhere

src/components/node/NodeImageSwiperBlock/index.tsx

@@ -0,0 +1,9 @@
+import React, { FC } from 'react';
+
+interface IProps {}
+
+const NodeImageSwiperBlock: FC<IProps> = () => (
+    <div>SWIPER</div>
+)
+
+export { NodeImageSwiperBlock };

src/containers/flow/FlowLayout/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useCallback } from 'react';
+import React, { FC, useCallback, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { FlowGrid } from '~/components/flow/FlowGrid';
 import { selectFlow } from '~/redux/flow/selectors';
@@ -10,6 +10,7 @@ import { FlowHero } from '~/components/flow/FlowHero';
 import styles from './styles.module.scss';
 import { IState } from '~/redux/store';
 import { FlowStamp } from '~/components/flow/FlowStamp';
+import { Container } from '~/containers/main/Container';
 
 const mapStateToProps = (state: IState) => ({
   flow: pick(['nodes', 'heroes', 'recent', 'updated', 'is_loading', 'search'], selectFlow(state)),
@@ -61,6 +62,7 @@ const FlowLayoutUnconnected: FC<IProps> = ({
   }, []);
 
   return (
+    <Container>
       <div className={styles.grid}>
         <div className={styles.hero}>
           <FlowHero heroes={heroes} />
@@ -83,6 +85,7 @@ const FlowLayoutUnconnected: FC<IProps> = ({
           onChangeCellView={flowSetCellView}
         />
       </div>
+    </Container>
   );
 };
 

src/containers/main/Container/index.tsx

@@ -0,0 +1,13 @@
+import React, { FC } from 'react';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+
+interface IProps {
+  className?: string;
+}
+
+const Container: FC<IProps> = ({ className, children }) => (
+  <div className={classNames(styles.container, className)}>{children}</div>
+);
+
+export { Container };

src/containers/main/Container/styles.module.scss

@@ -0,0 +1,7 @@
+@import "~/styles/variables.scss";
+
+.container {
+  width: 100%;
+  max-width: $content_width;
+  margin: auto;
+}

src/containers/main/MainLayout/styles.module.scss

@@ -19,7 +19,6 @@
   flex: 1;
   position: relative;
   width: 100%;
-  max-width: $content_width;
   display: flex;
   padding-bottom: 29px;
   flex-direction: column;

src/containers/node/BorisLayout/index.tsx

@@ -19,6 +19,7 @@ import { selectBorisStats } from '~/redux/boris/selectors';
 import { authSetUser } from '~/redux/auth/actions';
 import { nodeLoadNode } from '~/redux/node/actions';
 import { borisLoadStats } from '~/redux/boris/actions';
+import { Container } from '~/containers/main/Container';
 
 type IProps = {};
 
@@ -55,6 +56,7 @@ const BorisLayout: FC<IProps> = () => {
   }, [dispatch]);
 
   return (
+    <Container>
       <div className={styles.wrap}>
         <div className={styles.cover} />
 
@@ -108,6 +110,7 @@ const BorisLayout: FC<IProps> = () => {
           </Group>
         </div>
       </div>
+    </Container>
   );
 };
 

src/containers/node/NodeLayout/index.tsx

@@ -12,14 +12,9 @@ import { NodeNoComments } from '~/components/node/NodeNoComments';
 import { NodeRelated } from '~/components/node/NodeRelated';
 import { NodeComments } from '~/components/node/NodeComments';
 import { NodeTags } from '~/components/node/NodeTags';
-import {
-  INodeComponentProps,
-  NODE_COMPONENTS,
-  NODE_HEADS,
-  NODE_INLINES,
-} from '~/redux/node/constants';
+import { INodeComponentProps, NODE_COMPONENTS, NODE_HEADS, NODE_INLINES } from '~/redux/node/constants';
 import { selectUser } from '~/redux/auth/selectors';
-import { path, pick, prop } from 'ramda';
+import { pick, prop } from 'ramda';
 import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholder';
 import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge';
 import { NodeCommentForm } from '~/components/node/NodeCommentForm';
@@ -36,6 +31,7 @@ import { SidebarRouter } from '~/containers/main/SidebarRouter';
 import { ITag } from '~/redux/types';
 import { URLS } from '~/constants/urls';
 import { useShallowSelect } from '~/utils/hooks/useShallowSelect';
+import { Container } from '~/containers/main/Container';
 
 const mapStateToProps = (state: IState) => ({
   node: selectNode(state),
@@ -154,12 +150,21 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
       <>
         {!!head && createNodeBlock(head)}
 
+        <Container>
           <Card className={styles.node} seamless>
             {!!block && createNodeBlock(block)}
 
             <NodePanel
               node={pick(
-              ['title', 'user', 'is_liked', 'is_heroic', 'deleted_at', 'created_at', 'like_count'],
+                [
+                  'title',
+                  'user',
+                  'is_liked',
+                  'is_heroic',
+                  'deleted_at',
+                  'created_at',
+                  'like_count',
+                ],
                 node
               )}
               layout={layout}
@@ -219,7 +224,9 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
                               .map(album => (
                                 <NodeRelated
                                   title={
-                                  <Link to={URLS.NODE_TAG_URL(node.id!, encodeURIComponent(album))}>
+                                    <Link
+                                      to={URLS.NODE_TAG_URL(node.id!, encodeURIComponent(album))}
+                                    >
                                       {album}
                                     </Link>
                                   }
@@ -244,6 +251,7 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
 
             <Footer />
           </Card>
+        </Container>
 
         <SidebarRouter prefix="/post:id" />
       </>