matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make column panels sticky

Browse Source
This commit is contained in:
Alex Gleason
2021-09-20 17:53:08 -05:00
parent 3de8dcced0
commit 3a1b660269
6 changed files with 152 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
app/soapbox/pages/default_page.js
View File

@ -1,6 +1,7 @@
import React from 'react';
import { connect } from 'react-redux';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Sticky from 'react-stickynode';
import PrimaryNavigation from 'soapbox/components/primary_navigation';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
import {
@ -37,7 +38,9 @@ class DefaultPage extends ImmutablePureComponent {
<div className='columns-area__panels__pane columns-area__panels__pane--left'>
<div className='columns-area__panels__pane__inner'>
<PrimaryNavigation />
<Sticky top={65}>
<PrimaryNavigation />
</Sticky>
</div>
</div>
@ -49,29 +52,31 @@ class DefaultPage extends ImmutablePureComponent {
<div className='columns-area__panels__pane columns-area__panels__pane--right'>
<div className='columns-area__panels__pane__inner'>
{me ? (
<BundleContainer fetchComponent={FeaturesPanel}>
{Component => <Component key='features-panel' />}
<Sticky top={65}>
{me ? (
<BundleContainer fetchComponent={FeaturesPanel}>
{Component => <Component key='features-panel' />}
</BundleContainer>
) : (
<BundleContainer fetchComponent={SignUpPanel}>
{Component => <Component key='sign-up-panel' />}
</BundleContainer>
)}
{showTrendsPanel && (
<BundleContainer fetchComponent={TrendsPanel}>
{Component => <Component key='trends-panel' />}
</BundleContainer>
)}
{showWhoToFollowPanel && (
<BundleContainer fetchComponent={WhoToFollowPanel}>
{Component => <Component limit={5} key='wtf-panel' />}
</BundleContainer>
)}
<BundleContainer fetchComponent={PromoPanel}>
{Component => <Component key='promo-panel' />}
</BundleContainer>
) : (
<BundleContainer fetchComponent={SignUpPanel}>
{Component => <Component key='sign-up-panel' />}
</BundleContainer>
)}
{showTrendsPanel && (
<BundleContainer fetchComponent={TrendsPanel}>
{Component => <Component key='trends-panel' />}
</BundleContainer>
)}
{showWhoToFollowPanel && (
<BundleContainer fetchComponent={WhoToFollowPanel}>
{Component => <Component limit={5} key='wtf-panel' />}
</BundleContainer>
)}
<BundleContainer fetchComponent={PromoPanel}>
{Component => <Component key='promo-panel' />}
</BundleContainer>
<LinkFooter key='link-footer' />
<LinkFooter key='link-footer' />
</Sticky>
</div>
</div>
</div>

71
app/soapbox/pages/home_page.js
View File

@ -2,6 +2,7 @@ import React from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Sticky from 'react-stickynode';
import BundleContainer from '../features/ui/containers/bundle_container';
import ComposeFormContainer from '../features/compose/containers/compose_form_container';
import Avatar from '../components/avatar';
@ -60,7 +61,9 @@ class HomePage extends ImmutablePureComponent {
<div className='columns-area__panels__pane columns-area__panels__pane--left'>
<div className='columns-area__panels__pane__inner'>
<PrimaryNavigation />
<Sticky top={65}>
<PrimaryNavigation />
</Sticky>
</div>
</div>
@ -83,39 +86,41 @@ class HomePage extends ImmutablePureComponent {
<div className='columns-area__panels__pane columns-area__panels__pane--right'>
<div className='columns-area__panels__pane__inner'>
{me ? (
<BundleContainer fetchComponent={FeaturesPanel}>
{Component => <Component key='features-panel' />}
<Sticky top={65}>
{me ? (
<BundleContainer fetchComponent={FeaturesPanel}>
{Component => <Component key='features-panel' />}
</BundleContainer>
) : (
<BundleContainer fetchComponent={SignUpPanel}>
{Component => <Component key='sign-up-panel' />}
</BundleContainer>
)}
{showTrendsPanel && (
<BundleContainer fetchComponent={TrendsPanel}>
{Component => <Component key='trends-panel' />}
</BundleContainer>
)}
{showWhoToFollowPanel && (
<BundleContainer fetchComponent={WhoToFollowPanel}>
{Component => <Component limit={5} key='wtf-panel' />}
</BundleContainer>
)}
<BundleContainer fetchComponent={PromoPanel}>
{Component => <Component key='promo-panel' />}
</BundleContainer>
) : (
<BundleContainer fetchComponent={SignUpPanel}>
{Component => <Component key='sign-up-panel' />}
</BundleContainer>
)}
{showTrendsPanel && (
<BundleContainer fetchComponent={TrendsPanel}>
{Component => <Component key='trends-panel' />}
</BundleContainer>
)}
{showWhoToFollowPanel && (
<BundleContainer fetchComponent={WhoToFollowPanel}>
{Component => <Component limit={5} key='wtf-panel' />}
</BundleContainer>
)}
<BundleContainer fetchComponent={PromoPanel}>
{Component => <Component key='promo-panel' />}
</BundleContainer>
{showFundingPanel && (
<BundleContainer fetchComponent={FundingPanel}>
{Component => <Component key='funding-panel' />}
</BundleContainer>
)}
{showCryptoDonatePanel && (
<BundleContainer fetchComponent={CryptoDonatePanel}>
{Component => <Component limit={cryptoLimit} key='crypto-panel' />}
</BundleContainer>
)}
<LinkFooter key='link-footer' />
{showFundingPanel && (
<BundleContainer fetchComponent={FundingPanel}>
{Component => <Component key='funding-panel' />}
</BundleContainer>
)}
{showCryptoDonatePanel && (
<BundleContainer fetchComponent={CryptoDonatePanel}>
{Component => <Component limit={cryptoLimit} key='crypto-panel' />}
</BundleContainer>
)}
<LinkFooter key='link-footer' />
</Sticky>
</div>
</div>
</div>

35
app/soapbox/pages/profile_page.js
View File

@ -3,6 +3,7 @@ import { connect } from 'react-redux';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Sticky from 'react-stickynode';
import Helmet from 'soapbox/components/helmet';
import HeaderContainer from '../features/account_timeline/containers/header_container';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
@ -89,9 +90,11 @@ class ProfilePage extends ImmutablePureComponent {
<div className='columns-area__panels__pane columns-area__panels__pane--left'>
<div className='columns-area__panels__pane__inner'>
<BundleContainer fetchComponent={ProfileInfoPanel}>
{Component => <Component username={accountUsername} account={account} />}
</BundleContainer>
<Sticky top={149}>
<BundleContainer fetchComponent={ProfileInfoPanel}>
{Component => <Component username={accountUsername} account={account} />}
</BundleContainer>
</Sticky>
</div>
</div>
@ -103,20 +106,22 @@ class ProfilePage extends ImmutablePureComponent {
<div className='columns-area__panels__pane columns-area__panels__pane--right'>
<div className='columns-area__panels__pane__inner'>
<BundleContainer fetchComponent={SignUpPanel}>
{Component => <Component />}
</BundleContainer>
{account && (
<BundleContainer fetchComponent={ProfileMediaPanel}>
{Component => <Component account={account} />}
</BundleContainer>
)}
{features.suggestions && (
<BundleContainer fetchComponent={WhoToFollowPanel}>
<Sticky top={149}>
<BundleContainer fetchComponent={SignUpPanel}>
{Component => <Component />}
</BundleContainer>
)}
<LinkFooter />
{account && (
<BundleContainer fetchComponent={ProfileMediaPanel}>
{Component => <Component account={account} />}
</BundleContainer>
)}
{features.suggestions && (
<BundleContainer fetchComponent={WhoToFollowPanel}>
{Component => <Component />}
</BundleContainer>
)}
<LinkFooter />
</Sticky>
</div>
</div>

51
app/soapbox/pages/status_page.js
View File

@ -1,6 +1,7 @@
import React from 'react';
import { connect } from 'react-redux';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Sticky from 'react-stickynode';
import BundleContainer from '../features/ui/containers/bundle_container';
import PrimaryNavigation from 'soapbox/components/primary_navigation';
import {
@ -38,7 +39,9 @@ class StatusPage extends ImmutablePureComponent {
<div className='columns-area__panels__pane columns-area__panels__pane--left'>
<div className='columns-area__panels__pane__inner'>
<PrimaryNavigation />
<Sticky top={65}>
<PrimaryNavigation />
</Sticky>
</div>
</div>
@ -50,29 +53,31 @@ class StatusPage extends ImmutablePureComponent {
<div className='columns-area__panels__pane columns-area__panels__pane--right'>
<div className='columns-area__panels__pane__inner'>
{me ? (
<BundleContainer fetchComponent={FeaturesPanel}>
{Component => <Component key='features-panel' />}
<Sticky top={65}>
{me ? (
<BundleContainer fetchComponent={FeaturesPanel}>
{Component => <Component key='features-panel' />}
</BundleContainer>
) : (
<BundleContainer fetchComponent={SignUpPanel}>
{Component => <Component key='sign-up-panel' />}
</BundleContainer>
)}
{showTrendsPanel && (
<BundleContainer fetchComponent={TrendsPanel}>
{Component => <Component key='trends-panel' />}
</BundleContainer>
)}
{showWhoToFollowPanel && (
<BundleContainer fetchComponent={WhoToFollowPanel}>
{Component => <Component limit={5} key='wtf-panel' />}
</BundleContainer>
)}
<BundleContainer fetchComponent={PromoPanel}>
{Component => <Component key='promo-panel' />}
</BundleContainer>
) : (
<BundleContainer fetchComponent={SignUpPanel}>
{Component => <Component key='sign-up-panel' />}
</BundleContainer>
)}
{showTrendsPanel && (
<BundleContainer fetchComponent={TrendsPanel}>
{Component => <Component key='trends-panel' />}
</BundleContainer>
)}
{showWhoToFollowPanel && (
<BundleContainer fetchComponent={WhoToFollowPanel}>
{Component => <Component limit={5} key='wtf-panel' />}
</BundleContainer>
)}
<BundleContainer fetchComponent={PromoPanel}>
{Component => <Component key='promo-panel' />}
</BundleContainer>
<LinkFooter key='link-footer' />
<LinkFooter key='link-footer' />
</Sticky>
</div>
</div>
</div>