CSS and HTML user profile refactor

stable
Xavier Julián 2014-08-12 12:59:41 +02:00
parent b3a3709e0a
commit 8274c37ab3
4 changed files with 41 additions and 42 deletions

View File

@ -1,4 +1,4 @@
extends dummy-layout extends dummy-layout
block head block head
title Taiga Project management web application with scrum in mind! title Taiga Project management web application with scrum in mind!
@ -15,32 +15,32 @@ block content
span.green(tg-bo-html="sectionName") span.green(tg-bo-html="sectionName")
form form
fieldset.avatar(tg-user-avatar) div.container
img.avatar(ng-src="{{user.big_photo}}" alt="avatar") div.avatar-container
input(type="file", id="avatar-field", tg-avatar-model="avatarAttachment" class="hidden") fieldset(tg-user-avatar)
p The image will be cropped to 80x80 size. img.avatar(ng-src="{{user.big_photo}}" alt="avatar")
a.button.button-green.change Change input(type="file", id="avatar-field", tg-avatar-model="avatarAttachment" class="hidden")
a.use-gravatar Use gravatar image 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 fieldset
label(for="email") Email label(for="full-name") Full name
input(type="text", name="email", placeholder="email", id="email", input(type="text", name="full_name", placeholder="Full name", id="full-name",
ng-model="user.email", data-type="email") ng-model="user.full_name")
fieldset fieldset
label(for="full-name") Full name label(for="bio") Bio
input(type="text", name="full_name", placeholder="Full name", id="full-name", textarea(name="bio", placeholder="Bio", id="bio", ng-model="user.bio")
ng-model="user.full_name")
fieldset
label(for="bio") Bio
textarea(name="bio", placeholder="Bio", id="bio", ng-model="user.bio")
fieldset.submit fieldset.submit
input(type="submit", class="hidden") input(type="submit", class="hidden")
a.button.button-green.save-profile(href="") Save a.button.button-green.save-profile(href="") Save
a.delete-account(href="", title="Delete Taiga account", a.delete-account(href="", title="Delete Taiga account", ng-click="ctrl.openDeleteLightbox()") Delete Taiga account
ng-click="ctrl.openDeleteLightbox()") Delete Taiga account
div.lightbox.lightbox-delete-account.hidden(tg-lb-delete-user) div.lightbox.lightbox-delete-account.hidden(tg-lb-delete-user)
include views/modules/lightbox-delete-account include views/modules/lightbox-delete-account

View File

@ -6,7 +6,7 @@
margin-bottom: .5rem; margin-bottom: .5rem;
min-height: inherit; min-height: inherit;
} }
a.save-comment { .save-comment {
color: $white; color: $white;
float: right; float: right;
} }

View File

@ -1,14 +1,13 @@
.user-profile { .user-profile {
fieldset { form {
margin-bottom: 1rem; max-width: 700px;
width: 37%; width: 100%;
&:last-child { .container {
margin-top: 2rem; @include table-flex();
} }
&.avatar { .avatar-container {
float: left; @include table-flex-child(1, 0, 0);
margin: 0 1% 0 0; margin-right: 1rem;
width: 12%;
img { img {
border: 2px solid $white; border: 2px solid $white;
border-radius: 8%; border-radius: 8%;
@ -19,14 +18,6 @@
margin-bottom: 0; margin-bottom: 0;
text-align: center; text-align: center;
} }
.button {
bottom: 15px;
cursor: pointer;
height: 34px;
margin: 5px 10%;
padding: 7px;
width: 80%;
}
.use-gravatar { .use-gravatar {
@extend %small; @extend %small;
cursor: pointer; cursor: pointer;
@ -35,9 +26,15 @@
width: 100%; width: 100%;
} }
} }
.data {
@include table-flex-child(3, 0, 0);
}
} }
.submit { fieldset {
width: 50%; margin-bottom: 1rem;
&:last-child {
margin-top: 2rem;
}
} }
label { label {
@extend %title; @extend %title;
@ -46,6 +43,7 @@
} }
.button-green { .button-green {
color: $white; color: $white;
cursor: pointer;
display: block; display: block;
padding: 12px; padding: 12px;
text-align: center; text-align: center;

View File

@ -3,13 +3,14 @@
"compatible-vendor-prefixes": false, "compatible-vendor-prefixes": false,
"empty-rules": true, "empty-rules": true,
"duplicate-properties": false, "duplicate-properties": false,
"font-sizes": false,
"ids": true, "ids": true,
"known-properties": true, "known-properties": true,
"overqualified-elements": true, "overqualified-elements": true,
"shorthand": true, "shorthand": true,
"text-indent": true, "text-indent": true,
"unique-headings": false, "unique-headings": false,
"vendor-prefix": true, "vendor-prefix": false,
"zero-units": true, "zero-units": true,
"universal-selector": false, "universal-selector": false,
"box-sizing": false, "box-sizing": false,