Pass in correct "singleColumn" prop value when auto-columns is not used.
This commit is contained in:
		
							parent
							
								
									e5b6c21f32
								
							
						
					
					
						commit
						b01b111ca1
					
				
					 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) {
 | 
				
			||||||
  return width <= LAYOUT_BREAKPOINT;
 | 
					  switch (columns) {
 | 
				
			||||||
 | 
					  case "multiple":
 | 
				
			||||||
 | 
					    return false;
 | 
				
			||||||
 | 
					  case "single":
 | 
				
			||||||
 | 
					    return true;
 | 
				
			||||||
 | 
					  default:
 | 
				
			||||||
 | 
					    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