[2375] Update style of grid on the homepage

ckan · Jun 25, 2012 · 4f8dabb · 4f8dabb
1 parent e3035ff
commit 4f8dabb
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 20 deletions.
diff --git a/ckan/public/base/less/dataset.less b/ckan/public/base/less/dataset.less
@@ -1,28 +1,25 @@
-.dataset-list .dataset-item {
+.dataset-item {
   border-bottom: 1px dotted #ccc;
   padding-bottom: 20px;
   margin-bottom: 20px;
 }
 
-.dataset-list .dataset-item:last-of-type {
+.dataset-item:last-of-type {
   border-bottom: none;
   margin-bottom: 0;
   padding-bottom: 0;
 }
 
-.dataset-item {
-}
-
-.dataset-item > .content > .heading {
+.dataset-heading {
   font-size: 14px;
   line-height: 1.3;
 }
 
-.dataset-item > .heading a {
+.dataset-heading a {
   color: #333;
 }
 
-.dataset-item > .content {
+.dataset-content {
   font-size: 12px;
 }
 
@@ -40,7 +37,7 @@
   background-color: #aaa;
 }
 
-.heading .popular {
+.dataset-heading .popular {
   top: 0;
 }
 

diff --git a/ckan/public/base/less/media.less b/ckan/public/base/less/media.less
@@ -61,19 +61,19 @@ ol.media-grid {
   margin-left: -20px;
 }
 
-.media-grid .media {
+.media-item {
   .box-sizing(border-box);
   width: 33.33%; // Not ideal having this hardcoded.
   padding-left: 20px;
   padding-bottom: 25px;
   float: left;
 }
 
-.media-grid .first {
+.media-item.first {
   clear: left;
 }
 
-.media-grid .media .media-content {
+.media-item .media-content {
   min-height: 63px;
 }
 

diff --git a/ckan/public/base/less/module.less b/ckan/public/base/less/module.less
@@ -125,6 +125,21 @@
   }
 }
 
+// Module Grid
+
+.module-grid {
+  .unstyled;
+  .media-grid;
+  .media-wide;
+}
+
+.module-item {
+  .media-item;
+  .makeColumn(6);
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
 // GROUP
 
 .group .content img {

diff --git a/ckan/templates/home/index.html b/ckan/templates/home/index.html
@@ -58,9 +58,7 @@ <h3 class="tag">Popular {{ c.facet_titles.name }}</h3>
 {% endblock %}
 
 {% block secondary_content %}
-  <div class="">
-    {% snippet 'snippets/package_grid.html', packages=c.datasets %}
-  </div>
+  {% snippet 'snippets/package_grid.html', packages=c.datasets %}
 {% endblock %}
 
 {# Remove the toolbar. #}

diff --git a/ckan/templates/snippets/package_grid.html b/ckan/templates/snippets/package_grid.html
@@ -13,8 +13,9 @@
   {% snippet 'snippets/package_grid.html', packages=c.datasets[:4] %}
 
 #}
-{% set list_class = list_class or 'media-grid media-wide' %}
-{% set item_class = item_class or 'media media-vertical module' %}
+
+{% set list_class = list_class or 'module-grid' %}
+{% set item_class = item_class or 'module module-item' %}
 {% set truncate = truncate or 120 %}
 {% set truncate_title = truncate_title or 40 %}
 

diff --git a/ckan/templates/snippets/package_list.html b/ckan/templates/snippets/package_list.html
@@ -26,16 +26,16 @@
       {% set notes = h.markdown_extract(package.notes, extract_length=truncate) %}
 
       <li class="{{ item_class }} ">
-      <div class="content">
-          <h3 class="heading">
+      <div class="dataset-content">
+          <h3 class="dataset-heading">
             {{ h.link_to(h.truncate(title, truncate_title), h.url_for(controller='package', action='read', id=package.get('name'))) }}
             {{ h.popular('recent views', package.tracking_summary.recent, min=10) }}
           </h3>
           {% if banner %}
             <span class="banner">Popular</span>
           {% endif %}
           {% if notes %}
-            {{ notes }}
+            <div>{{ notes }}</div>
           {% else %}
             <p class="empty">{{ _("This dataset has no description") }}</p>
           {% endif %}