Better date separator rendering

Split up long string

(imported from commit 51bab3cbb2d77f0e130d6bb0d486f2d7feba0909)

static/js/timerender.js

@@ -66,7 +66,9 @@ function maybe_add_update_list_entry (needs_update, id, time, time_above) {
 function render_date_span(elem, time_str, time_above_str) {
     elem.text("");
     if (time_above_str !== undefined) {
-        return elem.append("▲ " + time_above_str + " ▲").append($("<hr />")).append("▼ " + time_str + " ▼");
+        return elem.append('<i class="date-direction icon-vector-caret-up"></i>' +
+                           time_above_str).append($('<hr class="date-line">')).append('<i class="date-direction icon-vector-caret-down"></i>'
+                           + time_str);
     } else {
         return elem.append(time_str);
     }

static/styles/zulip.css

@@ -2360,6 +2360,20 @@ li.expanded_subject {
     padding-bottom: 10px; /* same as .bookend */
 }
 
+.date_row .date-direction {
+    display: inline-block;
+    padding-right: 5px;
+}
+
+.date_row .date-line {
+    display: inline-block;
+    vertical-align: middle;
+    width: 33%;
+    border-top: 1px solid #ccc;
+    border-bottom:1px solid #fff;
+    margin: 0px 5px 0px 5px;
+}
+
 .date_row span {
     display: block;
     background: inherit;
@@ -2393,15 +2407,6 @@ li.expanded_subject {
     margin-right: -50%;
 }
 
-.date_row hr {
-    display: inline-block;
-    vertical-align: middle;
-    width: 33%;
-    border-top: 1px solid #ccc;
-    border-bottom:1px solid #fff;
-    margin: 0;
-}
-
 #restore-draft {
     float: left;
     display: none;