Progress Commit

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

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

@@ -1,7 +1,30 @@
 import { PopoverContainer, PopoverContent } from "react-popopo";
 import styled, { createGlobalStyle, css } from "styled-components";
 
-export const GlobalStyle = createGlobalStyle`
+const getBoardWrapperStyles = (props) => {
+  if (props.orientation === "vertical") {
+    return `    `;
+  }
+  if (props.orientation === "horizontal") {
+    return `
+      display: flex;
+      flex-direction: row;
+      align-items: flex-start;
+    `;
+  }
+  return "";
+};
+
+const getSectionStyles = (props) => {
+  if (props.orientation === "horizontal") {
+    return `
+      display: inline-flex;
+    `;
+  }
+  return "";
+};
+
+export const GlobalStyleHorizontal = createGlobalStyle`
   .comPlainTextContentEditable {
     -webkit-user-modify: read-write-plaintext-only;
     cursor: text;
@@ -25,9 +48,11 @@ export const GlobalStyle = createGlobalStyle`
   .icon-overflow-menu-horizontal:before {
     content: "\\E91F";
   }
+
   .icon-lg, .icon-sm {
     color: #798d99;
   }
+
   .icon-lg {
     height: 32px;
     font-size: 16px;
@@ -36,6 +61,69 @@ export const GlobalStyle = createGlobalStyle`
   }
 `;
 
+export const GlobalStyleVertical = createGlobalStyle`
+  .comPlainTextContentEditable {
+    -webkit-user-modify: read-write-plaintext-only;
+    cursor: text;
+  }
+  
+  
+  .comPlainTextContentEditable--has-placeholder::before {
+    content: attr(placeholder);
+    opacity: 0.5;
+    color: inherit;
+    cursor: text;
+  }
+
+  .react_trello_dragClass {
+    transform: rotate(3deg);
+  }
+
+  .react_trello_dragLaneClass {
+    transform: rotate(3deg);
+  }
+
+  .icon-overflow-menu-horizontal:before {
+    content: "\\E91F";
+  }
+
+  .icon-lg, .icon-sm {
+    color: #798d99;
+  }
+
+  .icon-lg {
+    height: 32px;
+    font-size: 16px;
+    line-height: 32px;
+    width: 32px;
+  }
+
+  .smooth-dnd-container {
+    //min-height: 100px; // Not needed, just for extra landing space
+  }
+
+  .smooth-dnd-container.horizontal {
+    white-space: break-spaces;
+    flex-direction: column;
+  }
+
+  .react-trello-lane {
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+
+  .react-trello-column-header {
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    padding: 5px;
+    text-align: left;
+  }
+
+  .react-trello-board {
+    overflow-y: hidden !important;
+  }
+`;
+
 export const CustomPopoverContainer = styled(PopoverContainer)`
   position: absolute;
   right: 10px;
@@ -58,6 +146,7 @@ export const CustomPopoverContent = styled(PopoverContent)`
   padding: 5px;
   left: 50%;
   transform: translateX(-50%);
+
   ${(props) =>
     props.active &&
     `
@@ -67,11 +156,13 @@ export const CustomPopoverContent = styled(PopoverContent)`
   `} &::before {
     visibility: hidden;
   }
+
   a {
     color: rgba(255, 255, 255, 0.56);
     padding: 0.5em 1em;
     margin: 0;
     text-decoration: none;
+
     &:hover {
       background-color: #00bcd4 !important;
       color: #37474f;
@@ -85,11 +176,7 @@ export const BoardWrapper = styled.div`
   overflow-y: scroll;
   padding: 5px;
   color: #393939;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-start;
-  // TODO: This was commented out to match existing board style
-  //height: 100vh;
+  ${getBoardWrapperStyles};
 `;
 
 export const Header = styled.header`
@@ -105,9 +192,7 @@ export const Section = styled.section`
   margin: 5px 5px;
   position: relative;
   padding: 10px;
-  display: inline-flex;
-  // TODO: This was commented out to match existing board style
-  //max-height: 90%;
+  ${getSectionStyles};
   flex-direction: column;
 `;
 
@@ -282,6 +367,7 @@ export const InlineInput = styled.textarea`
   border: 0;
   padding: 0 8px;
   outline: 0;
+
   ${(props) =>
     props.border &&
     css`