Implemented entry creation, pagination. Some restyling and bugfixes.

- Bug fix in ts_api:list_entries/3. Case statement matching on atoms but
  input is a list (string).
- Bug fix in ts_api:put_entry/3. Was expecting the wrong result from
  ts_entry:new/1.
- Bug fix in ts_entry:list/4. Code crashed when the starting offset was
  greater than the total number of elements. Now returns [].
- Fixed ts_json:encode_datetime/1 and ts_json:decode_datetime/1 to handle
  millisecond values in the datetime string (per ISO standard).
- Broke out ``control-links`` style to a top-level class.
- Added showdown.js, a JS Markdown processor. Not hooked up to anything
  yet but intend to display entry notes with Markdown.
- Added code for entry pagination. Loads the most recent 20 entries and
  loads more upon demand in batches of 20.
- Fixed bug in login routine that kept the user edit fields from being
  pre-populated.
- Rewrote the loadEntries function to double for new entries and loading
  more existing entries.
- Commented displayEntries. Also refactored into displayNewerEntries,
  which pushed new entries on to the top of the stack, and
  displayOlderEntries, which tags them onto the bottom.
- Implemented hidden notes field for new entry input.
- Implemented new entry creation.
- Created a helper function to ISO format a Date object.
- Expanded entry template to show control links (edit, show notes, del).
- Activated the 'load more entries' button.

www/css/ts-screen.scss

@@ -52,6 +52,28 @@ body {
 
 @media all and (max-device-width: 480) { body { width: 80%; }}
 
+.control-links {
+
+    color: lighten($greyTxt, 40%);
+    float: right;
+    display: block;
+    height: 100%;
+    font-weight: bold;
+    font-size: smaller;
+
+    &:hover { color: $txt; }
+
+    a {
+        color: inherit; //lighten($greyTxt, 20%);
+        text-decoration: none;
+        margin-right: 0.5em;
+        &:hover {
+            color: $obor;
+            text-decoration: underline;
+        }
+    }
+}
+
 .bar {
 
     font-family: Helvetica, sans-serif;
@@ -64,47 +86,44 @@ body {
     padding: 0.1em 1em 0.1em 1em;
     overflow: hidden;
 
-    div.control-links {
-
-        color: lighten($greyTxt, 20%);
-        float: right;
-        display: block;
-        height: 100%;
-        font-weight: bold;
-        font-size: smaller;
-
-        &:hover { color: $txt; }
-
-        a {
-            color: inherit; //lighten($greyTxt, 20%);
-            text-decoration: none;
-            margin-right: 0.5em;
-            &:hover {
-                color: $obor;
-                text-decoration: underline;
-            }
-        }
-    }
-
 }
 
 .last-bar {
-    border-bottom-width: $iBorWidth;
+
+    border-color: $bbor;
+    border-style: solid;
+    border-width: $iBorWidth;
     @include rounded2(bottom, right, 0.5em);
     @include rounded2(bottom, left, 0.5em);
+
+    background-color: $bbg;
+    padding: 0.1em 1em 0.1em 1em;
+    overflow: hidden;
 }
 
-#more-entries a {
-    border: 1px solid $bbor;
-    background: lighten($bbg, 10%);
-    display: block;
-    color: $greyTxt;
-    text-decoration: none;
-    font-size: smaller;
-    float: left;
+#more-entries {
 
-    &:hover { 
-        color: $obor;
+    overflow: hidden;
+
+    div {
+        float: right;
+        left: -50%;
+        position: relative;
+
+        a {
+            position: relative;
+            float: right;
+            left: 50%;
+
+            border: 1px solid $bbor;
+            padding: 0.1em;
+            background: lighten($bbg, 10%);
+            color: $greyTxt;
+            text-decoration: none;
+            font-size: smaller;
+
+            &:hover { color: $obor; }
+        }
     }
 }
 
@@ -125,9 +144,7 @@ body {
         overflow: hidden;
     }
 
-    input.text-input {
-        border: 1px solid $bbor;
-    }
+    input.text-input { border: 1px solid $bbor; }
 
     .form-col {
         overflow: hidden;
@@ -205,6 +222,12 @@ body {
 
 #new-entry {
 
+    @include rounded2(bottom, right, 0.5em);
+    @include rounded2(bottom, left, 0.5em);
+    border-bottom: solid $bbor $iBorWidth;
+
+    margin-bottom: 1em;
+
     form {
         border: 0;
         margin: 0;
@@ -218,7 +241,10 @@ body {
         padding: 0.5em 0 0.5em 2em;
     }
 
-    #new-entry-input { margin-right: 1em; }
+    #new-entry-input {
+        margin-right: 1em;
+        width: 15em;
+    }
 }
 
 .entry-bar {
@@ -228,20 +254,43 @@ body {
     border-style: solid;
     border-width: $iBorWidth;
     border-bottom-width: 0;
-    padding: 0;
+    padding: 0.1em 1em 0.1em 1em;
+    overflow: hidden;
 
     .id {
+        float: left;
+        @include rounded(0.5em);
+        padding: 0 0.3em 0 0.3em;
+        background: $obor;
+        color: lighten($greyTxt, 40%);
+        font-weight: bold;
+        min-width: 2em;
+        text-align: right;
     }
 
     .details {
 
-        .entry-mark { }
+        float: left;
+
+        .entry-mark {
+            padding-left: 0.5em;
+            font-size: medium;
+            font-weight: bold;
+            font-family: Helvetica, sans-serif;
+        }
         .entry-notes {
             display: none;
+            padding-left: 1.5em;
         }
     }
 }
 
+.top-entry {
+
+    @include rounded2(top, left, 0.5em);
+    @include rounded2(top, right, 0.5em);
+}
+
 #login-dialog {
     font-size: small;