treehouse
/
mastodon
21
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

Pass in correct "singleColumn" prop value when auto-columns is not used.

lolsob-rspec
Surinna Curtis 2017-06-24 14:22:55 -05:00
parent e5b6c21f32
commit b01b111ca1
2 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/javascript/mastodon/features/ui/index.js
View File

@ -74,6 +74,15 @@ class WrappedRoute extends React.Component {
} }
function columnClass(columns) {
switch (columns) {
case "auto": return "auto-columns";
case "single": return "single-column";
case "multiple": return "multi-columns";
default: return "auto-columns";
}
}
@connect() @connect()
export default class UI extends React.PureComponent { export default class UI extends React.PureComponent {
@ -178,10 +187,12 @@ export default class UI extends React.PureComponent {
const { width, draggingOver } = this.state; const { width, draggingOver } = this.state;
const { children } = this.props; const { children } = this.props;
const columns = "auto";
return ( return (
<div className='ui auto-columns' ref={this.setRef}> <div className={'ui ' + columnClass(columns)} ref={this.setRef}>
<TabsBar /> <TabsBar />
<ColumnsAreaContainer singleColumn={isMobile(width)}> <ColumnsAreaContainer singleColumn={isMobile(width, columns)}>
<WrappedSwitch> <WrappedSwitch>
<Redirect from='/' to='/getting-started' exact /> <Redirect from='/' to='/getting-started' exact />
<WrappedRoute path='/getting-started' component={GettingStarted} content={children} /> <WrappedRoute path='/getting-started' component={GettingStarted} content={children} />

9
app/javascript/mastodon/is_mobile.js
View File

@ -1,7 +1,14 @@
const LAYOUT_BREAKPOINT = 1024; const LAYOUT_BREAKPOINT = 1024;
export function isMobile(width) { export function isMobile(width, columns) {
switch (columns) {
case "multiple":
return false;
case "single":
return true;
default:
return width <= LAYOUT_BREAKPOINT; return width <= LAYOUT_BREAKPOINT;
}
}; };
const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream; const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;