diff --git a/_sass/banner.scss b/_sass/banner.scss
index b3d0474..445e9ff 100644
--- a/_sass/banner.scss
+++ b/_sass/banner.scss
@@ -9,10 +9,19 @@
&__header-text {
font-size: $font-size-xxs;
}
+ &__header-flag {
+ float: left ;
+ margin-right: 8px;
+ width: 16px; }
+ }
@include media-sm {
display: block;
}
-}
+ @media all and (min-width: 40em) {
+ .usa-banner__header-flag {
+ margin-right: 8px;
+ padding-top: 0; }
+ }
.usa-accordion {
color: $color-white;
diff --git a/_sass/data-kits.scss b/_sass/data-kits.scss
index 15752f2..3a950e4 100644
--- a/_sass/data-kits.scss
+++ b/_sass/data-kits.scss
@@ -174,3 +174,44 @@
transform: translateX(2px);
}
}
+
+
+ .usa-banner__content{
+ display: hidden;
+ }
+
+/* Re-style usa banner */
+
+.usa-accordion {
+ margin: 0;
+ list-style-type: none;
+ background-color: #13192F;
+ color: #ffffff;
+ opacity: .75;
+ padding: 4px 0;
+ width: 100%;
+ font-family: $font-sans;}
+
+ .usa-banner__header-text {
+ font-size: 11px;
+ font-weight: 500;
+ }
+/* Decrease margin between kit cover and kit captions */
+
+ /* Style Return arrow */
+
+ .return-arrow {
+ float: left ;
+ margin-right: 8px;
+ width: 16px; }
+ @media all and (min-width: 40em) {
+ .usa-banner__header-flag {
+ margin-right: 8px;
+ padding-top: 0; } }
+.data-kit .data-kit__container .data-kit__stats {
+ bottom: 2rem;
+}
+
+.data-kit .data-kit__container .data-kit__upcoming {
+ bottom: 2rem;
+}
diff --git a/_sass/search.scss b/_sass/search.scss
new file mode 100644
index 0000000..9aa8e87
--- /dev/null
+++ b/_sass/search.scss
@@ -0,0 +1,151 @@
+.usa-banner__content{
+ display: hidden;
+ }
+
+ /* Search bar */
+
+ #myInput {
+ background-image: url('../../assets/search.svg'); /* Add a search icon to input */
+ background-position: 20px 14px; /* Position the search icon */
+ background-repeat: no-repeat; /* Do not repeat the icon image */
+ width: 100%; /* Full-width */
+ font-size: 16px; /* Increase font-size */
+ padding: 14px 14px 14px 50px; /* Add some padding */
+ border: none;
+ border-radius: 4px;
+ background-color: #08325F;
+ margin-bottom: 1rem; /* Add some space below the input */
+ margin-top: 3rem;
+ color: #fff;
+ font-weight: 500;
+ }
+
+
+
+ #myUL {
+ /* Remove default list styling */
+ list-style-type: none;
+ padding: 0;
+ margin: 0;
+ }
+
+ #myUL li a {
+ border: 1px solid #ddd; /* Add a border to all links */
+ margin-top: -1px; /* Prevent double borders */
+ background-color: #f6f6f6; /* Grey background color */
+ padding: 12px; /* Add some padding */
+ text-decoration: none; /* Remove default text underline */
+ font-size: 18px; /* Increase the font-size */
+ color: black; /* Add a black text color */
+ display: block; /* Make it into a block element to fill the whole list */
+ }
+
+ #myUL li a:hover:not(.header) {
+ background-color: #eee; /* Add a hover effect to all links, except for headers */
+ }
+
+/* Color placeholder text */
+
+::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+color: #AFBDCB;
+opacity: 1;
+font-weight: 500; /* Firefox */
+}
+
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+color: #AFBDCB;
+font-weight: 500;
+}
+
+::-ms-input-placeholder { /* Microsoft Edge */
+color: #AFBDCB;
+font-weight: 500;
+}
+
+/* Remove bottom margin from CAR */
+
+.challenge__container {
+padding: 3.5rem 0 0 0;
+}
+
+/* Re-style usa banner */
+
+html {
+background-color: #13192F;
+}
+
+.usa-accordion {
+margin-bottom: 0 ;
+margin-top: 0 ;
+list-style-type: none;
+padding-left: 0;
+background-color: #13192F;
+color: #fff;
+opacity: .75;
+margin: 0;
+padding: 4px 0;
+width: 100%;
+font-family: "Silka", Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
+line-height: auto ; }
+
+.usa-banner__header-text {
+ font-size: 11px;
+ font-weight: 500;
+}
+
+.usa-banner__header-flag {
+ float: left ;
+ margin-right: 8px;
+ width: 16px; }
+ @media all and (min-width: 40em) {
+ .usa-banner__header-flag {
+ margin-right: 8px;
+ padding-top: 0; } }
+
+
+ /* Style Return arrow */
+
+ .return-arrow {
+ float: left ;
+ margin-right: 8px;
+ width: 16px; }
+ @media all and (min-width: 40em) {
+ .usa-banner__header-flag {
+ margin-right: 8px;
+ padding-top: 0; } }
+
+/* Bold Dataset card titles */
+
+.datasets__card-email {
+ padding: 7px 9px 5px 9px;
+ right: 15px;
+ bottom: -1.1rem;
+}
+
+.datasets__card-title {
+ font-weight: 700;
+}
+
+.datasets__card-email {
+ font-weight: 500;
+}
+
+.datasets__card-email span {
+ display: inline-block;
+ color: #000;
+ text-decoration: none;
+}
+
+.datasets__card-email span::after {
+ content: '';
+ display: block;
+ width: 0;
+ height: 2px;
+ background: #000;
+ transition: width .3s;
+}
+
+.datasets__card-email:hover span::after {
+ width: 100%;
+ //transition: width .3s;
+}
diff --git a/_sass/uswds_overrides.scss b/_sass/uswds_overrides.scss
index 2f1ba43..2d0c078 100644
--- a/_sass/uswds_overrides.scss
+++ b/_sass/uswds_overrides.scss
@@ -5,5 +5,5 @@
html {
height: 100vh;
- background-color: $color-primary;
+ background-color: $color-primary-dark;
}
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index 7b731a6..2d8a08a 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -20,7 +20,7 @@ $theme-image-path: '../uswds/img';
@import "data-kits";
@import "footer";
@import "datasets";
-
+@import "search";
// This is the main CSS file. You can write your SCSS/SASS in _sass and import
// them here. You probably want to load them _after_ uswds in order to override
diff --git a/assets/search.svg b/assets/search.svg
new file mode 100644
index 0000000..e850f69
--- /dev/null
+++ b/assets/search.svg
@@ -0,0 +1,14 @@
+
+
diff --git a/src/js/app.js b/src/js/app.js
index 2eabad5..1b88d68 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -37,6 +37,55 @@ function filterSelection(c) {
}
}
+
+function searchDatasets() {
+ var td;
+ var txtValue;
+ var i;
+ var input = document.getElementById("myInput");
+ var filter = input.value.toUpperCase();
+ var table = document.getElementById("data-to-filter");
+ var tr = table.getElementsByClassName("datasets__card");
+
+ for (i = 0; i < tr.length; i++) {
+ // console.log("in the for loop")
+ td = tr[i].getElementsByClassName("datasets__card-title")[0];
+ if (td) {
+ txtValue = td.textContent || td.innerText;
+ if (txtValue.toUpperCase().indexOf(filter) > -1) {
+ tr[i].style.display = "";
+ } else {
+ tr[i].style.display = "none";
+ }
+ }
+ }
+
+ for (i = 0; i < tr.length; i++) {
+ td = tr[i].getElementsByClassName("datasets__card-subtitle")[0];
+ if (td) {
+ txtValue = td.textContent || td.innerText;
+ if (txtValue.toUpperCase().indexOf(filter) > -1) {
+ tr[i].style.display = "";
+ } else {
+ tr[i].style.display = "none";
+ }
+ }
+ }
+
+ for (i = 0; i < tr.length; i++) {
+ td = tr[i].getElementsByClassName("datasets__card-description")[0];
+ if (td) {
+ txtValue = td.textContent || td.innerText;
+ if (txtValue.toUpperCase().indexOf(filter) > -1) {
+ tr[i].style.display = "";
+ } else {
+ tr[i].style.display = "none";
+ }
+ }
+ }
+
+}
+
// Show filtered elements
function addClass(element, name) {
let i, array1, array2;