From 4cb150c2d6d4ae53dcce021de4b1186b2dca9a20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Wed, 11 Jun 2014 14:12:09 +0200
Subject: [PATCH] Attachments table

---
 app/partials/views/modules/attachments.jade | 15 ++++----
 app/styles/dependencies/mixins.scss         | 10 ++++-
 app/styles/layout/us-detail.scss            | 12 ++++++
 app/styles/modules/attachments.scss         | 41 +++++++++++++++++++++
 4 files changed, 69 insertions(+), 9 deletions(-)

diff --git a/app/partials/views/modules/attachments.jade b/app/partials/views/modules/attachments.jade
index 030860d7..f7a4cd08 100644
--- a/app/partials/views/modules/attachments.jade
+++ b/app/partials/views/modules/attachments.jade
@@ -1,18 +1,17 @@
 section.attachments
     div.attachments-header
-        div.attachments-inner
-            h3.attachments-title
-                span.icon.icon-attachment
-                span.attachments-num {{5}}
-                span.attachemnts-text attachments
+        h3.attachments-title
+            span.icon.icon-attachment
+            span.attachments-num 5
+            span.attachments-text attachments
             a.button.button-gray(href="", title="Add new attachment")
                 span +new file
     div.attachment-body
-        div.attachments-inner
-            div.attachment-single
+        - for(var x = 0; x < 3; x++)
+            div.single-attachment
                 div.attachment-name
                     span.icon.icon-document
-                    span pefildeusuario.png
+                    a(href="", title="Attachment pefildeusuario.png") pefildeusuario.png
                 div.attachment-comment
                     span Comentario sobre el contenido
                     span.attachment-size (125kb.)
diff --git a/app/styles/dependencies/mixins.scss b/app/styles/dependencies/mixins.scss
index be90c214..eb10e249 100644
--- a/app/styles/dependencies/mixins.scss
+++ b/app/styles/dependencies/mixins.scss
@@ -10,7 +10,7 @@
 }
 
 // Table Flex - http://devbryce.com/site/flexbox/
-@mixin table-flex() {
+@mixin table-flex {
     align-content: stretch;
     align-items: stretch;
     display: flex;
@@ -32,3 +32,11 @@
 @mixin box-shadow($h-shadow: 1px, $v-shadow: 1px, $blur: 15px, $spread: 6px, $color: rgba(0, 0, 0, .1)) {
     box-shadow: $h-shadow $v-shadow $blur $spread $color;
 }
+
+@mixin clearfix {
+    &:after {
+        clear: both;
+        content: '';
+        display: table;
+    }
+}
diff --git a/app/styles/layout/us-detail.scss b/app/styles/layout/us-detail.scss
index 7e9b9471..bf2fd2d2 100644
--- a/app/styles/layout/us-detail.scss
+++ b/app/styles/layout/us-detail.scss
@@ -24,6 +24,18 @@
     }
 }
 
+.us-content {
+    ul {
+        margin-left: 1rem;
+    }
+    li {
+        list-style-type: disc;
+    }
+    a {
+        color: $green-taiga;
+    }
+}
+
 .user-story-tags {
     input {
         display: inline-block;
diff --git a/app/styles/modules/attachments.scss b/app/styles/modules/attachments.scss
index 8b137891..3fb65111 100644
--- a/app/styles/modules/attachments.scss
+++ b/app/styles/modules/attachments.scss
@@ -1 +1,42 @@
+.attachments-header {
+    background: $whitish;
+    @include clearfix;
+    padding: .5rem 1rem;
+    .button {
+        float: right;
+        padding: .2rem 6rem;
+    }
+    .icon,
+    .attachments-num,
+    .attachments-text {
+        @extend %medium;
+        margin-right: .5rem;
+        position: relative;
+        top: 2px;
+    }
+}
 
+.single-attachment {
+    @include table-flex();
+    @extend %small;
+    border-bottom: 1px solid #cdcdcd;
+    padding: 1rem 0 1rem 1rem;
+    &:last-child {
+        border: 0;
+    }
+    .attachment-name {
+        @include table-flex-child(1, 200px);
+    }
+    .attachment-comment {
+        @include table-flex-child(3, 300px);
+        .attachment-size {
+            color: $gray-light;
+            margin-left: .5rem;
+        }
+    }
+    .icon {
+        @extend %large;
+        color: $gray-light;
+        display: none;
+    }
+}