From a80a3e8d02f781a12ff52c347ea8bcc1fc5c9b55 Mon Sep 17 00:00:00 2001 From: Edwin Francois Date: Wed, 24 May 2023 18:09:39 -0400 Subject: [PATCH 1/3] Task 302: Create V.2 SearchBar (Desktop) --- .../ReactGoogleMaps/ReactGoogleMaps.module.scss | 2 +- src/components/SearchBar/SearchBar.js | 12 ++++++++++-- .../TutorialModal/TutorialModal.module.scss | 4 ++-- 3 files changed, 13 insertions(+), 5 deletions(-) diff --git a/src/components/ReactGoogleMaps/ReactGoogleMaps.module.scss b/src/components/ReactGoogleMaps/ReactGoogleMaps.module.scss index 87f45423..2971df21 100644 --- a/src/components/ReactGoogleMaps/ReactGoogleMaps.module.scss +++ b/src/components/ReactGoogleMaps/ReactGoogleMaps.module.scss @@ -1,6 +1,6 @@ .searchBarContainer { position: relative; - top: 57px; + top: 608px; } .mapContainer { diff --git a/src/components/SearchBar/SearchBar.js b/src/components/SearchBar/SearchBar.js index b7b24e0d..22d57082 100644 --- a/src/components/SearchBar/SearchBar.js +++ b/src/components/SearchBar/SearchBar.js @@ -12,7 +12,10 @@ import { faSearchLocation, faChevronLeft } from '@fortawesome/free-solid-svg-icons'; +import Input from '@mui/material/Input'; +import InputAdornment from '@mui/material/InputAdornment'; import TutorialModal from '../TutorialModal/TutorialModal'; +import SearchIcon from '@mui/icons-material/Search'; class SearchBar extends React.Component { constructor(props) { @@ -86,13 +89,18 @@ class SearchBar extends React.Component { }`} > {/* type="search" is only HTML5 compliant */} - + + + } /> {loading && (
diff --git a/src/components/TutorialModal/TutorialModal.module.scss b/src/components/TutorialModal/TutorialModal.module.scss index 4f848620..1aeeb442 100644 --- a/src/components/TutorialModal/TutorialModal.module.scss +++ b/src/components/TutorialModal/TutorialModal.module.scss @@ -40,8 +40,8 @@ max-width: 30px; max-height: 30px; position: absolute; - top: 1rem; - right: 1rem; + top: 2rem; + right: 4rem; border-radius: 50%; background-color: white; From 97a3fb9182436a4f05e86747c9bcdd5365e26a7c Mon Sep 17 00:00:00 2001 From: Edwin Francois Date: Wed, 31 May 2023 09:26:35 -0400 Subject: [PATCH 2/3] Addressed a couple things from my pull request --- .../ReactGoogleMaps/ReactGoogleMaps.js | 19 +++++++++++++------ .../ReactGoogleMaps.module.scss | 5 +++-- src/components/SearchBar/SearchBar.js | 5 ----- .../TutorialModal/TutorialModal.module.scss | 6 +++--- 4 files changed, 19 insertions(+), 16 deletions(-) diff --git a/src/components/ReactGoogleMaps/ReactGoogleMaps.js b/src/components/ReactGoogleMaps/ReactGoogleMaps.js index 15b763df..81f9d740 100644 --- a/src/components/ReactGoogleMaps/ReactGoogleMaps.js +++ b/src/components/ReactGoogleMaps/ReactGoogleMaps.js @@ -2,6 +2,7 @@ import { Map, GoogleApiWrapper, Marker } from 'google-maps-react'; import React, { Component } from 'react'; import ReactTouchEvents from 'react-touch-events'; import SearchBar from '../SearchBar/SearchBar'; +import TutorialModal from '../TutorialModal/TutorialModal'; import styles from './ReactGoogleMaps.module.scss'; import { connect } from 'react-redux'; import SelectedTap from '../SelectedTap/SelectedTap'; @@ -23,6 +24,7 @@ import MapMarkersFood from '../MapMarkers/MapMarkersFood'; import { isMobile } from 'react-device-detect'; import Toolbar from '../Toolbar/Toolbar'; import MapMarkersMapper from '../MapMarkers/MapMarkersMapper'; +import Stack from '@mui/material/Stack'; // // Actual Magic: https://stackoverflow.com/a/41337005 // // Distance calculates the distance between two lat/lon pairs @@ -248,9 +250,9 @@ export class ReactGoogleMaps extends Component { onDragEnd = (_, map) => { this.setState({ currlat: map.center.lat(), - currlon: map.center.lng(), + currlon: map.center.lng() }); - } + }; toggleTapInfo = isExpanded => { this.setState({ @@ -342,10 +344,15 @@ export class ReactGoogleMaps extends Component {
- this.searchForLocation(location)} - /> + + this.searchForLocation(location)} + /> + +
diff --git a/src/components/ReactGoogleMaps/ReactGoogleMaps.module.scss b/src/components/ReactGoogleMaps/ReactGoogleMaps.module.scss index 2971df21..7a556642 100644 --- a/src/components/ReactGoogleMaps/ReactGoogleMaps.module.scss +++ b/src/components/ReactGoogleMaps/ReactGoogleMaps.module.scss @@ -1,6 +1,7 @@ .searchBarContainer { - position: relative; - top: 608px; + position: absolute; + width: 34%; + bottom: 75px; } .mapContainer { diff --git a/src/components/SearchBar/SearchBar.js b/src/components/SearchBar/SearchBar.js index 22d57082..b0011861 100644 --- a/src/components/SearchBar/SearchBar.js +++ b/src/components/SearchBar/SearchBar.js @@ -14,7 +14,6 @@ import { } from '@fortawesome/free-solid-svg-icons'; import Input from '@mui/material/Input'; import InputAdornment from '@mui/material/InputAdornment'; -import TutorialModal from '../TutorialModal/TutorialModal'; import SearchIcon from '@mui/icons-material/Search'; class SearchBar extends React.Component { @@ -158,10 +157,6 @@ class SearchBar extends React.Component { /> )} - - ); } diff --git a/src/components/TutorialModal/TutorialModal.module.scss b/src/components/TutorialModal/TutorialModal.module.scss index 1aeeb442..996300c2 100644 --- a/src/components/TutorialModal/TutorialModal.module.scss +++ b/src/components/TutorialModal/TutorialModal.module.scss @@ -39,9 +39,9 @@ .infoButton { max-width: 30px; max-height: 30px; - position: absolute; - top: 2rem; - right: 4rem; + position: relative; + top: 1.5rem; + right: 0.5rem; border-radius: 50%; background-color: white; From 1f9ce41fdb31e69a319dc8034268dc853f5fa707 Mon Sep 17 00:00:00 2001 From: Edwin Francois Date: Tue, 20 Jun 2023 10:56:51 -0400 Subject: [PATCH 3/3] Added extra stack to list things vertically at the bottom-left of desktop view --- src/components/ReactGoogleMaps/ReactGoogleMaps.js | 8 ++++---- src/components/SearchBar/SearchBar.module.scss | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/ReactGoogleMaps/ReactGoogleMaps.js b/src/components/ReactGoogleMaps/ReactGoogleMaps.js index 81f9d740..7dd441b1 100644 --- a/src/components/ReactGoogleMaps/ReactGoogleMaps.js +++ b/src/components/ReactGoogleMaps/ReactGoogleMaps.js @@ -343,8 +343,8 @@ export class ReactGoogleMaps extends Component { -
- + + this.searchForLocation(location)} @@ -353,8 +353,8 @@ export class ReactGoogleMaps extends Component { showButton={isMobile ? !this.state.isSearchBarShown : true} /> -
- + + ); diff --git a/src/components/SearchBar/SearchBar.module.scss b/src/components/SearchBar/SearchBar.module.scss index d81a95d3..6ed86cca 100644 --- a/src/components/SearchBar/SearchBar.module.scss +++ b/src/components/SearchBar/SearchBar.module.scss @@ -1,7 +1,7 @@ .desktopSearch { display: flex; flex-direction: row; - width: 100%; + width: 84%; justify-content: flex-start; padding: 1rem 0 0 1rem; pointer-events: none;