From 41c71818935e461be38d9b4cd086d5f239be2463 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Wed, 6 Aug 2014 10:52:11 +0200
Subject: [PATCH] Refactor of error messages 1/2

---
 app/coffee/modules/admin/lightboxes.coffee    | 22 ++++++++------
 app/partials/admin-memberships.jade           |  2 +-
 .../views/modules/lightbox_add-member.jade    |  2 ++
 app/styles/dependencies/forms.scss            |  4 +++
 app/styles/modules/admin/project-values.scss  | 18 +++++++-----
 app/styles/modules/common/colors-table.scss   |  3 ++
 app/styles/modules/common/lightbox.scss       | 29 +++++++++++--------
 7 files changed, 51 insertions(+), 29 deletions(-)

diff --git a/app/coffee/modules/admin/lightboxes.coffee b/app/coffee/modules/admin/lightboxes.coffee
index bb47e2a4..28081a55 100644
--- a/app/coffee/modules/admin/lightboxes.coffee
+++ b/app/coffee/modules/admin/lightboxes.coffee
@@ -31,15 +31,19 @@ MAX_MEMBERSHIP_FIELDSETS = 6
 
 CreateMembersDirective = ($rs, $rootScope, $confirm, lightboxService) ->
     template = _.template("""
-    <fieldset>
-        <input type="email" placeholder="Type an Email" data-required="true" />
-        <select data-required="true">
-            <% _.each(roleList, function(role) { %>
-            <option value="<%- role.id %>"><%- role.name %></option>
-            <% }); %>
-        </select>
-        <a class="icon icon-plus add-fieldset" href=""></a>
-    </fieldset>
+    <div class="add-member-wrapper">
+        <fieldset>
+            <input type="email" placeholder="Type an Email" data-required="true" />
+        </fieldset>
+        <fieldset>
+            <select data-required="true">
+                <% _.each(roleList, function(role) { %>
+                <option value="<%- role.id %>"><%- role.name %></option>
+                <% }); %>
+            </select>
+            <a class="icon icon-plus add-fieldset" href=""></a>
+        </fieldset>
+    </div>
     """) # i18n
 
     link = ($scope, $el, $attrs) ->
diff --git a/app/partials/admin-memberships.jade b/app/partials/admin-memberships.jade
index 35445975..756b759e 100644
--- a/app/partials/admin-memberships.jade
+++ b/app/partials/admin-memberships.jade
@@ -20,5 +20,5 @@ block content
 
             div.paginator.memberships-paginator
 
-        div.lightbox.ligbox_add-member.hidden(tg-lb-create-members)
+        div.lightbox.lightbox_add-member.hidden(tg-lb-create-members)
             include views/modules/lightbox_add-member
diff --git a/app/partials/views/modules/lightbox_add-member.jade b/app/partials/views/modules/lightbox_add-member.jade
index 9bf7f254..db16b3d2 100644
--- a/app/partials/views/modules/lightbox_add-member.jade
+++ b/app/partials/views/modules/lightbox_add-member.jade
@@ -3,6 +3,8 @@ a.close(href="", title="close")
 form
     h2.title New Member
 
+    //- Form is set in a directive
+
     a.button.button-green(href="", title="Save")
         span Create
 
diff --git a/app/styles/dependencies/forms.scss b/app/styles/dependencies/forms.scss
index 0c22f909..530e29d3 100644
--- a/app/styles/dependencies/forms.scss
+++ b/app/styles/dependencies/forms.scss
@@ -35,6 +35,10 @@ textarea {
 
 .checksley-error-list {
     margin-bottom: 0;
+    position: absolute;
+    top: 10px;
+    right: 2rem;
+    font-size: .8rem;
     li {
         color: $red;
         padding: .2rem;
diff --git a/app/styles/modules/admin/project-values.scss b/app/styles/modules/admin/project-values.scss
index a2feb997..30e23ffc 100644
--- a/app/styles/modules/admin/project-values.scss
+++ b/app/styles/modules/admin/project-values.scss
@@ -1,6 +1,7 @@
 .project-values-row {
     @include table-flex(stretch, center, flex, row, wrap, center);
     border-bottom: 1px solid $whitish;
+    padding: 1rem;
     &:hover {
         @include transition (background .2s ease-in);
         background: lighten($green-taiga, 60%);
@@ -10,7 +11,13 @@
             opacity: 1;
         }
     }
-
+    div {
+        margin-left: 1rem;
+        position: relative;
+        &:first-child {
+            margin: 0;
+        }
+    }
     .icon {
         @extend %large;
         color: $gray-light;
@@ -27,15 +34,12 @@
     border-bottom: 2px solid $gray-light;
 }
 
-.project-values-name,
-.project-values-isclosed,
-.project-values-settings {
-    padding: 1rem;
-}
-
 .project-values-name {
     @include table-flex-child(3, 0, 0);
 }
+.project-values-value {
+    @include table-flex-child(1, 0, 0);
+}
 
 .project-values-isclosed,
 .project-values-settings {
diff --git a/app/styles/modules/common/colors-table.scss b/app/styles/modules/common/colors-table.scss
index d3033992..fd188d05 100644
--- a/app/styles/modules/common/colors-table.scss
+++ b/app/styles/modules/common/colors-table.scss
@@ -31,6 +31,9 @@
                 cursor: pointer;
             }
         }
+        div {
+            position: relative;
+        }
         .color-column,
         .is-closed-column,
         .options-column,
diff --git a/app/styles/modules/common/lightbox.scss b/app/styles/modules/common/lightbox.scss
index d08ce5ba..05e2d0e3 100644
--- a/app/styles/modules/common/lightbox.scss
+++ b/app/styles/modules/common/lightbox.scss
@@ -154,27 +154,29 @@
     }
 }
 
-.ligbox_add-member {
+.lightbox_add-member {
+    .add-member-wrapper {
+        @include table-flex();
+    }
     fieldset {
-        @include clearfix;
-        margin-bottom: 1rem;
+        position: relative;
+        &:first-child {
+            @include table-flex-child(3, 400px);
+        }
+        &:last-child {
+            @include table-flex-child(1, 200px);
+            margin-left: .5rem;
+        }
     }
     input[type=email],
     select {
-        float: left;
         margin-bottom: 0;
     }
-    input[type=email] {
-        width: 430px;
-    }
     select {
-        margin-left: .5rem;
-        width: 255px;
+        width: 80%;
     }
     .icon {
         @extend %large;
-        float: left;
-        line-height: 40px;
         margin-left: .5rem;
     }
     .icon-delete {
@@ -183,12 +185,15 @@
         }
     }
     .button {
-        margin-top: 2rem;
+        margin-top: 1rem;
     }
     .help-text {
         @extend %small;
         padding: .5rem 1rem;
     }
+    .checksley-error-list {
+        right: .5rem;
+    }
 }
 
 .lightbox_add-sprint {