Pass in correct "singleColumn" prop value when auto-columns is not used.
This commit is contained in:
		
							parent
							
								
									a70468aa56
								
							
						
					
					
						commit
						ceb545c080
					
				@ -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…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user