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
parent
9c645e9a88
commit
6197363508
@ -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 {
|
||||
#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; }
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
19
www/js/ts.js
Normal file
19
www/js/ts.js
Normal file
@ -0,0 +1,19 @@
|
||||
function toggleUserInfo(event) {
|
||||
$("#user-info").slideToggle("slow");
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function showChangePwd(event) {
|
||||
$("#change-pwd").slideToggle("slow");
|
||||
}
|
||||
|
||||
function updateUser(event) {
|
||||
alert("TODO: update user via AJAX.");
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
function toggleTimelineInfo(event) {
|
||||
$("#timeline-info").slideToggle("slow");
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
@ -3,6 +3,8 @@
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" media="screen" href="../css/ts-screen.css" type="text/css"/>
|
||||
<script type="text/javascript" src="../js/jquery-1.5.min.js"></script>
|
||||
<script type="text/javascript" src="../js/ts.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@ -11,35 +13,79 @@
|
||||
<span id="fullname">Jonathan Bernard</span>
|
||||
<span id="username">- jdbernard</span>
|
||||
<div class="control-links">
|
||||
<a href="/ts/logout.yaws" class="control-link"
|
||||
onclick="showUserMenu()">logout</a>
|
||||
<a href="/ts/edit-user.yaws" class="control-link"
|
||||
onclick="logout()">user info</a>
|
||||
</div>
|
||||
<a href="/ts/edit-user.yaws"
|
||||
onclick="toggleUserInfo(event)">user info</a>
|
||||
<a href="/ts/logout.yaws" onclick="logout(event)">logout</a>
|
||||
</div>
|
||||
|
||||
<div id="user-info" class="bar">
|
||||
<form action="/ts/update-user.yaws" onsubmit="updateUser(); false">
|
||||
<input type="text" disabled="true"/>
|
||||
<div id="user-info">
|
||||
<form action="/ts/update-user.yaws" onsubmit="updateUser(event)">
|
||||
<div class="form-col">
|
||||
<label for="fullname"><span>name:</span>
|
||||
<input id="fullname-input" name="fullname"
|
||||
class="text-input" type="text"/>
|
||||
</label>
|
||||
<label for="email"><span>email:</span>
|
||||
<input id="email-input" name="email"
|
||||
class="text-input" type="text"/>
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-col">
|
||||
<div id="change-pwd">
|
||||
<label for="old-pwd"><span>password:</span>
|
||||
<input id="old-pwd-input" name="old-pwd"
|
||||
class="text-input" type="password"/>
|
||||
</label>
|
||||
<label for="new-pwd"><span>new pwd:</span>
|
||||
<input id="new-pwd-input" name="new-pwd"
|
||||
class="text-input" type="password"/>
|
||||
</label>
|
||||
<label for="new-pwd-conf"><span>confirm:</span>
|
||||
<input id="new-pwd-conf-input" name="new-pwd-conf"
|
||||
class="text-input" type="password"/>
|
||||
</label>
|
||||
</div>
|
||||
<label for="enable-pwd-change">
|
||||
<input name="enable-pwd-change" type="checkbox"
|
||||
onclick="showChangePwd(event)"/>
|
||||
change password
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-submit">
|
||||
<div>
|
||||
<input name="submit-user" type="submit"
|
||||
value="save changes"/>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="timeline" class="bar">
|
||||
<span id="timeline-name">work |</span>
|
||||
<span id="timeline-desc">an accounting of time spent at work</span>
|
||||
<div class="control-links">
|
||||
<a href="/ts/edit-timeline.yaws" class="control-link"
|
||||
onclick="toggleTimelineInfo()">timeline info</a>
|
||||
<a href="/ts/select-timeline.yaws" class="control-link"
|
||||
onclick="showTimelineMenu()">change timelines</a>
|
||||
<a href="/ts/edit-timeline.yaws"
|
||||
onclick="toggleTimelineInfo(event)">timeline info</a>
|
||||
<a href="/ts/select-timeline.yaws"
|
||||
onclick="showTimelineMenu(event)">change timelines</a>
|
||||
</div>
|
||||
|
||||
<div id="timeline-info">
|
||||
<form action="/ts/update-timeline.yaws"
|
||||
onsubmit="updateTimeline(event); false">
|
||||
<label for="timeline-desc"><span>description:</span>
|
||||
<input id="timeline-desc-input" class="text-input"
|
||||
name="timeline-desc" type="text"/>
|
||||
</label>
|
||||
<div class="form-submit">
|
||||
<input name="submit-timeline" type="submit"
|
||||
value="save changes"/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="timeline-info" class="bar">
|
||||
<form action="/ts/update-timeline.yaws" onsubmit="updateTimeline(); false">
|
||||
<!-- TODO -->
|
||||
</form>
|
||||
</div>
|
||||
<div id="new-entry" class="bar last-bar">
|
||||
</div>
|
||||
</body>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user