From 11325b96b31bda9e314ab17dfd3ac3cbfbcefc50 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Tue, 9 Mar 2021 13:42:36 +0700
Subject: [PATCH] fixed sidebar

---
 src/components/containers/Sticky/index.tsx    | 12 +++--
 src/components/node/NodeBottomBlock/index.tsx |  8 ++--
 .../node/NodeBottomBlock/styles.module.scss   | 48 +++++++++++++++++++
 .../node/NodeImageSwiperBlock/index.tsx       |  1 +
 .../main/Container/styles.module.scss         |  4 ++
 5 files changed, 64 insertions(+), 9 deletions(-)
 create mode 100644 src/components/node/NodeBottomBlock/styles.module.scss

diff --git a/src/components/containers/Sticky/index.tsx b/src/components/containers/Sticky/index.tsx
index f3e817d5..dfeda268 100644
--- a/src/components/containers/Sticky/index.tsx
+++ b/src/components/containers/Sticky/index.tsx
@@ -1,14 +1,16 @@
 import React, { DetailsHTMLAttributes, FC, useEffect, useRef } from 'react';
 import styles from './styles.module.scss';
-import StickySidebar from 'sticky-sidebar';
-import classnames from 'classnames';
+
 import ResizeSensor from 'resize-sensor';
+(window as any).ResizeSensor = ResizeSensor;
+
+import StickySidebar from 'sticky-sidebar';
+(window as any).StickySidebar = StickySidebar;
+
+import classnames from 'classnames';
 
 interface IProps extends DetailsHTMLAttributes<HTMLDivElement> {}
 
-(window as any).StickySidebar = StickySidebar;
-(window as any).ResizeSensor = ResizeSensor;
-
 const Sticky: FC<IProps> = ({ children }) => {
   const ref = useRef(null);
   const sb = useRef<StickySidebar>(null);
diff --git a/src/components/node/NodeBottomBlock/index.tsx b/src/components/node/NodeBottomBlock/index.tsx
index 73a114e6..d06da73c 100644
--- a/src/components/node/NodeBottomBlock/index.tsx
+++ b/src/components/node/NodeBottomBlock/index.tsx
@@ -2,16 +2,16 @@ import React, { FC } from 'react';
 import { NodeDeletedBadge } from '~/components/node/NodeDeletedBadge';
 import { Group } from '~/components/containers/Group';
 import { Padder } from '~/components/containers/Padder';
-import styles from '~/containers/node/NodeLayout/styles.module.scss';
 import { NodeCommentsBlock } from '~/components/node/NodeCommentsBlock';
 import { NodeCommentForm } from '~/components/node/NodeCommentForm';
-import { Sticky } from '~/components/containers/Sticky';
 import { NodeRelatedBlock } from '~/components/node/NodeRelatedBlock';
 import { useNodeBlocks } from '~/utils/hooks/node/useNodeBlocks';
 import { IComment, INode } from '~/redux/types';
 import { useUser } from '~/utils/hooks/user/userUser';
 import { NodeTagsBlock } from '~/components/node/NodeTagsBlock';
 import { INodeRelated } from '~/redux/node/types';
+import StickyBox from 'react-sticky-box/dist/esnext';
+import styles from './styles.module.scss';
 
 interface IProps {
   node: INode;
@@ -59,12 +59,12 @@ const NodeBottomBlock: FC<IProps> = ({
           </Group>
 
           <div className={styles.panel}>
-            <Sticky>
+            <StickyBox className={styles.sticky} offsetTop={72}>
               <Group style={{ flex: 1, minWidth: 0 }}>
                 <NodeTagsBlock node={node} isLoading={isLoading} />
                 <NodeRelatedBlock isLoading={isLoading} node={node} related={related} />
               </Group>
-            </Sticky>
+            </StickyBox>
           </div>
         </Group>
       </Padder>
diff --git a/src/components/node/NodeBottomBlock/styles.module.scss b/src/components/node/NodeBottomBlock/styles.module.scss
new file mode 100644
index 00000000..a34d0d9b
--- /dev/null
+++ b/src/components/node/NodeBottomBlock/styles.module.scss
@@ -0,0 +1,48 @@
+@import "~/styles/variables.scss";
+
+.sticky {
+  width: 100%;
+}
+
+.content {
+  align-items: stretch !important;
+  @include vertical_at_tablet;
+}
+
+.comments {
+  flex: 3 1;
+  min-width: 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: flex-start;
+  flex-direction: column;
+
+  @media (max-width: 1024px) {
+    flex: 2 1;
+  }
+}
+
+
+.panel {
+  flex: 1 3;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding-left: $gap / 2;
+  min-width: 0;
+  position: relative;
+  z-index: 10;
+
+  @media (max-width: 1024px) {
+    padding-left: 0;
+    padding-top: $comment_height / 2;
+    flex: 1 2;
+  }
+}
+
+.buttons {
+  background: $node_buttons_bg;
+  flex: 1;
+  border-radius: $panel_radius;
+  box-shadow: $comment_shadow;
+}
diff --git a/src/components/node/NodeImageSwiperBlock/index.tsx b/src/components/node/NodeImageSwiperBlock/index.tsx
index da2b51f7..75ff0291 100644
--- a/src/components/node/NodeImageSwiperBlock/index.tsx
+++ b/src/components/node/NodeImageSwiperBlock/index.tsx
@@ -75,6 +75,7 @@ const NodeImageSwiperBlock: FC<IProps> = ({ node }) => {
         observeParents
         resizeObserver
         watchOverflow
+        updateOnImagesReady
         onInit={resetSwiper}
         zoom
       >
diff --git a/src/containers/main/Container/styles.module.scss b/src/containers/main/Container/styles.module.scss
index cbf85b78..736fa115 100644
--- a/src/containers/main/Container/styles.module.scss
+++ b/src/containers/main/Container/styles.module.scss
@@ -9,4 +9,8 @@
   @include tablet {
     padding: 0;
   }
+
+  @media (max-width: $content_width + $gap * 4) {
+    padding: 0;
+  }
 }