Bug 596472, truncating disco pane text

jbalogh · Oct 21, 2010 · 65c6d8e · 65c6d8e
1 parent 579fd8f
commit 65c6d8e
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 24 deletions.
diff --git a/media/css/zamboni/discovery-pane.css b/media/css/zamboni/discovery-pane.css
@@ -380,28 +380,38 @@ header:after,
 }
 
 /* @Addon @boxes *********/
-.addons {
+.addons ul,
+ul.addons {
+    width: 100%;
     max-width: 650px;
     margin: 0 auto 1em;
 }
 
 .addons li {
-    width: 29%;
-    margin: 0 2% 1em;
     float: left;
+    width: 30%;
+    position: relative;
+    margin-right: 5%;
+    margin-bottom: 5%;
 }
 
 .html-rtl .addons li {
     float: right;
 }
 
-.addons li:nth-child(4) {
-    clear: left;
+.addons li:nth-child(3n) {
+    margin-right: 0;
 }
 
 .addons li > a {
     display: block;
+    display: -moz-box;
+    -moz-box-orient: vertical;
+    -moz-box-align: center;
     position: relative;
+    height: 120px;
+    width: 100%;
+    width: -moz-calc(100% - 22px);
     padding: 10px;
     background: -moz-linear-gradient(top, #fff 0, #ecf1f7 100%);
     border: 1px solid #b7c3d7;
@@ -439,10 +449,10 @@ header:after,
 }
 
 .addons p.desc {
+    -moz-box-flex:1;
+    overflow:hidden;
     font-size: 11px;
     text-align: left;
-    max-height: 4em;
-    overflow: hidden;
     color: #373d48;
     margin: 0;
 }

diff --git a/media/js/zamboni/discovery_pane.js b/media/js/zamboni/discovery_pane.js
@@ -1,16 +1,3 @@
-// Loops through all boxes to find the tallest.
-// Then loops again to set all boxes to the height of the tallest box.
-function addonHeights() {
-  $('#main-feature .addons, #featured-addons .addons').each(function(){
-    var maxHeight = 0;
-
-    $(this).find('li a').height('auto').each(function(){
-      var height = $(this).height();
-      if (maxHeight < height) { maxHeight = height; }
-    }).height(maxHeight);
-  });
-}
-
 /**
  * jCarouselLite - jQuery plugin to navigate images/any content in a carousel style widget.
  * @requires jQuery v1.2 or above
@@ -173,7 +160,6 @@ $.fn.jCarouselLite = function(o) {
           liSize = o.vertical ? height(li) : panelWidth;
           ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));
           // Recalculate heights in case text wraps
-          addonHeights();
         });
 
     });
@@ -191,7 +177,32 @@ function height(el) {
 
 })(jQuery);
 
-
+$.fn.vtruncate = function() {
+    this.each(function() {
+        var $el = $(this),
+            oldtext = $el.attr("oldtext") || $el.text(),
+            txt = oldtext.split(" ");
+            cutoff = txt.length;
+        if ($el.attr("oldtext")) {
+            $el.text(oldtext);
+        }
+        $el.attr("oldtext", oldtext);
+        while ((this.scrollHeight - this.offsetHeight) > 1 && cutoff > 0) {
+            cutoff--;
+            $el.html(txt.slice(0,cutoff).join(" ")+"&hellip;");
+        }
+        //If truncating by word wasn't enough, we truncate by letter.
+        if (cutoff < 1) {
+            txt = oldtext.split("");
+            cutoff = txt.length;
+            while ((this.scrollHeight - this.offsetHeight) > 1 && cutoff > 0) {
+                cutoff--;
+                $el.html(txt.slice(0,cutoff).join(" ")+"&hellip;");
+            }
+        }
+        $el.attr("title", oldtext);
+    });
+};
 
 $(document).ready(function(){
   // Set up the carousel
@@ -203,7 +214,22 @@ $(document).ready(function(){
   // Set the width of panels (jCarousel requires a pixel width but our page is liquid, so we'll set the width in px on pageload and on resize)
   var panelWidth = $("#main").width();
     $("#main-feature, #main-feature .panel").css({width:panelWidth});
-  // Set the heights of addon boxes
-  addonHeights();
+  //trim the description text to fit.
+  $("p.desc").vtruncate();
+  $(window).resize(debounce(function() {
+      $("p.desc").vtruncate();
+  }, 200));
 });
 
+function debounce(fn, ms, ctxt) {
+    var ctx = ctxt || window;
+    var to, del = ms, fun = fn;
+    return function () {
+        var args = arguments;
+        clearTimeout(to);
+        to = setTimeout(function() {
+            fun.apply(ctx, args);
+        },del);
+    };
+}
+