changeset 19:31e8b6e1db42

The vertical axis of the page now represents how old the information is.
author Atul Varma <varmaa@toolness.com>
date Mon, 02 Mar 2009 17:33:06 -0800
parents ed71cc5972e2
children a2ec16ff4a22
files about-mozilla.css about-mozilla.js
diffstat 2 files changed, 99 insertions(+), 11 deletions(-) [+]
line wrap: on
line diff
--- a/about-mozilla.css	Mon Mar 02 16:35:41 2009 -0800
+++ b/about-mozilla.css	Mon Mar 02 17:33:06 2009 -0800
@@ -41,8 +41,6 @@
 }
 
 .content {
-    padding-left: 6pt;
-    padding-right: 6pt;
 }
 
 a {
@@ -52,6 +50,8 @@
 }
 
 .blog-item {
+    padding-left: 6pt;
+    padding-right: 6pt;
     padding-top: 6pt;
     padding-bottom: 6pt;
     color: gray;
@@ -62,3 +62,43 @@
     font-style: italic;
     color: black;
 }
+
+.days-ago-0 {
+    background-color: #ffffff;
+}
+
+.days-ago-1 {
+    background-color: #fafafa;
+}
+
+.days-ago-2 {
+    background-color: #f5f5f5;
+}
+
+.days-ago-3 {
+    background-color: #f0f0f0;
+}
+
+.days-ago-4 {
+    background-color: #eaeaea;
+}
+
+.days-ago-5 {
+    background-color: #e5e5e5;
+}
+
+.days-ago-6 {
+    background-color: #e0e0e0;
+}
+
+.days-ago-7 {
+    background-color: #dadada;
+}
+
+.days-ago-8 {
+    background-color: #d5d5d5;
+}
+
+.days-ago-9 {
+    background-color: #d0d0d0;
+}
--- a/about-mozilla.js	Mon Mar 02 16:35:41 2009 -0800
+++ b/about-mozilla.js	Mon Mar 02 17:33:06 2009 -0800
@@ -9,6 +9,7 @@
       $('.title', item).wrap('<a href="' + this.link + '"></a>');
       if (this.author)
         $('.author', item).html('by ' + this.author);
+      $(item).attr("published", this.publishedDate);
       content.append(item);
     });
 }
@@ -34,7 +35,27 @@
    processFeed: processBlogFeed}
 ];
 
-function showFeed(feedInfo) {
+function doneLoadingFeeds() {
+  function fixHeights(daysAgo) {
+    var tallestHeight = 0;
+    var elements = $(".days-ago-" + i);
+    elements.each(
+      function(i) {
+        var height = $(this).height();
+        if (height > tallestHeight)
+          tallestHeight = height;
+      });
+    elements.height(tallestHeight);
+  }
+
+  $("#issue").fadeIn();
+  for (var i = 0; i < 10; i++)
+    fixHeights(i);
+  var entries = $("#issue .entry");
+  $(document.body).width(entries.outerWidth() * entries.length);
+}
+
+function showFeed(feedInfo, cb) {
   var entry = $('<div class="entry"></div>');
   var headline = $('<div class="headline"></div>');
   headline.text(feedInfo.name);
@@ -45,20 +66,47 @@
   feed.setNumEntries(10);
   feed.load(
     function(result) {
+      var rawContent = $('<div class="content"></div>');
       var content = $('<div class="content"></div>');
-      feedInfo.processFeed(result.feed, content);
-      content.hide();
+
+      for (var i = 0; i < 10; i++)
+        content.append('<div class="days-ago-' + i + '"></div>');
+
+      feedInfo.processFeed(result.feed, rawContent);
+
+      var now = new Date();
+      $(".blog-item", rawContent).each(
+        function(i) {
+          var pub = new Date($(this).attr("published"));
+          var msAgo = now - pub;
+          var hoursAgo = msAgo / (1000 * 60 * 60);
+          var daysAgo = Math.floor(hoursAgo / 24);
+          if (daysAgo < 0)
+            daysAgo = 0;
+          var div = $(".days-ago-" + daysAgo, content);
+          div.append(this);
+        }
+      );
+
       entry.append(content);
-      content.slideDown();
+      cb();
     });
 }
 
 google.load("feeds", "1");
 google.setOnLoadCallback(
   function() {
-    jQuery.each(FEEDS, function(i) { showFeed(this); });
-    $("#issue").fadeIn();
-
-    var entries = $("#issue .entry");
-    $(document.body).width(entries.outerWidth() * entries.length);
+    var feedsLeftToLoad = FEEDS.length;
+    jQuery.each(
+      FEEDS,
+      function(i) {
+        showFeed(this,
+                 function() {
+                   feedsLeftToLoad--;
+                   if (!feedsLeftToLoad) {
+                     doneLoadingFeeds();
+                   }
+                 });
+      }
+    );
   });