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

Add splash screen

Browse source
This commit is contained in:
Arne Schlüter 2015-02-08 23:53:01 +01:00
commit a478a3cd77
4 changed files with 100 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

72
static/css/style.css
View file

@ -2,7 +2,7 @@ html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: 'Lora', serif;
font-family: 'Libre Baskerville', serif;
}
*, *:before, *:after {
@ -11,13 +11,21 @@ html, body {
body {
background: #fff;
color: #000;
color: #222;
}
a {
color: inherit;
}
/* background map */
#map {
height: 100%;
}
/* filters */
#filter-picker {
position: absolute;
z-index: 10;
@ -122,3 +130,63 @@ body {
border: 2px solid rgba(0,0,0,.5);
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;
}

13
static/js/main.js
View file

@ -19,8 +19,19 @@ $.getJSON('/articles/')
.fail(console.error.bind(console))
.then(function (response) {
console.log('Got data successfully!')
console.log(response.length)
visualization = new Visualization(map, response, colors)
.setupCategoryFilter('.category-filter')
.setupYearFilter('.year-filter')
.displayMarkers()
});
})
$('.begin').on('click', function (e) {
$('#overlay')
.fadeOut(700)
.then(function() { $(this).remove() })
e.preventDefault()
e.stopPropagation()
return false
})

5
static/js/visualization.js
View file

@ -33,6 +33,11 @@ class Visualization {
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()

15
views/index.tpl
View file

@ -2,12 +2,23 @@
<html lang="de">
<head>
<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" 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>
<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">
<ul class="year-filter">
<li class="all active"><a href="#">Alle</a></li>