Merge pull request #1493 from code-corps/improve-scrolling-on-task-lists

Improve the scrolling on task lists
code-corps · Nov 7, 2017 · a790a2d · a790a2d
2 parents 8c1cdc4 + 57cac2c
commit a790a2d
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 29 deletions.
diff --git a/app/styles/components/task-board.scss b/app/styles/components/task-board.scss
@@ -12,7 +12,6 @@
 }
 
 .task-board {
-  display: flex;
   overflow-x: auto;
   overflow-y: hidden;
   margin-bottom: 10px;

diff --git a/app/styles/components/task-card.scss b/app/styles/components/task-card.scss
@@ -10,7 +10,8 @@
   display: flex;
   flex-direction: column;
   margin-bottom: 8px;
-  padding: 0.7em 1em;
+  max-width: 300px;
+  padding: 0.5em 0.7em;
 
   .github__pull-request-icon {
     float: left;
@@ -52,6 +53,7 @@
     cursor: pointer;
     font-weight: 600;
     margin-right: 5px;
+    word-wrap: break-word;
 
     &:hover {
       color: $blue;

diff --git a/app/styles/components/task-list-cards.scss b/app/styles/components/task-list-cards.scss
@@ -1,35 +1,57 @@
 .task-list-container {
+  box-sizing: border-box;
+  display: inline-block;
+  height: 100%;
+  margin-left: 7px;
+  white-space: nowrap;
+  width: 280px;
+
   &:first-child {
-    .task-list {
-      margin-left: 10px;
-    }
+    margin-left: 10px;
   }
 
   &:last-child {
-    .task-list {
-      margin-right: 10px;
-    }
+    margin-right: 10px;
   }
 }
 
 .task-list {
   border: 1px solid #DFDFDF;
   background-color: #F7F7F7;
   border-radius: 4px;
-  margin-left: 7px;
+  display: flex;
+  flex-direction: column;
   max-height: 100%;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  padding: 8px 6px;
+  position: relative;
   white-space: normal;
-  width: 280px;
 
   &__name {
     font-weight: 600;
-    margin-bottom: 10px;
+    padding: 8px 6px;
   }
 }
 
 .task-list-cards {
-  height: 100%;
+  margin: 0 3px;
+  min-height: 10px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0 3px;
+  white-space: normal;
+
+  &::-webkit-scrollbar {
+    height: 0px;
+    width: 9px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #AAA;
+    border-radius: 6px;
+    opacity: 0.5;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: #EEE;
+    border-radius: 6px;
+  }
 }
diff --git a/app/templates/project/tasks/index.hbs b/app/templates/project/tasks/index.hbs
@@ -5,19 +5,21 @@
 </div>
 
 <div class="task-board-container">
-  {{#ember-dragula class="task-board" drop="onDrop" config=dragulaconfig as |drake|}}
-    {{#each orderedTaskLists as |taskList|}}
-      <div class="task-list-container">
-        <div class="task-list">
-          <div class="task-list__name">{{taskList.name}}</div>
-          {{task-list-cards
-            clickedTask=(route-action "transitionToTask")
-            drake=drake
-            taskList=taskList
-            users=users
-          }}
+  <div class="task-board-wrapper">
+    {{#ember-dragula class="task-board" drop="onDrop" config=dragulaconfig as |drake|}}
+      {{#each orderedTaskLists as |taskList|}}
+        <div class="task-list-container">
+          <div class="task-list">
+            <div class="task-list__name">{{taskList.name}}</div>
+            {{task-list-cards
+              clickedTask=(route-action "transitionToTask")
+              drake=drake
+              taskList=taskList
+              users=users
+            }}
+          </div>
         </div>
-      </div>
-    {{/each}}
-  {{/ember-dragula}}
+      {{/each}}
+    {{/ember-dragula}}
+  </div>
 </div>