[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