Display relative date in post.

- fixes format of time's datetime attribute
- adds moment.js for displaying relative date
- uses bootstrap for tooltip with absolute date

Relates to #130.

resources/public/statuses/css/statuses.css

@@ -236,3 +236,12 @@ footer {
     line-height: 1.7em;
 }
 
+.tooltip.left .tooltip-inner {
+    background-color: #eee;
+    color: #555;
+}
+
+.tooltip.left .tooltip-arrow {
+    border-left-color: #eee;
+}
+

resources/public/statuses/js/statuses.js

@@ -61,6 +61,7 @@
     if (shouldImgify()) {
         imgify();
     }
+    $(".post time").each(momentify);
 
     function focusField(field) {
         field.bind("focus", moveCursorToEOL); // XXX: no need for separate event handler?
@@ -102,6 +103,15 @@
         return preferences[preferenceInlineImages] === "true";
     }
 
+    function momentify() {
+        var timeField = $(this);
+        var currentTime = timeField.html();
+        var currentDateTime = timeField.attr("datetime");
+        var timeFromNow = moment(currentDateTime, moment.ISO_8601).fromNow();
+        timeField.html(timeFromNow);
+        timeField.tooltip({placement: "left", title: currentTime});
+    }
+
 }(jQuery, preferenceStore()));
 
 function preferenceStore() {

src/statuses/views/layout.clj

@@ -54,6 +54,7 @@
       [:footer footer]
       (include-js "//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js")
       (include-js "//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js")
+      (include-js "//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js")
       (include-js "/statuses/lib/jquery-charCount.js")
       (include-js "/statuses/lib/modernizr.min.js")
       (include-js "/statuses/js/statuses.js")])))

src/statuses/views/main.clj

@@ -1,8 +1,8 @@
 (ns statuses.views.main
-  (:require [hiccup.core :refer [html]]
+  (:require [clj-time.local :refer [format-local-time]]
+            [hiccup.core :refer [html]]
             [hiccup.element :refer [link-to]]
             [hiccup.form :refer [form-to hidden-field text-field]]
-            [statuses.backend.time :as time]
             [statuses.configuration :refer [config]]
             [statuses.routes :refer [avatar-path update-path
                                      updates-path]]
@@ -15,7 +15,7 @@
   [:button {:type "submit" :class (str "btn btn-" class)} (html (icon icon-name) [:span.btn-label label])]))
 
 (defn format-time [time]
-  [:time {:datetime (time/time-to-utc time)} (time/time-to-human time)])
+  [:time {:datetime (format-local-time time :date-time)} (format-local-time time :rfc822)])
 
 (defn delete-form [id]
   (form-to {:class "delete-form" :onsubmit "return confirm('Delete status?')"} [:delete (update-path id)]