gearheads/mastodon
Archived
2
0
Fork 0
Code Releases 4 Activity

Responsively changing layout to single-column + nav on smaller screens

Browse source
This commit is contained in:
Eugen Rochko 2016-10-12 13:17:17 +02:00
parent e2ff39bf5d
commit 45776b55b0
13 changed files with 220 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

13
app/assets/javascripts/components/features/ui/components/column.jsx
View file

@ -29,6 +29,15 @@ const scrollTop = (node) => {
};
};
const style = {
height: '100%',
boxSizing: 'border-box',
flex: '0 0 auto',
background: '#282c37',
display: 'flex',
flexDirection: 'column'
};
const Column = React.createClass({
propTypes: {
@ -56,10 +65,8 @@ const Column = React.createClass({
header = <ColumnHeader icon={this.props.icon} type={this.props.heading} onClick={this.handleHeaderClick} />;
}
const style = { width: '330px', flex: '0 0 auto', background: '#282c37', margin: '10px', marginRight: '0', marginBottom: '0', display: 'flex', flexDirection: 'column' };
return (
<div style={style} onWheel={this.handleWheel}>
<div className='column' style={style} onWheel={this.handleWheel}>
{header}
{this.props.children}
</div>