CSS and HTML user profile refactor

app/partials/user-profile.jade

@@ -15,17 +15,18 @@ block content
                     span.green(tg-bo-html="sectionName")
 
             form
-                fieldset.avatar(tg-user-avatar)
+                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")
+                            input(type="text", name="email", placeholder="email", id="email", ng-model="user.email", data-type="email")
 
                         fieldset
                             label(for="full-name") Full name
@@ -39,8 +40,7 @@ block content
                 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

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;
     }

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);
+        }
+    }
+    fieldset {
+        margin-bottom: 1rem;
+        &:last-child {
+            margin-top: 2rem;
         }
-    .submit {
-        width: 50%;
     }
     label {
         @extend %title;
@@ -46,6 +43,7 @@
     }
     .button-green {
         color: $white;
+        cursor: pointer;
         display: block;
         padding: 12px;
         text-align: center;

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,