Improvments to the Index app

Index/css/new.css

@@ -1,8 +1,11 @@
+.display tr {
+  line-height: 20px;
+}
 .display tr.even {
-        background-color: #EDE4D4;
+    background-color: #EDE4D4;
 }
 .display tr.even td.sorting_1 {
-    background-color: #F4F0EC;
+    background-color: #E5DCCC;
 }
 .ui-widget-header {
     background: #111111;
@@ -12,7 +15,7 @@
     background-color: #F4F0EC;
 }
 .display tr.odd td.sorting_1 {
-    background-color: #EDE4D4;
+    background-color: #ECE8E4;
 }
 
 .dataTables_paginate {
@@ -50,15 +53,6 @@ table.table {
   max-width: none !important;
 }
 
-table.table thead .sorting,
-table.table thead .sorting_asc,
-table.table thead .sorting_desc,
-table.table thead .sorting_asc_disabled,
-table.table thead .sorting_desc_disabled {
-  cursor: pointer;
-  *cursor: hand;
-}
-
 table.dataTable th:active {
   outline: none;
 }
@@ -89,3 +83,40 @@ div.dataTables_scrollBody tbody tr:first-child td {
 div.dataTables_scrollFoot table {
   border-top: none;
 }
+
+/* Header and footer styles */
+table.dataTable thead th,
+table.dataTable thead td {
+  padding: 5px 10px 5px 0px;
+  border-bottom: 1px solid #111111;
+}
+
+table.dataTable tfoot th,
+table.dataTable tfoot td {
+  padding: 8px 10px 5px 0px;
+  border-top: 1px solid #111111;
+}
+
+table.dataTable thead .sorting_asc,
+table.dataTable thead .sorting_desc,
+table.dataTable thead .sorting {
+  cursor: pointer;
+  *cursor: hand;
+}
+
+table.dataTable thead .sorting {
+  background: url("../images/sort_both.png") no-repeat center right;
+}
+table.dataTable thead .sorting_asc {
+  background: url("../images/sort_asc.png") no-repeat center right;
+}
+table.dataTable thead .sorting_desc {
+  background: url("../images/sort_desc.png") no-repeat center right;
+}
+table.dataTable thead .sorting_asc_disabled {
+  background: url("../images/sort_asc_disabled.png") no-repeat center right;
+}
+table.dataTable thead .sorting_desc_disabled {
+  background: url("../images/sort_desc_disabled.png") no-repeat center right;
+}
+

Index/js/new.js

@@ -83,14 +83,59 @@ var callbacks = {
     $("#form").toggle();
   },
 
+  /**
+   * Parse the JSON date format and return the difference in time
+   * @param {json} string Represents the date 
+   * @param {bool} mode Sets if the date is in the past or in the future 
+   */
+  parseDate: function(string, mode) {
+
+    var date = new Date(string);
+    var current = new Date();
+
+    var timeDiff;
+    if (mode) {
+      timeDiff = Math.abs(current.getTime() - date.getTime());
+    } else {
+      timeDiff = Math.abs(date.getTime() - current.getTime());
+    }
+
+    var minutes_raw = Math.floor(timeDiff / (1000 * 60));
+    var hours_raw = Math.floor(timeDiff / (1000 * 3600));
+    var days = Math.floor(timeDiff / (1000 * 3600 * 24));
+
+    var hours = hours_raw - (days * 24);
+    var minutes = minutes_raw - (hours_raw * 60);
+
+    if(days > 1) {
+      days = days + " days ";
+    } else if(days > 0) {
+      days = days + " day ";
+    } else {
+      days = "";
+    }
+
+    hours = hours > 0 ? hours + "h " : "";
+
+    var end;
+    if(minutes == 0 && hours == 0 && days == 0) {
+      minutes = "";
+      end = "Just now";
+    } else {
+      end = (mode ? "m ago" : "m from now");
+    }
+
+    return " " + days + hours + minutes + end;
+  },
+
   /**
    * Display the table of posts stored at the server.
    */
   postCompleted: function(response) {
 
     var tableBody = document.getElementById("table_body");
     for(var i = 0; i < response.json.length; i++) {
-      
+
       var href = response.json[i].privly_URL;
       var params = href.substr(href.indexOf("?") + 1);
       var app = privlyParameters.parameterStringToHash(params).privlyApp;
@@ -116,16 +161,39 @@ var callbacks = {
       td2.appendChild(td2a);
       tr.appendChild(td2);
 
+      // For the next three columns hide the Json date format,
+      // and create a <i> child in which the difference in time will be shown
       var td3 = document.createElement('td');
-      td3.textContent = response.json[i].created_at;
+      td3.textContent = response.json[i].created_at;      
+      td3.style.lineHeight = "0.0";
+      td3.style.textIndent = "-99999px";
+      var i1 = document.createElement('i');
+      i1.textContent = callbacks.parseDate(response.json[i].created_at, true);
+      i1.style.textIndent = "0px";
+      i1.style.display = "block";
+      td3.appendChild(i1);
       tr.appendChild(td3);
 
       var td4 = document.createElement('td');
       td4.textContent = response.json[i].burn_after_date;
+      td4.style.lineHeight = "0.0";      
+      td4.style.textIndent = "-99999px";
+      var i2 = document.createElement('i');
+      i2.textContent = callbacks.parseDate(response.json[i].burn_after_date, false);
+      i2.style.textIndent = "0px";
+      i2.style.display = "block";
+      td4.appendChild(i2);
       tr.appendChild(td4);
 
       var td5 = document.createElement('td');
-      td5.textContent = response.json[i].updated_at;
+      td5.textContent = response.json[i].updated_at;      
+      td5.style.lineHeight = "0.0";      
+      td5.style.textIndent = "-99999px";
+      var i3 = document.createElement('i');
+      i3.textContent = callbacks.parseDate(response.json[i].updated_at, true);
+      i3.style.textIndent = "0px";
+      i3.style.display = "block";
+      td5.appendChild(i3);
       tr.appendChild(td5);
 
       var td6 = document.createElement('td');

Index/new.html

@@ -180,13 +180,13 @@ <h1>
            Open
           </th>
           <th>
-           Created At
+           Created
           </th>
           <th>
            Burnt After
           </th>
           <th>
-           Updated At
+           Updated
           </th>
           <th>
            Markdown