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

Issue 191 - Multi-state visualization (#226)

Browse source 
Addresses issue #191 - As a stakeholder interested in the cumulative impact score, I want to see more states in the map, so that I can further analyze the score results. Introduces gradient coloration on limited 5-state dataset as well as the core of a few key visual aspects of the map to be expanded upon later.
This commit is contained in:
Nat Hillard 2021-06-24 13:20:45 -04:00 • committed by GitHub
commit f12ab4d3b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 712 additions and 464 deletions
Download patch file Download diff file Expand all files Collapse all files

80
client/src/components/map.module.scss
View file

@ -2,4 +2,84 @@
height: 676px;
margin-bottom: 29px;
max-width: revert;
margin-top: 50px;
}
.popupContainer {
position: absolute;
background-color: white;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 280px;
}
.popupContainer:after,
.popupContainer:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.popupContainer:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.popupContainer:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.popupCloser {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
}
.popupCloser:after {
content: "✖";
}
.popupContent {
max-height: 300px;
overflow: scroll;
}
.popupHeaderTable {
border-collapse: collapse;
border-spacing: 0;
font: normal 12px;
border: none;
}
.popupHeaderTable tbody td:first {
font-weight: bold;
}
.zoomWarning {
background-color: #953a10;
height: 8%;
width: 66%;
margin: auto;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.zoomWarning > img {
filter: invert(100%);
}