Refactor of error messages 1/2

app/coffee/modules/admin/lightboxes.coffee

@@ -31,8 +31,11 @@ MAX_MEMBERSHIP_FIELDSETS = 6
 
 CreateMembersDirective = ($rs, $rootScope, $confirm, lightboxService) ->
     template = _.template("""
+    <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>
@@ -40,6 +43,7 @@ CreateMembersDirective = ($rs, $rootScope, $confirm, lightboxService) ->
             </select>
             <a class="icon icon-plus add-fieldset" href=""></a>
         </fieldset>
+    </div>
     """) # i18n
 
     link = ($scope, $el, $attrs) ->

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

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
 

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;

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 {

app/styles/modules/common/colors-table.scss

@@ -31,6 +31,9 @@
                 cursor: pointer;
             }
         }
+        div {
+            position: relative;
+        }
         .color-column,
         .is-closed-column,
         .options-column,

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;
+        position: relative;
-        margin-bottom: 1rem;
+        &: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: 80%;
-        width: 255px;
     }
     .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 {