Merge pull request #20 from resource-watch/feature/CDI-tag

Adds a CDI tag to all datasets that are tagged as CDI
resource-watch · Sep 2, 2016 · 7bffc51 · 7bffc51
2 parents b405b12 + c7f6352
commit 7bffc51
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 5 deletions.
diff --git a/app/scripts/components/Explore/ExploreSidebar.jsx b/app/scripts/components/Explore/ExploreSidebar.jsx
@@ -72,12 +72,19 @@ class DataMap extends React.Component {
           </Link>
         );
       }
+
+      var cdiTag = false;
+      for (let i=0; i< dataset.tags.length; i++){
+        if(dataset.tags[i] == "CDI"){
+          cdiTag = true;
+        };
+      };
 
       return (
         <div className="layer" key={`map-layer-${index}`}>
           {layerIcon}
           <span className="layerItem">
-            <strong className="title">{dataset.name}</strong>
+            {cdiTag ? <strong className="title">{dataset.name} <div className="-highlighted-tag">CDI</div></strong> : <strong className="title">{dataset.name}</strong>}
             <span className="subtitle">{subtitle} {partner}</span>
           </span>
           {datasetIcon}

diff --git a/app/styles/components/_explore-sidebar.scss b/app/styles/components/_explore-sidebar.scss
@@ -31,7 +31,7 @@
       align-items: center;
       justify-content: center;
 
-      >.toggle-status {
+      > .toggle-status {
         @include hamburger-icon(10px, 2px, 2px, 1px, $thirth-color, $thirth-color);
       }
     }
@@ -55,7 +55,7 @@
 
       > .filters-toolbar {
         position: relative;
-        margin:  0;
+        margin: 0;
         padding: 0;
         list-style: none;
         display: flex;
@@ -74,7 +74,7 @@
           justify-content: center;
           align-items: center;
           flex: 1;
-          margin:  0;
+          margin: 0;
           list-style: none;
 
           > button {
@@ -107,7 +107,7 @@
         width: 350px;
         position: absolute;
         flex-direction: column;
-        margin:  0;
+        margin: 0;
         padding: $small-margin;
         top: 100%;
         left: 50%;
@@ -215,6 +215,21 @@
         > .title {
           font-size: $small-font-size;
           font-weight: bold;
+
+          .-highlighted-tag {
+
+            position: relative;
+            display: inline;
+            width: 29px;
+            height: 18px;
+            margin-left: 8px;
+            padding-left: 5px;
+            padding-right: 5px;
+
+            background-color: $pale-grey;
+            color: $thirth-color;
+
+          }
         }
 
         > .subtitle {