mirror of
https://github.com/heyarne/berliner-winter.git
synced 2026-05-06 19:23:39 +02:00
Add splash screen
This commit is contained in:
Arne Schlüter
parent
06b2dd9e47
commit
a478a3cd77
4 changed files with 100 additions and 5 deletions
|
|
@ -2,7 +2,7 @@ html, body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-family: 'Lora', serif;
|
font-family: 'Libre Baskerville', serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
*, *:before, *:after {
|
*, *:before, *:after {
|
||||||
|
|
@ -11,13 +11,21 @@ html, body {
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
color: #000;
|
color: #222;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* background map */
|
||||||
|
|
||||||
#map {
|
#map {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* filters */
|
||||||
|
|
||||||
#filter-picker {
|
#filter-picker {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
|
@ -122,3 +130,63 @@ body {
|
||||||
border: 2px solid rgba(0,0,0,.5);
|
border: 2px solid rgba(0,0,0,.5);
|
||||||
background: rgba(0,0,0,.2);
|
background: rgba(0,0,0,.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* overlay text */
|
||||||
|
#overlay {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1001;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: linear-gradient(to bottom left, rgba(255,255,255,.2), white 50%);
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay .text {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 1024px;
|
||||||
|
transform: translate(-50%,-50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay h1 {
|
||||||
|
margin-top: -1.2em;
|
||||||
|
font-size: 48px;
|
||||||
|
margin-bottom: 0;
|
||||||
|
display: inline-block;
|
||||||
|
font-weight: 500;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay p {
|
||||||
|
margin: 1em 0 1.2em;
|
||||||
|
padding: 1.6em 0 .6em;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-size: 20px;
|
||||||
|
border-top: 3px solid #c0c0c0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay a {
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom: 1px dotted #333;
|
||||||
|
padding-bottom: .2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay a:hover {
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay .begin {
|
||||||
|
font-size: 24px;
|
||||||
|
border-bottom: none;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
#overlay .begin:after {
|
||||||
|
content: '›';
|
||||||
|
padding-left: .1em;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -19,8 +19,19 @@ $.getJSON('/articles/')
|
||||||
.fail(console.error.bind(console))
|
.fail(console.error.bind(console))
|
||||||
.then(function (response) {
|
.then(function (response) {
|
||||||
console.log('Got data successfully!')
|
console.log('Got data successfully!')
|
||||||
|
console.log(response.length)
|
||||||
visualization = new Visualization(map, response, colors)
|
visualization = new Visualization(map, response, colors)
|
||||||
.setupCategoryFilter('.category-filter')
|
.setupCategoryFilter('.category-filter')
|
||||||
.setupYearFilter('.year-filter')
|
.setupYearFilter('.year-filter')
|
||||||
.displayMarkers()
|
.displayMarkers()
|
||||||
});
|
})
|
||||||
|
|
||||||
|
$('.begin').on('click', function (e) {
|
||||||
|
$('#overlay')
|
||||||
|
.fadeOut(700)
|
||||||
|
.then(function() { $(this).remove() })
|
||||||
|
|
||||||
|
e.preventDefault()
|
||||||
|
e.stopPropagation()
|
||||||
|
return false
|
||||||
|
})
|
||||||
|
|
|
||||||
|
|
@ -33,6 +33,11 @@ class Visualization {
|
||||||
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()
|
||||||
|
|
|
||||||
|
|
@ -2,12 +2,23 @@
|
||||||
<html lang="de">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Visualization of Hate Crime in Berlin</title>
|
<title>A mad world - Rechte Übergriffe in Berlin 2005 bis 2014</title>
|
||||||
<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=Lora' rel='stylesheet' type='text/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>
|
||||||
|
<div id="overlay">
|
||||||
|
<div class="text">
|
||||||
|
<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.
|
||||||
|
</p>
|
||||||
|
<a href="#" class="begin">Beginnen</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<nav id="filter-picker">
|
<nav id="filter-picker">
|
||||||
<ul class="year-filter">
|
<ul class="year-filter">
|
||||||
<li class="all active"><a href="#">Alle</a></li>
|
<li class="all active"><a href="#">Alle</a></li>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue