[2204] Format the related items into a grid

This hopefully gives the greatest prominence to the images and will encourage users to upload images. Also added a direct link to view the item.
slmnhq · Apr 24, 2012 · 008d12d · 008d12d
1 parent ad925af
commit 008d12d
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 40 deletions.
diff --git a/ckan/public/css/style.css b/ckan/public/css/style.css
@@ -1423,3 +1423,37 @@ body.editresources .error-explanation {
 .form-horizontal .chzn-select {
   margin-bottom: 0;
 }
+
+.thumbnails li:nth-of-type(5n) {
+  clear: left;
+}
+
+.thumbnail .heading {
+  font-weight: bold;
+}
+
+.thumbnail .image {
+  display: block;
+  width: 210px;
+  height: 180px;
+  overflow: hidden;
+  background: #ececec;
+  border: 1px solid #dedede;
+  margin: -1px;
+}
+
+.thumbnail .image img {
+  max-width: 100%;
+  width: auto;
+  height: auto;
+}
+
+.thumbnail .empty {
+  color: #ccc;
+}
+
+.thumbnail .read-more {
+  margin-top: 10px;
+  margin-bottom: 0;
+}
+
diff --git a/ckan/public/images/photo-placeholder.png b/ckan/public/images/photo-placeholder.png
diff --git a/ckan/public/scripts/application.js b/ckan/public/scripts/application.js
@@ -1105,18 +1105,34 @@ CKAN.Utils = function($, my) {
 
   my.relatedSetup = function(form) {
     function addAlert(msg) {
-      $('<div class="alert alert-error" />').html(msg).prependTo(form);
+      $('<div class="alert alert-error" />').html(msg).hide().prependTo(form).fadeIn();
     }
 
+    // Center thumbnails vertically.
+    $('.related-items img').each(function () {
+      function vertiallyAlign() {
+        var img = $(this),
+            height = img.height(),
+            parent = img.parent().height(),
+            top = (height - parent) / 2;
+
+        if (parent < height) {
+          img.css('margin-top', -top);
+        }
+      }
+      $(this).load(vertiallyAlign);
+    });
+
     $(form).submit(function (event) {
       event.preventDefault();
 
       // Validate the form
       var form = $(this), data = {};
-      jQuery.each(form.serializeArray(), function (name, value) {
-        data[name] = value;
+      jQuery.each(form.serializeArray(), function () {
+        data[this.name] = this.value;
       });
 
+      form.find('.alert').remove();
       if (!data.title) {
         addAlert('<strong>Missing field:</strong> A title is required');
         $('[name=title]').parent().addClass('error');

diff --git a/ckan/templates/_util.html b/ckan/templates/_util.html
@@ -218,23 +218,20 @@
 
 
   <py:def function="related_summary(related)">
-    <table width="100%" border="0" cellpadding="4">
-        <tr>
-            <td rowspan="2" width="200px">
-                <a href="${related.url}" py:if="related.image_url">
-                    <img src="${related.image_url}" width="200px" border="0"/>
-                </a>
-                <a href="${related.url}" py:if="not related.image_url">
-                    DEFAULT IMAGE
-                </a>
-            </td>
-            <td><strong>${related.title}</strong></td>
-        </tr>
-        <tr>
-            <td valign="top">${related.description}</td>
-        </tr>
-    </table>
-    <hr/>
+    <li class="span3">
+      <div class="thumbnail">
+        <a href="${related.url}" class="image">
+          <img src="${related.image_url}" width="210" py:if="related.image_url" />
+          <img src="/images/photo-placeholder.png" width="210" py:if="not related.image_url" />
+        </a>
+        <div class="caption">
+          <h5 class="heading" title="${related.title}">${h.markdown_extract(related.title, extract_length=30)}</h5>
+          <div class="description" py:if="related.description">${h.markdown_extract(related.description, extract_length=60)}</div>
+          <i class="empty" py:if="not related.description">No description for this item</i>
+          <p class="read-more"><a href="${related.url}">View this related item</a></p>
+        </div>
+      </div>
+    </li>
   </py:def>
 
 

diff --git a/ckan/templates/package/related_list.html b/ckan/templates/package/related_list.html
@@ -11,6 +11,7 @@
   about=""
   py:strip="">
 
+  <py:def function="body_class">no-sidebar</py:def>
   <xi:include href="../_snippet/add-related.html" />
 
   <py:def function="page_title">${c.pkg_dict.get('title', c.pkg_dict['name'])}
@@ -20,29 +21,19 @@
     ${c.pkg_dict['title']} - Related
   </py:def>
 
-  <py:match path="primarysidebar">
-    <li class="sidebar-section">
-      <h3>What are related items ....</h3>
-
-      <a class="btn btn-primary" data-toggle="modal" href=".modal-add-related">Add related item</a>
-    </li>
-  </py:match>
-
   <div py:match="content">
     ${add_related(c.pkg)}
-    <h3>Related items</h3>
-    <div class="row-fluid">
-      <div class="span12">
-          <div py:if="not c.pkg.related" class="span8">
-              There are no related items here yet, why not <a data-toggle="modal" href=".modal-add-related">add one</a>?
-          </div>
-
-          <py:for each="related in c.pkg.related">
-              <div class="span8 related_${related.type}">
-                  ${related_summary(related)}
-              </div>
-          </py:for>
+    <h3>Related items <a class="btn btn-small btn-primary pull-right" data-toggle="modal" href=".modal-add-related"><i class="icon-plus-sign icon-white"></i> Add related item</a></h3>
+    <div>
+      <div py:if="not c.pkg.related" class="span8">
+          There are no related items here yet, why not <a data-toggle="modal" href=".modal-add-related">add one</a>?
       </div>
+
+      <ul class="related-items thumbnails">
+        <py:for each="related in c.pkg.related">
+          ${related_summary(related)}
+        </py:for>
+      </ul>
     </div>
 
     <span class="insert-comment-thread"></span>