Redesign task list view

8 files changed, 150 insertions, 50 deletions

diff --git a/assets/sass/_task_board_category.sass b/assets/sass/_task_board_category.sass
deleted file mode 100644
index 37a4ea47..00000000
--- a/assets/sass/_task_board_category.sass
+++ /dev/null
@@ -1,15 +0,0 @@
-@import variables
-
-.task-board-category-container
-  text-align: right
-  margin-top: 8px
-  margin-bottom: 8px
-
-.task-board-category
-  font-weight: 500
-  color: color('dark')
-  border: 1px solid #555
-  padding: 1px 2px 1px 2px
-  border-radius: 4px
-  &:hover
-    opacity: 0.6
diff --git a/assets/sass/_task_board_icons.sass b/assets/sass/_task_board_icons.sass
deleted file mode 100644
index ae58f108..00000000
--- a/assets/sass/_task_board_icons.sass
+++ /dev/null
@@ -1,22 +0,0 @@
-@import variables
-
-.task-board-icons
-  font-size: size('small')
-  margin-top: 7px
-  text-align: right
-  a
-    opacity: 0.5
-  span
-    opacity: 0.5
-    margin-left: 4px
-  a
-    &:hover
-      opacity: 1.0
-      font-weight: bold
-  .task-board-icons-row
-    line-height: 22px
-  .task-score
-    font-weight: bold
-
-.flag-milestone
-  color: green
diff --git a/assets/sass/_task_category.sass b/assets/sass/_task_category.sass
new file mode 100644
index 00000000..b60aeffa
--- /dev/null
+++ b/assets/sass/_task_category.sass
@@ -0,0 +1,28 @@
+@import variables
+
+.task-board-category-container
+  text-align: right
+  margin-top: 8px
+  margin-bottom: 8px
+
+.task-board-category
+  border: 1px solid #555
+  a
+    &:hover
+      text-decoration: underline
+
+.task-list-category
+  background: bg-color('light')
+  border: 1px solid #ccc
+  a
+    text-decoration: none
+    color: color('dark')
+    &:hover
+      color: link-color('primary')
+
+.task-board-category, .task-list-category
+  font-size: size('compact')
+  font-weight: 500
+  color: color('dark')
+  padding: 1px 3px 1px 2px
+  border-radius: 3px
diff --git a/assets/sass/_task_board_date.sass b/assets/sass/_task_date.sass
index d0aa1f9c..f4b74004 100644
--- a/assets/sass/_task_board_date.sass
+++ b/assets/sass/_task_date.sass
@@ -1,13 +1,13 @@
 @import variables
 
-.task-board-date
-  font-weight: bold
+.task-date
+  font-weight: 500
   color: color('dark')
 
 span
-  &.task-board-date-today
+  &.task-date-today
     opacity: 1.0
     color: link-color('primary')
-  &.task-board-date-overdue
+  &.task-date-overdue
     opacity: 1.0
     color: color('error')
diff --git a/assets/sass/_task_board_age.sass b/assets/sass/_task_icon_age.sass
index 1e91880f..8bc8ef91 100644
--- a/assets/sass/_task_board_age.sass
+++ b/assets/sass/_task_icon_age.sass
@@ -1,18 +1,22 @@
 @import variables
 
-.task-board-age
+.task-icon-age
   display: inline-block
 
 span
-  &.task-board-age-total
-    border: #666 1px solid
+  &.task-icon-age-total
+    border: 1px solid #e5e5e5
     padding: 1px 3px 1px 3px
     border-top-left-radius: 3px
     border-bottom-left-radius: 3px
-  &.task-board-age-column
-    border: #666 1px solid
+  &.task-icon-age-column
+    border: 1px solid #e5e5e5
     border-left: none
     margin-left: -5px
     padding: 1px 3px 1px 3px
     border-top-right-radius: 3px
     border-bottom-right-radius: 3px
+
+.task-board
+  span.task-icon-age-total, span.task-icon-age-column
+    border-color: #666
diff --git a/assets/sass/_task_icons.sass b/assets/sass/_task_icons.sass
new file mode 100644
index 00000000..394ed148
--- /dev/null
+++ b/assets/sass/_task_icons.sass
@@ -0,0 +1,43 @@
+@import variables
+
+.task-board-icons, .task-list-icons
+  font-size: size('small')
+  text-align: right
+
+  a
+    text-decoration: none
+    &:hover
+      color: link-color('hover')
+      i
+        color: link-color('hover')
+
+  .task-score
+    font-weight: bold
+
+  .flag-milestone
+    color: green
+
+.task-board-icons
+  margin-top: 7px
+  a
+    opacity: 0.5
+  span
+    opacity: 0.5
+    margin-left: 4px
+  a
+    &:hover
+      opacity: 1.0
+      font-weight: bold
+
+  .task-board-icons-row
+    line-height: 22px
+
+.task-list-icons
+  line-height: 22px
+  a, span, i
+    color: color('light')
+    opacity: 1.0
+  span
+    margin-left: 5px
+  @include sm-device
+    text-align: left
\ No newline at end of file
diff --git a/assets/sass/_task_list.sass b/assets/sass/_task_list.sass
new file mode 100644
index 00000000..258dfb0d
--- /dev/null
+++ b/assets/sass/_task_list.sass
@@ -0,0 +1,61 @@
+@import variables
+
+.task-list
+  font-size: size('compact')
+
+.task-list-header
+  background: bg-color('primary')
+  border: 1px solid #e5e5e5
+  border-radius: 5px 5px 0 0
+  line-height: 35px
+  padding-left: 3px
+  padding-right: 3px
+  text-align: right
+
+.task-list-row
+  padding-left: 3px
+  padding-right: 3px
+  border-bottom: 1px solid #e5e5e5
+  border-right: 1px solid #e5e5e5
+
+  &:nth-child(odd)
+    background: bg-color('lighter')
+
+  &:last-child
+    border-radius: 0 0 5px 5px
+
+  &:hover
+    background: map-get($highlight-colors, 'background')
+    border-bottom: 1px solid map-get($highlight-colors, 'border')
+    border-right: 1px solid map-get($highlight-colors, 'border')
+
+  .task-list-title
+    font-weight: 500
+    &.task-closed
+      text-decoration: line-through
+      a
+        font-style: italic
+    a
+      color: color('primary')
+      text-decoration: none
+      &:hover, &:focus
+        text-decoration: underline
+
+  .task-list-details
+    color: color('light')
+    font-weight: 300
+    line-height: 30px
+
+  .task-list-avatars
+    display: inline-block
+    float: left
+    @include sm-device
+      float: none
+      display: block
+    .task-avatar-assignee
+      font-weight: 300
+      color: color('light')
+    &:hover
+      .task-avatar-assignee
+        font-weight:   400
+        color: color('dark')
diff --git a/assets/sass/app.sass b/assets/sass/app.sass
index d2c414ea..52e6cac7 100644
--- a/assets/sass/app.sass
+++ b/assets/sass/app.sass
@@ -33,11 +33,12 @@
 @import board
 @import task_board
 @import task_board_saving_state
-@import task_board_category
 @import task_board_avatar
-@import task_board_icons
-@import task_board_age
-@import task_board_date
+@import task_icons
+@import task_icon_age
+@import task_category
+@import task_date
+@import task_list
 @import task_tags
 @import task_summary
 @import task_form