muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

fixed sticky elements

Browse source
This commit is contained in:
Fedor Katurov 2022-01-09 21:02:30 +07:00
parent e99dc7d2c9
commit 8311d3d43d
3 changed files with 8 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/containers/node/NodeBottomBlock/index.tsx
View file

@ -16,6 +16,7 @@ import { NodeComments } from '~/containers/node/NodeComments';
import { useUserContext } from '~/utils/context/UserContextProvider'; import { useUserContext } from '~/utils/context/UserContextProvider';
import { useNodeRelatedContext } from '~/utils/context/NodeRelatedContextProvider'; import { useNodeRelatedContext } from '~/utils/context/NodeRelatedContextProvider';
import { useAuthProvider } from '~/utils/providers/AuthProvider'; import { useAuthProvider } from '~/utils/providers/AuthProvider';
import { Sticky } from '~/components/containers/Sticky';
interface IProps { interface IProps {
commentsOrder: 'ASC' | 'DESC'; commentsOrder: 'ASC' | 'DESC';
@ -52,8 +53,8 @@ const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
</Group> </Group>
<div className={styles.panel}> <div className={styles.panel}>
<StickyBox className={styles.sticky} offsetTop={72}>
<div className={styles.left}> <div className={styles.left}>
<Sticky>
<div className={styles.left_item}> <div className={styles.left_item}>
<NodeAuthorBlock user={node?.user} /> <NodeAuthorBlock user={node?.user} />
</div> </div>
@ -64,8 +65,8 @@ const NodeBottomBlock: FC<IProps> = ({ commentsOrder }) => {
<div className={styles.left_item}> <div className={styles.left_item}>
<NodeRelatedBlock isLoading={isLoadingRelated} node={node} related={related} /> <NodeRelatedBlock isLoading={isLoadingRelated} node={node} related={related} />
</div> </div>
</Sticky>
</div> </div>
</StickyBox>
</div> </div>
</Group> </Group>
</Padder> </Padder>

1
src/containers/node/NodeBottomBlock/styles.module.scss
View file

@ -34,7 +34,6 @@
@media (max-width: 1024px) { @media (max-width: 1024px) {
padding-left: 0; padding-left: 0;
padding-top: $comment_height / 2;
flex: 1 2; flex: 1 2;
} }
} }

6
src/layouts/BorisLayout/index.tsx
View file

@ -2,7 +2,6 @@ import React, { FC } from 'react';
import styles from './styles.module.scss'; import styles from './styles.module.scss';
import { Group } from '~/components/containers/Group'; import { Group } from '~/components/containers/Group';
import { Container } from '~/containers/main/Container'; import { Container } from '~/containers/main/Container';
import StickyBox from 'react-sticky-box';
import { BorisComments } from '~/containers/boris/BorisComments'; import { BorisComments } from '~/containers/boris/BorisComments';
import { Card } from '~/components/containers/Card'; import { Card } from '~/components/containers/Card';
import { SidebarRouter } from '~/containers/main/SidebarRouter'; import { SidebarRouter } from '~/containers/main/SidebarRouter';
@ -14,6 +13,7 @@ import { BorisUIDemo } from '~/components/boris/BorisUIDemo';
import boris from '~/sprites/boris_robot.svg'; import boris from '~/sprites/boris_robot.svg';
import { useAuthProvider } from '~/utils/providers/AuthProvider'; import { useAuthProvider } from '~/utils/providers/AuthProvider';
import { Sticky } from '~/components/containers/Sticky';
type IProps = { type IProps = {
title: string; title: string;
@ -56,7 +56,7 @@ const BorisLayout: FC<IProps> = ({ title, setIsBetaTester, isTester, stats, isLo
</Card> </Card>
<Group className={styles.stats}> <Group className={styles.stats}>
<StickyBox className={styles.sticky} offsetTop={72} offsetBottom={10}> <Sticky>
<BorisSidebar <BorisSidebar
isTester={isTester} isTester={isTester}
stats={stats} stats={stats}
@ -64,7 +64,7 @@ const BorisLayout: FC<IProps> = ({ title, setIsBetaTester, isTester, stats, isLo
isUser={isUser} isUser={isUser}
isLoading={isLoadingStats} isLoading={isLoadingStats}
/> />
</StickyBox> </Sticky>
</Group> </Group>
</div> </div>
</div> </div>