More cosmetics

This commit is contained in:
Arne Schlüter 2015-02-09 00:50:33 +01:00
commit a7502baf7d
4 changed files with 44 additions and 23 deletions

View file

@ -24,6 +24,34 @@ a {
height: 100%;
}
.leaflet-popup-content {
font-family: 'Libre Baskerville', serif;
margin: 1.3em;
line-height: inherit;
}
.leaflet-popup-content-wrapper {
border-radius: 0;
text-align: justify;
}
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: #222;
color: #fff;
box-shadow: none;
}
.leaflet-popup-scrolled {
border: none;
}
.circle-marker {
border-radius: 50%;
border: 2px solid rgba(0,0,0,.5);
background: rgba(0,0,0,.2);
}
/* filters */
#filter-picker {
@ -125,12 +153,6 @@ a {
border-color: #888888;
}
.circle-marker {
border-radius: 50%;
border: 2px solid rgba(0,0,0,.5);
background: rgba(0,0,0,.2);
}
/* overlay text */
#overlay {
position: absolute;
@ -164,10 +186,9 @@ a {
#overlay p {
margin: 1em 0 1.2em;
padding: 1.6em 0 .6em;
line-height: 1.5;
font-size: 20px;
border-top: 3px solid #c0c0c0;
padding: .6em 0;
line-height: 2;
font-size: 24px;
}
#overlay a {

View file

@ -27,9 +27,7 @@ $.getJSON('/articles/')
})
$('.begin').on('click', function (e) {
$('#overlay')
.fadeOut(700)
.then(function() { $(this).remove() })
$('#overlay').fadeOut(700)
e.preventDefault()
e.stopPropagation()

View file

@ -27,22 +27,24 @@ class Visualization {
})
this.oms.legColors = {
usual: 'rgba(0,0,0,.1)',
highlighted: 'rgba(0,0,0,.4)'
usual: 'rgba(0,0,0,.2)',
highlighted: 'rgba(0,0,0,.5)'
}
var popup = new L.Popup();
var popup = new L.Popup({
autoPanPadding: [96, 96],
closeButton: false,
maxHeight: 250
});
this.oms.addListener('click', function (marker) {
if (map.getZoom() < 10)
map.setZoom(9)
popup.setContent(marker.description.replace(/\n/g, '<br>'))
popup.setLatLng(marker.getLatLng())
map.openPopup(popup)
})
this.oms.addListener('spiderfy', (marker) => {
this.map.setCenter(marker.getLatLng())
this.map.setZoom(20)
})
// set up markers
this._markers = new Map()
this.setupMarkers()

View file

@ -3,15 +3,15 @@
<head>
<meta charset="utf-8">
<title>A mad world - Rechte Übergriffe in Berlin 2005 bis 2014</title>
<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
<link href='http://fonts.googleapis.com/css?family=Libre+Baskerville:400,400italic,700' rel='stylesheet' type='text/css'>
</head>
<body>
<script>document.body.classList.add('js')</script>
<div id="overlay">
<div class="text">
<h1>A mad world</h1>
<h1>A mad world:</h1>
<p>
Jeder Punkt dieser Karte steht für einen Übergriff im Zeitraum von Januar 2005 bis November 2014.<br>
Die Chronik wurde erstellt von <a href="http://reachoutberlin.de/" target="_blank">ReachOut Berlin</a>. Analyse und Visualisierung von Joshua Widmann und Arne Schlüter.