- CSS Fine tuning :(

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/production-board-kanban/production-board-kanban.component.jsx

@@ -99,7 +99,13 @@ export function ProductionBoardKanbanComponent({
 
   const client = useApolloClient();
 
-  const getCardById = (data, cardId) => {
+  /**
+   * Get Card By ID
+   * @param data
+   * @param cardId
+   * @returns {*|any|null}
+   */
+  const getCardByID = (data, cardId) => {
     for (const lane of data.lanes) {
       for (const card of lane.cards) {
         if (card.id === cardId) {
@@ -122,7 +128,7 @@ export function ProductionBoardKanbanComponent({
     const sameColumnTransfer = source.droppableId === destination.droppableId;
     const targetLane = boardLanes.lanes[Number.parseInt(destination.droppableId)];
     const sourceLane = boardLanes.lanes[Number.parseInt(source.droppableId)];
-    const sourceCard = getCardById(boardLanes, draggableId);
+    const sourceCard = getCardByID(boardLanes, draggableId);
 
     console.dir({
       sameColumnTransfer,
@@ -231,6 +237,7 @@ export function ProductionBoardKanbanComponent({
     xl: "250",
     xxl: "250"
   };
+
   const compactSizes = {
     xs: "150",
     sm: "150",
@@ -324,7 +331,6 @@ export function ProductionBoardKanbanComponent({
             components={components}
             orientation={orientation}
             collapsibleLanes
-            laneDraggable={false}
           />
         </StickyContainer>
       ) : (
@@ -336,7 +342,6 @@ export function ProductionBoardKanbanComponent({
             components={components}
             collapsibleLanes
             orientation={orientation}
-            laneDraggable={false}
           />
         </div>
       )}
@@ -348,7 +353,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(ProductionBoardKanba
 
 const Container = styled.div`
   .react-trello-card-skeleton,
-  .react-trello-card,
+  .react-trel lo-card,
   .react-trello-card-adder-form {
     box-sizing: border-box;
     max-width: ${(props) => props.width}px;

client/src/components/trello-board/controllers/Lane.jsx

@@ -113,7 +113,7 @@ function Lane({
       ? {
           display: "flex",
           flexWrap: "wrap",
-          minHeight: "100px"
+          minHeight: "10px"
         }
       : {};
   }, [orientation]);
@@ -295,23 +295,12 @@ function Lane({
     });
 
     return (
-      <Droppable
+      <Droppable direction={orientation === "horizontal" ? "vertical" : "grid"} droppableId={`${index}`} type="lane">
-        direction={orientation === "horizontal" ? "vertical" : "grid"}
-        droppableId={`${index}`}
-        type="lane"
-        // dragClass={cardDragClass}
-        // dropClass={cardDropClass}
-        // onDragStart={onDragStart}
-        // onDrop={(e) => onDragEnd(id, e)}
-        // onDragEnter={() => setIsDraggingOver(true)}
-        // onDragLeave={() => setIsDraggingOver(false)}
-        // shouldAcceptDrop={shouldAcceptDrop}
-        // getChildPayload={(index) => getCardDetails(id, index)}
-      >
         {(provided, snapshot) => (
           <div
             {...provided.droppableProps}
             ref={provided.innerRef}
+            className={allClassNames}
             style={{
               ...provided.droppableProps.style,
               ...flexStyle
@@ -378,8 +367,6 @@ function Lane({
     <components.Section
       key={id}
       onClick={() => onLaneClick && onLaneClick(id)}
-      draggable={false}
-      className={allClassNames}
       orientation={orientation}
       {...passedProps}
     >

client/src/components/trello-board/styles/Base.js

@@ -19,10 +19,14 @@ const getSectionStyles = (props) => {
   if (props.orientation === "horizontal") {
     return `
       display: inline-flex;
+      position: relative;
+      flex-direction: column;
     `;
   }
   return `
     margin-bottom: 10px;
+    position: relative;
+    flex-direction: column;
   `;
 };
 
@@ -31,10 +35,7 @@ export const GlobalStyle = createGlobalStyle`
     -webkit-user-modify: read-write-plaintext-only;
     cursor: text;
   }
-
+  
-  .smooth-dnd-container.horizontal {
-  }
-
   .comPlainTextContentEditable--has-placeholder::before {
     content: attr(placeholder);
     opacity: 0.5;
@@ -71,19 +72,22 @@ export const GlobalStyle = createGlobalStyle`
   }
 `;
 
-export const StyleHorizontal = styled.div``;
+export const StyleHorizontal = styled.div`
+  .react-trello-lane {
+    // TODO: This will need to be changed
+    min-width: 250px;
+    min-height: 25px;
+  }
+  .react-trello-lane.lane-collapsed {
+    min-height: 15px;
+  }
+`;
 
 export const StyleVertical = styled.div`
   .react-trello-column-header {
     text-align: left;
   }
-
-  .react-trello-lane {
-    // TODO ? This is the question. We need the same drag-zone we get in horizontal mode
-    min-height: 50px; // Not needed, just for extra landing space
-  }
   .react-trello-card {
-    //background-color: orange !important;
     flex: 0 1 auto;
   }
   .react-trello-board {
@@ -156,9 +160,7 @@ export const Section = styled.section`
   background-color: #e3e3e3;
   border-radius: 3px;
   margin: 2px 2px;
-  position: relative;
   padding: 5px;
-  flex-direction: column;
   ${getSectionStyles};
 `;