chinwag/chinwagsocial
chinwag/chinwagsocial
2
0
Fork 0
Code Issues Pull requests Releases 4 Wiki Activity

Reduce code duplication, add touch scrolling behaviour for webkit browsers

Browse source 
on scrollable areas
This commit is contained in:
Eugen Rochko 2016-11-04 13:32:14 +01:00
parent 98c3a5e9c3
commit 6d5ef89356
6 changed files with 12 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/assets/javascripts/components/components/status_list.jsx
View file

@ -47,7 +47,7 @@ const StatusList = React.createClass({
const { statusIds, onScrollToBottom, trackScroll } = this.props; const { statusIds, onScrollToBottom, trackScroll } = this.props;
const scrollableArea = ( const scrollableArea = (
<div style={{ overflowY: 'scroll', flex: '1 1 auto', overflowX: 'hidden' }} className='scrollable' onScroll={this.handleScroll}> <div className='scrollable' onScroll={this.handleScroll}>
<div> <div>
{statusIds.map((statusId) => { {statusIds.map((statusId) => {
return <StatusContainer key={statusId} id={statusId} now={this.state.now} />; return <StatusContainer key={statusId} id={statusId} now={this.state.now} />;

2
app/assets/javascripts/components/features/followers/index.jsx
View file

@ -39,7 +39,7 @@ const Followers = React.createClass({
return ( return (
<ScrollContainer scrollKey='followers'> <ScrollContainer scrollKey='followers'>
<div style={{ overflowY: 'scroll', flex: '1 1 auto', overflowX: 'hidden' }} className='scrollable'> <div className='scrollable'>
{accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)} {accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
</div> </div>
</ScrollContainer> </ScrollContainer>

2
app/assets/javascripts/components/features/following/index.jsx
View file

@ -39,7 +39,7 @@ const Following = React.createClass({
return ( return (
<ScrollContainer scrollKey='following'> <ScrollContainer scrollKey='following'>
<div style={{ overflowY: 'scroll', flex: '1 1 auto', overflowX: 'hidden' }} className='scrollable'> <div className='scrollable'>
{accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)} {accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
</div> </div>
</ScrollContainer> </ScrollContainer>

2
app/assets/javascripts/components/features/reblogs/index.jsx
View file

@ -48,7 +48,7 @@ const Reblogs = React.createClass({
<ColumnBackButton /> <ColumnBackButton />
<ScrollContainer scrollKey='reblogs'> <ScrollContainer scrollKey='reblogs'>
<div style={{ overflowY: 'scroll', flex: '1 1 auto', overflowX: 'hidden' }} className='scrollable'> <div className='scrollable'>
{accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)} {accountIds.map(id => <AccountContainer key={id} id={id} withNote={false} />)}
</div> </div>
</ScrollContainer> </ScrollContainer>

2
app/assets/javascripts/components/features/status/index.jsx
View file

@ -114,7 +114,7 @@ const Status = React.createClass({
<ColumnBackButton /> <ColumnBackButton />
<ScrollContainer scrollKey='thread'> <ScrollContainer scrollKey='thread'>
<div style={{ overflowY: 'scroll', flex: '1 1 auto' }} className='scrollable'> <div className='scrollable'>
{ancestors} {ancestors}
<DetailedStatus status={status} me={me} onOpenMedia={this.handleOpenMedia} /> <DetailedStatus status={status} me={me} onOpenMedia={this.handleOpenMedia} />

7
app/assets/stylesheets/components.scss
View file

@ -295,3 +295,10 @@
background: #2b90d9; background: #2b90d9;
color: #fff; color: #fff;
} }
.scrollable {
overflow-y: scroll;
overflow-x: hidden;
flex: 1 1 auto;
-webkit-overflow-scrolling: touch;
}