show age on hover

3 files changed, 11 insertions, 7 deletions

diff --git a/public/assets/js/lib/views/stream/hootstream.js b/public/assets/js/lib/views/stream/hootstream.js
index cde591c..311d84e 100644
--- a/public/assets/js/lib/views/stream/hootstream.js
+++ b/public/assets/js/lib/views/stream/hootstream.js
@@ -384,6 +384,7 @@ var HootStream = View.extend({
       age: get_age(date),
       hoot_opacity: className === "first_post" ? 1.0 : age_opacity,
       age_opacity: age_opacity,
+      age_string: verbose_date(date).join(" "),
       ...options,
     });
   },
@@ -435,7 +436,7 @@ var HootStream = View.extend({
 
     const actions = [
       hasAudio && { action: "play", label: "play music", icon: "play" },
-      { action: "post", label: "post", icon: "edit" },
+      { action: "post", label: "post", icon: "add" },
       !isViewingThread &&
         !isCompleteThread && {
           action: "expand",
@@ -466,6 +467,7 @@ var HootStream = View.extend({
       username: thread.username,
       className: postedToday ? "isRecent" : "",
       date: thread.lastmodified,
+      age_string: verbose_date(thread.lastmodified).join(" "),
       file_count: `${thread.file_count || 0} f.`,
       file_opacity: age_opacity * get_size_opacity(thread.file_count),
       comment_count: `${thread.comment_count || 0} c.`,
@@ -605,6 +607,7 @@ var HootStream = View.extend({
       filename: file.filename,
       age: get_age(file.date),
       age_opacity: get_age_opacity(file.date),
+      age_string: verbose_date(file.date).join(" "),
       date_class,
       date: datetime[0],
       // time: datetime[1],
diff --git a/public/assets/js/util/icons.js b/public/assets/js/util/icons.js
index 27afb90..f145515 100644
--- a/public/assets/js/util/icons.js
+++ b/public/assets/js/util/icons.js
@@ -3,4 +3,5 @@ const ICONS = {
   play: '<svg class="icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>',
   expand:
     '<svg class="icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"></path></svg>',
+  add: '<svg class="icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"></path></svg>',
 };
diff --git a/views/hootstream/templates.ejs b/views/hootstream/templates.ejs
index bfeb5c1..3350e6b 100644
--- a/views/hootstream/templates.ejs
+++ b/views/hootstream/templates.ejs
@@ -7,7 +7,7 @@
       <div class="avatar" title="{{username}}" style="background-image:url({{image}});opacity:{{showAvatar}};"></div>
     </a>
     <div class="text" style="opacity: {{hoot_opacity}}">{{hoot}}</div>
-    <div class="age date" style="opacity: {{age_opacity}}">{{age}}</div>
+    <div class="age date" title="{{age_string}}" style="opacity: {{age_opacity}}">{{age}}</div>
   </div>
 </script>
 
@@ -28,7 +28,7 @@
     <div class="keyword">{{keyword_link}}</div>
     <div class="count commentCount" style="opacity: {{comment_opacity}}">{{comment_count}}</div>
     <div class="count fileCount" style="opacity: {{file_opacity}}">{{file_count}}</div>
-    <div class="age date" style="opacity: {{age_opacity}}">{{age}}</div>
+    <div class="age date" title="{{age_string}}" style="opacity: {{age_opacity}}">{{age}}</div>
   </div>
 </script>
 
@@ -38,7 +38,7 @@
       {{username}}
     </a>
     <div class="text">{{hoot}}</div>
-    <div class="age date">{{age}}</div>
+    <div class="age date" title="{{age_string}}">{{age}}</div>
   </div>
 </script>
 
@@ -50,18 +50,18 @@
     <div class="size" style="opacity: {{age_opacity}}">
       {{size}}
     </div>
-    <div class="age {{date_class}}" style="opacity: {{age_opacity}}">
+    <div class="age {{date_class}}" title="{{age_string}}" style="opacity: {{age_opacity}}">
       {{age}}
     </div>
   </div>
 </script>
 
 <script class="imageTemplate" type="text/html">
-  <div class="image"><a href="{{link}}"><img src="{{link}}"></a><div class="caption">{{filename}}</div></div>
+  <div class="image"><a href="{{link}}"><img src="{{link}}" title="{{filename}} {{age_string}}"></a><div class="caption">{{filename}}</div></div>
 </script>
 
 <script class="largeImageTemplate" type="text/html">
-  <div class="image"><a href="{{link}}">[{{filename}}, {{size}}]</a></div>
+  <div class="image"><a href="{{link}}">[{{filename}}, {{size}}. {{age_string}}]</a></div>
 </script>
 
 <script class="threadFormTemplate" type="text/html">