fix: Make scrolling, custom card templates and other styling work wit…

…h fixed lane header
rcdexta · Jan 21, 2018 · 8411ed2 · 8411ed2
1 parent 2ef94b3
commit 8411ed2
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/src/components/Lane.js b/src/components/Lane.js
@@ -145,7 +145,7 @@ class Lane extends Component {
     }
   }
 
-  renderDragContainer = () => {
+  renderDragContainer = (isDraggingOver) => {
     const {laneSortFunction, editable, tagStyle, cardStyle, draggable} = this.props
     const {addCardMode} = this.state
 
@@ -171,7 +171,7 @@ class Lane extends Component {
     ))
 
     return (
-      <ScrollableLane innerRef={this.laneDidMount}>
+      <ScrollableLane innerRef={this.laneDidMount} isDraggingOver={isDraggingOver}>
         <DraggableList>{cardList}</DraggableList>
         {editable && !addCardMode && this.renderAddCardLink()}
         {addCardMode && this.renderNewCard()}
@@ -215,7 +215,7 @@ class Lane extends Component {
               isDraggingOver={isDraggingOver}
               {...dropProvided.draggableProps}>
               {this.renderHeader()}
-              {this.renderDragContainer()}
+              {this.renderDragContainer(isDraggingOver)}
               {loading && <Loader />}
             </Section>
           )

diff --git a/src/styles/Base.js b/src/styles/Base.js
@@ -39,20 +39,26 @@ export const Section = styled.section`
   position: relative;
   padding: 10px;
   min-width: 250px;
-  padding-bottom: ${props => (props.isDraggingOver ? '130px' : '30px')};
   display: flex;
   height: auto;
   max-height: 90%;
   flex-direction: column;
+  display: flex;
 `
 
 export const LaneHeader = styled(Header)`
-  margin-bottom: 10px;
+	z-index: 1000;
+	padding: 0px 5px;
+	margin-bottom: 0px;
 `
 
 export const ScrollableLane = styled.div`
-  flex: 1;
-  overflow-y: auto;
+	flex: 1;
+	overflow-y: auto;
+	overflow-x: hidden;
+	height: 100%;
+	padding-bottom: ${props => (props.isDraggingOver ? '130px' : '30px')};
+	margin-top: 10px;
 `
 
 export const Title = styled.span`
@@ -81,6 +87,7 @@ export const CardWrapper = styled.article`
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
   max-width: 250px;
+  min-width: 230px;
 `
 
 export const MovableCardWrapper = styled(CardWrapper)`

diff --git a/src/styles/Elements.js b/src/styles/Elements.js
@@ -5,7 +5,7 @@ export const DeleteWrapper = styled.div`
   text-align: center;
   position: absolute;
   top: -8px;
-  right: 0px;
+  right: -1px;
 `
 
 export const DeleteIcon = styled.span`

diff --git a/stories/CustomLaneStyling.story.js b/stories/CustomLaneStyling.story.js
@@ -75,6 +75,6 @@ storiesOf('Custom Templates', module).add(
       ]
     }
 
-    return <Board data={data} customLancustomLaneHeadereHeader={<CustomLaneHeader />} />
+    return <Board data={data} customLaneHeader={<CustomLaneHeader />} />
   })
 )
-Original file line number
+Diff line change
@@ Expand Up / @@ -75,6 +75,6 @@ storiesOf('Custom Templates', module).add( @@
           ]
         }
-        return <Board data={data} customLancustomLaneHeadereHeader={<CustomLaneHeader />} />
+        return <Board data={data} customLaneHeader={<CustomLaneHeader />} />
       })
     )