Pass in correct "singleColumn" prop value when auto-columns is not used.
This commit is contained in:
parent
a70468aa56
commit
ceb545c080
2 changed files with 22 additions and 4 deletions
|
@ -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} />
|
||||||
|
|
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue