publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-23 01:54:18 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adjust CSS to place LayerSelector in MapHeader

Browse source
This commit is contained in:
Vim USDS 2022-08-17 11:46:47 -07:00
parent 976249b56c
commit 198203fe13
5 changed files with 141 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap
View file

@ -195,6 +195,40 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
</div>
</section>
</div>
<ul>
<li>
<span>
Number:
</span>
<span>
98729374234
</span>
</li>
<li>
<span>
County:
</span>
<span>
Brooklyn
</span>
</li>
<li>
<span>
Territory:
</span>
<span>
New York
</span>
</li>
<li>
<span>
Population:
</span>
<span>
3,435,435
</span>
</li>
</ul>
<div>
<div>
Identified as disadvantaged?
@ -210,11 +244,11 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
</div>
<a
href="
mailto:Screeningtool-Support@omb.eop.gov?subject=
mailto:Screeningtool-Support@omb.eop.gov?subject=
Census tract ID 98729374234, Brooklyn, New York, ( z/lat/lon: #11.54/36.0762/-84.4494 )
&body=Please provide feedback about this census tract, including about the datasets, the data categories provided for this census tract, the communities who live in this census tract, and anything else relevant that CEQ should know about this census tract.
"
"
rel="noreferrer"
target="_blank"
>
@ -712,6 +746,40 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
</div>
</section>
</div>
<ul>
<li>
<span>
Number:
</span>
<span>
98729374234
</span>
</li>
<li>
<span>
County:
</span>
<span>
Brooklyn
</span>
</li>
<li>
<span>
State:
</span>
<span>
New York
</span>
</li>
<li>
<span>
Population:
</span>
<span>
3,435,435
</span>
</li>
</ul>
<div>
<div>
Identified as disadvantaged?
@ -727,11 +795,11 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
</div>
<a
href="
mailto:Screeningtool-Support@omb.eop.gov?subject=
mailto:Screeningtool-Support@omb.eop.gov?subject=
Census tract ID 98729374234, Brooklyn, New York, ( z/lat/lon: #11.54/36.0762/-84.4494 )
&body=Please provide feedback about this census tract, including about the datasets, the data categories provided for this census tract, the communities who live in this census tract, and anything else relevant that CEQ should know about this census tract.
"
"
rel="noreferrer"
target="_blank"
>
@ -2604,6 +2672,40 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
</div>
</section>
</div>
<ul>
<li>
<span>
Number:
</span>
<span>
98729374234
</span>
</li>
<li>
<span>
County:
</span>
<span>
Brooklyn
</span>
</li>
<li>
<span>
Territory:
</span>
<span>
New York
</span>
</li>
<li>
<span>
Population:
</span>
<span>
3,435,435
</span>
</li>
</ul>
<div>
<div>
Identified as disadvantaged?
@ -2619,11 +2721,11 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
</div>
<a
href="
mailto:Screeningtool-Support@omb.eop.gov?subject=
mailto:Screeningtool-Support@omb.eop.gov?subject=
Census tract ID 98729374234, Brooklyn, New York, ( z/lat/lon: #11.54/36.0762/-84.4494 )
&body=Please provide feedback about this census tract, including about the datasets, the data categories provided for this census tract, the communities who live in this census tract, and anything else relevant that CEQ should know about this census tract.
"
"
rel="noreferrer"
target="_blank"
>

15
client/src/components/J40Map.module.scss
View file

@ -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;
}
}
}

16
client/src/components/J40Map.tsx
View file

@ -350,13 +350,6 @@ const J40Map = ({location}: IJ40Interface) => {
* Any component declarations outside the <ReactMapGL> component may be susceptible to this bug.
*/}
{/* This will allow to select between the census tract layer and the tribal lands layer */}
<LayerSelector
censusSelected={censusSelected}
setCensusSelected={setCensusSelected}
setLayerToggled={setLayerToggled}
/>
{/**
* 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) => {
<div className={styles.mapHeaderRow}>
<MapSearch goToPlace={goToPlace}/>
{/* Geolocate Icon */}
<div className={styles.geolocateBox}>
{windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG &&
<div
@ -436,6 +430,7 @@ const J40Map = ({location}: IJ40Interface) => {
>
{intl.formatMessage(EXPLORE_COPY.MAP.GEOLOC_MSG_LOCATING)}
</div>}
<div className={styles.geolocateIcon}>
<GeolocateControl
positionOptions={{enableHighAccuracy: true}}
@ -448,6 +443,13 @@ const J40Map = ({location}: IJ40Interface) => {
</div>
</div>
{/* This will allow to select between the census tract layer and the tribal lands layer */}
<LayerSelector
censusSelected={censusSelected}
setCensusSelected={setCensusSelected}
setLayerToggled={setLayerToggled}
/>
</div>
{/* This is the second row overlayed on the map, it will add the navigation controls

10
client/src/components/LayerSelector/LayerSelector.module.scss
View file

@ -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;
}

28
client/src/components/MapSearch/MapSearch.module.scss
View file

@ -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%;
// }
}