More progress on the application page.

Created and styled the forms for updating user/timeline information.
Wired the hidden forms to links that expose them using jQuery.
This commit is contained in:
Jonathan Bernard
2011-02-12 07:48:19 -06:00
parent 9c645e9a88
commit 6197363508
4 changed files with 205 additions and 31 deletions

View File

@ -79,6 +79,34 @@ body {
-webkit-border-bottom-left-radius: 0.5em;
border-bottom-left-radius: 0.5em; }
form {
border-top: solid 1px #979681;
padding: 0.5em 0 0.5em 2em;
overflow: hidden; }
form label {
color: #626150;
display: block;
overflow: hidden; }
form label span {
float: left;
width: 6em;
padding-top: 0.1em; }
form input.text-input {
border: 1px solid #979681; }
form .form-col {
overflow: hidden;
float: left;
padding-right: 2em; }
form .form-col input.text-input {
width: 10em; }
form .form-submit {
float: left;
width: 100%;
overflow: hidden; }
form .form-submit input {
border: 1px solid #979681;
background: #f6f3ea; }
#user {
-moz-border-radius-topleft: 0.5em;
-webkit-border-top-left-radius: 0.5em;
@ -86,6 +114,8 @@ body {
-moz-border-radius-topright: 0.5em;
-webkit-border-top-right-radius: 0.5em;
border-top-right-radius: 0.5em; }
#user .control-links {
padding-top: 0.6em; }
#user #fullname, #user #username {
font-weight: bold;
font-size: x-large;
@ -93,11 +123,18 @@ body {
#user #username {
padding-left: 0.2em;
color: #626150; }
#user .control-links {
padding-top: 0.6em; }
#user-info {
display: none; }
#user #change-pwd {
display: none; }
#user #user-info .form-submit {
padding: 0.5em 2em 0.5em 2em;
position: relative; }
#user #user-info .form-submit div {
position: relative;
float: right;
left: -50%; }
#user #user-info .form-submit div input {
position: relative;
left: 50%; }
#timeline #timeline-name, #timeline #timeline-desc {
font-weight: bold; }
@ -105,6 +142,12 @@ body {
color: #626150; }
#timeline .control-links {
padding-top: 0.2em; }
#timeline #timeline-info .form-submit {
width: auto;
float: right;
overflow: inline; }
#timeline-info {
display: none; }
#user-info, #timeline-info {
display: none;
width: 100%;
float: left; }

View File

@ -94,11 +94,54 @@ body {
@include rounded2(bottom, left, 0.5em);
}
form {
border-top: solid 1px $bbor;
padding: 0.5em 0 0.5em 2em;
overflow: hidden;
label {
span {
float: left;
width: 6em;
padding-top: 0.1em;
}
color: $greyTxt;
display: block;
overflow: hidden;
}
input.text-input {
border: 1px solid $bbor;
}
.form-col {
overflow: hidden;
float: left;
padding-right: 2em;
input.text-input { width: 10em; }
}
.form-submit {
float: left;
width: 100%;
overflow: hidden;
input {
border: 1px solid $bbor;
background: lighten($bbg, 10%);
}
}
}
#user {
@include rounded2(top, left, 0.5em);
@include rounded2(top, right, 0.5em);
.control-links { padding-top: 0.6em; }
#fullname, #username {
font-weight: bold;
font-size: x-large;
@ -110,11 +153,23 @@ body {
color: $greyTxt;
}
.control-links { padding-top: 0.6em; }
}
#change-pwd { display: none; }
#user-info {
display: none;
#user-info .form-submit {
padding: 0.5em 2em 0.5em 2em;
position: relative;
div {
position: relative;
float: right;
left: -50%;
input {
position: relative;
left: 50%;
}
}
}
}
#timeline {
@ -124,8 +179,19 @@ body {
#timeline-desc { color: $greyTxt; }
.control-links { padding-top: 0.2em; }
#timeline-info .form-submit {
width: auto;
float: right;
overflow: inline;
}
}
#timeline-info {
#user-info, #timeline-info {
display: none;
width: 100%;
float: left;
}