Adds new JS module for hiding and showing extra meta information

ckan/public/base/javascript/modules/table-toggle-more.js

@@ -0,0 +1,66 @@
+/* Table toggle more
+ * When a table has more things to it that need to be hidden and then shown more
+ */	
+this.ckan.module('table-toggle-more', function($, _) {
+  return {
+    /* options object can be extended using data-module-* attributes */
+    options: {
+      i18n: {
+        show_more: _('Show more'),
+        show_less: _('Hide')
+      }
+    },
+
+    /* Initialises the module setting up elements and event listeners.
+     *
+     * Returns nothing.
+     */
+    initialize: function () {
+      $.proxyAll(this, /_on/);
+      this.el.addClass('table-toggle-more');
+      // Do we actually want this table to expand?
+      var rows = $('.toggle-more', this.el).length;
+      if (rows) {
+      	// How much is the colspan?
+      	var cols = $('thead tr th', this.el).length;
+      	var template_more = [
+          '<tr class="toggle-show toggle-show-more">',
+          '<td colspan="'+cols+'">',
+          '<small>',
+          '<a href="#" class="show-more">'+this.i18n('show_more')+'</a>',
+          '<a href="#" class="show-less">'+this.i18n('show_less')+'</a>',
+          '</small>',
+          '</td>',
+          '</tr>'
+        ].join('\n');
+        var template_seperator = [
+          '<tr class="toggle-seperator">',
+          '<td colspan="'+cols+'">',
+          '</td>',
+          '</tr>'
+        ].join('\n');
+
+       var seperator = $(template_seperator).insertAfter($('.toggle-more:last-child', this.el));
+        $(template_more).insertAfter(seperator);
+
+        $('.show-more', this.el).on('click', this._onShowMore);
+        $('.show-less', this.el).on('click', this._onShowLess);
+      }
+    },
+
+    _onShowMore: function($e) {
+      $e.preventDefault();
+      this.el
+        .removeClass('table-toggle-more')
+        .addClass('table-toggle-less');
+    },
+
+    _onShowLess: function($e) {
+      $e.preventDefault();
+      this.el
+        .removeClass('table-toggle-less')
+        .addClass('table-toggle-more');
+    }
+
+  }
+});

ckan/public/base/javascript/resource.config

@@ -35,6 +35,7 @@ ckan =
     modules/follow.js
     modules/activity-stream.js
     modules/dashboard.js
+    modules/table-toggle-more.js
 
 main =
     apply_html_class

ckan/public/base/less/module.less

@@ -196,6 +196,7 @@
   background-color: @layoutTrimBackgroundColor;
   border-bottom: 1px solid @genericBorderColor;
   margin-top: 0;
+  margin-bottom: 0;
   .border-radius(3px 3px 0 0);
 }
 

ckan/public/base/less/nav.less

@@ -40,11 +40,6 @@
   display:block;
 }
 
-.nav-item [class^=icon] {
-  font-size: 1.2em;
-  margin: -1px 0 -1px -1px;
-}
-
 .module-narrow .nav-item > a {
   padding-left:  @gutterSmallX;
   padding-right: @gutterSmallX;

ckan/public/base/less/tables.less

@@ -31,3 +31,40 @@
     display: block;
   }
 }
+
+.js {
+  .table-toggle-more {
+    .toggle-more {
+      display: none;
+    }
+    .show-more {
+      display: inline;
+    }
+    .show-less {
+      display: none;
+    }
+    .toggle-seperator {
+      display: table-row;
+      td {
+        height: 11px;
+        padding: 0;
+        background-image: url("@{imagePath}/table-seperator.png");
+      }
+    }
+  }
+  .table .toggle-show td {
+    background: none;
+    text-align: center;
+  }
+  .table-toggle-less {
+    .show-less {
+      display: inline;
+    }
+    .show-more {
+      display: none;
+    }
+    .toggle-seperator {
+      display: none;
+    }
+  }
+}

ckan/templates/package/resource_read.html

@@ -73,17 +73,37 @@ <h3>{{ _('From the dataset abstract') }}</h3>
     {% if res %}
       <section class="module">
         <div class="module-content">
-          <h2>Additional Information</h2>
-          <table class="table table-striped table-bordered table-condensed">
+          <h2>{{ _('Additional Information') }}</h2>
+          <table class="table table-striped table-bordered table-condensed" data-module="table-toggle-more">
             <thead>
               <tr>
-                <th scope="col">Field</th>
-                <th scope="col">Value</th>
+                <th scope="col">{{ _('Field') }}</th>
+                <th scope="col">{{ _('Value') }}</th>
               </tr>
             </thead>
             <tbody>
+              <tr>
+                <th scope="row">{{ _('Last updated') }}</th>
+                <td>{{ h.render_datetime(res.last_modified) or h.render_datetime(res.revision_timestamp) or h.render_datetime(res.created) or _('unknown') }}</td>
+              </tr>
+              <tr>
+                <th scope="row">{{ _('Created') }}</th>
+                <td>{{ h.render_datetime(res.created) or _('unknown') }}</td>
+              </tr>
+              <tr>
+                <th scope="row">{{ _('Format') }}</th>
+                <td>{{ res.mimetype_inner or res.mimetype or res.format or _('unknown') }}</td>
+              </tr>
+              <tr>
+                <th scope="row">{{ _('License') }}</th>
+                <td>{% snippet "snippets/license.html", pkg_dict=pkg, text_only=True %}</td>
+              </tr>
+              <tr>
+                <th scope="row">{{ _('Author') }}</th>
+                <td>{{ res.author or _('unknown') }}</td>
+              </tr>
               {% for key, value in h.format_resource_items(res.items()) %}
-                <tr><th scope="row">{{ key }}</th><td>{{ value }}</td></tr>
+                <tr class="toggle-more"><th scope="row">{{ key }}</th><td>{{ value }}</td></tr>
               {% endfor %}
             </tbody>
           </table>
@@ -94,16 +114,6 @@ <h2>Additional Information</h2>
 {% endblock %}
 
 {% block secondary_content %}
-  {% block resource_information %}
-    <section class="module module-narrow">
-      <h2 class="module-heading"><i class="icon-medium icon-info-sign"></i> Resource Information</h2>
-      <ul class="simple-list">
-        <li><i class="ckan-icon ckan-icon-calendar"></i> Last Updated: {{ h.render_datetime(res.last_modified) or _("unknown") }}</li>
-        <li><i class="ckan-icon ckan-icon-file"></i> Format: {{ res.mimetype_inner or res.mimetype or _("unknown") }}</li>
-        <li><i class="ckan-icon ckan-icon-lock"></i> {% snippet "snippets/license.html", pkg_dict=pkg, text_only=True %}</li>
-      </ul>
-    </section>
-  {% endblock %}
 
   {% block resources_list %}
     {% snippet "package/snippets/resources.html", pkg=pkg, active=res.id %}