Taskboard single task

app/fonts/taiga.svg

@@ -25,4 +25,6 @@
 <glyph unicode="&#112;" d="M455 362l-93 93c-5 5-14 5-20 0l-253-254 1 0-1 0-35-130 0 0c-2-4 0-10 3-14 5-4 11-5 16-2l0 0 128 34 0 0 0 0 254 254c5 5 5 14 0 19z m-359-265l21 76 56-56z"/>
 <glyph unicode="&#113;" d="M434 160l-96 96 96 96c4 4 4 10 0 14l-68 68c-4 4-10 4-14 0l-96-96-96 96c-4 4-11 4-14 0l-68-68c-2-1-3-4-3-7 0-2 1-5 3-7l96-96-96-96c-2-2-3-5-3-7 0-3 1-6 3-7l68-68c1-2 4-3 7-3 2 0 5 1 7 3l96 96 96-96c2-2 5-3 7-3 3 0 5 1 7 3l68 68c4 4 4 10 0 14z"/>
 <glyph unicode="&#114;" d="M364 364c-17 6-31 20-35 38l-36 0c5-34 28-61 59-71 21-7 36-27 36-50l0-18-226 0 0-88-36 0 0 106c0 23 15 43 36 50 31 10 54 37 59 71l-36 0c-5-18-18-32-35-38-34-12-59-45-59-83l0-246c0-20 16-37 36-37l259 0 0 1c21 0 37 16 37 36l0 246c0 38-25 71-59 83z m-101-133c28 0 51-22 51-50 0-15-6-28-16-37-1-2-2-3-2-5l0-2c0-2-1-4-2-4-9-6-18-9-28-9l-5 0c-10 0-20 3-28 9-1 0-2 2-2 4l0 2c0 2-1 3-2 5-10 9-16 22-16 37 0 28 22 50 50 50z m64-136c-3 0-6 2-8 4l-31-11 25-9c2 3 6 5 9 5 6 0 11-4 11-10 0-3-2-6-4-7 1-2 1-3 1-5 0-6-5-12-11-12-7 0-12 6-12 12 0 0 0 1 0 1l-43 16-45-16c0 0 0-1 0-1 0-6-6-12-12-12-7 0-12 6-12 12 0 2 1 3 1 5-2 1-3 4-3 7 0 6 5 10 10 10 4 0 7-2 9-5l27 9-27 10c-2-2-4-4-7-4-6 0-10 4-10 10 0 4 3 7 6 8 0 0 0 0 0 0 0 5 4 9 8 9 5 0 8-4 9-8l45-16 51 17c0 5 4 8 8 8 5 0 8-4 8-8l0 0c4-2 6-5 6-9 0-5-4-10-9-10z m-154 327l168 0c2 0 4 1 4 4l0 48c0 2-2 4-4 4l-12 0 0 23c0 3-2 6-6 6l-132 0c-4 0-6-3-6-6l0-23-12 0c-2 0-4-2-4-4l0-48c0-3 2-4 4-4z m82-255c0-7-6-13-13-13-8 0-14 6-14 13 0 7 6 13 14 13 7 0 13-6 13-13z m43 0c0-7-6-13-13-13-7 0-13 6-13 13 0 7 6 13 13 13 7 0 13-6 13-13z"/>
+<glyph unicode="&#115;" d="M165 302l0-55c0-8-3-14-8-20-6-5-12-8-20-8l-55 0c-7 0-14 3-19 8-5 6-8 12-8 20l0 55c0 7 3 14 8 19 5 5 12 8 19 8l55 0c8 0 14-3 20-8 5-5 8-12 8-19z m146 0l0-55c0-8-3-14-8-20-5-5-12-8-20-8l-54 0c-8 0-15 3-20 8-5 6-8 12-8 20l0 55c0 7 3 14 8 19 5 5 12 8 20 8l54 0c8 0 15-3 20-8 5-5 8-12 8-19z m146 0l0-55c0-8-3-14-8-20-5-5-12-8-19-8l-55 0c-8 0-14 3-20 8-5 6-8 12-8 20l0 55c0 7 3 14 8 19 6 5 12 8 20 8l55 0c7 0 14-3 19-8 5-5 8-12 8-19z"/>
+<glyph unicode="&#116;" d="M311 155l0-54c0-8-3-15-8-20-5-5-12-8-20-8l-54 0c-8 0-15 3-20 8-5 5-8 12-8 20l0 54c0 8 3 15 8 20 5 5 12 8 20 8l54 0c8 0 15-3 20-8 5-5 8-12 8-20z m0 147l0-55c0-8-3-14-8-20-5-5-12-8-20-8l-54 0c-8 0-15 3-20 8-5 6-8 12-8 20l0 55c0 7 3 14 8 19 5 5 12 8 20 8l54 0c8 0 15-3 20-8 5-5 8-12 8-19z m0 146l0-55c0-7-3-14-8-19-5-6-12-8-20-8l-54 0c-8 0-15 2-20 8-5 5-8 12-8 19l0 55c0 8 3 14 8 19 5 6 12 8 20 8l54 0c8 0 15-2 20-8 5-5 8-11 8-19z"/>
 </font></defs></svg>

app/styles/components/taskboard-task.scss

@@ -0,0 +1,61 @@
+.taskboard-task {
+    background: $postit;
+    margin-bottom: 1rem;
+    position: relative;
+    .taskboard-tagline {
+        @include table-flex();
+    }
+    .taskboard-tag {
+        @include table-flex-child(1, 0, 0, 0);
+        background: $grayer; //Fallback
+        height: .2rem;
+    }
+    .taskboard-task-inner {
+        @include table-flex();
+        padding: 1rem .5rem;
+    }
+    .avatar {
+        @include table-flex-child($flex-basis: 50px);
+        a {
+            @extend %small;
+            text-align: center;
+        }
+        img {
+            margin: 0 auto;
+        }
+        figcaption {
+            display: block;
+            overflow: hidden;
+            position: relative;
+            text-overflow: ellipsis;
+            top: 4px;
+            white-space: nowrap;
+            width: 50px;
+        }
+    }
+    .task-num {
+        color: $postit-hover;
+        margin-right: .5em;
+    }
+    .taskboard-text {
+        @include table-flex-child($flex-grow: 10, $flex-basis: 50px, $width: 100px);
+    }
+    .icon-edit,
+    .icon-drag-h {
+        @extend %large;
+        bottom: .2rem;
+        color: $postit-hover;
+        position: absolute;
+        &:hover {
+            @include transition(color, .3s, linear);
+            color: darken($postit-hover, 15%);
+        }
+    }
+    .icon-edit {
+        right: .5rem;
+    }
+    .icon-drag-h {
+        @extend %xlarge;
+        right: 45%;
+    }
+}

app/styles/dependencies/colors.scss

@@ -21,3 +21,6 @@ $button-green: #699b05;
 $button-green-hover: #9dce0a;
 $button-gray: #585858;
 $button-gray-hover: #879b89;
+
+$postit: #fff0c5;
+$postit-hover: #e3d6b0;

app/styles/dependencies/helpers.scss

@@ -3,6 +3,23 @@
     box-sizing: border-box;
 }
 
+//Flexbox FTW
+%table-flex {
+    align-content: stretch;
+    align-items: stretch;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+}
+
+%table-flex-child {
+    flex-basis: 300px;
+    flex-grow: 1;
+    flex-shrink: 0;
+    width: 300px;
+}
+
 // #Reset & Basics (Inspired by E. Meyers)
 //==================================================
 a,

app/styles/dependencies/mixins.scss

@@ -8,3 +8,23 @@
 @mixin background-opacity($color: $white, $opacity: .3) {
     background: rgba($color, $opacity);
 }
+
+// Table Flex - http://devbryce.com/site/flexbox/
+@mixin table-flex() {
+    align-content: stretch;
+    align-items: stretch;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+}
+
+@mixin table-flex-child($flex-grow: 1, $flex-basis: 300px, $flex-shrink: 0, $width:'') {
+    flex-basis: $flex-basis;
+    flex-grow: $flex-grow;
+    flex-shrink: $flex-shrink;
+    width: $flex-basis;
+    @if #{$width} != null {
+        width: #{$width};
+    }
+}

app/styles/dependencies/typography.scss

@@ -168,3 +168,9 @@ a:visited {
 .icon-iocaine:before {
     content: 'r';
 }
+.icon-drag-h:before {
+    content: 's';
+}
+.icon-drag-v:before {
+    content: 't';
+}

app/styles/main.scss

@@ -23,6 +23,7 @@ $prefix-for-spec:      true;
 @import 'components/popover';
 @import 'components/tag';
 @import 'components/filter';
+@import 'components/taskboard-task';
 
 //Layout
 @import 'layout/base';

app/styles/modules/taskboard-table.scss

@@ -1,19 +1,3 @@
-%table-flex {
-    align-content: stretch;
-    align-items: stretch;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-}
-
-%table-flex-child {
-    flex-basis: 300px;
-    flex-grow: 1;
-    flex-shrink: 0;
-    width: 300px;
-}
-
 .taskboard-table {
     overflow: hidden;
     width: 100%;

app/views/components/taskboard-task.jade

@@ -0,0 +1,14 @@
+div.taskboard-task
+    div.taskboard-tagline
+        - for(var y = 0; y < 5; y++)
+            div.taskboard-tag
+    div.taskboard-task-inner
+        figure.avatar
+            a(href="", title="UserName")
+                img.avatar(src="http://thecodeplayer.com/u/uifaces/12.jpg", alt="username")
+                figcaption Username
+        p.taskboard-text
+            span.task-num 125
+            span.task-name Crear usuarios que no sepan que tienen que darse de alta para darse de baja y crear contenido bloqueado o no en la plataforma
+        a.icon.icon-edit(href="", title="Edit")
+        a.icon.icon-drag-h(href="", title="Drag&Drop")

app/views/modules/taskboard-table.jade

@@ -29,4 +29,4 @@ div.taskboard-table
                 div.taskboard_task-playground.task-column
                     - for(var x = 0; x < 3; x++)
                         div.task-row
-                            //- Include tasks
+                            include ../components/taskboard-task