Mercurial > about-mozilla-redesign-2

changeset 13:efd49c761dbe default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Really ugly, confusing use of CSS3 columns. The -moz-column-width seems to only be a general guideline or something, as it's impossible to get the columns to line up w/ other page elements.
author Atul Varma <varmaa@toolness.com>
date Mon, 02 Mar 2009 08:52:23 -0800
parents e357d4e48bb2
children
files about-mozilla.css about-mozilla.js
diffstat 2 files changed, 27 insertions(+), 7 deletions(-) [+]
line wrap: on
line diff
--- a/about-mozilla.css	Sun Mar 01 17:26:25 2009 -0800
+++ b/about-mozilla.css	Mon Mar 02 08:52:23 2009 -0800
@@ -38,21 +38,21 @@
 
 .entry {
     background: white;
+    width: 20em;
     float: left;
-    width: 20em;
 }
 
 .headline {
     font-weight: bold;
-    height: 3em;
     padding: 6pt;
-    border-top: 1px dotted gray;
-    border-bottom: 1px dotted gray;
 }
 
 .content {
     padding-left: 6pt;
     padding-right: 6pt;
+    padding-bottom: 6pt;
+    -moz-column-width: 20em;
+    -moz-column-gap: 6pt;
 }
 
 #raw-issue {
--- a/about-mozilla.js	Sun Mar 01 17:26:25 2009 -0800
+++ b/about-mozilla.js	Mon Mar 02 08:52:23 2009 -0800
@@ -35,6 +35,18 @@
   var fullWidth = $(window).width();
   var tallestHeight = 0;
   var entries = $("#issue .entry");
+  var entryArray = jQuery.makeArray(entries);
+  var newEntries = [];
+  entryArray.sort(
+    function(a, b) {
+      return $(a).height() - $(b).height();
+    });
+  var newBody = $('<div id="body"></div>');
+  for (var i = 0; i < entryArray.length; i++)
+    newBody.append($(entryArray[i]).clone());
+  $("#body").replaceWith(newBody);
+
+  entries = $("#issue .entry");
   entries.each(
     function(i) {
       var height = $(this).height();
@@ -42,9 +54,17 @@
         tallestHeight = height;
     }
   );
-  entries.height(tallestHeight);
-  var maxColumns = Math.floor(fullWidth / entries.outerWidth());
-  $("#issue").width(entries.outerWidth() * maxColumns);
+  entries.each(
+    function(i) {
+      var height = $(this).height();
+      if (height > (tallestHeight/2))
+        $(this).width("43em");
+    }
+  );
+
+  //entries.height(tallestHeight);
+  //var maxColumns = Math.floor(fullWidth / entries.outerWidth());
+  //$("#issue").width(entries.outerWidth() * maxColumns);
 }
 
 google.load("feeds", "1");