From f791a25a76d067da04af2ad3eab98a1bb3355c93 Mon Sep 17 00:00:00 2001 From: Vim <86254807+vim-usds@users.noreply.github.com> Date: Mon, 31 Jan 2022 11:14:02 -0500 Subject: [PATCH] Fix territory shortcuts on mobile (#1145) * Fix territory shortcuts on mobile - remove zoom controls on mobile - center search on mobile - move up the territoriy shortcuts on mobile - increase height of map on mobile in portrait mode - update tests * Reduce map height - troubleshooting staging map height * Removes null render in map * Comment out conditional render of NavControls * Revert height changes * Remove MapSearch component * Remove territory styling * Console.log the device width * Add logging width/mobile onLoad() * Add isMobile to map height prop * Swap conditional order of map height * Add isMobileMapState to map height * Add back all changes and force height to non-100% - staging mobile seems to have height at 100% regardless of conditional. This will test this. - this will break desktop on staging and is purposeful * Remove API key for mapbox * Add height as 90% to check conditional * trying isMobile and windowWidth * is not mobile and width > 1024 * use a function instead of a conditional * Modify getHeight function - remove Cypress tests from GHA to speed up build / deplot to staging * Console.log windowWidth and constants.desktop * Add boolean console.log * Place values in DOM itself * add height to div * log out types * add types nicely formatted * Move height styling on map from inline to parent - use a media query to detect mobile and set the map parents height via SASS * Add back cypress tests --- client/src/components/J40Map.module.scss | 8 +++++++ client/src/components/J40Map.module.scss.d.ts | 1 + client/src/components/J40Map.tsx | 24 +++++++++++-------- .../MapSearch/MapSearch.module.scss | 15 ++++++++++-- .../__snapshots__/MapSearch.test.tsx.snap | 2 +- .../MapSearchMessage.module.scss | 1 + .../MapSearchMessage.test.tsx.snap | 2 +- .../territoryFocusControl.module.scss | 16 ++++++++++--- client/src/data/constants.tsx | 7 ++++++ client/src/data/copy/explore.tsx | 2 +- 10 files changed, 60 insertions(+), 18 deletions(-) diff --git a/client/src/components/J40Map.module.scss b/client/src/components/J40Map.module.scss index a500ef7c..acdd97eb 100644 --- a/client/src/components/J40Map.module.scss +++ b/client/src/components/J40Map.module.scss @@ -26,3 +26,11 @@ overflow-y: auto; height: 90vh; } + +// This will control the height of the map when the device +// width is less than desktop (1024px) +.j40Map { + @include at-media-max("desktop") { + height: 55vh; + } +} \ No newline at end of file diff --git a/client/src/components/J40Map.module.scss.d.ts b/client/src/components/J40Map.module.scss.d.ts index 222f10c4..502b1205 100644 --- a/client/src/components/J40Map.module.scss.d.ts +++ b/client/src/components/J40Map.module.scss.d.ts @@ -8,6 +8,7 @@ declare namespace J40MapModuleScssNamespace { geolocateControl: string; detailView: string; mapInfoPanel: string; + j40Map: string; } } diff --git a/client/src/components/J40Map.tsx b/client/src/components/J40Map.tsx index 2c005ea6..516316ff 100644 --- a/client/src/components/J40Map.tsx +++ b/client/src/components/J40Map.tsx @@ -229,7 +229,7 @@ const J40Map = ({location}: IJ40Interface) => { return ( <> - + {/** * This will render the MapSearch component @@ -256,25 +256,28 @@ const J40Map = ({location}: IJ40Interface) => { * some children. */} { touchRotate={false} interactiveLayerIds={[constants.HIGH_ZOOM_LAYER_ID, constants.PRIORITIZED_HIGH_ZOOM_LAYER_ID]} - // Callback props: + + // ****** Callback props: ****** // http://visgl.github.io/react-map-gl/docs/api-reference/interactive-map#callbacks onViewportChange={setViewport} onClick={onClick} @@ -401,10 +405,10 @@ const J40Map = ({location}: IJ40Interface) => { )} {/* This will add the navigation controls of the zoom in and zoom out buttons */} - constants.USWDS_BREAKPOINTS.MOBILE_LG && + /> } {/* This places Geolocation behind a feature flag */} {'gl' in flags ? { - +
- No location found. Please try another location. + No location found. Please try again.
- No location found. Please try another location. + No location found. Please try again.
`; diff --git a/client/src/components/territoryFocusControl.module.scss b/client/src/components/territoryFocusControl.module.scss index 31f215da..7c5afe5a 100644 --- a/client/src/components/territoryFocusControl.module.scss +++ b/client/src/components/territoryFocusControl.module.scss @@ -1,10 +1,20 @@ @use '../styles/design-system.scss' as *; .territoryFocusContainer { - display: flex; - flex-direction: column; + // styles for mobile-lg (480px) and greater widths + @include at-media('mobile-lg') { + position: absolute; + left: .75em; + top: units(card-lg); + z-index: 10; + } + position: absolute; left: .75em; - top: units(card-lg); + top: units(9); z-index: 10; + } + + + diff --git a/client/src/data/constants.tsx b/client/src/data/constants.tsx index 618341f4..f93b080c 100644 --- a/client/src/data/constants.tsx +++ b/client/src/data/constants.tsx @@ -209,3 +209,10 @@ export const US_VIRGIN_ISLANDS_BOUNDS: LngLatBoundsLike = [ ]; export const DEFAULT_CENTER = [33.4687126, -97.502136]; + + +// USWDS Breakpoints +export const USWDS_BREAKPOINTS = { + MOBILE_LG: 480, + DESKTOP: 1024, +}; diff --git a/client/src/data/copy/explore.tsx b/client/src/data/copy/explore.tsx index 28a96375..5bbe598c 100644 --- a/client/src/data/copy/explore.tsx +++ b/client/src/data/copy/explore.tsx @@ -69,7 +69,7 @@ export const MAP = defineMessages({ }, SEARCH_RESULTS_EMPTY_MESSAGE: { id: 'map.search.results.empty.text', - defaultMessage: 'No location found. Please try another location.', + defaultMessage: 'No location found. Please try again.', description: 'text displaying message for no search results found', }, LOWER48_SHORT: {