diff --git a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap index 3714f9b5..d1e92e5b 100644 --- a/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap +++ b/client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap @@ -195,6 +195,40 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p +
Identified as disadvantaged? @@ -210,11 +244,11 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
@@ -712,6 +746,40 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
+
Identified as disadvantaged? @@ -727,11 +795,11 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
@@ -2604,6 +2672,40 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
+
Identified as disadvantaged? @@ -2619,11 +2721,11 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
diff --git a/client/src/components/J40Map.module.scss b/client/src/components/J40Map.module.scss index 58f597c1..f9388d08 100644 --- a/client/src/components/J40Map.module.scss +++ b/client/src/components/J40Map.module.scss @@ -11,14 +11,14 @@ .mapHeaderRow{ @include u-display("flex"); @include u-padding-left(1.5); - justify-content: flex-start; + justify-content: space-between; - .geolocateBox { - flex: 1 2 47%; - align-self: flex-end; - margin-bottom: 30px; - margin-left: 1rem; + // flex: 1 2 47%; + // align-self: flex-end; + // margin-bottom: 30px; + // margin-left: 1rem; + margin-top: 6px; .geolocateMessage { visibility: visible; @@ -29,11 +29,12 @@ .geolocateMessageHide { visibility: hidden; + min-width: fit-content; margin-bottom: 3px; } .geolocateIcon{ - align-self: flex-end; + // align-self: flex-end; } } } diff --git a/client/src/components/J40Map.tsx b/client/src/components/J40Map.tsx index 363bb199..a98095ba 100644 --- a/client/src/components/J40Map.tsx +++ b/client/src/components/J40Map.tsx @@ -350,13 +350,6 @@ const J40Map = ({location}: IJ40Interface) => { * Any component declarations outside the component may be susceptible to this bug. */} - {/* This will allow to select between the census tract layer and the tribal lands layer */} - - {/** * The ReactMapGL component's props are grouped by the API's documentation. The component also has * some children. @@ -426,6 +419,7 @@ const J40Map = ({location}: IJ40Interface) => {
+ {/* Geolocate Icon */}
{windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG &&
{ > {intl.formatMessage(EXPLORE_COPY.MAP.GEOLOC_MSG_LOCATING)}
} +
{
+ {/* This will allow to select between the census tract layer and the tribal lands layer */} + +
{/* This is the second row overlayed on the map, it will add the navigation controls diff --git a/client/src/components/LayerSelector/LayerSelector.module.scss b/client/src/components/LayerSelector/LayerSelector.module.scss index bb491638..0ef27171 100644 --- a/client/src/components/LayerSelector/LayerSelector.module.scss +++ b/client/src/components/LayerSelector/LayerSelector.module.scss @@ -11,15 +11,9 @@ // styles for mobile-lg (480px) and greater widths, @include at-media('mobile-lg') { - position: absolute; - top: units(2.5); - left: 62%; + @include u-margin-top(3); + @include u-margin-right(1); } - - // styles for less than mobile-lg (480px) - position: absolute; - top: -5.2rem; - } diff --git a/client/src/components/MapSearch/MapSearch.module.scss b/client/src/components/MapSearch/MapSearch.module.scss index ea9f6e73..347e1df7 100644 --- a/client/src/components/MapSearch/MapSearch.module.scss +++ b/client/src/components/MapSearch/MapSearch.module.scss @@ -7,21 +7,21 @@ component across all device sizes. */ - // width < 660 - @include at-media-max("tablet") { - flex: 1 1 100%; - } + // // width < 660 + // @include at-media-max("tablet") { + // flex: 1 1 100%; + // } - // 660 < width < 1024 - @include at-media-max("desktop") { - @include at-media("tablet"){ - flex: 1 1 56%; - } - } + // // 660 < width < 1024 + // @include at-media-max("desktop") { + // @include at-media("tablet"){ + // flex: 1 1 56%; + // } + // } - // > 1024 - @include at-media("desktop") { - flex: 1 1 72%; - } + // // > 1024 + // @include at-media("desktop") { + // flex: 1 1 72%; + // } }