Skip to content

Commit

Permalink
[#1521][m]: Styling group search results to look like the contents of…
Browse files Browse the repository at this point in the history 
… a dataset.
  • Loading branch information
@teajaymars
teajaymars committed Jan 20, 2012
1 parent e9e68d6 commit 887af33
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 13 deletions.
29 changes: 20 additions & 9 deletions ckan/public/css/style.css
View file
Expand Up @@ -705,6 +705,7 @@ input.search {
/* ======================================== */
/* = Dataset listing (eg. search results) = */
/* ======================================== */
/* TODO strip and use .search-result class in markup everywhere */
ul.datasets {
padding-left: 0;
margin: 0 0 1em 0;
Expand Down Expand Up @@ -1113,21 +1114,21 @@ img.open-data { margin: 1px 0 0 8px; vertical-align: top; }
body.package.read h3 {
margin-bottom: 8px;
}
.dataset-resource {
.search-result {
border-left: 2px solid #eee;
margin: 0;
padding: 8px;
margin-bottom: 16px;
}
.dataset-resource:hover {
.search-result:hover {
border-left: 2px solid #aaa;
background: #f7f7f7;
}

.dataset-resource .main-link {
.search-result .main-link {
font-size: 125%;
}
.dataset-resource .view-more-link {
.search-result .view-more-link {
float: right;
color: #000;
text-align: middle;
Expand All @@ -1137,20 +1138,30 @@ body.package.read h3 {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
.dataset-resource .view-more-link:hover {
.search-result .view-more-link:hover {
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
text-decoration: underline;
}

.dataset-resource .resource-url a {
.search-result .result-url,
.search-result .result-url a {
color: #888;
}
.dataset-resource .resource-url a:hover {
.search-result .result-url:hover,
.search-result .result-url:hover a {
color: #333;
}
.search-result .result-url:hover a {
text-decoration: underline;
}
.dataset-resource p {
.search-result .result-url img {
opacity: 0.5;
}
.search-result .result-url:hover img {
opacity: 1.0;
}
.search-result p {
margin: 0;
}
.resource-url-cached {
Expand All @@ -1160,7 +1171,7 @@ body.package.read h3 {
body.package.read .resource-information {
color: #808080;
}
body.package.read .resource-format {
.format-box {
border: 1px solid #EEE;
margin-left: 8px;
padding: 2px 8px;
Expand Down
29 changes: 28 additions & 1 deletion ckan/templates/group/read.html
View file
Expand Up @@ -38,7 +38,34 @@ <h3>Datasets</h3>
<p py:if="not c.q" i18n:msg="item_count">There are ${c.page.item_count} datasets in this group.</p>
<p py:if="c.q">You searched for "${c.q}". Matched ${len(c.page.items)} out of ${c.page.item_count} datasets.</p>
${c.page.pager()}
${package_list_from_dict(c.page.items)}

<py:for each="package in c.page.items">
<div class="search-result ${'fullyopen' if (package.isopen and package.get('resources')) else None}">
<a class="view-more-link" href="${h.url_for(controller='package', action='read', id=package.get('name'))}">View</a>
<a class="main-link" href="${h.url_for(controller='package', action='read', id=package.get('name'))}">${package.get('title') or package.get('name')}</a>
&nbsp;&nbsp;
<py:if test="package.resources">
<py:for each="resource in package.resources">
<py:if test="resource.get('format')">
<a href="${resource.get('url')}"
title="${resource.get('description')}"><span class="format-box">${resource.get('format')}</span></a>
</py:if>
</py:for>
</py:if>
<p class="result-description">${h.markdown_extract(package.notes)}</p>

<span class="result-url">
<py:if test="package.isopen">
<a href="http://opendefinition.org/okd/" title="This dataset satisfies the Open Definition.">
<img src="http://assets.okfn.org/images/ok_buttons/od_80x15_blue.png" alt="[Open Data]" />
</a>
</py:if>
<py:if test="not package.isopen">
${h.icon('lock')} Not Openly Licensed
</py:if>
</span>
</div>
</py:for>
${c.page.pager()}
</div>
</py:match>
Expand Down
6 changes: 3 additions & 3 deletions ckan/templates/package/read_core.html
View file
Expand Up @@ -18,16 +18,16 @@
<div id="dataset-resources" class="resources subsection">
<h3>Resources</h3>
<py:for each="res in c.pkg_dict.get('resources', [])">
<div class="dataset-resource">
<div class="search-result">
<a class="view-more-link" href="${h.url_for(controller='package', action='resource_read', id=c.pkg_dict['name'], resource_id=res['id'])}">View</a>
<a class="main-link" href="${h.url_for(controller='package', action='resource_read', id=c.pkg_dict['name'], resource_id=res['id'])}">${h.resource_display_name(res)}</a>
&nbsp;&nbsp;
<span py:if="res.get('format')" class="resource-format" property="dc:format">${res.get('format')}</span>
<span py:if="res.get('format')" class="format-box" property="dc:format">${res.get('format')}</span>
<p class="resource-description" py:if="res.get('description')">${h.markdown_extract(res.get('description'))}</p>
<p class="resource-information" py:if="res.get('last_modified')">
Last updated: ${h.time_ago_in_words_from_str(res.get('last_modified'), granularity='day')} ago
</p>
<p class="resource-url" rel="dcat:distribution" resource="_:res${res.id}" typeof="dcat:Distribution">
<p class="result-url" rel="dcat:distribution" resource="_:res${res.id}" typeof="dcat:Distribution">
<a class="resource-url-analytics" href="${res.get('url', '')}" rel="dcat:accessURL" target="_blank">
${res.get('url', '')}
</a>
Expand Down

1 comment on commit 887af33

@rufuspollock
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Zephod seems like the standard dataset listing template snippet didn't work for you here. Can you expand a bit on the TODO you've added. It would be nice to keep this common so we don't get inconsistent look and feel for same thing across the site.

Please sign in to comment.