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

Add and style category filter

Browse source
This commit is contained in:
Arne Schlüter 2015-02-07 20:41:37 +01:00
commit a30ad1fc1c
3 changed files with 85 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

67
static/css/style.css
View file

@ -18,24 +18,25 @@ body {
height: 100%;
}
#year-picker {
#filter-picker {
position: absolute;
z-index: 10;
top: 6px;
right: 6px;
pointer-events: none;
}
#year-picker ul {
#filter-picker ul {
margin: 0;
padding: 0;
list-style: none;
}
#year-picker li {
.year-filter li {
display: inline-block;
}
#year-picker a {
.year-filter a {
display: block;
width: 72px;
padding: 12px;
@ -47,10 +48,64 @@ body {
transition: background .3s ease;
}
#year-picker a:hover {
.year-filter a:hover {
background: #333;
}
#year-picker .active a {
.year-filter .active a {
background: #444;
}
.category-filter {
text-align: right;
}
.category-filter li {
margin: 12px 0;
opacity: .5;
}
.category-filter li.active {
opacity: 1;
}
.category-filter a {
text-decoration: none;
color: #333;
padding: 6px;
text-shadow: 0 0 20px rgba(255,255,255,.8);
position: relative;
}
.category-filter a:after {
content: '';
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
border: 2px solid #f00;
position: absolute;
top: 50%;
left: -.5em;
margin-top: -4.5px;
}
.category-filter .racism a:after {
border-color: #F8B195;
}
.category-filter .antisemitism a:after {
border-color: #F67280;
}
.category-filter .sexism a:after {
border-color: #C06C84;
}
.category-filter .homophobia a:after {
border-color: #6C5B7B;
}
.category-filter .uncategorized a:after {
border-color: #355C7D;
}

17
static/js/main.js
View file

@ -1,6 +1,9 @@
(function () {
"use strict";
// http://www.colourlovers.com/palette/1811244/1001_Stories
var colors = [ '#F8B195', '#F67280', '#C06C84', '#6C5B7B', '#355C7D' ];
// set up background map
var map = L.map('map').setView([52.50, 13.40], 11);
var layer = new L.StamenTileLayer('toner-lite');
@ -20,15 +23,23 @@
// logic for drawing follows
var markers = [];
function createMarker (data) {
var options = { color: pickColor(data) };
var marker = L.circleMarker([data.lat, data.lng], options).addTo(map);
return marker;
}
function pickColor (data) {
var categories = [ 'racism', 'antisemitism', 'sexism', 'homophobia' ];
return data.categories.length ? colors[categories.indexOf(data.categories[0])] : colors[4];
}
/**
* Display all incidents at once
*/
function displayAll () {
for (var i = 0, l = response.length; i < l; i++) {
markers.push(
L.marker([response[i].lat, response[i].lng]).addTo(map).bindPopup(response[i].description)
)
markers.push(createMarker(response[i]).bindPopup(response[i].description));
}
}
})();

12
views/index.tpl
View file

@ -7,8 +7,8 @@
<link href='http://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
</head>
<body>
<nav id="year-picker">
<ul>
<nav id="filter-picker">
<ul class="year-filter">
<li class="active"><a href="#">2005</a></li>
<li><a href="#">2006</a></li>
<li><a href="#">2007</a></li>
@ -17,6 +17,14 @@
<li><a href="#">2010</a></li>
<li><a href="#">2011</a></li>
</ul>
<ul class="category-filter">
<li class="racism active"><a href="#">Rassismus</a></li>
<li class="antisemitism active"><a href="#">Antisemitismus</a></li>
<li class="sexism active"><a href="#">Sexismus</a></li>
<li class="homophobia active"><a href="#">Homophobie</a></li>
<li class="uncategorized active"><a href="#">Unkategorisiert</a></li>
</ul>
</nav>
<div id="map"></div>