cybrespace/mastodon
4
3
Fork 3
Code Issues 7 Pull requests Releases 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 scrollableArea = (
<div style={{ overflowY: 'scroll', flex: '1 1 auto', overflowX: 'hidden' }} className='scrollable' onScroll={this.handleScroll}>
<div className='scrollable' onScroll={this.handleScroll}>
<div>
{statusIds.map((statusId) => {
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 (
<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} />)}
</div>
</ScrollContainer>

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

@ -39,7 +39,7 @@ const Following = React.createClass({
return (
<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} />)}
</div>
</ScrollContainer>

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

@ -48,7 +48,7 @@ const Reblogs = React.createClass({
<ColumnBackButton />
<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} />)}
</div>
</ScrollContainer>

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

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

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

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