Stories adjusted in the project board

Codeminer42 · Apr 19, 2018 · 9f7ab7d · 9f7ab7d
1 parent 288ba3d
commit 9f7ab7d
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 52 deletions.
diff --git a/app/assets/javascripts/components/projects/Column.js b/app/assets/javascripts/components/projects/Column.js
@@ -28,7 +28,7 @@ function Stories(props){
 function Column(props){
   console.log(props)
   return (
-      <div className={props.className}>
+      <div className="project-board__column">
         <h1>{props.title}</h1>
         <Stories stories={props.stories} />
      </div>)

diff --git a/app/assets/javascripts/components/projects/ProjectBoard.js b/app/assets/javascripts/components/projects/ProjectBoard.js
@@ -21,42 +21,28 @@ class ProjectBoard extends React.Component {
       ]
 
     return (
-      <div>
-        <h1> {this.props.project.name} </h1>
-        <div className='stories'>
-          <div>
-            <Column
-              title = "Done"
-              stories = {stories}
-            />
-          </div>
-
-          <div>
-            <Column
-              title = "In Progress"
-              stories = {stories}
-            />
-          </div>
-          <div>
-            <Column
-              title = "BackLog"
-              stories = {stories}
-            />
-          </div>
-          <div>
-            <Column
-              title = "Search Results"
-              stories = {stories}
-            />
-          </div>
-
-          <div >
-            <Column
-              title = "Chilly Bin"
-              stories = {stories}
-            />
-          </div>
-        </div>
+      <div className="project-board">
+          <Column 
+            title = "Done"
+            stories = {stories}
+          />
+
+          <Column
+            title = "In Progress"
+            stories = {stories}
+          />
+          <Column
+            title = "BackLog"
+            stories = {stories}
+          />
+          <Column
+            title = "Search Results"
+            stories = {stories}
+          />
+          <Column
+            title = "Chilly Bin"
+            stories = {stories}
+          />
       </div>
     );
   }

diff --git a/app/assets/stylesheets/new_board/_screen.scss b/app/assets/stylesheets/new_board/_screen.scss
@@ -1,17 +1,18 @@
-div.stories {
-  width: 100%;
-  height: 100%;
-  border-spacing: 2px 0;
-  border-collapse: separate;
+.full-heigth {
+    height:100%;
 }
-
-div.stories div {
-  float: left;
-  vertical-align: top;
-  background-color: $darkgrey-11;
+.project-board {
   height: 100%;
-  width: 20%;
-  color: white;
-  text-align: center;
-  @include border-radius(5px 5px 0 0);
+  display: flex;
+  overflow: hidden;
+
+  &__column{
+    background-color: $darkgrey-11;
+    min-width: 20%;
+    flex-basis: 20%;
+    height: 100%;
+    color: white;
+    margin-left:1px;
+  }
+
 }
diff --git a/app/views/beta/projects/show.html.erb b/app/views/beta/projects/show.html.erb
@@ -1 +1 @@
-<div data-app data-project-id="<%= @project_id %>"></div>
+<div data-app data-project-id="<%= @project_id %>" class="full-heigth"></div>