Duration display, time formatting, UI tweaks.

Client Behaviour (ts.js)
========================

- Created EntryView.getViewModel: translates model data to view data,
  specifically synthesizes the start time and duration from the timestamp.
- Added nextModel option to EntryView, needed for calculating the entry
  duration.
- Created EntryView.formatStart: given the timestamp, return the start time,
  in HH:MM format. Code is written for both 24hr and 12hr format, still need
  to write a selector mechanism. For now, uses 12hr format.
- Created EntryView.formatDuration: Get the duration of the entry based on
  this entry's timestamp and and the next entry's timestamp in a display-able
  form. If nextModel is `null` or `undefined` it is assumed that `model`
  is the most recent model and duration is calculated against the current time.
- Changed EntryView.render to use getViewModel.
- Added 'blur' listeners to the mark and timestamp input fields to close them
  without persisting the changes.
- Created EntryView.update: Refresh the display based on the model using the
  existing DOM elements.
- EntryView.save() now uses EntryView.update() instead of EntryView.render()
  and no longer includes an implicit close()
- EntryView.close() has been split into seperate save() and close() functions,
  to persist the changes and hide the input dialogs, respectively.
- EntryListView.addOne now passes the nextModel to EntryViews is creates.
- EntryListView.createNewEntryOnEnter() now clear the new intry input after
  creating a new entry.
- EntryListView.render() now uses a for-structure to traverse the entry
  collection and passes the nextModel (if there is one) to EntryListView.addOne.

Client UI (ts-screen.scss)
==========================

- Font size, family, and color adjusted on timeline and user input fields.
- Day seperator secondary header colors adjusted.
- Mark column width shortened, timestamp and duration columns widened.
- Styles added for notes UI

Client UI (index.yaws)
======================

- Markup changes needed for getViewModel chanes.
- Expanded day seperator.

www/css/ts-screen.css

@@ -47,6 +47,9 @@ input {
   #timeline .timeline-id {
     display: inline-block; }
   #timeline .timeline-desc-input, #timeline .timeline-id-input {
+    font-family: inherit;
+    font-size: inherit;
+    color: #222222;
     display: none; }
   #timeline.edit-id .timeline-id-input {
     display: inline-block; }
@@ -117,6 +120,9 @@ input {
     display: inline-block;
     font-size: larger; }
   #user .fullname-input {
+    font-family: inherit;
+    font-size: inherit;
+    color: #222222;
     display: none; }
   #user.edit-fullname .fullname-input {
     display: inline-block; }
@@ -147,6 +153,8 @@ input {
     padding: 0 2rem; }
     #entry-list .day-seperator h4, #entry-list .day-seperator h5 {
       display: inline-block; }
+    #entry-list .day-seperator h5 {
+      color: #667; }
   #entry-list #new-entry {
     margin-top: 0.5em;
     padding: 0 2em;
@@ -154,9 +162,9 @@ input {
     padding: 0 2rem; }
   #entry-list .timestamp, #entry-list .timestamp-input, #entry-list .duration {
     text-align: right;
-    width: 10%; }
+    width: 14%; }
   #entry-list .mark, #entry-list .mark-input {
-    width: 78%; }
+    width: 70%; }
   #entry-list .entry {
     font-family: Cantarell;
     padding: 0 2em;
@@ -165,7 +173,7 @@ input {
       display: inline-block; }
     #entry-list .entry .mark-input, #entry-list .entry .timestamp-input {
       display: none; }
-    #entry-list .entry .notes {
+    #entry-list .entry .notes, #entry-list .entry .notes-input {
       display: none; }
     #entry-list .entry.edit-mark .mark-input {
       display: inline-block; }
@@ -175,6 +183,8 @@ input {
       display: inline-block; }
     #entry-list .entry.edit-timestamp .timestamp {
       display: none; }
+    #entry-list .entry.edit-notes .notes-input {
+      display: block; }
 
 .drop-menu {
   position: relative; }

www/css/ts-screen.scss

@@ -65,7 +65,12 @@ input {
 
     .timeline-id { display: inline-block; }
 
-    .timeline-desc-input, .timeline-id-input { display: none; }
+    .timeline-desc-input, .timeline-id-input {
+        font-family: inherit;
+        font-size: inherit;
+        color: $darkBg;
+        display: none;
+    }
 
     &.edit-id {
         .timeline-id-input { display: inline-block; }
@@ -165,7 +170,12 @@ input {
         font-size: larger;
     }
 
-    .fullname-input { display: none; }
+    .fullname-input {
+        font-family: inherit;
+        font-size: inherit;
+        color: $darkBg;
+        display: none;
+    }
 
     &.edit-fullname{
         .fullname-input { display: inline-block; }
@@ -204,6 +214,8 @@ input {
         padding: 0 2rem;
 
         h4, h5 { display: inline-block; }
+
+        h5 { color: #667; }
     }
 
     #new-entry {
@@ -216,10 +228,10 @@ input {
     
     .timestamp, .timestamp-input, .duration {
         text-align: right;
-        width: 10%;
+        width: 14%;
     }
 
-    .mark, .mark-input { width: 78%; }
+    .mark, .mark-input { width: 70%; }
 
     .entry {
 
@@ -231,7 +243,7 @@ input {
 
         .mark-input, .timestamp-input { display: none; }
 
-        .notes { display: none; }
+        .notes, .notes-input { display: none; }
            
         &.edit-mark {
             .mark-input { display: inline-block; }
@@ -243,6 +255,8 @@ input {
             .timestamp { display: none; }
         }
 
+        &.edit-notes .notes-input { display: block; }
+
     }
 
 }