From 1c2468a2f333c1dbe93e6d567238250f36437ec2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Wed, 14 Jan 2015 18:25:42 +0100
Subject: [PATCH] WIP improving legibility

---
 .../views/modules/wizard-create-project.jade  |  20 +--
 app/styles/components/basic-table.scss        |  11 +-
 app/styles/components/created-by.scss         |   8 +-
 app/styles/components/kanban-task.scss        |  17 ++-
 app/styles/components/taskboard-task.scss     |  61 ++++-----
 app/styles/components/watchers.scss           |   9 +-
 app/styles/modules/common/colors-table.scss   |  16 ++-
 app/styles/modules/common/lightbox.scss       | 111 +++++++++-------
 app/styles/modules/common/related-tasks.scss  |  17 ++-
 app/styles/modules/common/wizard.scss         | 120 +++++++++---------
 10 files changed, 222 insertions(+), 168 deletions(-)

diff --git a/app/partials/views/modules/wizard-create-project.jade b/app/partials/views/modules/wizard-create-project.jade
index aef6fd90..3395d5ac 100644
--- a/app/partials/views/modules/wizard-create-project.jade
+++ b/app/partials/views/modules/wizard-create-project.jade
@@ -21,16 +21,18 @@ form
         div.title
             h1 Create Project
             p Fresh and clean. So exciting!
-        fieldset
-            input(type="text", name="name", ng-model="data.name", data-required="true", placeholder="Name", maxlength="45")
-        fieldset
-            textarea(name="description", ng-model="data.description", data-required="true",  placeholder="Description")
-        fieldset.wizard-action
-            div
-                a.button-prev.button.button-gray(href="", title="Prev") Prev
-                a.submit-button.button.button-green(href="", title="Create") Create
+        div.template-wrapper
+            div.template-inner
+                fieldset
+                    input(type="text", name="name", ng-model="data.name", data-required="true", placeholder="Name", maxlength="45")
+                fieldset
+                    textarea(name="description", ng-model="data.description", data-required="true",  placeholder="Description")
+                fieldset.wizard-action
+                    div
+                        a.button-prev.button.button-gray(href="", title="Prev") Prev
+                        a.submit-button.button.button-green(href="", title="Create") Create
 
-            button(type="submit", class="hidden")
+                    button(type="submit", class="hidden")
 
 div.progress-bar
     div.progress-state
diff --git a/app/styles/components/basic-table.scss b/app/styles/components/basic-table.scss
index d6849312..52b827b8 100644
--- a/app/styles/components/basic-table.scss
+++ b/app/styles/components/basic-table.scss
@@ -1,15 +1,20 @@
 .basic-table {
-    @include table-flex(stretch, center, flex, column, wrap, flex-start);
+    display: flex;
+    flex-direction: column;
     width: 100%;
     .row {
-        @include table-flex(stretch, center, flex, row, nowrap, flex-start);
+        align-items: center;
         border-bottom: 1px solid darken($whitish, 4%);
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
         padding: .3rem 0;
         text-align: left;
         width: 100%;
         @for $i from 1 through 8 {
             .width-#{$i} {
-                @include table-flex-child($i, 50px, 0);
+                flex-grow: #{$i};
+                flex-basis: 50px;
             }
         }
         &:last-child {
diff --git a/app/styles/components/created-by.scss b/app/styles/components/created-by.scss
index 68dc5561..bff30e0a 100644
--- a/app/styles/components/created-by.scss
+++ b/app/styles/components/created-by.scss
@@ -1,17 +1,19 @@
 .us-created-by {
-    @include table-flex();
+    display: flex;
     margin-bottom: 1rem;
     margin-top: .5rem;
     position: relative;
     .user-avatar {
-        @include table-flex-child(0, 40px, 0);
+        flex-basis: 40px;
+        flex-grow: 0;
         img {
             border-radius: 8%;
             width: 100%;
         }
     }
     .created-by {
-        @include table-flex-child(3, 70px, 0);
+        flex-basis: 70px;
+        flex-grow: 3;
         margin-left: .5rem;
         .created-title,
         .created-date {
diff --git a/app/styles/components/kanban-task.scss b/app/styles/components/kanban-task.scss
index 63778eb9..8e8e96b8 100644
--- a/app/styles/components/kanban-task.scss
+++ b/app/styles/components/kanban-task.scss
@@ -27,17 +27,17 @@
         }
     }
     .kanban-tagline {
-        @include table-flex();
         border-color: $postit-hover;
+        display: flex;
         height: .6rem;
     }
     .kanban-tag {
-        @include table-flex-child(1, 0, 0, 0);
         border-color: $postit-hover;
+        flex-grow: 1;
         height: .6rem;
     }
     .kanban-task-inner {
-        @include table-flex();
+        display: flex;
     }
     .avatar {
         a {
@@ -69,7 +69,8 @@
     }
     .task-text {
         @extend %small;
-        @include table-flex-child($flex-grow: 10, $flex-basis: 50px);
+        flex-basis: 50px;
+        flex-grow: 10;
         padding: 0 .5rem 0 .8rem;
         word-wrap: break-word;
     }
@@ -126,7 +127,9 @@
         }
     }
     .avatar {
-        @include table-flex-child($flex-basis: 50px);
+        flex-basis: 50px;
+        flex-grow: 1;
+        width: 55px;
     }
     .task-name {
         word-wrap: break-word;
@@ -188,7 +191,9 @@
         }
     }
     .avatar {
-        @include table-flex-child($flex-basis: 40px);
+        flex-basis: 50px;
+        flex-grow: 1;
+        width: 55px;
     }
     .task-num {
         vertical-align: top;
diff --git a/app/styles/components/taskboard-task.scss b/app/styles/components/taskboard-task.scss
index 73a20f8d..8e1440bb 100644
--- a/app/styles/components/taskboard-task.scss
+++ b/app/styles/components/taskboard-task.scss
@@ -32,49 +32,49 @@
         }
     }
     .taskboard-tagline {
-        @include table-flex();
         border-color: $postit-hover;
+        display: flex;
         height: .6rem;
     }
     .taskboard-tag {
-        @include table-flex-child(1, 0, 0, 0);
         border-top: .3rem solid $postit-hover;
+        flex-basis: 0;
+        flex-grow: 1;
         height: .6rem;
         z-index: 100;
     }
     .taskboard-task-inner {
-        @include table-flex();
+        display: flex;
         padding: .5rem;
     }
     .taskboard-user-avatar {
-        .avatar {
-            @include table-flex-child($flex-basis: 50px);
-            a {
-                @extend %small;
-                display: block;
-                text-align: center;
-            }
-            img {
-                margin: 0 auto;
-                &:hover {
-                    border: 2px solid $green-taiga;
-                    transition: border .3s linear;
-                }
-            }
-            figcaption {
-                color: darken($postit-hover, 15%);
-                display: none;
-                //display: block;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                width: 100%;
+        flex-basis: 50px;
+        flex-grow: 1;
+        max-width: 55px;
+        a {
+            @extend %small;
+            display: block;
+            text-align: center;
+        }
+        img {
+            margin: 0 auto;
+            &:hover {
+                border: 2px solid $green-taiga;
+                transition: border .3s linear;
             }
         }
-        &.iocaine {
-            img {
-                filter: hue-rotate(150deg) saturate(200%);
-            }
+        figcaption {
+            color: darken($postit-hover, 15%);
+            display: none;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: 100%;
+        }
+    }
+    .iocaine {
+        img {
+            filter: hue-rotate(150deg) saturate(200%);
         }
     }
     .icon-iocaine {
@@ -101,7 +101,8 @@
     }
     .taskboard-text {
         @extend %small;
-        @include table-flex-child($flex-grow: 10, $flex-basis: 50px);
+        flex-basis: 50px;
+        flex-grow: 10;
         padding: 0 .5rem 0 1rem;
         word-wrap: break-word;
     }
diff --git a/app/styles/components/watchers.scss b/app/styles/components/watchers.scss
index 247f30fd..4374ac83 100644
--- a/app/styles/components/watchers.scss
+++ b/app/styles/components/watchers.scss
@@ -19,9 +19,12 @@
         }
     }
     .watcher-single {
-        @include table-flex(center, center, flex, row, wrap, center);
+        align-content: center;
+        align-items: center;
         background: transparent;
         border-bottom: 1px solid $gray-light;
+        display: flex;
+        justify-content: center;
         padding: .5rem;
         vertical-align: middle;
         &:last-child {
@@ -36,13 +39,13 @@
     }
     .watcher-name {
         @extend %small;
-        @include table-flex-child(8, 0);
         color: $grayer;
+        flex-grow: 8;
         margin-left: 1rem;
         position: relative;
     }
     .watcher-avatar {
-        @include table-flex-child(1, 0);
+        flex-grow: 1;
     }
     .icon-delete {
         opacity: 0;
diff --git a/app/styles/modules/common/colors-table.scss b/app/styles/modules/common/colors-table.scss
index c1594d54..7e4e8639 100644
--- a/app/styles/modules/common/colors-table.scss
+++ b/app/styles/modules/common/colors-table.scss
@@ -11,7 +11,9 @@
         }
     }
     .row {
-        @include table-flex(stretch, center, flex, row, wrap, center);
+        align-items: center;
+        display: flex;
+        justify-content: center;
         padding: 1rem;
         &:hover {
             .options-column {
@@ -32,7 +34,8 @@
             }
         }
         .color-column {
-            @include table-flex-child(1, 60px, 0);
+            flex-basis: 60px;
+            flex-grow: 1;
             max-width: 100px;
             position: relative;
         }
@@ -40,10 +43,12 @@
         .is-closed-column,
         .options-column,
         .status-wip-limit {
-            @include table-flex-child(1, 100px, 0);
+            flex-grow: 1;
+            flex-basis: 100px;
         }
         .status-name {
-            @include table-flex-child(6, 150px, 0);
+            flex-grow: 6;
+            flex-basis: 150px;
             padding: 0 10px;
             position: relative;
             span {
@@ -52,7 +57,8 @@
             }
         }
         .status-slug {
-            @include table-flex-child(6, 150px, 0);
+            flex-grow: 6;
+            flex-basis: 150px;
             padding: 0 10px;
         }
         .options-column {
diff --git a/app/styles/modules/common/lightbox.scss b/app/styles/modules/common/lightbox.scss
index 3038993f..aaa93e6f 100644
--- a/app/styles/modules/common/lightbox.scss
+++ b/app/styles/modules/common/lightbox.scss
@@ -25,7 +25,9 @@
 
 .lightbox-generic-form {
     form {
-        @include table-flex-child(0, 600px, 0, 600px);
+        flex-basis: 600px;
+        flex-grow: 0;
+        max-width: 600px;
     }
 
     fieldset {
@@ -58,11 +60,15 @@
     }
 
     .settings {
-        @include table-flex(flex-start, stretch, flex, row, wrap, flex-start);
+        align-content: flex-start;
+        align-items: stretch;
+        display: flex;
+        justify-content: flex-start;
         margin-bottom: 1rem;
 
         fieldset {
-            @include table-flex-child(1, 30%, 0);
+            flex-basis: 30%;
+            flex-grow: 1;
             margin-right: .5rem;
             text-align: center;
             &:last-child {
@@ -94,28 +100,20 @@
         .client-requirement,
         .team-requirement,
         .iocaine-flag {
-            input {
-                &:checked {
-                    +label {
-                        background: $fresh-taiga;
-                        color: $white;
-                    }
-                }
+            input:checked+label {
+                background: $fresh-taiga;
+                color: $white;
             }
         }
 
         .blocking-flag {
-            input {
-                &:checked {
-                    +label {
-                        background: $red;
-                        color: $white;
-                    }
-                }
+            input:checked+label {
+                background: $red;
+                color: $white;
             }
         }
 
-        input[type="checkbox"] {
+        input {
             display: none;
         }
     }
@@ -128,7 +126,9 @@
 
 .lightbox-generic-bulk {
     form {
-        @include table-flex-child(0, 600px, 0, 600px);
+        flex-basis: 600px;
+        flex-grow: 0;
+        max-width: 600px;
     }
     textarea {
         margin-bottom: 1rem;
@@ -139,7 +139,9 @@
 
 .lightbox-search {
     form {
-        @include table-flex-child(0, 600px, 0, 600px);
+        flex-basis: 600px;
+        flex-grow: 0;
+        max-width: 600px;
     }
     input {
         margin-bottom: 1rem;
@@ -148,7 +150,7 @@
 
 .lightbox-add-member {
     .add-member-wrapper {
-        @include table-flex();
+        display: flex;
         margin-bottom: .5rem;
         &:last-child {
             margin-bottom: 0;
@@ -156,10 +158,12 @@
         fieldset {
             position: relative;
             &:first-child {
-                @include table-flex-child(3, 400px);
+                flex-basis: 400px;
+                flex-grow: 3;
             }
             &:last-child {
-                @include table-flex-child(1, 200px);
+                flex-basis: 200px;
+                flex-grow: 1;
                 margin-left: .5rem;
             }
         }
@@ -167,7 +171,7 @@
     .extra-text {
         margin-top: 1rem;
     }
-    input[type=email],
+    input,
     select {
         margin-bottom: 0;
     }
@@ -203,7 +207,9 @@
 
 .lightbox-sprint-add-edit {
     form {
-        @include table-flex-child(0, 600px, 0, 600px);
+        flex-basis: 600px;
+        flex-flow: 0;
+        max-width: 600px;
     }
     .last-sprint-name {
         color: $gray;
@@ -250,7 +256,9 @@
 
 .lightbox-generic-ask {
     form {
-        @include table-flex-child(0, 420px, 0, 420px);
+        flex-basis: 420px;
+        flex-flow: 0;
+        max-width: 420px;
     }
     .subtitle,
     .message {
@@ -263,9 +271,9 @@
         @extend %title;
     }
     .options {
-        @include table-flex();
+        display: flex;
         a {
-            @include table-flex-child(1, 0, 0);
+            flex-grow: 1;
             padding: 8px 0;
             text-align: center;
             &:first-child {
@@ -278,7 +286,8 @@
 .lightbox-ask-choice {
     text-align: center;
     form {
-        @include table-flex-child(0, 420px, 0);
+        flex-basis: 420px;
+        flex-grow: 0;
     }
     .question,
     .subtitle {
@@ -297,9 +306,9 @@
         }
     }
     .options {
-        @include table-flex();
+        display: flex;
         a {
-            @include table-flex-child(1, 0, 0);
+            flex-grow: 1;
             padding: 8px 0;
             text-align: center;
             &:first-child {
@@ -311,7 +320,9 @@
 
 .lightbox-delete-account {
     form {
-        @include table-flex-child(0, 420px, 0, 420px);
+        flex-basis: 420px;
+        flex-grow: 0;
+        width: 420px;
     }
     .question,
     .subtitle {
@@ -335,9 +346,9 @@
         }
     }
     .options {
-        @include table-flex();
+        display: flex;
         a {
-            @include table-flex-child(1, 0, 0);
+            flex-grow: 1;
             padding: 8px 0;
             text-align: center;
             &:first-child {
@@ -349,7 +360,9 @@
 
 .lightbox-delete-project {
     form {
-        @include table-flex-child(0, 420px, 0, 420px);
+        flex-basis: 420px;
+        flex-grow: 0;
+        width: 420px;
     }
     .question,
     .subtitle {
@@ -362,9 +375,9 @@
         @extend %title;
     }
     .options {
-        @include table-flex();
+        display: flex;
         a {
-            @include table-flex-child(1, 0, 0);
+            flex-grow: 1;
             padding: 8px 0;
             text-align: center;
             &:first-child {
@@ -378,7 +391,9 @@
 .lightbox-generic-success,
 .lightbox-generic-error {
     section {
-        @include table-flex-child(0, 420px, 0, 420px);
+        flex-basis: 420px;
+        flex-grow: 0;
+        width: 420px;
     }
     h2 {
         line-height: 2rem;
@@ -387,14 +402,18 @@
 
 .lightbox-create-issue {
     form {
-        @include table-flex-child(0, 600px, 0, 600px);
+        flex-basis: 600px;
+        flex-grow: 0;
+        width: 600px;
     }
 
     .fieldset-row {
-        @include table-flex();
+        display: flex;
         fieldset {
-            @include table-flex-child(1, 100px, 0, 30%);
+            flex-basis: 100px;
+            flex-grow: 1;
             margin-right: .5rem;
+            width: 30%;
             &:last-child {
                 margin: 0;
             }
@@ -410,7 +429,9 @@
 
 .lightbox-block {
     .form {
-        @include table-flex-child(0, 420px, 0, 420px);
+        flex-basis: 420px;
+        flex-grow: 0;
+        width: 420px;
     }
     textarea {
         margin-bottom: 1rem;
@@ -421,14 +442,16 @@
 
 .lightbox-select-user {
     .form {
-        @include table-flex-child(0, 600px, 0, 600px);
+        flex-basis: 600px;
+        flex-grow: 0;
+        width: 600px;
     }
     .watchers {
         margin-top: 1rem;
         min-height: 440px;
 
         .watcher-name {
-            @include table-flex-child(12, 0);
+            flex-grow: 12;
         }
     }
     .watcher-single {
diff --git a/app/styles/modules/common/related-tasks.scss b/app/styles/modules/common/related-tasks.scss
index 89a5d168..34624b6f 100644
--- a/app/styles/modules/common/related-tasks.scss
+++ b/app/styles/modules/common/related-tasks.scss
@@ -4,8 +4,11 @@
 }
 
 .related-tasks-header {
-    @include table-flex(space-between, center, flex, row, wrap, space-between);
+    align-content: space-between;
+    align-items: center;
     background: $whitish;
+    display: flex;
+    justify-content: space-between;
     padding: .5rem 1rem;
     .related-tasks-title {
         @extend %medium;
@@ -26,8 +29,11 @@
     width: 100%;
     .row {
         @extend %small;
-        @include table-flex(center, center, flex, row, wrap, center);
+        align-content: center;
+        align-items: center;
         border-bottom: 1px solid $whitish;
+        display: flex;
+        justify-content: center;
         padding: .5rem 0 .5rem .5rem;
         position: relative;
         text-align: left;
@@ -43,13 +49,14 @@
             border: 0;
         }
         .tasks {
-            @include table-flex-child(10, 78%, 0);
+            flex-basis: 78%;
+            flex-grow: 10;
         }
         .status {
-            @include table-flex-child(0, 10%, 0);
+            flex-basis: 10%;
         }
         .assigned-to {
-            @include table-flex-child(0, 10%, 0);
+            flex-basis: 10%;
         }
     }
     .related-task-create-form {
diff --git a/app/styles/modules/common/wizard.scss b/app/styles/modules/common/wizard.scss
index bc2df2e4..d89c3123 100644
--- a/app/styles/modules/common/wizard.scss
+++ b/app/styles/modules/common/wizard.scss
@@ -42,9 +42,7 @@
         &.active {
             animation: formSlide .4s ease-in-out;
             &.create-step2,
-            &.create-step3 {
-                @include table-flex();
-            }
+            &.create-step3,
             &.create-step1 {
                 display: block;
             }
@@ -52,12 +50,13 @@
     }
     .wizard-action {
         div {
-            @include table-flex();
+            display: flex;
         }
         a {
-            @include table-flex-child(1, 40%, 0);
             color: $white;
             display: inline-block;
+            flex-grow: 1;
+            flex-basis: 40%;
             &:first-child {
                 margin-right: .5rem;
             }
@@ -65,38 +64,38 @@
     }
     .create-step1 {
         .template-inner {
-            @include table-flex();
-            fieldset {
-                @include table-flex-child(1, 0, 0);
-                &:first-child {
-                    margin-right: .5rem;
-                }
+            display: flex;
+        }
+        fieldset {
+            flex-grow: 1;
+            &:first-child {
+                margin-right: .5rem;
             }
         }
-        input[type="radio"] {
+        input {
             display: none;
-            &:checked {
-                +label {
-                    background: rgba($fresh-taiga, .7);
-                    transition: background .3s ease-in;
-                }
-            }
+        }
+        input:checked {
             +label {
-                background: rgba($whitish, .7);
-                cursor: pointer;
-                display: block;
-                margin-bottom: 1rem;
-                padding: 1rem;
-                text-align: center;
+                background: rgba($fresh-taiga, .7);
                 transition: background .3s ease-in;
-                &:hover {
-                    background: rgba($green-taiga, .7);
-                    transition: background .3s ease-in;
-                }
-                .icon {
-                    @extend %xxlarge;
-                    color: $white;
-                }
+            }
+        }
+        input+label {
+            background: rgba($whitish, .7);
+            cursor: pointer;
+            display: block;
+            margin-bottom: 1rem;
+            padding: 1rem;
+            text-align: center;
+            transition: background .3s ease-in;
+            &:hover {
+                background: rgba($green-taiga, .7);
+                transition: background .3s ease-in;
+            }
+            .icon {
+                @extend %xxlarge;
+                color: $white;
             }
         }
         h2 {
@@ -115,39 +114,40 @@
         left: 0;
         position: absolute;
         width: 100%;
-        &.step1 {
-            .bar {
-                transition: width .6s ease-in-out;
-                width: 25%;
-            }
-            .progress-state {
-                span {
-                    &:nth-child(1) {
-                        color: rgba($white, 1);
-                        transition: color .3s ease-in-out;
-                        transition-delay: .6s;
-                    }
-                }
-            }
+    }
+    .step1 {
+        .bar {
+            transition: width .6s ease-in-out;
+            width: 25%;
         }
-        &.step2 {
-            .bar {
-                transition: width .6s ease-in-out;
-                // width: 50%;
-                width: 75%;
-            }
-            .progress-state {
-                span {
-                    &:nth-child(1),
-                    &:nth-child(2) {
-                        color: rgba($white, 1);
-                        transition: color .3s ease-in-out;
-                        transition-delay: .6s;
-                    }
+        .progress-state {
+            span {
+                &:nth-child(1) {
+                    color: rgba($white, 1);
+                    transition: color .3s ease-in-out;
+                    transition-delay: .6s;
                 }
             }
         }
     }
+    .step2 {
+        .bar {
+            transition: width .6s ease-in-out;
+            // width: 50%;
+            width: 75%;
+        }
+        .progress-state {
+            span {
+                &:nth-child(1),
+                &:nth-child(2) {
+                    color: rgba($white, 1);
+                    transition: color .3s ease-in-out;
+                    transition-delay: .6s;
+                }
+            }
+        }
+    }
+
     .progress-state {
         position: absolute;
         width: 100%;