Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add backdrop-filter to improve legend legibility #34

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add backdrop-filter to improve legend legibility #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion collisions/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css' rel='stylesheet' />
<link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
<link href='../css/maps.css' rel='stylesheet' />

<style>

Expand Down Expand Up @@ -56,7 +57,7 @@
<div id='map'></div>

<!-- controls -->
<div class = 'fill-lighten3 col4 pad2x row7 rounded-toggle pin-right'>
<div id="legend" class = 'fill-lighten2 col4 pad1 row7 pin-right'>
<form>
<h5>Year</h5>
<div id="yearRadio" class='rounded-toggle inline'>
Expand Down
21 changes: 21 additions & 0 deletions css/maps.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,3 +62,24 @@ input[type=text].mapboxgl-ctrl-geocoder--input { /*fixing geocode clash with
.mapboxgl-ctrl-geocoder--icon-search {
top: 7px;
}

#legend {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(0,0,0,0.5);
border-radius: 4px;
margin: 8px;
}

#legendbtn {
margin: 8px;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-radius: 4px;
}

@media only screen and (max-width: 600px) {
#legend, #legendbtn {
margin: 0px;
}
}
3 changes: 2 additions & 1 deletion desire/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<script data-cfasync="false" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css' rel='stylesheet' />
<link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
<link href='../css/maps.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#app { position:absolute; top:0; right:0; bottom:0; left:0; }
Expand All @@ -28,7 +29,7 @@
<body>
<div id='app' class='col12 contain clip'>
<div id='map'></div>
<div class='col4 pad1 scroll-styled pin-topright '>
<div class='col4 scroll-styled pin-topright '>
<div id='legendbtn' class='fill-darken2 pad1 icon book hidden button fr' onclick="$('#legendbtn').toggle();$('#legend').toggle()"></div>
<div id='legend' class='fill-lighten3 round'>
<div id='closebtn' class='fill-darken2 pad1 icon close button fr' onclick="$('#legendbtn').toggle();$('#legend').toggle()"></div>
Expand Down
2 changes: 1 addition & 1 deletion lts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@
</div> -->

<!-- controls -->
<div class='col4 pad1 scroll-styled pin-topright '>
<div class='col4 scroll-styled pin-topright '>
<div id='legendbtn' class='fill-darken2 pad1 icon menu button hidden fr' onclick="toggle('legendbtn');toggle('legend');"></div>
<div id='legend' class='fill-darken2 round'>
<div id='closebtn' class='fill-darken2 pad1 icon close button fr' onclick="toggle('legendbtn');toggle('legend');"></div>
Expand Down
3 changes: 2 additions & 1 deletion routing/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css' rel='stylesheet' />
<link href='https://www.mapbox.com/base/latest/base.css' rel='stylesheet' />
<link href='../css/maps.css' rel='stylesheet' />

<style>

Expand All @@ -28,7 +29,7 @@
<div id='map'></div>

<!-- controls -->
<div class='col4 pad1 scroll-styled pin-topright dark '>
<div class='col4 scroll-styled pin-topright dark '>
<div id='legendbtn' class='fill-darken2 pad1 icon menu button fr hidden' onclick="toggle('legendbtn');toggle('legend');"></div>
<div id='legend' class='fill-darken2 round'>
<div id='closebtn' class='fill-darken2 pad1 icon close button fr' onclick="toggle('legendbtn');toggle('legend');"></div>
Expand Down