From a30ad1fc1c71b5c19011956f7fd0069838e9ab41 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arne=20Schl=C3=BCter?= Date: Sat, 7 Feb 2015 20:41:37 +0100 Subject: [PATCH] Add and style category filter --- static/css/style.css | 67 ++++++++++++++++++++++++++++++++++++++++---- static/js/main.js | 17 +++++++++-- views/index.tpl | 12 ++++++-- 3 files changed, 85 insertions(+), 11 deletions(-) diff --git a/static/css/style.css b/static/css/style.css index 799b3e6..84962d5 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -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; +} diff --git a/static/js/main.js b/static/js/main.js index 13bbe9c..62b282e 100644 --- a/static/js/main.js +++ b/static/js/main.js @@ -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)); } } })(); diff --git a/views/index.tpl b/views/index.tpl index 2d5b9c8..46fd02c 100644 --- a/views/index.tpl +++ b/views/index.tpl @@ -7,8 +7,8 @@ -