cleanup

src/components/main/Footer/index.tsx

@@ -0,0 +1,13 @@
+import React, { FC, memo } from 'react';
+import styles from './styles.scss';
+
+interface IProps {}
+
+const Footer: FC<IProps> = memo(() => (
+  <div className={styles.footer}>
+    <div className={styles.slogan}>Уделяй больше времени тишине. Спасибо</div>
+    <div className={styles.copy}>2009 - {new Date().getFullYear()}</div>
+  </div>
+));
+
+export { Footer };

src/components/main/Footer/styles.scss

@@ -0,0 +1,23 @@
+.footer {
+  display: flex;
+  flex-direction: row;
+  font: $font_12_semibold;
+  background: transparentize(black, 0.9);
+  border-radius: 0 0 $radius $radius;
+  align-items: center;
+  text-transform: uppercase;
+  color: darken(white, 80%);
+  padding-top: 2px;
+  box-sizing: border-box;
+
+  @include outer_shadow();
+}
+
+.slogan {
+  flex: 1;
+  padding: $gap;
+}
+
+.copy {
+  padding: $gap;
+}

src/containers/main/MainLayout/styles.scss

@@ -19,6 +19,6 @@
   width: 100%;
   max-width: $content_width;
   display: flex;
-  padding-bottom: 64px;
+  padding-bottom: 29px;
   flex-direction: column;
 }

src/containers/node/BorisLayout/index.tsx

@@ -14,6 +14,8 @@ import { NodeCommentForm } from '~/components/node/NodeCommentForm';
 import * as NODE_ACTIONS from '~/redux/node/actions';
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import isBefore from 'date-fns/isBefore';
+import { Card } from '~/components/containers/Card';
+import { Footer } from '~/components/main/Footer';
 
 const mapStateToProps = state => ({
   node: selectNode(state),
@@ -68,33 +70,13 @@ const BorisLayoutUnconnected: FC<IProps> = ({
         <div className={styles.caption}>
           <div className={styles.caption_text}>{title}</div>
         </div>
-        <img src={boris} />
+
+        <img src={boris} alt="Борис" />
       </div>
 
       <div className={styles.container}>
-        <div className={styles.column}>
+        <Card className={styles.content}>
-          <div className={styles.daygrid}>
+          <Group className={styles.grid}>
-            <div className={styles.label}>Убежищу сегодня:</div>
-            <div className={styles.day}>10</div>
-            <div>лет</div>
-            <div className={styles.day}>2</div>
-            <div>месяца</div>
-
-            <div className={styles.line} />
-
-            <div className={styles.label}>Мы собрали:</div>
-            <div className={styles.day}>2374</div>
-            <div>поста</div>
-            <div className={styles.day}>14765</div>
-            <div>комментариев</div>
-            <div className={styles.day}>4260</div>
-            <div>файла</div>
-            <div className={styles.day}>54</div>
-            <div>жителя</div>
-          </div>
-        </div>
-
-        <Group className={styles.content}>
             {is_user && <NodeCommentForm is_before />}
 
             {is_loading_comments ? (
@@ -112,14 +94,14 @@ const BorisLayoutUnconnected: FC<IProps> = ({
               />
             )}
           </Group>
+
+          <Footer />
+        </Card>
       </div>
     </div>
   );
 };
 
-const BorisLayout = connect(
+const BorisLayout = connect(mapStateToProps, mapDispatchToProps)(BorisLayoutUnconnected);
-  mapStateToProps,
-  mapDispatchToProps
-)(BorisLayoutUnconnected);
 
 export { BorisLayout };

src/containers/node/BorisLayout/styles.scss

@@ -8,21 +8,15 @@
 .content {
   flex: 3;
   z-index: 2;
-  padding: $gap;
-  background: $content_bg;
   border-radius: $radius;
   flex: 0 1 $limited_width;
+  padding: 0;
+  background: $node_bg;
+  box-shadow: inset transparentize(mix($wisegreen, white, 60%), 0.6) 0 1px;
 }
 
-.column {
+.grid {
-  flex: 1;
+  padding: $gap;
-  background: $content_bg;
-  position: relative;
-  z-index: 2;
-  margin-right: $gap;
-  border-radius: $radius;
-  padding: $gap * 2;
-  display: none;
 }
 
 .cover {
@@ -33,7 +27,7 @@
   width: 100%;
   height: 100vh;
   overflow: hidden;
-  background: 50% 0% no-repeat url("~/sprites/boris_bg.svg");
+  background: 50% 0% no-repeat url('~/sprites/boris_bg.svg');
   background-size: cover;
 }
 
@@ -41,32 +35,6 @@
   font-size: 2em;
 }
 
-.daygrid {
-  display: grid;
-  grid-template-columns: 1fr 100%;
-  column-gap: $gap;
-  align-items: center;
-}
-
-.day {
-  font-size: 2em;
-  font-weight: 600;
-  text-align: right;
-}
-
-.label {
-  font: $font_14_regular;
-  text-transform: uppercase;
-  margin-bottom: 5px;
-  opacity: 0.5;
-  grid-column: 1/3;
-}
-
-.line {
-  grid-column: 1/3;
-  height: $gap * 4;
-}
-
 .container {
   display: flex;
   align-items: flex-start;
@@ -74,11 +42,6 @@
   flex-direction: row;
   flex: 0 1 $limited_width;
   width: 100%;
-  // margin: auto;
-
-  // @include tablet {
-  // width: 100%;
-  // }
 }
 
 .image {

src/containers/node/NodeLayout/index.tsx

@@ -21,6 +21,7 @@ import { NodeRelatedPlaceholder } from '~/components/node/NodeRelated/placeholde
 import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge';
 import { NodeCommentForm } from '~/components/node/NodeCommentForm';
 import { Sticky } from '~/components/containers/Sticky';
+import { Footer } from '~/components/main/Footer';
 
 const mapStateToProps = state => ({
   node: selectNode(state),
@@ -186,6 +187,8 @@ const NodeLayoutUnconnected: FC<IProps> = memo(
             </Padder>
           </Group>
         )}
+
+        <Footer />
       </Card>
     );
   }