a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changes to legend.css to improve legend position on mobile (issue #274)

Browse Source
This commit is contained in:
Martin-dJ 2019-06-11 17:18:34 +00:00
parent 8b99b61d85
commit b783e8f1b5
2 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/src/frontend/legend.css
View File

@ -4,7 +4,7 @@
.map-legend {
z-index: 1000;
position: absolute;
bottom: 55px;
bottom: 50%;
right: 10px;
min-width: 12rem;
float: right;
@ -14,7 +14,7 @@
border: 1px solid #fff;
box-shadow: 0px 0px 1px 1px #222222;
}
@media (min-width: 380px){
@media (min-width: 768px){
.map-legend {
bottom: 40px;
}
@ -73,7 +73,7 @@
.expander-button {
float: right;
}
@media (min-height: 670px) {
@media (min-height: 670px) and (min-width: 768px) {
.expander-button {
visibility: hidden;
}

2
app/src/frontend/legend.js
View File

@ -129,7 +129,7 @@ class Legend extends React.Component {
onResize(e) {
this.setState({collapseList: (e.target.outerHeight < 670)}); // magic number needs to be consistent with CSS expander-button media query
this.setState({collapseList: (e.target.outerHeight < 670 || e.target.outerWidth < 768)}); // magic number needs to be consistent with CSS expander-button media query
}