sortable dataset list

1 files changed, 70 insertions, 10 deletions

diff --git a/site/assets/css/css.css b/site/assets/css/css.css
index bfb35260..675c6571 100644
--- a/site/assets/css/css.css
+++ b/site/assets/css/css.css
@@ -628,13 +628,14 @@ section.fullwidth .image {
   padding: 10px;
   color: white;
   font-weight: 400;
-  font-family: 'Roboto'
+  font-family: 'Roboto';
+  position: relative;
 }
-.desktop .content .dataset-list a{
-  border:none;
+.desktop .content .dataset-list a {
+  border: none;
 }
 .dataset-list a:hover{
-  border:none;
+  border: none;
 }
 .dataset-list a:nth-child(3n+1) { background-color: rgba(255, 0, 0, 0.1); }
 .desktop .dataset-list a:nth-child(3n+1):hover { background-color: rgba(255, 0, 0, 0.2); }
@@ -650,6 +651,57 @@ section.fullwidth .image {
   background-color: #181818;
   box-decoration-break: clone;
 }
+.dataset-list .title {
+  margin-bottom: 10px;
+}
+.dataset-list .fields {
+  display: block;
+  position: absolute;
+  bottom: 0px;
+  left: 10px;
+  font-size: 12px;
+}
+.dataset-list .fields div {
+  display: none;
+}
+.dataset-list .fields div.visible {
+  display: block;
+  margin-bottom: 10px;
+}
+.dataset-list .sort-options {
+  margin: 0;
+  padding: 0;
+}
+.dataset-list .sort-options:before {
+  content: 'Browse list by ';
+  opacity: 0.7;
+  margin-right: 0px;
+}
+.dataset-list .sort-options li {
+  display: inline-block;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  margin-right: 20px;
+}
+.dataset-list .sort-options li:before {
+  content: '_';
+  opacity: 0;
+  margin-right: 10px;
+}
+.dataset-list .sort-options li.active {
+  border-bottom: 1px solid;
+}
+.dataset-list .sort-options li.active:before {
+  content: '>';
+  opacity: 1;
+  margin-right: 10px;
+}
+.dataset_list .applet {
+  margin-bottom: 15px;
+}
+
+
 
 /* intro section for datasets */
 
@@ -738,14 +790,22 @@ page-specific formatting
   margin-right: 10px;
   padding-top:4px;
 }
-.map-legend-item .edu {
-  color: #f2f293;
+.map-legend-item:before {
+  content: '';
+  display: inline-block;
+  width: 4px;
+  height: 4px;
+  margin-bottom: 3px;
+  margin-right: 6px;
+}
+.map-legend-item.edu:before {
+  background-color: #f2f293;
 }
-.map-legend-item .com {
-  color: #3264f6;
+.map-legend-item.com:before {
+  background-color: #3264f6;
 }
-.map-legend-item .gov {
-  color: #f30000;
+.map-legend-item.gov:before {
+  background-color: #f30000;
 }
 
 /* about */