[ckan-changes] [okfn/ckan] 57eacd: [2204] Styled the "no related" message

GitHub noreply at github.com
Tue Apr 24 16:25:38 UTC 2012


  Branch: refs/heads/feature-2204-related
  Home:   https://github.com/okfn/ckan
  Commit: 57eacd10d10971c8c17894586cbb0129be270db6
      https://github.com/okfn/ckan/commit/57eacd10d10971c8c17894586cbb0129be270db6
  Author: Aron Carroll <self at aroncarroll.com>
  Date:   2012-04-24 (Tue, 24 Apr 2012)

  Changed paths:
    M ckan/public/css/style.css
    M ckan/templates/package/related_list.html

  Log Message:
  -----------
  [2204] Styled the "no related" message


diff --git a/ckan/public/css/style.css b/ckan/public/css/style.css
index 313f2aa..49ac68f 100644
--- a/ckan/public/css/style.css
+++ b/ckan/public/css/style.css
@@ -1,23 +1,23 @@
 body.no-sidebar .sidebar-outer { display: none; }
 body.no-sidebar #content { padding-right: 0; border-right: none; }
-body.no-sidebar .content-outer { 
-  width: 940px; 
+body.no-sidebar .content-outer {
+  width: 940px;
 }
 
 .header.outer {
   background-color: #e2e2e2;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#e2e2e2), to(#cccccc)); 
-  background-image: -webkit-linear-gradient(top, #e2e2e2, #cccccc); 
-  background-image:    -moz-linear-gradient(top, #e2e2e2, #cccccc); 
-  background-image:     -ms-linear-gradient(top, #e2e2e2, #cccccc); 
-  background-image:      -o-linear-gradient(top, #e2e2e2, #cccccc); 
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#e2e2e2), to(#cccccc));
+  background-image: -webkit-linear-gradient(top, #e2e2e2, #cccccc);
+  background-image:    -moz-linear-gradient(top, #e2e2e2, #cccccc);
+  background-image:     -ms-linear-gradient(top, #e2e2e2, #cccccc);
+  background-image:      -o-linear-gradient(top, #e2e2e2, #cccccc);
   background-image:         linear-gradient(top, #e2e2e2, #cccccc);
-            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e2e2e2', EndColorStr='#cccccc'); 
+            filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e2e2e2', EndColorStr='#cccccc');
 
   margin-bottom: 18px;
-     -moz-box-shadow: 0px 2px 15px #dddddd; 
-  -webkit-box-shadow: 0px 2px 15px #dddddd; 
-          box-shadow: 0px 2px 15px #dddddd; 
+     -moz-box-shadow: 0px 2px 15px #dddddd;
+  -webkit-box-shadow: 0px 2px 15px #dddddd;
+          box-shadow: 0px 2px 15px #dddddd;
   border-bottom: 1px solid #ccc;
 }
 
@@ -84,22 +84,22 @@ header .search {
   padding: 0.4em;
   font-weight: bold;
 
-     -moz-border-radius: 5px; 
-  -webkit-border-radius: 5px; 
-          border-radius: 5px; 
-  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
+     -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+          border-radius: 5px;
+  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
 }
 
 .footer.outer {
   border-top: 2px solid #ccc;
   background-color: #dbdbdb;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#ffffff)); 
-  background-image: -webkit-linear-gradient(top, #dbdbdb, #ffffff); 
-  background-image:    -moz-linear-gradient(top, #dbdbdb, #ffffff); 
-  background-image:     -ms-linear-gradient(top, #dbdbdb, #ffffff); 
-  background-image:      -o-linear-gradient(top, #dbdbdb, #ffffff); 
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#ffffff));
+  background-image: -webkit-linear-gradient(top, #dbdbdb, #ffffff);
+  background-image:    -moz-linear-gradient(top, #dbdbdb, #ffffff);
+  background-image:     -ms-linear-gradient(top, #dbdbdb, #ffffff);
+  background-image:      -o-linear-gradient(top, #dbdbdb, #ffffff);
   background-image:         linear-gradient(top, #dbdbdb, #ffffff);
-            fromilter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dbdbdb', EndColorStr='#ffffff'); 
+            fromilter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#dbdbdb', EndColorStr='#ffffff');
 }
 
 html, body {
@@ -134,7 +134,7 @@ footer h3 {
 }
 
 h1, h2, h3, h4, h5 {
-  font-family: 'Ubuntu', Georgia; 
+  font-family: 'Ubuntu', Georgia;
   font-weight: normal;
   margin-bottom: 10px;
 }
@@ -164,16 +164,16 @@ label.control-label {
 table th {
   border: 1px solid #e0e0e0;
   background-color: #e2e2e2;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#e2e2e2)); 
-  background-image: -webkit-linear-gradient(top, #f0f0f0, #e2e2e2); 
-  background-image:    -moz-linear-gradient(top, #f0f0f0, #e2e2e2); 
-  background-image:     -ms-linear-gradient(top, #f0f0f0, #e2e2e2); 
-  background-image:      -o-linear-gradient(top, #f0f0f0, #e2e2e2); 
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#e2e2e2));
+  background-image: -webkit-linear-gradient(top, #f0f0f0, #e2e2e2);
+  background-image:    -moz-linear-gradient(top, #f0f0f0, #e2e2e2);
+  background-image:     -ms-linear-gradient(top, #f0f0f0, #e2e2e2);
+  background-image:      -o-linear-gradient(top, #f0f0f0, #e2e2e2);
   background-image:         linear-gradient(top, #f0f0f0, #e2e2e2);
             filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f0f0f0', EndColorStr='#e2e2e2');
 }
 table caption {
-  caption-side: bottom; 
+  caption-side: bottom;
   color: #888;
   font-size: 0.9em;
   background-color: white;
@@ -245,10 +245,10 @@ img.gravatar {
   vertical-align: top;
 }
 
-.drag-drop-list { 
-  list-style-type: none; 
-  margin: 0; 
-  padding: 0; 
+.drag-drop-list {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
 }
 .drag-drop-list li {
   margin-bottom: 3px;
@@ -273,18 +273,18 @@ ul.no-break li {
   margin: 0 0 1em 0 ;
   border: 1px solid #e0e0e0;
   background-color: #e2e2e2;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#e2e2e2)); 
-  background-image: -webkit-linear-gradient(top, #f0f0f0, #e2e2e2); 
-  background-image:    -moz-linear-gradient(top, #f0f0f0, #e2e2e2); 
-  background-image:     -ms-linear-gradient(top, #f0f0f0, #e2e2e2); 
-  background-image:      -o-linear-gradient(top, #f0f0f0, #e2e2e2); 
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#e2e2e2));
+  background-image: -webkit-linear-gradient(top, #f0f0f0, #e2e2e2);
+  background-image:    -moz-linear-gradient(top, #f0f0f0, #e2e2e2);
+  background-image:     -ms-linear-gradient(top, #f0f0f0, #e2e2e2);
+  background-image:      -o-linear-gradient(top, #f0f0f0, #e2e2e2);
   background-image:         linear-gradient(top, #f0f0f0, #e2e2e2);
             filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f0f0f0', EndColorStr='#e2e2e2');
 
-     -moz-border-radius: 5px; 
-  -webkit-border-radius: 5px; 
-          border-radius: 5px; 
-  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
+     -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+          border-radius: 5px;
+  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
   padding: 2px 4px;
   font-weight: bold;
 }
@@ -352,7 +352,7 @@ ul.no-break li {
 #sidebar {
   overflow: hidden;
 }
-#sidebar h2, 
+#sidebar h2,
 #sidebar h3 {
   font-size: 1.3em;
 }
@@ -370,9 +370,9 @@ ul.no-break li {
   background-color: #FFF7C0;
   padding: 15px;
   padding-top: 10px;
-     -moz-border-radius: 15px; 
-  -webkit-border-radius: 15px; 
-          border-radius: 15px; 
+     -moz-border-radius: 15px;
+  -webkit-border-radius: 15px;
+          border-radius: 15px;
 }
 
 
@@ -415,7 +415,7 @@ ul.no-break li {
 }
 .facet-box .facet-options li {
     padding-top: 0.2em;
-    color: #000; 
+    color: #000;
 }
 
 
@@ -543,7 +543,7 @@ body.index.home .front-page .group strong {
 /* = Login Form = */
 /* ============== */
 form.simple-form label {
-    display: inline-block; 
+    display: inline-block;
     float: left;
     min-width: 40%;
     padding-top: 0.5em;
@@ -552,7 +552,7 @@ form.simple-form label {
 form.simple-form input[type=text],
 form.simple-form input[type=password] {
     border: 1px solid #E7E7E7;
-    padding: 0.5em; 
+    padding: 0.5em;
     width: 40%;
     margin-bottom: 1em
 }
@@ -597,7 +597,7 @@ form.simple-form input[type=password] {
 /* = User Index = */
 /* ============== */
 
-ul.userlist, 
+ul.userlist,
 ul.userlist ul {
   list-style-type: none;
   margin: 0;
@@ -635,9 +635,9 @@ ul.userlist .badge {
 /* ================== */
 
 body.user.read #sidebar { display: none; }
-body.user.read #content { 
-  border-right: 0; 
-  width: 950px; 
+body.user.read #content {
+  border-right: 0;
+  width: 950px;
 }
 
 .user.read .page_heading {
@@ -742,10 +742,10 @@ input.search {
   border: 1px solid #ccc;
   padding: 0.5em;
   font-weight: bold;
-     -moz-border-radius: 5px; 
-  -webkit-border-radius: 5px; 
-          border-radius: 5px; 
- -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; 
+     -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+          border-radius: 5px;
+ -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
 }
 .dataset-search input.button {
     display: inline-block;
@@ -789,7 +789,7 @@ ul.datasets .search_meta {
 }
 ul.datasets ul.dataset_formats {
     float: right;
-    padding: 0 0 3px 0; 
+    padding: 0 0 3px 0;
     margin: 0;
     font-family: monospace;
 }
@@ -814,7 +814,7 @@ ul.datasets .openness img {
 ul.datasets .openness li {
     margin:0;
     padding:0;
-    border:none;    
+    border:none;
 }
 
 
@@ -1022,14 +1022,14 @@ body.package.read .related-datasets li {
 }
 
 img.open-data { margin: 1px 0 0 8px; vertical-align: top; }
-#dataset-resources { 
-    margin-top: 2em; 
-    margin-bottom: 2em; 
+#dataset-resources {
+    margin-top: 2em;
+    margin-bottom: 2em;
 }
 body.package.read h3 {
   margin-bottom: 8px;
 }
-.search-result { 
+.search-result {
   border-left: 2px solid #eee;
   margin: 0;
   padding: 8px;
@@ -1063,14 +1063,14 @@ body.package.read h3 {
 }
 
 .search-result .result-url,
-.search-result .result-url a { 
+.search-result .result-url a {
     color: #888;
 }
 .search-result .result-lrl:hover,
-.search-result .result-url:hover a { 
+.search-result .result-url:hover a {
     color: #333;
 }
-.search-result .result-url:hover a { 
+.search-result .result-url:hover a {
     text-decoration: underline;
 }
 .search-result .result-url img {
@@ -1141,9 +1141,9 @@ body.package.read #sidebar li.widget-container {
 /* ====================== */
 
 body.package.resource_read #sidebar { display: none; }
-body.package.resource_read #content { 
-    border-right: 0; 
-    width: 950px; 
+body.package.resource_read #content {
+    border-right: 0;
+    width: 950px;
 }
 
 .resource_read .notes {
@@ -1189,7 +1189,7 @@ body.about #content { border-right: 0; }
 /* ============== */
 /* = Admin Page = */
 /* ============== */
-body.admin form#form-purge-packages, 
+body.admin form#form-purge-packages,
 body.admin form#form-purge-revisions {
   margin-bottom: 30px;
   text-align: right;
@@ -1462,3 +1462,14 @@ body.editresources .error-explanation {
   margin-bottom: 0;
 }
 
+.no-related-items {
+  font-size: 16px;
+  color: #666;
+  background: #EBEBEB;
+  border: 1px solid #DBDBDB;
+  padding: 20px;
+  border-radius: 5px;
+  margin: 40px auto;
+  float: none;
+  text-align: center;
+}
diff --git a/ckan/templates/package/related_list.html b/ckan/templates/package/related_list.html
index d9feed2..76d1a6d 100644
--- a/ckan/templates/package/related_list.html
+++ b/ckan/templates/package/related_list.html
@@ -25,7 +25,7 @@
     ${add_related(c.pkg)}
     <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">
+      <div py:if="not c.pkg.related" class="span8 no-related-items">
           There are no related items here yet, why not <a data-toggle="modal" href=".modal-add-related">add one</a>?
       </div>
 


================================================================
  Commit: 23114152c732e7ae1012b70d0958ea4013bb06ce
      https://github.com/okfn/ckan/commit/23114152c732e7ae1012b70d0958ea4013bb06ce
  Author: Aron Carroll <self at aroncarroll.com>
  Date:   2012-04-24 (Tue, 24 Apr 2012)

  Changed paths:
    M ckan/public/scripts/application.js
    M ckan/templates/_util.html

  Log Message:
  -----------
  [2204] Truncate description in JavaScript


diff --git a/ckan/public/scripts/application.js b/ckan/public/scripts/application.js
index 8a0854f..359a950 100644
--- a/ckan/public/scripts/application.js
+++ b/ckan/public/scripts/application.js
@@ -120,6 +120,32 @@ CKAN.Utils = CKAN.Utils || {};
   });
 }(jQuery));
 
+/* =============================== */
+/* jQuery Plugins                  */
+/* =============================== */
+
+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 || '»');
+
+    // 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);
+    });
+  });
+};
 
 /* =============================== */
 /* Backbone Model: Resource object */
@@ -1114,7 +1140,9 @@ CKAN.Utils = function($, my) {
     }
 
     // Center thumbnails vertically.
-    $('.related-items img').each(function () {
+    $('.related-items').each(function () {
+      var item = $(this);
+
       function vertiallyAlign() {
         var img = $(this),
             height = img.height(),
@@ -1125,7 +1153,9 @@ CKAN.Utils = function($, my) {
           img.css('margin-top', -top);
         }
       }
-      $(this).load(vertiallyAlign);
+
+      item.find('img').load(vertiallyAlign);
+      item.find('.description').truncate();
     });
 
     $(form).submit(function (event) {
diff --git a/ckan/templates/_util.html b/ckan/templates/_util.html
index 3d90675..8e320d8 100644
--- a/ckan/templates/_util.html
+++ b/ckan/templates/_util.html
@@ -134,7 +134,7 @@
         </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>
+          <div class="description" data-truncate="60" py:if="related.description">${h.markdown_extract(related.description, extract_length=1000)}</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>


================================================================
  Commit: fe25c9a835433bca7cf9ad2e4ad6a48093f3a807
      https://github.com/okfn/ckan/commit/fe25c9a835433bca7cf9ad2e4ad6a48093f3a807
  Author: Aron Carroll <self at aroncarroll.com>
  Date:   2012-04-24 (Tue, 24 Apr 2012)

  Changed paths:
    M ckan/public/css/style.css
    M ckan/public/scripts/application.js
    M ckan/templates/_snippet/add-related.html

  Log Message:
  -----------
  [2204] Make url a required field

Doesn't seem much point having related items if you can't view them.


diff --git a/ckan/public/css/style.css b/ckan/public/css/style.css
index 49ac68f..7e9e609 100644
--- a/ckan/public/css/style.css
+++ b/ckan/public/css/style.css
@@ -1429,6 +1429,10 @@ body.editresources .error-explanation {
   margin-bottom: 0;
 }
 
+.required {
+  color: #808080;
+}
+
 .thumbnails li:nth-of-type(5n) {
   clear: left;
 }
diff --git a/ckan/public/scripts/application.js b/ckan/public/scripts/application.js
index 359a950..1c12a81 100644
--- a/ckan/public/scripts/application.js
+++ b/ckan/public/scripts/application.js
@@ -1168,11 +1168,17 @@ CKAN.Utils = function($, my) {
       });
 
       form.find('.alert').remove();
+      form.find('.error').removeClass('error');
       if (!data.title) {
         addAlert('<strong>Missing field:</strong> A title is required');
         $('[name=title]').parent().addClass('error');
         return;
       }
+      if (!data.url) {
+        addAlert('<strong>Missing field:</strong> A url is required');
+        $('[name=url]').parent().addClass('error');
+        return;
+      }
 
       $.ajax({
         type: this.method,
diff --git a/ckan/templates/_snippet/add-related.html b/ckan/templates/_snippet/add-related.html
index c508bff..e5b2a64 100644
--- a/ckan/templates/_snippet/add-related.html
+++ b/ckan/templates/_snippet/add-related.html
@@ -15,25 +15,29 @@ <h3 class="heading">Add related item</h3>
     <form id="form-add-related" action="" method="POST" class="well">
       <div class="control-group">
         <input id="related-dataset" type="hidden" name="dataset_id" value="${c.pkg.id}"/>
-        <label for="related-title">Title (required)</label>
+        <label for="related-title">Title <span class="required">(required)</span></label>
         <input id="related-title" name="title" class="span6" placeholder="Please add the title for the item"/>
       </div>
-      <label for="related-type">Type of item</label>
-      <select id="related-type" name="type" class="span6 chzn-select">
-        <option value="app">Application</option>
-        <option value="idea">Idea</option>
-        <option value="visualization">Visualization</option>
-      </select>
-
-      <label for="related-description">Description</label>
-      <textarea id="related-description" name="description" class="input-xlarge span6" rows="4" placeholder="Please describe the item"></textarea>
-
-      <label for="related-url">URL</label>
-      <input id="related-url" name="url" type="url" class="span6" placeholder="Please add a url"/>
-
-      <label for="related-image-url">Image URL</label>
-      <input id="related-image-url" name="image_url" type="url" class="span6" placeholder="Please add a link to the image"/>
-
+      <div class="control-group">
+        <label for="related-type">Type of item</label>
+        <select id="related-type" name="type" class="span6 chzn-select">
+          <option value="app">Application</option>
+          <option value="idea">Idea</option>
+          <option value="visualization">Visualization</option>
+        </select>
+      </div>
+      <div class="control-group">
+        <label for="related-description">Description</label>
+        <textarea id="related-description" name="description" class="input-xlarge span6" rows="4" placeholder="Please describe the item"></textarea>
+      </div>
+      <div class="control-group">
+        <label for="related-url">URL <span class="required">(required)</span></label>
+        <input id="related-url" name="url" type="url" class="span6" placeholder="Please add a url"/>
+      </div>
+      <div class="control-group">
+        <label for="related-image-url">Image URL</label>
+        <input id="related-image-url" name="image_url" type="url" class="span6" placeholder="Please add a link to the image"/>
+      </div>
       <div>
         <button type="submit" class="btn btn-primary">Submit</button>
         <button type="button" class="btn" data-dismiss="modal">Cancel</button>


================================================================
Compare: https://github.com/okfn/ckan/compare/33356d4...fe25c9a


More information about the ckan-changes mailing list