mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-08-04 07:14:19 -07:00
adds map side panel (#406)
* initial map side panel * componentize MapSidePanel * remove selection from J40Map * adds isFeatureSelected to toggle component * filters data from server for client UI * styling and refactor * added TODO * adds styling to intro and pairing feedback * add mobile styling * adds popup back to fs feature flag * adds tests and aria roles * makes mobile content same as desktop * prettier update * initial e2e mapSidePanel test * adds cypress tests on desktop and mobile * adds sass util and updates cypress tests * cleans up tests * reverts tsconfig file * fixes map alignment * renaming and using constants * renaming sidePanel to infoPanel * intl messaging * adds snapshot testing and utility sass file * PR feedback - adds intl messages - adds data-cy attr to cy tests - snapshot testing for unit tests - fixes bug where side panel extends past the map - moves all wrapper content in MapWrapper * logs isMobile to troubleshoot deployed PR * adds react-device-detect for isMobile detection * adds new instance of map for mobile * adds instance * adds isMobile to state * tests the fix for mobile map view on PR * PR review feedback - localize MapIntroduction - update snapshot tests - QA feedback - constants.isMobile points to react-device-detect
This commit is contained in:
parent
a787bd71ab
commit
36f43b2d44
25 changed files with 1430 additions and 27185 deletions
|
@ -1,13 +1,17 @@
|
|||
$sidebar-background: rgba(35, 55, 75, 0.9);
|
||||
$sidebar-color: #ffffff;
|
||||
@import "./areaDetailUtils.scss";
|
||||
|
||||
.mapContainer {
|
||||
height: 676px;
|
||||
.mapAndInfoPanelContainer {
|
||||
display: flex;
|
||||
height: 81vh; //desktop
|
||||
|
||||
@media screen and (max-width: $mobileBreakpoint) {
|
||||
flex-direction: column;
|
||||
height: fit-content;
|
||||
}
|
||||
}
|
||||
|
||||
.j40Popup {
|
||||
max-height: 50%;
|
||||
overflow-y: scroll;
|
||||
width: 375px;
|
||||
}
|
||||
|
||||
.navigationControl {
|
||||
|
@ -25,3 +29,9 @@ $sidebar-color: #ffffff;
|
|||
right: 1.25em;
|
||||
top: 5em;
|
||||
}
|
||||
|
||||
.mapInfoPanel {
|
||||
border: 2px solid $sidePanelBorderColor;
|
||||
overflow-y: auto;
|
||||
max-width: 22rem;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue