[2204] Related items description expands without breaking the grid

ckan/public/css/style.css

@@ -1413,10 +1413,20 @@ body.editresources .error-explanation {
   color: #808080;
 }
 
+.thumbnails li {
+  z-index: 0;
+  position: relative;
+  background-color: #fff;
+}
+
 .thumbnails li:nth-of-type(5n) {
   clear: left;
 }
 
+.thumbnails li.expanded-description {
+  z-index: 1;
+}
+
 .thumbnail .heading {
   font-weight: bold;
 }

ckan/public/scripts/application.js

@@ -133,23 +133,34 @@ CKAN.Utils = CKAN.Utils || {};
 jQuery.fn.truncate = function (max, suffix) {
   return this.each(function () {
     var element = jQuery(this),
-        cached  = element.text(),
-        length  = max || element.data('truncate') || 30,
-        text    = cached.slice(0, length),
-        expand  = jQuery('<a href="#" />').text(suffix || '»');
+        isTruncated = element.hasClass('truncated'),
+        cached, length, text, expand;
+
+    if (isTruncated) {
+      element.html(element.data('truncate:' + (max === 'expand' ? 'original' : 'truncated')));
+      return;
+    }
+
+    cached  = element.text();
+    length  = max || element.data('truncate') || 30;
+    text    = cached.slice(0, length);
+    expand  = jQuery('<a href="#" />').text(suffix || '»');
 
     // Try to truncate to nearest full word.
     while ((/\S/).test(text[text.length - 1])) {
       text = text.slice(0, text.length - 1);
     }
 
     element.html(jQuery.trim(text));
-
     expand.appendTo(element.append(' '));
     expand.click(function (event) {
       event.preventDefault();
-      element.text(cached);
+      element.html(cached);
     });
+
+    element.addClass('truncated');
+    element.data('truncate:original',  cached);
+    element.data('truncate:truncated', element.html());
   });
 };
 
@@ -1160,8 +1171,9 @@ CKAN.Utils = function($, my) {
     }
 
     // Center thumbnails vertically.
-    var relatedItems = $('.related-items').each(function () {
-      var item = $(this);
+    var relatedItems = $('.related-items');
+    relatedItems.find('li').each(function () {
+      var item = $(this), description = item.find('.description');
 
       function vertiallyAlign() {
         var img = $(this),
@@ -1175,7 +1187,21 @@ CKAN.Utils = function($, my) {
       }
 
       item.find('img').load(vertiallyAlign);
-      item.find('.description').truncate();
+      description.data('height', description.height()).truncate();
+    });
+
+    relatedItems.on('mouseenter mouseleave', '.description.truncated', function (event) {
+      var isEnter = event.type === 'mouseenter',
+          description = $(this),
+          parent = description.parents('li:first'),
+          difference = description.data('height') - description.height();
+
+      description.truncate(isEnter ? 'expand' : 'collapse');
+      parent.toggleClass('expanded-description', isEnter);
+
+      // Adjust the bottom margin of the item relative to it's current value
+      // to allow the description to expand without breaking the grid.
+      parent.css('margin-bottom', isEnter ? '-=' + difference + 'px' : '');
     });
 
     // Add a handler for the delete buttons.