Mercurial > planet-ubiquity-redesign
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(); + } + }); + } + ); });