fix: Make lane header sticky when scrolling card content

#54
rcdexta · Jan 20, 2018 · f98e58d · f98e58d
1 parent 2c5a0b4
commit f98e58d
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 28 deletions.
diff --git a/src/components/Lane.js b/src/components/Lane.js
@@ -3,16 +3,16 @@ import Loader from './Loader'
 import PropTypes from 'prop-types'
 import Card from './Card'
 import {
-  Section,
-  Header,
-  Title,
-  RightContent,
-  DraggableList,
-  Placeholder,
-  AddCardLink,
-  LaneWrapper,
-  ScrollableLane
-} from '../styles/Base'
+	Section,
+	Header,
+	Title,
+	RightContent,
+	DraggableList,
+	Placeholder,
+	AddCardLink,
+	LaneWrapper,
+	ScrollableLane, LaneHeader,
+} from '../styles/Base';
 import {bindActionCreators} from 'redux'
 import {connect} from 'react-redux'
 import update from 'immutability-helper'
@@ -43,7 +43,7 @@ class Lane extends Component {
       onLaneScroll(nextPage, this.props.id).then(moreCards => {
         if (!moreCards || moreCards.length === 0) {
           // if no cards present, stop retrying until user action
-          node.scrollTop = node.scrollTop - 50
+          node.scrollTop = node.scrollTop - 100
         } else {
           this.props.actions.paginateLane({
             laneId: this.props.id,
@@ -64,10 +64,9 @@ class Lane extends Component {
     })
   }
 
-  laneDidMount = (node, dragReference) => {
+  laneDidMount = (node) => {
     if (node) {
       node.addEventListener('scroll', this.handleScroll)
-      dragReference(node)
     }
   }
 
@@ -181,11 +180,11 @@ class Lane extends Component {
     ))
 
     return (
-      <div>
+      <ScrollableLane innerRef={this.laneDidMount}>
         <DraggableList>{cardList}</DraggableList>
         {editable && !addCardMode && this.renderAddCardLink()}
         {addCardMode && this.renderNewCard()}
-      </div>
+      </ScrollableLane>
     )
   }
 
@@ -196,14 +195,14 @@ class Lane extends Component {
     } else {
       const {title, label, titleStyle, labelStyle} = this.props
       return (
-        <Header>
+        <LaneHeader>
           <Title style={titleStyle}>{title}</Title>
           {label && (
             <RightContent>
               <span style={labelStyle}>{label}</span>
             </RightContent>
           )}
-        </Header>
+        </LaneHeader>
       )
     }
   }
@@ -221,7 +220,7 @@ class Lane extends Component {
               {...otherProps}
               key={id}
               onClick={() => onLaneClick && onLaneClick(id)}
-              innerRef={ref => this.laneDidMount(ref, dropProvided.innerRef)}
+              innerRef={dropProvided.innerRef}
               isDraggingOver={isDraggingOver}
               {...dropProvided.draggableProps}>
               {this.renderHeader()}

diff --git a/src/styles/Base.js b/src/styles/Base.js
@@ -25,24 +25,34 @@ export const BoardDiv = styled.div`
   height: 100vh;
 `
 
+export const Header = styled.header`
+  margin-bottom: 10px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+`
+
 export const Section = styled.section`
   background-color: #e3e3e3;
   border-radius: 3px;
   margin: 5px 5px;
   position: relative;
   padding: 10px;
   min-width: 250px;
-  height: auto;
   padding-bottom: ${props => (props.isDraggingOver ? '130px' : '30px')};
-  max-height: 95%;
-  overflow-y: auto;
+  display: flex;
+  height: auto;
+  max-height: 90%;
+  flex-direction: column;
 `
 
-export const Header = styled.header`
-  margin-bottom: 10px;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
+export const LaneHeader = styled(Header)`
+	margin-bottom: 10px;
+`
+
+export const ScrollableLane = styled.div`
+	flex: 1;
+	overflow-y: auto;
 `
 
 export const Title = styled.span`
@@ -60,7 +70,7 @@ export const RightContent = styled.span`
 `
 
 export const DraggableList = styled.div`
-  min-height: 10px;
+  
 `
 
 export const CardWrapper = styled.article`

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: -8px;
+  right: 0px;
 `
 
 export const DeleteIcon = styled.span`