From 30c27cda2d1758a4298881cc40cae057a68742cd Mon Sep 17 00:00:00 2001
From: Chak Li <chak.li@atrium.co>
Date: Mon, 3 Jun 2019 16:40:44 -0700
Subject: [PATCH] Allow displaying the board in vertical view

---
 src/components/BoardContainer.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/BoardContainer.js b/src/components/BoardContainer.js
index e6d581dd4..c67e48023 100644
--- a/src/components/BoardContainer.js
+++ b/src/components/BoardContainer.js
@@ -119,7 +119,7 @@ class BoardContainer extends Component {
   }
 
   render() {
-    const {id, reducerData, draggable, laneDraggable, laneDragClass, style, onDataChange, onLaneScroll, onCardClick, onLaneClick, onLaneAdd, onCardDelete, onCardAdd, addLaneTitle, editable, canAddLanes, ...otherProps} = this.props
+    const {id, reducerData, draggable, laneDraggable, laneDragClass, style, onDataChange, onLaneScroll, onCardClick, onLaneClick, onLaneAdd, onCardDelete, onCardAdd, addLaneTitle, editable, canAddLanes, verticalBoard, ...otherProps} = this.props
     const {addLaneMode} = this.state
     // Stick to whitelisting attributes to segregate board and lane props
     const passthroughProps = pick(this.props, [
@@ -153,12 +153,12 @@ class BoardContainer extends Component {
       <BoardDiv style={style} {...otherProps} draggable={false}>
         <PopoverWrapper>
         <Container
-          orientation="horizontal"
+          orientation={verticalBoard ? "vertical" : "horizontal"}
           onDragStart={this.onDragStart}
           dragClass={laneDragClass}
           dropClass=""
           onDrop={this.onLaneDrop}
-          lockAxis="x"
+          lockAxis={verticalBoard ? "y" : "x"}
           getChildPayload={index => this.getLaneDetails(index)}
           groupName={this.groupName}>
           {reducerData.lanes.map((lane, index) => {
@@ -180,7 +180,7 @@ class BoardContainer extends Component {
         </Container>
         </PopoverWrapper>
         {canAddLanes && (
-          <Container orientation="horizontal">
+          <Container orientation={verticalBoard ? "vertical" : "horizontal"}>
             {editable && !addLaneMode ? (
               <LaneSection style={{width: 200}}>
                 <NewLaneButton onClick={this.showEditableLane}>{addLaneTitle}</NewLaneButton>
@@ -229,7 +229,8 @@ BoardContainer.propTypes = {
   laneDragClass: PropTypes.string,
   addLaneTitle: PropTypes.string,
   addCardTitle: PropTypes.string,
-  newLaneTemplate: PropTypes.node
+  newLaneTemplate: PropTypes.node,
+  verticalBoard: PropTypes.bool
 }
 
 BoardContainer.defaultProps = {