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 {} -(window as any).StickySidebar = StickySidebar; -(window as any).ResizeSensor = ResizeSensor; - const Sticky: FC = ({ children }) => { const ref = useRef(null); const sb = useRef(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 = ({
- + - +
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 = ({ 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; + } }