near/berliner-winter
1
0
Fork 0
mirror of https://github.com/heyarne/berliner-winter.git synced 2026-05-06 19:23:39 +02:00
Code Issues Projects Releases Wiki Activity

More cosmetics

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

41
static/css/style.css
View file

@ -24,6 +24,34 @@ a {
height: 100%; 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 */ /* filters */
#filter-picker { #filter-picker {
@ -125,12 +153,6 @@ a {
border-color: #888888; 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 text */
#overlay { #overlay {
position: absolute; position: absolute;
@ -164,10 +186,9 @@ a {
#overlay p { #overlay p {
margin: 1em 0 1.2em; margin: 1em 0 1.2em;
padding: 1.6em 0 .6em; padding: .6em 0;
line-height: 1.5; line-height: 2;
font-size: 20px; font-size: 24px;
border-top: 3px solid #c0c0c0;
} }
#overlay a { #overlay a {

4
static/js/main.js
View file

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

18
static/js/visualization.js
View file

@ -27,22 +27,24 @@ class Visualization {
}) })
this.oms.legColors = { this.oms.legColors = {
usual: 'rgba(0,0,0,.1)', usual: 'rgba(0,0,0,.2)',
highlighted: 'rgba(0,0,0,.4)' 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) { this.oms.addListener('click', function (marker) {
if (map.getZoom() < 10)
map.setZoom(9)
popup.setContent(marker.description.replace(/\n/g, '<br>')) popup.setContent(marker.description.replace(/\n/g, '<br>'))
popup.setLatLng(marker.getLatLng()) popup.setLatLng(marker.getLatLng())
map.openPopup(popup) map.openPopup(popup)
}) })
this.oms.addListener('spiderfy', (marker) => {
this.map.setCenter(marker.getLatLng())
this.map.setZoom(20)
})
// set up markers // set up markers
this._markers = new Map() this._markers = new Map()
this.setupMarkers() this.setupMarkers()

4
views/index.tpl
View file

@ -3,15 +3,15 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>A mad world - Rechte Übergriffe in Berlin 2005 bis 2014</title> <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" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<link rel="stylesheet" type="text/css" href="/static/css/style.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> </head>
<body> <body>
<script>document.body.classList.add('js')</script> <script>document.body.classList.add('js')</script>
<div id="overlay"> <div id="overlay">
<div class="text"> <div class="text">
<h1>A mad world</h1> <h1>A mad world:</h1>
<p> <p>
Jeder Punkt dieser Karte steht für einen Übergriff im Zeitraum von Januar 2005 bis November 2014.<br> 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. 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.