From efdc756d21e3a18c490aa7180d6760093e6f3c27 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Mon, 8 Jun 2020 13:09:22 +0700
Subject: [PATCH] added stats panel markup

---
 src/containers/node/BorisLayout/index.tsx   | 14 ++++++
 src/containers/node/BorisLayout/styles.scss | 48 ++++++++++++++++++---
 2 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/src/containers/node/BorisLayout/index.tsx b/src/containers/node/BorisLayout/index.tsx
index 191e31f6..515bd098 100644
--- a/src/containers/node/BorisLayout/index.tsx
+++ b/src/containers/node/BorisLayout/index.tsx
@@ -17,6 +17,8 @@ import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import isBefore from 'date-fns/isBefore';
 import { Card } from '~/components/containers/Card';
 import { Footer } from '~/components/main/Footer';
+import { Filler } from '~/components/containers/Filler';
+import { Sticky } from '~/components/containers/Sticky';
 
 const mapStateToProps = state => ({
   node: selectNode(state),
@@ -101,6 +103,18 @@ const BorisLayoutUnconnected: FC<IProps> = ({
 
           <Footer />
         </Card>
+
+        <Group className={styles.stats}>
+          <Sticky>
+            <Group className={styles.stats__container}>
+              <div className={styles.stats__about}>
+                <p>Здесь мы сидим и слушаем всё, что вас беспокоит.</p>
+                <p>А потом чиним долгими дождливыми вечерами.</p>
+              </div>
+              <div className={styles.stats__title}>Изменения</div>
+            </Group>
+          </Sticky>
+        </Group>
       </div>
     </div>
   );
diff --git a/src/containers/node/BorisLayout/styles.scss b/src/containers/node/BorisLayout/styles.scss
index a62b3215..48b5d308 100644
--- a/src/containers/node/BorisLayout/styles.scss
+++ b/src/containers/node/BorisLayout/styles.scss
@@ -6,13 +6,17 @@
 }
 
 .content {
-  flex: 3;
+  flex: 4;
   z-index: 2;
-  border-radius: $radius;
-  flex: 0 1 $limited_width;
+  border-radius: $radius 0 0 $radius;
+  // flex: 0 1 $limited_width;
   padding: 0;
   background: $node_bg;
   box-shadow: inset transparentize(mix($wisegreen, white, 60%), 0.6) 0 1px;
+
+  @include desktop {
+    flex: 2;
+  }
 }
 
 .grid {
@@ -40,8 +44,11 @@
   align-items: flex-start;
   justify-content: center;
   flex-direction: row;
-  flex: 0 1 $limited_width;
   width: 100%;
+
+  @include tablet {
+    flex-direction: column;
+  }
 }
 
 .image {
@@ -76,7 +83,7 @@
   left: 50%;
   bottom: 0;
   width: 100%;
-  max-width: $limited_width;
+  // max-width: $limited_width;
   height: 100%;
   display: flex;
   align-items: flex-start;
@@ -104,3 +111,34 @@
   max-width: 400px;
   text-transform: uppercase;
 }
+
+.stats {
+  position: relative;
+  z-index: 2;
+  align-self: stretch;
+  flex-direction: column;
+
+  &__container {
+    background: darken($content_bg, 4%);
+    border-radius: 0 $radius $radius 0;
+    box-shadow: inset transparentize(mix($wisegreen, white, 60%), 0.6) 0 1px;
+    padding: $gap;
+    box-sizing: border-box;
+    flex: 0 0 auto;
+  }
+
+  &__title {
+    font: $font_12_semibold;
+    text-transform: uppercase;
+    opacity: 0.3;
+    margin-top: 16px !important;
+  }
+
+  &__about {
+    line-height: 1.4em;
+
+    p {
+      margin-bottom: 8px;
+    }
+  }
+}