diff --git a/package.json b/package.json index e2c7411d42..a1a18d03b4 100644 --- a/package.json +++ b/package.json @@ -102,7 +102,6 @@ "react-dnd": "^2.4.0", "react-dnd-html5-backend": "^2.4.1", "react-dom": "15.6.1", - "react-ga": "2.2.0", "react-helmet": "^5.0.0", "react-map-gl": "^2.0.2", "react-markdown": "^2.5.0", diff --git a/src/_scss/components/_pagination.scss b/src/_scss/components/_pagination.scss index 4bdc553417..58ffdf7355 100644 --- a/src/_scss/components/_pagination.scss +++ b/src/_scss/components/_pagination.scss @@ -1,18 +1,20 @@ .pagination { - margin: rem(15); - .results-text { - @include display(flex); - @include flex-direction(row); - float: left; + @include display(flex); + @include flex-direction(row); + @include align-items(center); + .pagination__totals { + @include flex(0 0 auto); } .pager { - list-style-type: none; @include display(flex); @include flex-direction(row); - float: right; + @include justify-content(flex-end); + @include flex(1 1 auto); + list-style-type: none; margin: 0; - li { - button { + .pager__item { + @include flex(0 0 auto); + .pager__button { padding: rem(7) rem(10); background-color: $color-white; color: $color-gray; @@ -23,16 +25,7 @@ &:hover { background-color: $color-primary-alt-lightest; } - } - &.active { - button { - background-color: $color-primary-alt-dark; - color: $color-white; - border-color: $color-primary-alt-dark; - } - } - &.disabled { - button { + &.pager__button_disabled { border-color: $color-gray-lighter; color: $color-gray-light; &:hover { @@ -40,9 +33,14 @@ cursor: auto; } } + &.pager__button_active { + background-color: $color-primary-alt-dark; + color: $color-white; + border-color: $color-primary-alt-dark; + } } } - .pagination-ellipsis { + .pager__ellipsis { font-weight: bold; margin-top: 14px; margin-right: 5px; diff --git a/src/_scss/components/pageTitleBar/_title.scss b/src/_scss/components/pageTitleBar/_title.scss deleted file mode 100644 index 0d4199b81f..0000000000 --- a/src/_scss/components/pageTitleBar/_title.scss +++ /dev/null @@ -1,13 +0,0 @@ -.page-title { - font-size: rem(47); - line-height: rem(50); - font-weight: $font-light; - margin: 0 rem(20) 0 0; - padding: 0; - text-align: center; - - @include media($tablet-screen) { - text-align: left; - @include align-self(center); - } -} \ No newline at end of file diff --git a/src/_scss/components/pageTitleBar/pageTitleBar.scss b/src/_scss/components/pageTitleBar/pageTitleBar.scss deleted file mode 100644 index 570de3c60f..0000000000 --- a/src/_scss/components/pageTitleBar/pageTitleBar.scss +++ /dev/null @@ -1,24 +0,0 @@ -.page-title-bar { - background-color: $color-gray; - color: $color-white; - .page-title-bar-wrap { - max-width: 100%; - @include pad(2rem 0rem); - margin: 0 $outer-gutter/2; - @include media($tablet-screen) { - @include display(flex); - @include justify-content(space-between); - @include flex-direction(row); - @include align-items(center); - min-height: rem(102); - } - @include media($large-screen) { - margin: 0 $outer-gutter; - } - @include media($x-large-screen) { - max-width: $site-max-width; - margin: 0 auto; - } - @import "./_title"; - } -} \ No newline at end of file diff --git a/src/_scss/layouts/default/stickyHeader/header.scss b/src/_scss/layouts/default/stickyHeader/header.scss new file mode 100644 index 0000000000..b9a59a47ab --- /dev/null +++ b/src/_scss/layouts/default/stickyHeader/header.scss @@ -0,0 +1,50 @@ +.sticky-header { + $sticky-header-height: rem(66); + + position: relative; + height: $sticky-header-height; + + .sticky-header__container { + width: 100%; + background-color: #4a4a4a; + color: $color-white; + // bottom shadow cast on the content + box-shadow: 0 2px 2px rgba(0, 0, 0, .3); + + &.sticky-header__container_sticky { + @include media($medium-screen) { + position: fixed; + top: 0; + z-index: $z-header; + } + } + + .sticky-header__header { + @import "mixins/fullSectionWrap"; + @include fullSectionWrap(0, 0); + @include display(flex); + @include justify-content(space-between); + @include flex-direction(row); + @include align-items(center); + @include align-self(stretch); + @include flex-flow(row wrap); + position: relative; + height: $sticky-header-height; + + .sticky-header__title { + @include flex(1 1 auto); + h1 { + font-size: rem(24); + line-height: rem(31); + font-weight: $font-semibold; + margin: 0; + } + } + + .sticky-header__options { + @include flex(0 0 auto); + @import "../../tabbedSearch/header/downloadButton"; + } + } + } +} diff --git a/src/_scss/layouts/landingPage/landingPage.scss b/src/_scss/layouts/landingPage/landingPage.scss index 067f46694f..35bc35776f 100644 --- a/src/_scss/layouts/landingPage/landingPage.scss +++ b/src/_scss/layouts/landingPage/landingPage.scss @@ -1,12 +1,8 @@ -@import "../default/default"; @import "../summary/summary"; -.landing-page-content { +.landing-page { padding: $global-pad; - .landing-page-overview { - @include span-columns(16); - @include shift(0); - + .landing-page__overview { text-align: center; h3 { margin-top: 0; @@ -16,12 +12,9 @@ margin-bottom: rem(30); } } - .landing-page-section { - @include span-columns(16); - } @include media($medium-screen) { padding: ($global-pad * 2); - .landing-page-overview { + .landing-page__overview { width: 75%; margin: auto; float: none; diff --git a/src/_scss/layouts/summary/summary.scss b/src/_scss/layouts/summary/summary.scss index 63f45d3063..3a80cc89d9 100644 --- a/src/_scss/layouts/summary/summary.scss +++ b/src/_scss/layouts/summary/summary.scss @@ -1,5 +1,6 @@ @import "../default/default"; -#main-content { + +.main-content { @include outer-container(100%); padding: 0; background-color: $color-white; diff --git a/src/_scss/layouts/tabbedSearch/header/header.scss b/src/_scss/layouts/tabbedSearch/header/header.scss deleted file mode 100644 index 804f9f894e..0000000000 --- a/src/_scss/layouts/tabbedSearch/header/header.scss +++ /dev/null @@ -1,51 +0,0 @@ -$search-header-height: rem(66); - -.search-header-wrapper { - position: relative; - height: $search-header-height; -} - -.search-header-container { - width: 100%; - background-color: #4A4A4A; - color: $color-white; - // bottom shadow cast on the content - box-shadow: 0 2px 2px rgba(0,0,0,.3); - - &.sticky { - @include media($medium-screen) { - position: fixed; - top: 0; - z-index: $z-header; - } - } - - .search-header { - @import "mixins/fullSectionWrap"; - @include fullSectionWrap(0, 0); - @include display(flex); - @include justify-content(space-between); - @include flex-direction(row); - @include align-items(center); - @include align-self(stretch); - @include flex-flow(row wrap); - position: relative; - - height: $search-header-height; - - .search-title { - @include flex(1 1 auto); - h1 { - font-size: rem(24); - line-height: rem(31); - font-weight: $font-semibold; - margin: 0; - } - } - - .search-options { - @include flex(0 0 auto); - @import "./_downloadButton"; - } - } -} \ No newline at end of file diff --git a/src/_scss/layouts/tabbedSearch/tabbedSearch.scss b/src/_scss/layouts/tabbedSearch/tabbedSearch.scss index c4139c24b2..4f3b18c9db 100644 --- a/src/_scss/layouts/tabbedSearch/tabbedSearch.scss +++ b/src/_scss/layouts/tabbedSearch/tabbedSearch.scss @@ -1,7 +1,7 @@ @import "layouts/default/default"; #main-content { - @import "./header/header"; + @import "../default/stickyHeader/header"; .search-contents { @include outer-container(100%); diff --git a/src/_scss/pages/about/_sidebar.scss b/src/_scss/pages/about/_sidebar.scss index 01a8f5acf0..87315d6b80 100644 --- a/src/_scss/pages/about/_sidebar.scss +++ b/src/_scss/pages/about/_sidebar.scss @@ -8,7 +8,7 @@ .about-sidebar-content { &.float-sidebar { position: fixed; - top: rem(30); + top: rem(96); } background-color: $color-white; diff --git a/src/_scss/pages/about/aboutPage.scss b/src/_scss/pages/about/aboutPage.scss index 39fe1e6c04..907852df1a 100644 --- a/src/_scss/pages/about/aboutPage.scss +++ b/src/_scss/pages/about/aboutPage.scss @@ -1,11 +1,11 @@ .usa-da-about-page { @import "all"; @import "layouts/default/default"; + @import "layouts/default/stickyHeader/header"; + $color-gray-border: #D8D8D8; $color-blue-background: #F5FBFC; - @import "components/pageTitleBar/pageTitleBar"; - .main-content { @import "../../mixins/fullSectionWrap"; @include fullSectionWrap(($global-mrg * 2), ($global-mrg * 2)); diff --git a/src/_scss/pages/account/accountPage.scss b/src/_scss/pages/account/accountPage.scss index f165351562..2993f1350a 100644 --- a/src/_scss/pages/account/accountPage.scss +++ b/src/_scss/pages/account/accountPage.scss @@ -1,10 +1,11 @@ .usa-da-account-page { @import "all"; @import "layouts/search/search"; + @import "layouts/default/stickyHeader/header"; + @import "./header/options"; $color-gray-border: #D8D8D8; $color-blue-background: #F5FBFC; - @import "./header/header"; .main-content { @import "../../mixins/fullSectionWrap"; @include fullSectionWrap(($global-mrg * 4), ($global-mrg * 4)); diff --git a/src/_scss/pages/account/header/header.scss b/src/_scss/pages/account/header/header.scss deleted file mode 100644 index 67a01ca196..0000000000 --- a/src/_scss/pages/account/header/header.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "../../../components/pageTitleBar/pageTitleBar"; - -.page-title-bar { - @import "./_options"; -} \ No newline at end of file diff --git a/src/_scss/pages/accountLanding/accountLandingPage.scss b/src/_scss/pages/accountLanding/accountLandingPage.scss new file mode 100644 index 0000000000..6ef3122118 --- /dev/null +++ b/src/_scss/pages/accountLanding/accountLandingPage.scss @@ -0,0 +1,12 @@ +.usa-da-account-landing { + @import "all"; + @import "layouts/landingPage/landingPage"; + @import "components/pagination"; + @import "layouts/default/stickyHeader/header"; + @import './searchSection'; + @import './table/resultsSection'; + + .search-section { + display: none; + } +} \ No newline at end of file diff --git a/src/_scss/pages/accountLanding/searchSection.scss b/src/_scss/pages/accountLanding/searchSection.scss new file mode 100644 index 0000000000..d43320e656 --- /dev/null +++ b/src/_scss/pages/accountLanding/searchSection.scss @@ -0,0 +1,39 @@ +.search-section { + background-color: $color-primary-alt-lightest; + padding: rem(10); + border: 1px solid $color-vis-lightest; + text-align: center; + @include media($medium-screen) { + padding: rem(38); + } + .search-section__form { + @include display(flex); + @include flex-direction(row); + @include align-items(center); + @include justify-content(flex-start); + background-color: $color-white; + .search-section__input { + @include flex(1 1 auto); + color: $color-gray-light; + font-weight: 300; + line-height: rem(28); + padding: rem(10) rem(15); + border: 0; + @include media($medium-screen) { + font-size: rem(22); + } + } + .search-section__button { + @include flex(0 0 auto); + @include button-unstyled; + padding: 0 rem(15); + .search-section__button-icon { + height: rem(24); + width: rem(24); + svg { + fill: $color-gray-light; + } + } + } + } +} \ No newline at end of file diff --git a/src/_scss/pages/accountLanding/table/cells/_accountLandingHeaderCell.scss b/src/_scss/pages/accountLanding/table/cells/_accountLandingHeaderCell.scss new file mode 100644 index 0000000000..a35e8acdf6 --- /dev/null +++ b/src/_scss/pages/accountLanding/table/cells/_accountLandingHeaderCell.scss @@ -0,0 +1,46 @@ +.cell-content { + white-space: normal; + font-size: rem(18); + font-weight: 600; + line-height: 25px; + color: $color-base; + cursor: pointer; + + .header-sort { + display: table; + padding: rem(11) rem(20); + + .header-label { + display: table-cell; + vertical-align: middle; + } + + .header-icons { + display: table-cell; + vertical-align: middle; + padding-left: rem(5); + height: rem(10); + + .sort-icon { + @include button-unstyled; + display: block; + line-height: rem(10); + width: rem(14); + height: rem(10); + text-align: center; + + svg { + fill: #86888E; + height: rem(11); + width: rem(11); + } + + &.active { + svg { + fill: $color-active; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/_scss/pages/accountLanding/table/resultsSection.scss b/src/_scss/pages/accountLanding/table/resultsSection.scss new file mode 100644 index 0000000000..22588e921e --- /dev/null +++ b/src/_scss/pages/accountLanding/table/resultsSection.scss @@ -0,0 +1,8 @@ +@import "pages/search/results/table/_tableMessages"; +@import "pages/search/results/screens/screens"; +.results-table-section { + position: relative; + min-height: rem(200); + @include transition(opacity 0.25s ease-in); + @import './table'; +} diff --git a/src/_scss/pages/accountLanding/table/table.scss b/src/_scss/pages/accountLanding/table/table.scss new file mode 100644 index 0000000000..89410ebeb7 --- /dev/null +++ b/src/_scss/pages/accountLanding/table/table.scss @@ -0,0 +1,61 @@ +.results-table { + display: block; + overflow: scroll; + .results-table__head { + .results-table__row { + border-bottom: solid 1px $color-gray-lighter; + .results-table__data { + border: 0; + &:first-child { + width: 18%; + } + &:nth-child(2), &:nth-child(3) { + width: 31%; + } + &:last-child { + width: 20%; + .cell-content { + float: right; + } + } + } + } + .award-result-header-cell { + @import "./cells/_accountLandingHeaderCell"; + } + } + .results-table__body { + .results-table__row { + .results-table__data { + border: 0; + &:first-child { + width: 18%; + } + &:nth-child(2), &:nth-child(3) { + width: 31%; + } + &:last-child { + width: 20%; + .results-table-cell__content, .cell-content { + text-align: right; + } + } + } + .results-table-cell { + .results-table-cell__content { + .results-table-cell__matched { + &.results-table-cell__matched_highlight { + text-decoration: underline; + font-weight: 600; + } + } + } + } + // gray out even rows + .results-table__data_even { + background-color: #f7f7f7; + } + } + } + +} \ No newline at end of file diff --git a/src/_scss/pages/agency/_sidebar.scss b/src/_scss/pages/agency/_sidebar.scss index fe9c8447fd..3d94839619 100644 --- a/src/_scss/pages/agency/_sidebar.scss +++ b/src/_scss/pages/agency/_sidebar.scss @@ -8,7 +8,7 @@ .agency-sidebar-content { &.float-sidebar { position: fixed; - top: rem(30); + top: rem(96); } background-color: $color-white; diff --git a/src/_scss/pages/agency/agencyPage.scss b/src/_scss/pages/agency/agencyPage.scss index 8fd5dab3f0..26426ac429 100644 --- a/src/_scss/pages/agency/agencyPage.scss +++ b/src/_scss/pages/agency/agencyPage.scss @@ -1,11 +1,11 @@ .usa-da-agency-page { @import "all"; @import "layouts/default/default"; + @import "layouts/default/stickyHeader/header"; + $color-gray-border: #D8D8D8; $color-blue-background: #F5FBFC; - @import "./header/header"; - .main-content { @import "../../mixins/fullSectionWrap"; @include fullSectionWrap(($global-mrg * 2), ($global-mrg * 2)); diff --git a/src/_scss/pages/agency/header/header.scss b/src/_scss/pages/agency/header/header.scss deleted file mode 100644 index c5c40e50a8..0000000000 --- a/src/_scss/pages/agency/header/header.scss +++ /dev/null @@ -1 +0,0 @@ -@import "components/pageTitleBar/pageTitleBar"; diff --git a/src/_scss/pages/agencyLanding/agencyLandingPage.scss b/src/_scss/pages/agencyLanding/agencyLandingPage.scss index 239f7f027e..a56b17d5ad 100644 --- a/src/_scss/pages/agencyLanding/agencyLandingPage.scss +++ b/src/_scss/pages/agencyLanding/agencyLandingPage.scss @@ -1,18 +1,14 @@ .usa-da-agency-landing { @import "all"; - @import "layouts/landingPage/landingPage"; - @import "./header/header"; - @import './agencyLandingSearch'; + @import "layouts/landingPage/landingPage"; + @import "layouts/default/stickyHeader/header"; + @import "pages/accountLanding/searchSection"; @import './table/resultsSection'; - .landing-page-section { - &.results-count { - font-style: italic; - padding: rem(20) 0; - font-size: rem(16); - } - } - @include agencyLandingSearch; @include resultsSection; - + .results-count { + font-style: italic; + padding: rem(20) 0; + font-size: rem(16); + } } \ No newline at end of file diff --git a/src/_scss/pages/agencyLanding/agencyLandingSearch.scss b/src/_scss/pages/agencyLanding/agencyLandingSearch.scss deleted file mode 100644 index 5d21c8b6d2..0000000000 --- a/src/_scss/pages/agencyLanding/agencyLandingSearch.scss +++ /dev/null @@ -1,50 +0,0 @@ -@mixin agencyLandingSearch { - .agency-landing-search { - @include span-columns(16); - background-color: $color-primary-alt-lightest; - padding: rem(5); - border: 1px solid $color-vis-lightest; - text-align: center; - form { - position: relative; - input.search-field { - color: $color-gray-light; - font-size: rem(14); - font-weight: 300; - line-height: rem(36); - padding: 0 rem(30) 0 rem(4); - width: 100%; - } - .search-button { - position: absolute; - top: rem(5); - left: 90%; - - @include button-unstyled; - width: 25px; - height: 25px; - - svg { - fill: $color-gray-light; - } - } - } - @include media($medium-screen) { - padding: rem(30); - form { - input.search-field { - width: 75%; - font-size: rem(28); - padding: rem(15); - padding-right: rem(30); - } - .search-button { - left: 80%; - top: rem(15); - width: 36px; - height: 36px; - } - } - } - } -} \ No newline at end of file diff --git a/src/_scss/pages/agencyLanding/header/header.scss b/src/_scss/pages/agencyLanding/header/header.scss deleted file mode 100644 index f0d2edb6a2..0000000000 --- a/src/_scss/pages/agencyLanding/header/header.scss +++ /dev/null @@ -1 +0,0 @@ -@import "components/pageTitleBar/pageTitleBar"; \ No newline at end of file diff --git a/src/_scss/pages/award/awardPage.scss b/src/_scss/pages/award/awardPage.scss index 08be203034..5d46ba5e77 100644 --- a/src/_scss/pages/award/awardPage.scss +++ b/src/_scss/pages/award/awardPage.scss @@ -1,12 +1,12 @@ .usa-da-award-page { @import "all"; @import "layouts/summary/summary"; + @import "layouts/default/stickyHeader/header"; + @import "./summaryStatus"; $color-gray-border: #D8D8D8; $color-blue-background: #F5FBFC; - @import "./summaryBar"; - .main-content { @import "./infoBar"; @import "./awardContract"; diff --git a/src/_scss/pages/award/summaryBar.scss b/src/_scss/pages/award/summaryBar.scss deleted file mode 100644 index d955f3966c..0000000000 --- a/src/_scss/pages/award/summaryBar.scss +++ /dev/null @@ -1,5 +0,0 @@ -@import "../../components/pageTitleBar/pageTitleBar"; - -.page-title-bar { - @import './_summaryStatus'; -} \ No newline at end of file diff --git a/src/_scss/pages/bulkDownload/archive/archive.scss b/src/_scss/pages/bulkDownload/archive/archive.scss index 77608f6ce7..69dd9f5f11 100644 --- a/src/_scss/pages/bulkDownload/archive/archive.scss +++ b/src/_scss/pages/bulkDownload/archive/archive.scss @@ -4,6 +4,7 @@ } h2 { margin-top: 0; + font-weight: 400; } @import "archiveForm"; @import "archiveTable"; diff --git a/src/_scss/pages/bulkDownload/bulkDownloadPage.scss b/src/_scss/pages/bulkDownload/bulkDownloadPage.scss index 57c2360feb..6fbbfaa2dc 100644 --- a/src/_scss/pages/bulkDownload/bulkDownloadPage.scss +++ b/src/_scss/pages/bulkDownload/bulkDownloadPage.scss @@ -1,9 +1,9 @@ .usa-da-bulk-download-page { @import "all"; @import "layouts/search/search"; - @import "./header/header"; + @import "layouts/default/stickyHeader/header"; - .main-content { + .bulk-download-content { @import "../../mixins/fullSectionWrap"; @include fullSectionWrap(($global-mrg * 4), ($global-mrg * 4)); padding: 0; diff --git a/src/_scss/pages/bulkDownload/downloadData.scss b/src/_scss/pages/bulkDownload/downloadData.scss index 848d3d2b93..4f6353a258 100644 --- a/src/_scss/pages/bulkDownload/downloadData.scss +++ b/src/_scss/pages/bulkDownload/downloadData.scss @@ -8,9 +8,7 @@ margin-bottom: rem(30); h2 { margin: 0 rem(30); - span { - font-weight: 400; - } + font-weight: 400; } @import "./form/downloadForm"; .reset-button { diff --git a/src/_scss/pages/bulkDownload/header/header.scss b/src/_scss/pages/bulkDownload/header/header.scss deleted file mode 100644 index c5c40e50a8..0000000000 --- a/src/_scss/pages/bulkDownload/header/header.scss +++ /dev/null @@ -1 +0,0 @@ -@import "components/pageTitleBar/pageTitleBar"; diff --git a/src/_scss/pages/explorer/detail/visualization/table/_table.scss b/src/_scss/pages/explorer/detail/visualization/table/_table.scss index ffbb6cdbc5..2f131b105f 100644 --- a/src/_scss/pages/explorer/detail/visualization/table/_table.scss +++ b/src/_scss/pages/explorer/detail/visualization/table/_table.scss @@ -5,6 +5,10 @@ display: block; overflow: auto; + .pagination { + margin: rem(15); + } + &.no-results { border: none; } diff --git a/src/_scss/pages/explorer/explorerPage.scss b/src/_scss/pages/explorer/explorerPage.scss index d6d435a18c..81c944fe90 100644 --- a/src/_scss/pages/explorer/explorerPage.scss +++ b/src/_scss/pages/explorer/explorerPage.scss @@ -1,7 +1,7 @@ .usa-da-explorer-page { @import "all"; @import "layouts/default/default"; - @import "components/pageTitleBar/pageTitleBar"; + @import "layouts/default/stickyHeader/header"; .main-content { @import "./landing/explorerLanding"; diff --git a/src/_scss/pages/keyword/_searchBar.scss b/src/_scss/pages/keyword/_searchBar.scss index 1ccb620408..01831c2e69 100644 --- a/src/_scss/pages/keyword/_searchBar.scss +++ b/src/_scss/pages/keyword/_searchBar.scss @@ -1,4 +1,4 @@ -.search-bar-section { +.keyword-search-bar { background-color: $color-primary-alt-lightest; padding: rem(15); border: 1px solid $color-vis-lightest; @@ -8,67 +8,72 @@ @include align-items(center); @include justify-content(space-evenly); } - .keyword-search-bar { + + .keyword-search-bar__form { + border: 1px solid $color-gray-light; + margin-right: rem(15); + background-color: $color-white; + @include display(flex); + @include flex-direction(row); + @include align-items(center); + @include justify-content(flex-start); @include media($medium-screen) { - padding-right: rem(10); + @include flex(1 1 auto); width: 50%; } - form { - width: 100%; - border: 1px solid $color-gray-light; - margin-right: rem(15); - background-color: $color-white; - input.keyword-input { - margin-right: 0; - height: rem(66); - width: 85%; - border: 0; - padding: rem(15); + .keyword-search-bar__input { + @include flex(1 1 auto); + margin-right: 0; + height: rem(66); + border: 0; + padding: rem(15); + font-size: rem(20); + font-weight: 300; + @include media($tablet-screen) { font-size: rem(28); - font-weight: 300; line-height: rem(36); } - button.keyword-submit { - @include button-unstyled; - height: rem(66); - float: right; - width: 15%; - .icon { - height: rem(30); - width: rem(30); - margin: auto; + } + .keyword-search-bar__button { + @include flex(0 0 auto); + @include button-unstyled; + height: rem(66); + padding: 0 rem(15); + .keyword-search-bar__button-icon { + height: rem(30); + width: rem(30); + svg { + fill: $color-gray; + } + } + &.keyword-search-bar__button_disabled { + .keyword-search-bar__button-icon { svg { - fill: $color-gray; + fill: $color-gray-lighter; } } - &.disabled { - .icon { - svg { - fill: $color-gray-lighter; - } - } - &:hover { - cursor: not-allowed; - } + &:hover { + cursor: not-allowed; } } } } - .info-text { + .keyword-search-bar__info { font-size: $small-font-size; line-height: rem(26); - padding-left: rem(10); padding-top: rem(10); @include media($medium-screen) { width: 50%; + @include flex(1 1 auto); padding-top: 0; + padding-left: rem(10); } - .info-wrap { + .keyword-search-bar__icon-wrapper { display: inline-block; margin: 0 rem(5); @import "keywordTooltip"; - .icon { + .keyword-search-bar__icon { @include button-unstyled; height: rem(15); width: rem(15); diff --git a/src/_scss/pages/keyword/header/header.scss b/src/_scss/pages/keyword/header/header.scss index b3b7e04566..e9c9a9941a 100644 --- a/src/_scss/pages/keyword/header/header.scss +++ b/src/_scss/pages/keyword/header/header.scss @@ -1,58 +1,75 @@ -@import "layouts/tabbedSearch/header/header"; +.keyword-header { + $keyword-header-height: rem(66); -.search-header-container { - .search-header { - .search-title { + @include display(flex); + @include justify-content(space-between); + @include flex-direction(row); + @include align-items(center); + @include align-self(stretch); + @include flex-flow(row wrap); + width: 100%; + position: relative; + height: $keyword-header-height; + + .keyword-header__title { + @include flex(1 1 auto); + @include span-columns(8); + @include media($medium-screen) { + @include span-columns(4); + } + + h1 { + font-size: rem(24); + line-height: rem(31); + font-weight: $font-semibold; + margin: 0; + } + } + + .keyword-header__summary { + // Hide the search summary for small screens + display: none; + font-size: $small-font-size; + + @include media($medium-screen) { @include span-columns(8); - @include media($medium-screen) { - @include span-columns(4); - } + @include display(flex); } - .search-summary { - // Hide the search summary for small screens - display: none; - @include media($medium-screen) { - @include span-columns(8); - @include display(flex); - } - font-size: $small-font-size; - .summary-title { + + .keyword-header__summary-title { + font-weight: $font-semibold; + padding-right: rem(10); + margin-right: rem(10); + border-right: solid 1px $color-white; + } + + .keyword-header__summary-award-amounts, + .keyword-header__summary-award-counts { + margin-right: rem(20); + + .keyword-header__summary-amount_bold { font-weight: $font-semibold; - padding-right: rem(10); - margin-right: rem(10); - border-right: solid 1px $color-white; - } - .award-amounts, .award-counts { - margin-right: rem(20); - .number { - font-weight: $font-semibold; - } } } - .search-options { - @include span-columns(8); - @include media($medium-screen) { - @include span-columns(4); - } - .download-wrap { - .download-hover-spacer { - left: rem(-140); - width: rem(290); - } - .download-button { - float: right; - } + } + + .keyword-header__options { + @include flex(0 0 auto); + @import "../../../layouts/tabbedSearch/header/downloadButton"; + + @include span-columns(8); + @include media($medium-screen) { + @include span-columns(4); + } + + .download-wrap { + .download-hover-spacer { + left: rem(-140); + width: rem(290); } - &.no-hover { - .download-wrap { - .download-hover-spacer { - display: none; - } - } + .download-button { + float: right; } } - &:after { - display: block; - } } -} \ No newline at end of file +} diff --git a/src/_scss/pages/keyword/keywordPage.scss b/src/_scss/pages/keyword/keywordPage.scss index c0846985ed..b36341ab90 100644 --- a/src/_scss/pages/keyword/keywordPage.scss +++ b/src/_scss/pages/keyword/keywordPage.scss @@ -1,6 +1,7 @@ .usa-da-keyword-page { @import "all"; @import "layouts/default/default"; + @import "layouts/default/stickyHeader/header"; @import "./header/header"; .keyword-content { @@ -14,6 +15,9 @@ border-right: 1px solid $color-gray-border; border-bottom: 1px solid $color-gray-border; + .keyword-search-bar { + margin-bottom: rem(22); + } @import "searchBar"; @import "table/resultsTable"; } diff --git a/src/_scss/pages/modals/fullDownload/_filterBar.scss b/src/_scss/pages/modals/fullDownload/_filterBar.scss index fe4fdc1603..b1ed31849c 100644 --- a/src/_scss/pages/modals/fullDownload/_filterBar.scss +++ b/src/_scss/pages/modals/fullDownload/_filterBar.scss @@ -5,6 +5,15 @@ .search-top-filter-header { margin-bottom: rem(10); + @include clearfix; + .header-title { + float: left; + font-weight: 600; + font-size: rem(14); + line-height: rem(18); + color: #525252; + margin: 0; + } } .search-top-filters-content { diff --git a/src/_scss/pages/search/searchPage.scss b/src/_scss/pages/search/searchPage.scss index 81485f59e7..4bceca3f83 100644 --- a/src/_scss/pages/search/searchPage.scss +++ b/src/_scss/pages/search/searchPage.scss @@ -1,6 +1,7 @@ .usa-da-search-page { @import "all"; @import "layouts/tabbedSearch/tabbedSearch"; + @import "layouts/default/stickyHeader/header"; @import "./searchSidebar"; @import "./_pagePositioning"; diff --git a/src/index.html b/src/index.html index 50d4ac1bf8..e25b8c1e48 100644 --- a/src/index.html +++ b/src/index.html @@ -29,6 +29,8 @@ + + diff --git a/src/js/components/about/About.jsx b/src/js/components/about/About.jsx index af0d3195db..97a3ed2d69 100644 --- a/src/js/components/about/About.jsx +++ b/src/js/components/about/About.jsx @@ -9,9 +9,9 @@ import { aboutPageMetaTags } from 'helpers/metaTagHelper'; import MetaTags from '../sharedComponents/metaTags/MetaTags'; import Header from '../sharedComponents/header/Header'; +import StickyHeader from '../sharedComponents/stickyHeader/StickyHeader'; import Footer from '../sharedComponents/Footer'; -import AboutHeader from './AboutHeader'; import AboutContent from './AboutContent'; require('pages/about/aboutPage.scss'); @@ -22,7 +22,13 @@ export default class About extends React.Component {
This website contains data supplied by third party information suppliers, one of which is D&B. For the purposes of the + following limitation on permissible use of D&B data, which includes each entity's DUNS Number and its associated business + information, "D&B Open Data" is defined as the following data elements: Business Name, Street Address, City Name, State/Province Name, + Country Name, County Code, State/Province Code, State/Province Abbreviation, and ZIP/Postal Code. +
+D&B hereby grants you, the user, a license for a limited, non-exclusive use of D&B data within the limitations set forth herein. + By using this website you agree that you shall not use D&B Open Data without giving written attribution to the source of such data + (i.e., D&B) and shall not access, use or disseminate D&B Open Data in bulk, (i.e., in amounts sufficient for use as an original source + or as a substitute for the product and/or service being licensed hereunder). +
+Except for data elements identified above as D&B Open Data, under no circumstances are you authorized to use any other D&B data for + commercial, resale or marketing purposes (e.g., identifying, quantifying, segmenting and/or analyzing customers and prospective customers). + Systematic access (electronic harvesting) or extraction of content from the website, including the use of "bots" or "spiders", is prohibited. + Federal government entities are authorized to use the D&B data for purposes of acquisition as defined in FAR 2.101 and for the purpose of managing + Federal awards, including sub-awardees, or reporting Federal award information. +
+The Federal Government and its agencies assume no liability for the use of the D&B data once it is downloaded or accessed. The D&B data is + provided "as is" without warranty of any kind. The D&B data is the intellectual property of D&B. In no event will D&B or any third party information + supplier be liable in any way with regard to the use of the D&B data. For more information about the scope of permissible use of D&B data licensed + hereunder, please contact D&B at datause_govt@dnb.com +
+Additionally, the Inspector General of each agency must issue reports to @@ -73,31 +74,6 @@ export default class DataQuality extends React.Component { to see these reports.
-- For more information about the data, see the - - FAQs - - and the - - Data Dictionary - - . The federal agencies' raw quarterly submission files, - including Quarterly Assurance Statements about the data, are available - - here - - . -
); diff --git a/src/js/components/about/MoreInfo.jsx b/src/js/components/about/MoreInfo.jsx new file mode 100644 index 0000000000..8449dc1619 --- /dev/null +++ b/src/js/components/about/MoreInfo.jsx @@ -0,0 +1,48 @@ +/** + * MoreInfo.jsx + * Created by Kevin Li 2/7/18 + */ + +import React from 'react'; + +const MoreInfo = () => ( ++ For more information about the data, see the + + FAQs + + and the + + Data Dictionary + + . +
++ You can also see an interactive report on how frequently federal agencies use + competitive practices when issuing contracts for goods and services in our + + Data Lab + + . +
++ There are over 2,000 unique federal accounts used to track the spending of + federal agencies. These help to understand how agencies receive and spend + funding granted by congress to carry out their programs, projects, or activities. +
+These include the 15 executive departments whose leaders sit on the @@ -30,20 +30,16 @@ export default class AgencyLandingContent extends React.Component { commissions. They range in size from $700 billion down to less than $200,000.