From 8274c37ab393cf79eb4c753cb77d3697fd3bd38c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Tue, 12 Aug 2014 12:59:41 +0200
Subject: [PATCH] CSS and HTML user profile refactor

---
 app/partials/user-profile.jade                | 42 +++++++++----------
 app/styles/modules/common/comments.scss       |  2 +-
 .../modules/user-settings/user-profile.scss   | 36 ++++++++--------
 csslintrc.json                                |  3 +-
 4 files changed, 41 insertions(+), 42 deletions(-)

diff --git a/app/partials/user-profile.jade b/app/partials/user-profile.jade
index 847cfbbe..4f328b9f 100644
--- a/app/partials/user-profile.jade
+++ b/app/partials/user-profile.jade
@@ -1,4 +1,4 @@
-extends dummy-layout
+    extends dummy-layout
 
 block head
     title Taiga  Project management web application with scrum in mind!
@@ -15,32 +15,32 @@ block content
                     span.green(tg-bo-html="sectionName")
 
             form
-                fieldset.avatar(tg-user-avatar)
-                    img.avatar(ng-src="{{user.big_photo}}" alt="avatar")
-                    input(type="file", id="avatar-field", tg-avatar-model="avatarAttachment" class="hidden")
-                    p The image will be cropped to 80x80 size.
-                    a.button.button-green.change Change
-                    a.use-gravatar Use gravatar image
+                div.container
+                    div.avatar-container
+                        fieldset(tg-user-avatar)
+                            img.avatar(ng-src="{{user.big_photo}}" alt="avatar")
+                            input(type="file", id="avatar-field", tg-avatar-model="avatarAttachment" class="hidden")
+                            p The image will be cropped to 80x80 size.
+                            a.button.button-green.change Change
+                            a.use-gravatar Use gravatar image
+                    div.data
+                        fieldset
+                            label(for="email") Email
+                            input(type="text", name="email", placeholder="email", id="email", ng-model="user.email", data-type="email")
 
-                fieldset
-                    label(for="email") Email
-                    input(type="text", name="email", placeholder="email", id="email",
-                          ng-model="user.email", data-type="email")
+                        fieldset
+                            label(for="full-name") Full name
+                            input(type="text", name="full_name", placeholder="Full name", id="full-name",
+                                  ng-model="user.full_name")
 
-                fieldset
-                    label(for="full-name") Full name
-                    input(type="text", name="full_name", placeholder="Full name", id="full-name",
-                          ng-model="user.full_name")
-
-                fieldset
-                    label(for="bio") Bio
-                    textarea(name="bio", placeholder="Bio", id="bio", ng-model="user.bio")
+                        fieldset
+                            label(for="bio") Bio
+                            textarea(name="bio", placeholder="Bio", id="bio", ng-model="user.bio")
 
                 fieldset.submit
                     input(type="submit", class="hidden")
                     a.button.button-green.save-profile(href="") Save
-                    a.delete-account(href="", title="Delete Taiga account",
-                                     ng-click="ctrl.openDeleteLightbox()") Delete Taiga account
+                    a.delete-account(href="", title="Delete Taiga account", ng-click="ctrl.openDeleteLightbox()") Delete Taiga account
 
     div.lightbox.lightbox-delete-account.hidden(tg-lb-delete-user)
         include views/modules/lightbox-delete-account
diff --git a/app/styles/modules/common/comments.scss b/app/styles/modules/common/comments.scss
index ad8c4bb9..579a4dea 100644
--- a/app/styles/modules/common/comments.scss
+++ b/app/styles/modules/common/comments.scss
@@ -6,7 +6,7 @@
         margin-bottom: .5rem;
         min-height: inherit;
     }
-    a.save-comment {
+    .save-comment {
         color: $white;
         float: right;
     }
diff --git a/app/styles/modules/user-settings/user-profile.scss b/app/styles/modules/user-settings/user-profile.scss
index d7f234b8..c471f910 100644
--- a/app/styles/modules/user-settings/user-profile.scss
+++ b/app/styles/modules/user-settings/user-profile.scss
@@ -1,14 +1,13 @@
 .user-profile {
-    fieldset {
-        margin-bottom: 1rem;
-        width: 37%;
-        &:last-child {
-            margin-top: 2rem;
+    form {
+        max-width: 700px;
+        width: 100%;
+        .container {
+            @include table-flex();
         }
-        &.avatar {
-            float: left;
-            margin: 0 1% 0 0;
-            width: 12%;
+        .avatar-container {
+            @include table-flex-child(1, 0, 0);
+            margin-right: 1rem;
             img {
                 border: 2px solid $white;
                 border-radius: 8%;
@@ -19,14 +18,6 @@
                 margin-bottom: 0;
                 text-align: center;
             }
-            .button {
-                bottom: 15px;
-                cursor: pointer;
-                height: 34px;
-                margin: 5px 10%;
-                padding: 7px;
-                width: 80%;
-            }
             .use-gravatar {
                 @extend %small;
                 cursor: pointer;
@@ -35,9 +26,15 @@
                 width: 100%;
             }
         }
+        .data {
+            @include table-flex-child(3, 0, 0);
+        }
     }
-    .submit {
-        width: 50%;
+    fieldset {
+        margin-bottom: 1rem;
+        &:last-child {
+            margin-top: 2rem;
+        }
     }
     label {
         @extend %title;
@@ -46,6 +43,7 @@
     }
     .button-green {
         color: $white;
+        cursor: pointer;
         display: block;
         padding: 12px;
         text-align: center;
diff --git a/csslintrc.json b/csslintrc.json
index 86e74f74..5341efe7 100644
--- a/csslintrc.json
+++ b/csslintrc.json
@@ -3,13 +3,14 @@
     "compatible-vendor-prefixes": false,
     "empty-rules": true,
     "duplicate-properties": false,
+    "font-sizes": false,
     "ids": true,
     "known-properties": true,
     "overqualified-elements": true,
     "shorthand": true,
     "text-indent": true,
     "unique-headings": false,
-    "vendor-prefix": true,
+    "vendor-prefix": false,
     "zero-units": true,
     "universal-selector": false,
     "box-sizing": false,