layout task list

src/Bundle/ChillTaskBundle/Resources/public/chill/scss/_task-list.scss

@@ -1,13 +1,21 @@
+/*
+     !!!!!!!
+    This is a legacy version for task list. The new task are now
+    layed out in page/tile_list/index.js
+    !!!!!!
+*/
+
 table.chill-task-list {
+
     .chill-task-list__row > div {
         margin-bottom: 0.50rem;
     }
-    
+
     .chill-task-list__row__title {
         font-weight: bold;
         font-size: 1.40rem;
     }
-    
+
     .chill-task-list__row__type {
         font-variant: small-caps;
         display: inline;
@@ -21,31 +29,31 @@ table.chill-task-list {
         border: 1px solid var(--chill-dark-gray);
         color: var(--chill-dark-gray);
     }
-    
+
     .chill-task-list__row__person-for {
         display: inline;
         font-weight: bold;
     }
-    
+
     .chill-task-list__row__assignee {
         display: inline;
-        
+
     }
-    
+
     .chill_task-list__row__assignee_by {
         display: inline;
         font-weight: bold;
     }
-    
+
     .chill-task-list__row__dates {
         & > ul {
             display: inline;
             list-style: none;
-            
+
             & > li {
                 display: inline;
                 margin-right: 0.25rem;
-                
+
             }
         }
     }

src/Bundle/ChillTaskBundle/Resources/public/chill/scss/_task-statuses.scss

@@ -1,34 +1,22 @@
+// Access to Bootstrap variables and mixins
+@import '~ChillMainAssets/module/bootstrap/shared';
+
 .task-status {
-    &.box {
-        font-variant: small-caps;
-        display: inline;
-        padding: .2em .6em .3em;
-        font-size: 0.88rem;
-        font-weight: bold;
-        line-height: 1;
-        text-align: center;
-        white-space: nowrap;
-        vertical-align: baseline;
-        border-radius: .25em;
-        color: white;
+
+    //  'new', 'in_progress', 'closed', 'canceled'
+    &.place-new {
+        background-color: $chill-yellow;
     }
-    
-    &.type-task_default {
-        //  'new', 'in_progress', 'closed', 'canceled'
-            &.place-new {
-                background-color: var(--chill-yellow);
-            }
 
-            &.place-in_progress {
-                background-color: var(--chill-green);
-            }
+    &.place-in_progress {
+        background-color: $chill-green;
+    }
 
-            &.place-closed {
-                background-color: var(--chill-blue);
-            }
+    &.place-closed {
+        background-color: $chill-blue;
+    }
 
-            &.place-canceled {
-                background-color: var(--chill-beige);
-            }
+    &.place-canceled {
+        background-color: $chill-beige;
     }
 }

src/Bundle/ChillTaskBundle/Resources/public/page/tile_list/index.js

@@ -0,0 +1 @@
+require("./task_list.scss");

src/Bundle/ChillTaskBundle/Resources/public/page/tile_list/task_list.scss

@@ -0,0 +1,24 @@
+.chill-task-list {
+    .task-type {
+        font-variant: small-caps;
+        display: inline;
+        padding: 0.05rem .15rem;
+        font-size: 0.88rem;
+        font-weight: light;
+        line-height: 1;
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: baseline;
+        border: 1px solid var(--chill-dark-gray);
+        color: var(--chill-dark-gray);
+    }
+
+    .assignee {
+        text-align: right;
+    }
+
+    .dates {
+        text-align: right;
+    }
+
+}