From 1a612db5f1c2429f23d24bf8d7ddfaa167a8c769 Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Fri, 27 Mar 2020 12:15:11 -0400 Subject: [PATCH 1/4] Add new styling file and refactor css --- src/containers/BGroup/BGroupBuildingTable.js | 8 +- src/containers/SearchBar/index.js | 10 +- src/containers/SearchBar/style.buildings.css | 131 +++++++++++++++++++ src/containers/SearchBar/styles.css | 125 ------------------ 4 files changed, 141 insertions(+), 133 deletions(-) create mode 100644 src/containers/SearchBar/style.buildings.css diff --git a/src/containers/BGroup/BGroupBuildingTable.js b/src/containers/BGroup/BGroupBuildingTable.js index 018de06e..ec4778f9 100644 --- a/src/containers/BGroup/BGroupBuildingTable.js +++ b/src/containers/BGroup/BGroupBuildingTable.js @@ -12,7 +12,7 @@ import { UncontrolledTooltip, } from 'reactstrap'; import userPropTypes from '../User/propTypes'; -import AddressSearch from '../../components/AddressSearch/AddressSearch'; +import SearchBar from '../SearchBar'; import completeProjectPropTypes from '../Project/propTypes'; // import buildingPropTypes from '../Building/propTypes'; @@ -867,11 +867,7 @@ export default class BGroupBuildingTable extends Component {
- +
= 0 ? '' : 'none' }}> diff --git a/src/containers/SearchBar/index.js b/src/containers/SearchBar/index.js index f7ed9138..5d9fffa7 100644 --- a/src/containers/SearchBar/index.js +++ b/src/containers/SearchBar/index.js @@ -11,6 +11,7 @@ import { buildingsSearched, } from './actions'; import './styles.css'; +import buildingsStyle from './style.buildings.css'; import { buildingListPropTypes } from './propTypes'; @@ -18,6 +19,10 @@ const mapAccess = { mapboxApiAccessToken: process.env.REACT_APP_MAPBOX_TOKEN, }; +const queryParams = { + country: 'us', +}; + class SearchBar extends Component { constructor(props) { super(props); @@ -73,6 +78,7 @@ class SearchBar extends Component { addressData = ( ); @@ -96,7 +102,7 @@ class SearchBar extends Component { const content = (
- + {addressData} diff --git a/src/containers/SearchBar/style.buildings.css b/src/containers/SearchBar/style.buildings.css new file mode 100644 index 00000000..a397ecbb --- /dev/null +++ b/src/containers/SearchBar/style.buildings.css @@ -0,0 +1,131 @@ +.building-search { + background-color: #222; + padding: 40px; +} + +.input-group { + width: inherit !important; +} + +.btn.dropdown-toggle:hover { + background-color: #E9E4E4 !important; +} + +.dropdown-selection { + height: 100%; + display: table-cell; + vertical-align: middle; + background-color: white; + border-top-right-radius: 0.25rem; + border-bottom-right-radius: 0.25rem; + line-height: 1.5; + padding-top: 0.5rem; + padding-right: 0.75rem; + padding-bottom: 0.5rem; + padding-left: 0.75rem; +} + +li.navbar-input { + -webkit-padding-start: 20px; +} + +li.navbar-input>form { + height: 100%; +} + +.addressSearchInput { + width: 700px !important; + position: relative; +} + +.addressDisplay { + height: 35px; + font-size: 16px; + font-weight: bold; + width: 100% !important; + padding: 10px; + margin-top: 5px; + margin-bottom: 5px; +} + +.react-geocoder { + position: relative; +} + +.react-geocoder input { + height: 35px; + width: 100% !important; + padding: 5px; + margin-top: 5px; + margin-bottom: 5px; + font-weight: bold; + font-size: 16px; +} + +.react-geocoder-results { + position: absolute; + background: #333333; + width: 100% !important; +} + +.react-geocoder-item { + width: 100% !important; + margin-left: 0px; + height: auto !important; + border-bottom: 0.5px solid rgba(160, 160, 160, .5) !important; + height: 30px !important; + font-weight: 700; + padding: 1% 2% 5% 2% !important; + font-size: 16px !important; + margin-left: 0px; + cursor: pointer; + color: #DDDDDD; + overflow: visible; + position: relative; +} + +.react-geocoder-item:hover { + color: #FFFFFF; + border-bottom: 0.5px solid #555555 !important; +} + +.addressSearchInput { + padding-left: '15px'; + margin-top: '2px'; +} + +@media screen and (max-width: 992px) { + .addressSearchInput { + width: 600px !important; + } + .react-geocoder-item { + font-size: 13px !important; + font-weight: normal; + } + .react-geocoder input { + font-size: 13px !important; + font-weight: normal; + } + .addressDisplay { + height: 35px; + font-size: 13px; + } + } + +@media screen and (max-width: 600px) { + .addressSearchInput { + width: 420px !important; + } + .react-geocoder-item { + font-size: 11px !important; + font-weight: normal; + } + .react-geocoder input { + font-size: 11px !important; + font-weight: normal; + } + .addressDisplay { + height: 35px; + font-size: 11px; + } + } diff --git a/src/containers/SearchBar/styles.css b/src/containers/SearchBar/styles.css index 386d9781..8b137891 100644 --- a/src/containers/SearchBar/styles.css +++ b/src/containers/SearchBar/styles.css @@ -1,126 +1 @@ -.building-search { - background-color: #222; - padding: 40px; -} -.input-group { - width: inherit !important; -} - -.btn.dropdown-toggle:hover { - background-color: #E9E4E4 !important; -} - -.dropdown-selection { - height: 100%; - display: table-cell; - vertical-align: middle; - background-color: white; - border-top-right-radius: 0.25rem; - border-bottom-right-radius: 0.25rem; - line-height: 1.5; - padding-top: 0.5rem; - padding-right: 0.75rem; - padding-bottom: 0.5rem; - padding-left: 0.75rem; -} - -li.navbar-input { - -webkit-padding-start: 20px; -} - -li.navbar-input>form { - height: 100%; -} - -.addressSearchInput { - width: 700px !important; - position: relative; -} - -.addressDisplay { - height: 35px; - font-size: 16px; - font-weight: bold; - width: 100% !important; - padding: 10px; - margin-top: 5px; - margin-bottom: 5px; -} - -.react-geocoder { - position: relative; -} - -.react-geocoder input { - height: 35px; - width: 100% !important; - padding: 5px; - margin-top: 5px; - margin-bottom: 5px; - font-weight: bold; - font-size: 16px; -} - -.react-geocoder-results { - position: absolute; - background: #333333; - width: 100% !important; -} - -.react-geocoder-item { - width: 100% !important; - margin-left: 0px; - height: auto !important; - border-bottom: 0.5px solid rgba(160, 160, 160, .5) !important; - height: 30px !important; - font-weight: 700; - padding: 1% 2% 5% 2% !important; - font-size: 16px !important; - margin-left: 0px; - cursor: pointer; - color: #DDDDDD; - overflow: visible; - position: relative; -} - -.react-geocoder-item:hover { - color: #FFFFFF; - border-bottom: 0.5px solid #555555 !important; -} - -@media screen and (max-width: 992px) { - .addressSearchInput { - width: 600px !important; - } - .react-geocoder-item { - font-size: 13px !important; - font-weight: normal; - } - .react-geocoder input { - font-size: 13px !important; - font-weight: normal; - } - .addressDisplay { - height: 35px; - font-size: 13px; - } - } - -@media screen and (max-width: 600px) { - .addressSearchInput { - width: 420px !important; - } - .react-geocoder-item { - font-size: 11px !important; - font-weight: normal; - } - .react-geocoder input { - font-size: 11px !important; - font-weight: normal; - } - .addressDisplay { - height: 35px; - font-size: 11px; - } - } -- GitLab From 69496400afb56ce9cf6215707123c430f733ec7f Mon Sep 17 00:00:00 2001 From: Aizizi Yigaimu Date: Fri, 27 Mar 2020 14:23:47 -0400 Subject: [PATCH 2/4] add new container components --- src/components/BuildingListTable/index.js | 2 +- src/components/NavBar/index.js | 4 +- src/components/ProjectListTable/index.js | 2 +- src/containers/BGroup/BGroupBuildingTable.js | 2 +- src/containers/SearchBar/styles.css | 1 - src/containers/SearchBarBGroup/index.js | 140 ++++++++++++++++++ .../propTypes.js | 0 src/containers/SearchBarBGroup/styles.css | 129 ++++++++++++++++ .../actions.js | 0 .../constants.js | 0 .../index.js | 5 +- .../SearchBarBuildings/propTypes.js | 35 +++++ .../reducer.js | 0 .../ring.svg | 0 .../sagas.js | 0 .../styles.css} | 12 +- src/screens/BuildingsHomePage/index.js | 6 +- 17 files changed, 320 insertions(+), 18 deletions(-) delete mode 100644 src/containers/SearchBar/styles.css create mode 100644 src/containers/SearchBarBGroup/index.js rename src/containers/{SearchBar => SearchBarBGroup}/propTypes.js (100%) create mode 100644 src/containers/SearchBarBGroup/styles.css rename src/containers/{SearchBar => SearchBarBuildings}/actions.js (100%) rename src/containers/{SearchBar => SearchBarBuildings}/constants.js (100%) rename src/containers/{SearchBar => SearchBarBuildings}/index.js (94%) create mode 100644 src/containers/SearchBarBuildings/propTypes.js rename src/containers/{SearchBar => SearchBarBuildings}/reducer.js (100%) rename src/containers/{SearchBar => SearchBarBuildings}/ring.svg (100%) rename src/containers/{SearchBar => SearchBarBuildings}/sagas.js (100%) rename src/containers/{SearchBar/style.buildings.css => SearchBarBuildings/styles.css} (98%) diff --git a/src/components/BuildingListTable/index.js b/src/components/BuildingListTable/index.js index 71366629..34d2d899 100644 --- a/src/components/BuildingListTable/index.js +++ b/src/components/BuildingListTable/index.js @@ -3,7 +3,7 @@ import ReactGA from 'react-ga'; import PropTypes from 'prop-types'; import { browserHistory } from 'react-router'; import './styles.css'; -import { buildingList, loadErrorPropTypes } from '../../containers/SearchBar/propTypes'; +import { buildingList, loadErrorPropTypes } from '../../containers/SearchBarBGroup/propTypes'; import Loading from '../../components/Loading'; /* eslint-disable no-param-reassign */ diff --git a/src/components/NavBar/index.js b/src/components/NavBar/index.js index afe67e72..008167fc 100644 --- a/src/components/NavBar/index.js +++ b/src/components/NavBar/index.js @@ -53,7 +53,9 @@ export default class NavBar extends Component { - {this.props.SearchBar ? : null} + {this.props.SearchBar ? : null}