From 669257673e8260bd97c99749ec2e5a5ad32f182b Mon Sep 17 00:00:00 2001
From: Martii <martii@users.noreply.github.com>
Date: Sat, 24 Aug 2019 04:56:06 -0600
Subject: [PATCH] More icons with tooltips for the UI

* Squeeze in a little more real estate for more the more important things. This is as small as I dare make it and still be readable which in turn adds some vertical white-space occasionally.
* Fixing a Y2K+100 bug ;)

NOTES:
* Tested on desktops only... will do more testing after merge. Hopefully everything goes well.
* Additional squeezing yet to come.
---
 libs/modelParser.js                    | 52 +++++++++++++++++++++++++
 public/css/common.css                  | 53 ++++++++++++++++++++++++++
 views/includes/announcementsPanel.html |  6 +--
 views/includes/discussionList.html     | 13 ++++---
 views/includes/groupList.html          |  2 +-
 views/includes/removedItemList.html    | 10 +++--
 views/includes/scriptList.html         | 10 ++---
 views/includes/userList.html           |  2 +-
 8 files changed, 128 insertions(+), 20 deletions(-)

diff --git a/libs/modelParser.js b/libs/modelParser.js
index 3e6b5786d..4d140d05a 100644
--- a/libs/modelParser.js
+++ b/libs/modelParser.js
@@ -55,6 +55,17 @@ var momentLangTinyDate = function (aDate) {
     return '[' + aDate.format("MMM 'YY") + ']';
   }
 };
+var momentLangTinyDateIconic = function (aDate) {
+  if (aDate.year() === moment().year()) {
+    return '[<strong>' +  aDate.format("MMM") + '</strong>'
+      + '<br><span>' + aDate.format("D") + '</span>'
+        + '<br><em></em>]';
+  } else {
+    return '[<strong>' + aDate.format("MMM") + '</strong>'
+      + '<br><span></span>'
+        + '<br><em>' +  aDate.format("YYYY") + '</em>]';
+  }
+};
 moment.locale('en-tiny', {
   calendar : {
     sameDay : function () {
@@ -95,6 +106,46 @@ moment.locale('en-tiny', {
   }
 });
 
+moment.locale('en-iconic', {
+  calendar : {
+    sameDay : function () {
+      return momentLangFromNow(this);
+    },
+    lastDay : function () {
+      return momentLangFromNow(this);
+    },
+    lastWeek : function () {
+      return momentLangFromNow(this);
+    },
+    nextDay : function () {
+      return momentLangTinyDateIconic(this);
+    },
+    nextWeek : function () {
+      return momentLangTinyDateIconic(this);
+    },
+    sameElse : function () {
+      return momentLangTinyDateIconic(this);
+    }
+  },
+  relativeTime : {
+    future : "<strong>&NegativeVeryThinSpace;</strong><br><span>in</span><br><em>%s</em>",
+    past : "<strong>&NegativeVeryThinSpace;</strong><br><span>%s</span><br><em>ago</em>",
+    s : function (aNumber, aWithoutSuffix, aKey, aIsFuture) {
+      return aNumber + "s";
+    },
+    m : "1m",
+    mm : "%dm",
+    h : "1h",
+    hh : "%dh",
+    d : "1d",
+    dd : "%dd",
+    M : "1M",
+    MM : "%dM",
+    y : "1y",
+    yy : "%dy"
+  }
+});
+
 var parseDateProperty = function (aObj, aKey) {
   var date = null;
 
@@ -104,6 +155,7 @@ var parseDateProperty = function (aObj, aKey) {
       aObj[aKey] = date;
       aObj[aKey + 'ISOFormat'] = date.toISOString();
       aObj[aKey + 'Humanized'] = moment(date).locale('en-tiny').calendar();
+      aObj[aKey + 'HumanizedIconic'] = moment(date).locale('en-iconic').calendar();
     }
   }
 };
diff --git a/public/css/common.css b/public/css/common.css
index 84d368ab4..82f5b7393 100644
--- a/public/css/common.css
+++ b/public/css/common.css
@@ -519,3 +519,56 @@ ul.flaggedList {
   cursor: pointer;
 }
 
+/* Iconic dates */
+
+time.iconic {
+  font-size: 0.9em; /* change iconic size here */
+  display: block;
+  position: relative;
+  width: 3em;
+  height: 3em;
+  background-color: #fff;
+  margin: 0.25em auto;
+  border-radius: 0.5em;
+  box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
+  overflow: hidden;
+  margin-top: 0;
+}
+
+time.iconic *
+{
+  display: block;
+  width: 100%;
+  font-size: 0.75em;
+  font-weight: bold;
+  font-style: normal;
+  text-align: center;
+}
+
+time.iconic strong
+{
+  position: absolute;
+  top: 0;
+  padding: 0.05em 0;
+  color: #fff;
+  background-color: #2c3e50;
+  border-bottom: 1px dotted #709ecc;
+  box-shadow: 0 2px 0 #2c3e50;
+}
+
+time.iconic span
+{
+  width: 100%;
+  font-size: 0.9em;
+  letter-spacing: -0.05em;
+  padding-top: 1.4em;
+  color: #2f2f2f;
+}
+
+time.iconic em
+{
+  font-size: 0.7em;
+  position: absolute;
+  bottom: 0;
+  color: #2c3e50;
+}
diff --git a/views/includes/announcementsPanel.html b/views/includes/announcementsPanel.html
index b90b3645c..e40c1f26c 100644
--- a/views/includes/announcementsPanel.html
+++ b/views/includes/announcementsPanel.html
@@ -17,13 +17,13 @@
               </b>
             </td>
             <td class="text-center td-fit">
-              <p>{{replies}} replies</p>
+              <p>{{replies}}<br class="hidden-lg hidden-md"> replies</p>
             </td>
             <td class="text-center td-fit">
-              <time datetime="{{createdISOFormat}}" title="{{created}}">{{createdHumanized}}</time>
+              <time datetime="{{createdISOFormat}}" title="{{created}}" class="iconic">{{{createdHumanizedIconic}}}</time>
             </td>
             <td class="text-center td-fit">
-              <time datetime="{{updatedISOFormat}}" title="{{updated}}">{{updatedHumanized}}</time>
+              <time datetime="{{updatedISOFormat}}" title="{{updated}}" class="iconic">{{{updatedHumanizedIconic}}}</time>
             </td>
           </tr>
           {{/announcementsDiscussionList}}
diff --git a/views/includes/discussionList.html b/views/includes/discussionList.html
index 7b4cde83b..4883a6ceb 100644
--- a/views/includes/discussionList.html
+++ b/views/includes/discussionList.html
@@ -6,10 +6,10 @@
         {{#multipleCategories}}
         <th class="text-center td-fit">Category</th>
         {{/multipleCategories}}
-        <th class="text-center td-fit">Users</th>
-        <th class="text-center td-fit{{#orderedByComments}} active{{/orderedByComments}}"><a href="?orderBy=comments&orderDir={{orderDir.comments}}">Replies</a></th>
-        <th class="text-center td-fit{{#orderedByCreated}} active{{/orderedByCreated}}"><a href="?orderBy=created&orderDir={{orderDir.created}}">Created</a></th>
-        <th class="text-center td-fit{{#orderedByUpdated}} active{{/orderedByUpdated}}"><a href="?orderBy=updated&orderDir={{orderDir.updated}}">Updated</a></th>
+        <th class="text-center td-fit" title="Users"><span class="visible-lg visible-md">Users</span><span class="hidden-lg hidden-md"><i class="fa fa-user"></i></th>
+        <th class="text-center td-fit{{#orderedByComments}} active{{/orderedByComments}}" title="Replies"><a href="?orderBy=comments&orderDir={{orderDir.comments}}"><span class="visible-lg visible-md">Replies</span><span class="hidden-lg hidden-md"><i class="fa fa-comment"></i></a></th>
+        <th class="text-center td-fit{{#orderedByCreated}} active{{/orderedByCreated}}" title="Created"><a href="?orderBy=created&orderDir={{orderDir.created}}"><span class="visible-lg visible-md">Created</span><span class="hidden-lg hidden-md"><i class="fa fa-clock-o"></i></a></th>
+        <th class="text-center td-fit{{#orderedByUpdated}} active{{/orderedByUpdated}}" title="Updated"><a href="?orderBy=updated&orderDir={{orderDir.updated}}"><span class="visible-lg visible-md">Updated</span><span class="hidden-lg hidden-md"><i class="fa fa-history"></i></a></th>
       </tr>
     </thead>
     <tbody>
@@ -31,16 +31,17 @@
         <td class="td-fit">
           {{#recentCommentors}}
           <span class="label label-info"><a href="/users/{{{name}}}">{{{name}}}</a></span>
+          <br class="hidden-lg hidden-md">
           {{/recentCommentors}}
         </td>
         <td class="text-center td-fit">
           <p>{{replies}}</p>
         </td>
         <td class="text-center td-fit">
-          <time datetime="{{createdISOFormat}}" title="{{created}}">{{createdHumanized}}</time>
+          <time datetime="{{createdISOFormat}}" title="{{created}}" class="iconic">{{{createdHumanizedIconic}}}</time>
         </td>
         <td class="text-center td-fit">
-          <time datetime="{{updatedISOFormat}}" title="{{updated}}">{{updatedHumanized}}</time>
+          <time datetime="{{updatedISOFormat}}" title="{{updated}}" class="iconic">{{{updatedHumanizedIconic}}}</time>
         </td>
       </tr>
       {{/discussionList}}
diff --git a/views/includes/groupList.html b/views/includes/groupList.html
index d22f121f1..cd3d8c1f7 100644
--- a/views/includes/groupList.html
+++ b/views/includes/groupList.html
@@ -3,7 +3,7 @@
     <tr>
       <th class="{{#orderedByName}}active{{/orderedByName}}"><a href="?orderBy=name&orderDir={{orderDir.name}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}">Name</a></th>
       <th class="text-center{{#orderedBySize}} active{{/orderedBySize}}"><a href="?orderBy=size&orderDir={{orderDir.size}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}">Size</a></th>
-      <th class="text-center{{#orderedByRating}} active{{/orderedByRating}}"><a href="?orderBy=rating&orderDir={{orderDir.rating}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}">Rating</a></th>
+      <th class="text-center{{#orderedByRating}} active{{/orderedByRating}}" title="Rating"><a href="?orderBy=rating&orderDir={{orderDir.rating}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}"><span class="visible-lg visible-md">Rating</span><span class="hidden-lg hidden-md"><i class="fa fa-heartbeat"></i></span></a></th>
     </tr>
   </thead>
   <tbody>
diff --git a/views/includes/removedItemList.html b/views/includes/removedItemList.html
index 122a558b2..2b7c23b2e 100644
--- a/views/includes/removedItemList.html
+++ b/views/includes/removedItemList.html
@@ -4,8 +4,8 @@
       <th class="text-center td-fit{{#orderedByModel}} active{{/orderedByModel}}"><a href="?orderBy=model&orderDir={{orderDir.model}}{{#byModel}}&byModel={{byModel}}{{/byModel}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}">Model</a></th>
       <th>Item</th>
       <th>Reason</th>
-      <th class="text-center td-fit{{#orderedByRemoverName}} active{{/orderedByRemoverName}}"><a href="?orderBy=removerName&orderDir={{orderDir.removerName}}{{#byModel}}&byModel={{byModel}}{{/byModel}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}">Removed By</a></th>
-      <th class="text-center td-fit{{#orderedByRemoved}} active{{/orderedByRemoved}}"><a href="?orderBy=removed&orderDir={{orderDir.removed}}{{#byModel}}&byModel={{byModel}}{{/byModel}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}">Date</a></th>
+      <th class="text-center td-fit{{#orderedByRemoverName}} active{{/orderedByRemoverName}}" title="Removed By"><a href="?orderBy=removerName&orderDir={{orderDir.removerName}}{{#byModel}}&byModel={{byModel}}{{/byModel}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}"><span class="visible-lg visible-md">Removed By</span><span class="hidden-lg hidden-md"><i class="fa fa-coffee"></i></span></a></th>
+      <th class="text-center td-fit{{#orderedByRemoved}} active{{/orderedByRemoved}}"><a href="?orderBy=removed&orderDir={{orderDir.removed}}{{#byModel}}&byModel={{byModel}}{{/byModel}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}"><span class="visible-lg visible-md">Date</span><span class="hidden-lg hidden-md"><i class="fa fa-calendar"></span></a></th>
     </tr>
   </thead>
   <tbody>
@@ -22,11 +22,13 @@
       </td>
       <td class="td-fit">
         <p>
-          <a href="{{remover.userPageUrl}}">{{remover.name}}</a>
+          <span class="label label-info">
+            <a href="{{remover.userPageUrl}}">{{remover.name}}</a>
+          </span>
         </p>
       </td>
       <td class="text-center td-fit">
-        <time datetime="{{removedISOFormat}}" title="{{removed}}">{{removedHumanized}}</time>
+        <time datetime="{{removedISOFormat}}" title="{{removed}}" class="iconic">{{{removedHumanizedIconic}}}</time>
       </td>
     </tr>
     {{/removedItemList}}
diff --git a/views/includes/scriptList.html b/views/includes/scriptList.html
index 8ed937a52..943572df7 100644
--- a/views/includes/scriptList.html
+++ b/views/includes/scriptList.html
@@ -2,11 +2,11 @@
   <thead>
     <tr>
       <th class="text-center{{#orderedByName}} active{{/orderedByName}}"><a href="?orderBy=name&orderDir={{orderDir.name}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}{{#librariesOnly}}&library=true{{/librariesOnly}}{{#isFlagged}}&flagged={{isFlagged}}{{/isFlagged}}">Name</a></th>
-      {{^librariesOnly}}<th class="text-center td-fit{{#orderedByInstalls}} active{{/orderedByInstalls}}"><a href="?orderBy=installs&orderDir={{orderDir.install}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}{{#isFlagged}}&flagged={{isFlagged}}{{/isFlagged}}">Installs</a></th>{{/librariesOnly}}
-      <th class="text-center td-fit{{#orderedByRating}} active{{/orderedByRating}}"><a href="?orderBy=rating&orderDir={{orderDir.rating}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}{{#librariesOnly}}&library=true{{/librariesOnly}}{{#isFlagged}}&flagged={{isFlagged}}{{/isFlagged}}">Rating</a></th>
-      <th class="text-center td-fit{{#orderedByUpdated}} active{{/orderedByUpdated}}"><a href="?orderBy=updated&orderDir={{orderDir.updated}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}{{#librariesOnly}}&library=true{{/librariesOnly}}{{#isFlagged}}&flagged={{isFlagged}}{{/isFlagged}}">Updated</a></th>
+      {{^librariesOnly}}<th class="text-center td-fit{{#orderedByInstalls}} active{{/orderedByInstalls}}" title="Installs"><a href="?orderBy=installs&orderDir={{orderDir.install}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}{{#isFlagged}}&flagged={{isFlagged}}{{/isFlagged}}"><span class="visible-lg visible-md">Installs</span><span class="hidden-lg hidden-md"><i class="fa fa-download"></i></a></th>{{/librariesOnly}}
+      <th class="text-center td-fit{{#orderedByRating}} active{{/orderedByRating}}" title="Rating"><a href="?orderBy=rating&orderDir={{orderDir.rating}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}{{#librariesOnly}}&library=true{{/librariesOnly}}{{#isFlagged}}&flagged={{isFlagged}}{{/isFlagged}}"><span class="visible-lg visible-md">Rating</span><span class="hidden-lg hidden-md"><i class="fa fa-heartbeat"></i></span></a></th>
+      <th class="text-center td-fit{{#orderedByUpdated}} active{{/orderedByUpdated}}" title="Updated"><a href="?orderBy=updated&orderDir={{orderDir.updated}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}{{#librariesOnly}}&library=true{{/librariesOnly}}{{#isFlagged}}&flagged={{isFlagged}}{{/isFlagged}}"><span class="visible-lg visible-md">Updated</span><span class="hidden-lg hidden-md"><i class="fa fa-history"></i></span></a></th>
       {{#hasFlagged}}
-      <th>Flagged</th>
+      <th title="Flagger"><span class="visible-lg visible-md">Flagger</span><span class="hidden-lg hidden-md"><i class="fa fa-flag"></i></span></a></th>
       {{/hasFlagged}}
     </tr>
   </thead>
@@ -40,7 +40,7 @@
         </div>
       </td>
       <td class="text-center td-fit">
-        <time datetime="{{updatedISOFormat}}" title="{{updated}}">{{updatedHumanized}}</time>
+        <time datetime="{{updatedISOFormat}}" title="{{updated}}" class="iconic">{{{updatedHumanizedIconic}}}</time>
       </td>
       {{#hasFlagged}}
       <td>
diff --git a/views/includes/userList.html b/views/includes/userList.html
index ba0d8bdac..72c2ccaa0 100644
--- a/views/includes/userList.html
+++ b/views/includes/userList.html
@@ -4,7 +4,7 @@
       <th class="{{#orderedByName}}active{{/orderedByName}}"><a href="?orderBy=name&orderDir={{orderDir.name}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}{{#isFlagged}}&flagged={{isFlagged}}{{/isFlagged}}">Name</a></th>
       <th class="td-fit{{#orderedByRole}} active{{/orderedByRole}}"><a href="?orderBy=role&orderDir={{orderDir.role}}{{#searchBarValue}}&q={{searchBarValue}}{{/searchBarValue}}{{#isFlagged}}&flagged={{isFlagged}}{{/isFlagged}}">Rank</a></th>
       {{#hasFlagged}}
-      <th>Flagged</th>
+      <th title="Flagger"><span class="visible-lg visible-md">Flagger</span><span class="hidden-lg hidden-md"><i class="fa fa-flag"></i></span></a></th>
       {{/hasFlagged}}
     </tr>
   </thead>