mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-07-29 06:11:16 -07:00
36f43b2d44* 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
156 lines
2.5 KiB
SCSS
156 lines
2.5 KiB
SCSS
@import "./areaDetailUtils.scss";
|
|
|
|
$sidePanelLabelFontColor: #171716;
|
|
$featureSelectBorderColor: #00bde3;
|
|
|
|
@mixin sidePanelLabelStyle {
|
|
font-size: small;
|
|
color: $sidePanelLabelFontColor;
|
|
font-weight: 600;
|
|
}
|
|
|
|
@mixin categorizationCircleStyle {
|
|
height: 0.6rem;
|
|
width: 0.6rem;
|
|
border-radius: 100%;
|
|
align-self: center;
|
|
margin-top: 0.8rem;
|
|
margin-right: 0.5rem;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.areaDetailContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
// top row styles
|
|
.topRow {
|
|
display: flex;
|
|
}
|
|
|
|
.cumulativeIndexScore,
|
|
.categorization {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
height: 7.7rem;
|
|
border-bottom: $sidePanelBorder;
|
|
flex: 1 0 50%;
|
|
padding-top: 2rem;
|
|
}
|
|
|
|
.topRowTitle,
|
|
.censusLabel {
|
|
@include sidePanelLabelStyle;
|
|
}
|
|
|
|
.topRowSubTitle {
|
|
font-size: small;
|
|
color: $sidePanelLabelFontColor;
|
|
}
|
|
|
|
.score {
|
|
font-size: xx-large;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.scoreSuperscript {
|
|
font-size: large;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
.categorization {
|
|
border-left: $sidePanelBorder;
|
|
}
|
|
|
|
.priority {
|
|
display: flex;
|
|
}
|
|
|
|
.prioritized {
|
|
@include categorizationCircleStyle;
|
|
background: #1a4480;
|
|
border: 1px solid $featureSelectBorderColor;
|
|
}
|
|
|
|
.threshold {
|
|
@include categorizationCircleStyle;
|
|
background: #d7dde7;
|
|
border: 1px solid $featureSelectBorderColor;
|
|
}
|
|
|
|
.nonPrioritized {
|
|
@include categorizationCircleStyle;
|
|
border: 1px solid $featureSelectBorderColor;
|
|
}
|
|
|
|
.prioritization {
|
|
font-size: large;
|
|
font-weight: bold;
|
|
padding-top: 0.8rem;
|
|
}
|
|
|
|
.censusRow {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-bottom: $sidePanelBorder;
|
|
list-style: none;
|
|
margin: 0;
|
|
}
|
|
|
|
//census row styles
|
|
.censusRow {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.censusText,
|
|
.indicatorDescription {
|
|
font-size: small;
|
|
}
|
|
|
|
//Divider styles
|
|
.divider {
|
|
@include sidePanelLabelStyle;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: $sidePanelBorder;
|
|
padding: 0.3rem 0.5rem 0.3rem 1rem;
|
|
background-color: #edeef0;
|
|
}
|
|
|
|
//Indicator box styles
|
|
.indicatorBox {
|
|
display: flex;
|
|
padding: 1.5rem 1rem;
|
|
border-bottom: $sidePanelBorder;
|
|
|
|
@media screen and (max-width: $mobileBreakpoint) {
|
|
justify-content: space-between;
|
|
padding-top: 0.5rem;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
}
|
|
|
|
.indicatorBox:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.indicatorTitle {
|
|
font-size: large;
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.indicatorValue {
|
|
flex: 1 0 37%;
|
|
align-self: center;
|
|
padding-left: 2.4rem;
|
|
font-size: large;
|
|
|
|
@media screen and (max-width: $mobileBreakpoint) {
|
|
flex: 1 0 40%;
|
|
align-self: inherit;
|
|
padding-left: 3rem;
|
|
padding-top: 1rem;
|
|
}
|
|
}
|