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.

www/css/ts-screen.css

@@ -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 {
+  #user #change-pwd {
-    padding-top: 0.6em; }
+    display: none; }
-
+  #user #user-info .form-submit {
-#user-info {
+    padding: 0.5em 2em 0.5em 2em;
-  display: none; }
+    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 {
+#user-info, #timeline-info {
-  display: none; }
+  display: none;
+  width: 100%;
+  float: left; }

www/css/ts-screen.scss

@@ -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 {
+    #user-info .form-submit {
-    display: none;
+        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;
 }
+
+

www/js/ts.js

@@ -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();
+}
+

www/ts/index.yaws

@@ -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,36 +13,80 @@
             <span id="fullname">Jonathan Bernard</span>
             <span id="username">- jdbernard</span>
             <div class="control-links">
-                <a href="/ts/logout.yaws" class="control-link"
+                <a href="/ts/edit-user.yaws"
-                    onclick="showUserMenu()">logout</a>
+                    onclick="toggleUserInfo(event)">user info</a>
-                <a href="/ts/edit-user.yaws" class="control-link"
+                <a href="/ts/logout.yaws" onclick="logout(event)">logout</a>
-                    onclick="logout()">user info</a>
             </div>
-        </div>
 
-        <div id="user-info" class="bar">
+            <div id="user-info">
-            <form action="/ts/update-user.yaws" onsubmit="updateUser(); false">
+                <form action="/ts/update-user.yaws" onsubmit="updateUser(event)">
-                <input type="text" disabled="true"/>
+                    <div class="form-col">
-            </form>
+                        <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"
+                <a href="/ts/edit-timeline.yaws"
-                    onclick="toggleTimelineInfo()">timeline info</a>
+                    onclick="toggleTimelineInfo(event)">timeline info</a>
-                <a href="/ts/select-timeline.yaws" class="control-link"
+                <a href="/ts/select-timeline.yaws"
-                    onclick="showTimelineMenu()">change timelines</a>
+                    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">
+       <div id="new-entry" class="bar last-bar">
-            <form action="/ts/update-timeline.yaws" onsubmit="updateTimeline(); false">
-                <!-- TODO -->
-            </form>
-        </div>
-        <div id="new-entry" class="bar last-bar">
         </div>
     </body>