Show full dates with smaller font in topic lists

discourse · Jan 10, 2014 · 845c2b6 · 845c2b6
1 parent d16b448
commit 845c2b6
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git a/app/assets/javascripts/discourse/lib/formatter.js b/app/assets/javascripts/discourse/lib/formatter.js
@@ -2,7 +2,7 @@ Discourse.Formatter = (function(){
 
   var updateRelativeAge, autoUpdatingRelativeAge, relativeAge, relativeAgeTiny,
       relativeAgeMedium, relativeAgeMediumSpan, longDate, toTitleCase,
-      shortDate, shortDateNoYear, tinyDateYear, breakUp;
+      shortDate, shortDateNoYear, tinyDateYear, breakUp, relativeAgeTinyShowsYear;
 
     /*
   * memoize.js
@@ -143,11 +143,17 @@ Discourse.Formatter = (function(){
       options.wrapInSpan = false;
     }
 
+    var relAge = relativeAge(date, options);
+
+    if (format === 'tiny' && relativeAgeTinyShowsYear(relAge)) {
+      append += " with-year";
+    }
+
     if (options.title) {
       append += "' title='" + longDate(date);
     }
 
-    return "<span class='relative-date" + append + "' data-time='" + date.getTime() + "' data-format='" + format +  "'>" + relativeAge(date, options)  + "</span>";
+    return "<span class='relative-date" + append + "' data-time='" + date.getTime() + "' data-format='" + format +  "'>" + relAge  + "</span>";
   };
 
 
@@ -196,6 +202,14 @@ Discourse.Formatter = (function(){
     return formatted;
   };
 
+  /*
+   * Returns true if the given tiny date string includes the year.
+   * Useful for checking if the string isn't so tiny.
+   */
+  relativeAgeTinyShowsYear = function(relativeAgeString) {
+    return relativeAgeString.match(/'[\d]{2}$/);
+  };
+
   relativeAgeMediumSpan = function(distance, leaveAgo) {
     var formatted, distanceInMinutes;
 

diff --git a/app/assets/stylesheets/desktop/topic-list.scss b/app/assets/stylesheets/desktop/topic-list.scss
@@ -219,11 +219,15 @@
     width: 65px;
   }
   .activity {
-    width: 50px;
+    width: 60px;
   }
   .age {
     width: 60px;
   }
+  .with-year {
+    font-size: 85%;
+    white-space: nowrap;
+  }
 }
 
 

diff --git a/app/assets/stylesheets/mobile/topic-list.scss b/app/assets/stylesheets/mobile/topic-list.scss
@@ -157,6 +157,12 @@
       color: inherit;
     }
   }
+  .age {
+    white-space: nowrap;
+    .with-year {
+      font-size: 85%;
+    }
+  }
 }
 
 // Category list