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

Add media queries to fix overlap at smaller heights

Browse Source
This commit is contained in:
Tom Russell 2019-03-18 20:04:00 +00:00
parent c20a8aa97a
commit 03f6667d9e
1 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,11 +33,30 @@
margin: 0.25rem 0 0.5rem; margin: 0.25rem 0 0.5rem;
} }
.data-legend { .data-legend {
max-height: 50vh; max-height: 80px;
max-height: 20vh;
overflow-y: auto; overflow-y: auto;
list-style: none; list-style: none;
margin-bottom: 0; margin-bottom: 0;
} }
@media (min-height: 470px) {
.data-legend {
max-height: 150px;
max-height: 30vh;
}
}
@media (min-height: 550px) {
.data-legend {
max-height: 220px;
max-height: 40vh;
}
}
@media (min-height: 670px) {
.data-legend {
max-height: 330px;
max-height: 50vh;
}
}
.data-legend .key { .data-legend .key {
display: inline-block; display: inline-block;
width: 1.3rem; width: 1.3rem;