[dataset/read][l]: Notes expand/collapse ui redesigned.

ckan · Feb 21, 2012 · b1f93e8 · b1f93e8
1 parent 30b28eb
commit b1f93e8
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 45 deletions.
diff --git a/ckan/public/css/style.css b/ckan/public/css/style.css
@@ -1282,31 +1282,31 @@ body.package.read #sidebar li.widget-container {
   border: 0
 }
 .notes {
-  padding: 8px; 
-  border-left: 2px solid #eee;
   background: url('../images/ldquo.png') no-repeat top left #f7f7f7;
+  border: 1px solid #eee;
+  border-radius: 5px;
 }
-.notes #notes-toggle a {
-  cursor: pointer;
+.notes > div {
+  padding: 8px;
 }
-.notes #notes-toggle a.more:after {
-  content: '  »';
-  font-size: 150%;
-  position: relative;
-  bottom: -1px;
+#notes-toggle {
+  padding: 0;
+  height: 23px;
 }
-.notes #notes-toggle a.less:before {
-  content: '« ';
-  font-size: 150%;
-  position: relative;
-  bottom: -1px;
+.notes #notes-toggle button {
+  cursor: pointer;
+  width: 100%;
+  height: 23px;
+  padding: 4px;
+  border-radius: 0;
+  border: 0;
+  border-top: 1px solid #eee;
 }
-
 #notes-extract p {
   margin-bottom: 0;
 }
-#notes-remainder {
-  margin-top: 1em;
+#notes-remainder p:last-child {
+  margin-bottom: 0;
 }
 .dataset-label {
   font-weight: bold;

diff --git a/ckan/public/images/chevron-down.png b/ckan/public/images/chevron-down.png
diff --git a/ckan/public/images/chevron-up.png b/ckan/public/images/chevron-up.png
diff --git a/ckan/public/scripts/application.js b/ckan/public/scripts/application.js
@@ -505,24 +505,26 @@ CKAN.Utils = function($, my) {
   // the div if clicked
   my.setupNotesExtract = function() {
     var notes = $('#content div.notes');
-    if(notes.find('p').length > 1){
-      var extract = notes.children(':eq(0)');
-      var remainder = notes.children(':gt(0)');
-      notes.html($.tmpl(CKAN.Templates.notesField));
-      notes.find('#notes-extract').html(extract);
-      notes.find('#notes-remainder').html(remainder);
-      notes.find('#notes-remainder').hide();
-      notes.find('#notes-toggle a').click(function(event){
-        notes.find('#notes-toggle a').toggle();
-        var remainder = notes.find('#notes-remainder')
-        if ($(event.target).hasClass('more')) {
-          remainder.slideDown();
-        }
-        else {
-          remainder.slideUp();
+    var paragraphs = notes.find('#notes-extract > *');
+    if (paragraphs.length==0) {
+      notes.hide();
+    }
+    else if (paragraphs.length > 1) {
+      var remainder = notes.find('#notes-remainder');
+      $.each(paragraphs,function(i,para) {
+        if (i > 0) remainder.append($(para).remove());
+      });
+      notes.find('#notes-toggle').show();
+      notes.find('#notes-toggle button').click(
+        function(event){
+          notes.find('#notes-toggle button').toggle();
+          if ($(event.target).hasClass('more'))
+            remainder.slideDown();
+          else
+            remainder.slideUp();
+          return false;
         }
-        return false;
-      })
+      );
     }
   };
 

diff --git a/ckan/public/scripts/templates.js b/ckan/public/scripts/templates.js
@@ -157,11 +157,3 @@ CKAN.Templates.resourceEntry = ' \
   </td> \
 ';
 
-CKAN.Templates.notesField = ' \
-  <div id="notes-extract"> \
-  </div> \
-  <div id="notes-remainder"> \
-  </div> \
-  <div id="notes-toggle"><a class="more" href="#">Read more</a><a class="less" href="#" style="display: none;">Read less</a></div> \
-';
-
diff --git a/ckan/templates/group/read.html b/ckan/templates/group/read.html
@@ -28,7 +28,14 @@ <h3>Administrators</h3>
   <py:match path="content">
     <h3 py:if="c.group['state'] != 'active'">State: ${c.group['state']}</h3>
     <div class="notes" py:if="str(c.description_formatted).strip()">
-      ${c.description_formatted}
+      <div id="notes-extract">
+        ${c.description_formatted}
+      </div>
+      <div id="notes-remainder" style="display: none;"></div>
+      <div id="notes-toggle" style="display: none;">
+        <button class="more pretty-button"><img src="/images/chevron-down.png"/></button>
+        <button class="less pretty-button" style="display: none;"><img src="/images/chevron-up.png"/></button>
+      </div>
     </div>
     <div class="group-dataset-list">
       <h3>Datasets</h3>

diff --git a/ckan/templates/package/read_core.html b/ckan/templates/package/read_core.html
@@ -11,7 +11,14 @@
 
       <!-- Description -->
       <div class="notes" py:if="str(c.pkg_notes_formatted).strip()">
-        ${c.pkg_notes_formatted}
+        <div id="notes-extract">
+          ${c.pkg_notes_formatted}
+        </div>
+        <div id="notes-remainder" style="display: none;"></div>
+        <div id="notes-toggle" style="display: none;">
+          <button class="more pretty-button"><img src="/images/chevron-down.png"/></button>
+          <button class="less pretty-button" style="display: none;"><img src="/images/chevron-up.png"/></button>
+        </div>
       </div>
 
       <!-- Resources -->

diff --git a/ckan/templates/package/resource_read.html b/ckan/templates/package/resource_read.html
@@ -30,7 +30,9 @@
 
   <div py:match="content">
     <div class="notes" property="rdfs:label">
-      ${c.resource.get('description') or '(No description)'}
+      <div id="notes-extract">
+        ${c.resource.get('description') or '(No description)'}
+      </div>
     </div>
 
     <div class="resource-actions span-8">