Add dataset search results to primer

ckan · May 9, 2012 · 03c3279 · 03c3279
1 parent dbb91aa
commit 03c3279
Show file tree

Hide file tree

Showing 5 changed files with 180 additions and 9 deletions.
diff --git a/ckan/public/base/less/ckan.less b/ckan/public/base/less/ckan.less
@@ -1,6 +1,7 @@
 @import "variables.less";
 @import "module.less";
 @import "nav.less";
+@import "dataset.less";
 
 body {
   background: @layout-background-color;

diff --git a/ckan/public/base/less/dataset.less b/ckan/public/base/less/dataset.less
@@ -0,0 +1,39 @@
+.dataset-list .dataset-item {
+  border-bottom: 1px dotted #ccc;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+}
+
+.dataset-list .dataset-item:last-of-type {
+  border-bottom: none;
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.dataset-item {
+}
+
+.dataset-item > .heading {
+  font-size: 14px;
+  line-height: 1;
+  float: left;
+}
+
+.dataset-item > .content {
+  clear: both;
+  font-size: 12px;
+}
+
+.dataset-resources {
+  font-size: 10px;
+  line-height: 14px;
+  float: right;
+}
+
+.dataset-resources li {
+  display: inline;
+}
+
+.dataset-resources li a {
+  background-color: #aaa;
+}
diff --git a/ckan/public/base/less/module.less b/ckan/public/base/less/module.less
@@ -10,23 +10,50 @@
   margin-bottom: 10px;
 }
 
-.module .heading {
+.module > .heading {
   font-size: 14px;
   padding: 0 @module-margin-x;
   border-bottom: 1px solid @module-heading-border-color;
   #gradient > .vertical(@module-heading-background-color-start, @module-heading-background-color-end);
 }
 
-.module .content {
+.module > .content {
   padding: @module-margin-y @module-margin-x;
 }
 
-.module .content :last-child {
+.module > .content :last-child {
   margin-bottom: 0;
 }
 
-.module .content .heading {
-  .module .heading;
-  margin: 20px -@module-margin-x 20px;
-  border-top: 1px solid lighten(@module-heading-border-color, 5%);
+.module > .pagination {
+  height: 34px;
+  border-top: 1px solid @module-heading-border-color;
 }
+
+.module > .pagination > ul {
+  .border-radius(0);
+  border: 0;
+}
+
+.pagination li a {
+  border-top: none;
+  border-bottom: none;
+}
+
+.pagination li:first-child a,
+.pagination li:last-child a {
+  .border-radius(0);
+}
+
+.pagination li:first-child a {
+  border-left: 0;
+}
+
+.pagination li:last-child a {
+  border-right: 0;
+}
+//.module > .content .heading {
+//  .module .heading;
+//  margin: 20px -@module-margin-x 20px;
+//  border-top: 1px solid lighten(@module-heading-border-color, 5%);
+//}
diff --git a/ckan/public/base/less/variables.less b/ckan/public/base/less/variables.less
@@ -1,8 +1,10 @@
 // Base variables
-@font-family: Arial, sans-serif;
 @image-path: "../images";
 
 // Layout Variables
+@layout-font-family: Arial, sans-serif;
+@layout-text-color: #4d4d4d;
+@layout-link-color: #005772;
 @layout-background-color: #f2f1ee;
 
 // Module Variables
@@ -14,7 +16,10 @@
 @nav-link-color: #333;
 
 // Twitter Bootstrap Overrides
-@baseFontFamily: @font-family;
+@bodyBackground: @layout-background-color;
+@baseFontFamily: @layout-font-family;
+@textColor: @layout-text-color;
+@linkColor: @layout-link-color;
 @iconSpritePath: "@{image-path}/bootstrap-glyphicons-halflings.png";
 @iconWhiteSpritePath: "@{image-path}/bootstrap-glyphicons-halflings-white.png";
 
diff --git a/ckan/public/base/test/primer/index.html b/ckan/public/base/test/primer/index.html
@@ -462,6 +462,105 @@ <h2 id="forms" class="heading">Forms</h2>
         <p><small>This block is copyright &#169; 2012 Paul Robert Lloyd. Code covered by the <a rel="license" href="http://paulrobertlloyd.mit-license.org/">MIT license</a>.</small></p>
       </div>
       </section>
+      <h1>Dataset Results</h1>
+      <section class="module">
+        <div class="content">
+          <ul class="dataset-list unstyled">
+            <li class="dataset-item">
+              <h2 class="heading"><a href="#">Counselling in London Central, Camden</a></h2>
+              <ul class="dataset-resources unstyled">
+                <li><a href="#" class="label">HTML</a></li>
+                <li><a href="#" class="label">XML</a></li>
+                <li><a href="#" class="label">CSV</a></li>
+              </ul>
+              <div class="content">
+                <p>This is an application programming interface (API) that opens up
+                core EU legislative data for further use. The interface uses JSON,
+                meaning that you have easy to use machine-readable access to
+                metadata on European Union legislation.</p>
+                <p>It will be useful if you
+                want to use or analyze European Union legislative data in a way
+                that the official databases are not originally build for. The API
+                extracts, organize and connects data from various official
+                sources.</p>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </section>
+      <section class="module">
+        <div class="content">
+          <ul class="dataset-list unstyled">
+            <li class="dataset-item">
+              <h2 class="heading"><a href="#">Counselling in London Central, Camden</a></h2>
+              <ul class="dataset-resources unstyled">
+                <li><a href="#" class="label">HTML</a></li>
+                <li><a href="#" class="label">XML</a></li>
+                <li><a href="#" class="label">CSV</a></li>
+              </ul>
+              <div class="content">
+                <p>This is an application programming interface (API) that opens up
+                core EU legislative data for further use. The interface uses JSON,
+                meaning that you have easy to use machine-readable access to
+                metadata on European Union legislation.</p>
+                <p>It will be useful if you
+                want to use or analyze European Union legislative data in a way
+                that the official databases are not originally build for. The API
+                extracts, organize and connects data from various official
+                sources.</p>
+              </div>
+            </li>
+            <li class="dataset-item">
+              <h2 class="heading"><a href="#">Counselling in London Central, Camden</a></h2>
+              <ul class="dataset-resources unstyled">
+                <li><a href="#" class="label">HTML</a></li>
+                <li><a href="#" class="label">XML</a></li>
+                <li><a href="#" class="label">CSV</a></li>
+              </ul>
+              <div class="content">
+                <p>This is an application programming interface (API) that opens up
+                core EU legislative data for further use. The interface uses JSON,
+                meaning that you have easy to use machine-readable access to
+                metadata on European Union legislation.</p>
+                <p>It will be useful if you
+                want to use or analyze European Union legislative data in a way
+                that the official databases are not originally build for. The API
+                extracts, organize and connects data from various official
+                sources.</p>
+              </div>
+            </li>
+            <li class="dataset-item">
+              <h2 class="heading"><a href="#">Counselling in London Central, Camden</a></h2>
+              <ul class="dataset-resources unstyled">
+                <li><a href="#" class="label">HTML</a></li>
+                <li><a href="#" class="label">XML</a></li>
+                <li><a href="#" class="label">CSV</a></li>
+              </ul>
+              <div class="content">
+                <p>This is an application programming interface (API) that opens up
+                core EU legislative data for further use. The interface uses JSON,
+                meaning that you have easy to use machine-readable access to
+                metadata on European Union legislation.</p>
+                <p>It will be useful if you
+                want to use or analyze European Union legislative data in a way
+                that the official databases are not originally build for. The API
+                extracts, organize and connects data from various official
+                sources.</p>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="pagination pagination-centered">
+          <ul>
+            <li><a href="#">Prev</a></li>
+            <li class="active"><a href="#">1</a></li>
+            <li><a href="#">2</a></li>
+            <li><a href="#">3</a></li>
+            <li><a href="#">4</a></li>
+            <li><a href="#">Next</a></li>
+          </ul>
+        </div>
+      </section>
     </div>
   </body>
 </html>