publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-23 10:04: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

102
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?
@ -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?
@ -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?

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