From e90d8abfe04083de4bef56c67b50bc4227cb6bc4 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Wed, 6 Feb 2019 17:43:01 +0000 Subject: [PATCH 1/8] fix titling tags/categories --- src/components/CategoriesListPanel.jsx | 3 +-- src/components/TagListPanel.jsx | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/components/CategoriesListPanel.jsx b/src/components/CategoriesListPanel.jsx index 64f88e6..a295aa0 100644 --- a/src/components/CategoriesListPanel.jsx +++ b/src/components/CategoriesListPanel.jsx @@ -11,7 +11,6 @@ export default (props) => { function renderCategoryTree () { return (
-

{copy[props.language].toolbar.categories}

{props.categories.map(cat => { return (
  • { return (
    -

    {copy[props.language].toolbar.explore_by_category__title}

    +

    {copy[props.language].toolbar.categories}

    {copy[props.language].toolbar.explore_by_category__description}

    {renderCategoryTree()}
    diff --git a/src/components/TagListPanel.jsx b/src/components/TagListPanel.jsx index 1d88b73..72582ae 100644 --- a/src/components/TagListPanel.jsx +++ b/src/components/TagListPanel.jsx @@ -63,7 +63,6 @@ class TagListPanel extends React.Component { renderTree () { return (
    -

    {copy[this.props.language].toolbar.tags}

    {this.state.treeComponents.map(c => c)}
    ) @@ -72,7 +71,7 @@ class TagListPanel extends React.Component { render () { return (
    -

    {copy[this.props.language].toolbar.explore_by_tag__title}

    +

    {copy[this.props.language].toolbar.tags}

    {copy[this.props.language].toolbar.explore_by_tag__description}

    {this.renderTree()}
    From ee425a59434bad44dcf20f68cb413e9cfe344365 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Wed, 23 Jan 2019 11:56:15 +0000 Subject: [PATCH 2/8] initial port of popup --- src/components/Dashboard.jsx | 4 +++- src/components/InfoPopup.jsx | 29 +++++++++++++---------------- src/js/data/copy.json | 5 +++++ src/store/initial.js | 2 +- 4 files changed, 22 insertions(+), 18 deletions(-) diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 10e1485..4dbba51 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -139,7 +139,9 @@ class Dashboard extends React.Component { actions.toggleInfoPopup()} + methods={{ + onClose: actions.toggleInfoPopup + }} />

    {paragraph}

    ) +export default ({ app, methods }) => { + function renderIntro () { + return copy[app.language].legend.default.intro.map(txt =>

    {txt}

    ) } - renderCategoryColors () { - const colors = copy[this.props.app.language].legend.view2d.colors.slice(0) + function renderCategoryColors () { + const colors = copy[app.language].legend.view2d.colors.slice(0) colors.reverse() return (
    @@ -24,11 +23,11 @@ export default class InfoPopUp extends React.Component { ) } - renderView2DLegend () { + function renderView2DLegend () { return ( -
    - - {this.renderView2DCopy()} +
    + + {renderIntro()}
    @@ -38,7 +37,7 @@ export default class InfoPopUp extends React.Component { - {this.renderCategoryColors()} + {renderCategoryColors()}
    @@ -76,9 +75,7 @@ export default class InfoPopUp extends React.Component { ) } - render () { - return ( -
    {this.renderView2DLegend()}
    - ) - } + return ( +
    {renderView2DLegend()}
    + ) } diff --git a/src/js/data/copy.json b/src/js/data/copy.json index 47e642b..2722482 100644 --- a/src/js/data/copy.json +++ b/src/js/data/copy.json @@ -90,6 +90,11 @@ { "class": "category_group03", "label": "Category Group 03" }, { "class": "other", "label": "Other categories" } ] + }, + "default": { + "intro": [ + "Each event represents an occurence that is distinct in either time, space, or both. An event is represented by a coloured circle on both the map and the timeline." + ] } }, "toolbar": { diff --git a/src/store/initial.js b/src/store/initial.js index f3fa4cc..7398541 100644 --- a/src/store/initial.js +++ b/src/store/initial.js @@ -86,7 +86,7 @@ const initial = { isFetchingSources: false, isCardstack: true, - isInfopopup: false, + isInfopopup: true, isShowingSites: true } }, From a26b6beae0d4039793beb62fcc3fa4d3f100a771 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Wed, 23 Jan 2019 16:59:57 +0000 Subject: [PATCH 3/8] tweak initial settings --- example.config.js | 1 - src/store/initial.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/example.config.js b/example.config.js index 51891ce..8a790d9 100644 --- a/example.config.js +++ b/example.config.js @@ -44,4 +44,3 @@ module.exports = { } } } - diff --git a/src/store/initial.js b/src/store/initial.js index 7398541..e1871d4 100644 --- a/src/store/initial.js +++ b/src/store/initial.js @@ -52,7 +52,7 @@ const initial = { map: { anchor: [31.356397, 34.784818], startZoom: 11, - minZoom: 7, + minZoom: 6, maxZoom: 18, bounds: null, maxBounds: [[180, -180], [-180, 180]] From 4badf119994c2acb1336d1d46a8bd067d3da4274 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Thu, 7 Feb 2019 11:20:15 +0000 Subject: [PATCH 4/8] strip info panel --- src/components/InfoPopup.jsx | 71 ++++----------- src/js/data/copy.json | 5 +- src/scss/infopopup.scss | 169 ++++++++++++++++++++--------------- 3 files changed, 116 insertions(+), 129 deletions(-) diff --git a/src/components/InfoPopup.jsx b/src/components/InfoPopup.jsx index 445c83e..844bac2 100644 --- a/src/components/InfoPopup.jsx +++ b/src/components/InfoPopup.jsx @@ -1,75 +1,38 @@ import React from 'react' import copy from '../js/data/copy.json' -export default ({ app, methods }) => { +export default ({ ui, app, methods }) => { function renderIntro () { return copy[app.language].legend.default.intro.map(txt =>

    {txt}

    ) } function renderCategoryColors () { - const colors = copy[app.language].legend.view2d.colors.slice(0) - colors.reverse() - return ( -
    - {colors.map((color, idx) => { - return ( -
    -
    - {color.label} -
    - ) - })} + const categories = Object.keys(ui.style.categories).filter(label => label !== 'default') + + return categories.map(category => ( +
    + + + +
    +
    {category}
    +
    - ) + )) } function renderView2DLegend () { return (
    - +
    + +

    {copy[app.language].legend.default.header}

    +
    {renderIntro()}
    -
    - - - - - - - +
    {renderCategoryColors()}
    -
    - - - - - -
    -
    Comunicaciones
    -
    -
    -
    - - - -
    -
    Ataques
    -
    -
    -
    - - - - - - - -
    -
    Rutas de bus
    -
    -
    ) diff --git a/src/js/data/copy.json b/src/js/data/copy.json index 2722482..3e7f245 100644 --- a/src/js/data/copy.json +++ b/src/js/data/copy.json @@ -92,8 +92,11 @@ ] }, "default": { + "header": "Navigating the Platform", "intro": [ - "Each event represents an occurence that is distinct in either time, space, or both. An event is represented by a coloured circle on both the map and the timeline." + "Each event represents an occurence that is distinct in either time, space, or both. An event is represented by a coloured circle on both the map and the timeline.", + "Select an event to reveal its content and sources. You can filter events by category or other specified filters in the top left toolbar.", + "Narratives compose events to reveal logical threads that emerge from them. Transition to narrative mode by selecting a narrative from the top left dashboard icon." ] } }, diff --git a/src/scss/infopopup.scss b/src/scss/infopopup.scss index 5b75683..0552664 100644 --- a/src/scss/infopopup.scss +++ b/src/scss/infopopup.scss @@ -24,87 +24,108 @@ opacity: 0; } - .legend-section { - width: 300px; - padding-left: 60px; - height: 40px; - display: inline-block; - - svg { - width: 100px; - float: left; - display: inline-block; - } - - .legend-labels { - float: left; - display: inline-block; - width: calc(100% - 100px); - - .label { - display: block; - font-size: $xsmall; - margin-top: 10px; - margin-left: 10px; - - .color-category { - width: 8px; - height: 8px; - border-radius: 10px; - display: inline-block; - margin: 0px 5px 0 0; - } - } - } - - &:first-child { - .legend-labels .label { - margin-top: 0; - } - } + .legend { + display: flex; + flex-direction: column; } + .legend-header { + display: flex; + flex-direction: row; + h2 { + display: flex; + font-size: 12pt; + letter-spacing: 2px; + margin: 0; + } + } .side-menu-burg { position: absolute; right: 8px; top: 10px; } - .legend-item { - display: block; - width: 100%; - display: inline-block; - margin-bottom: 3px; - padding-left: 80px; - - .item-label { - line-height: 15px; - height: 15px; - font-size: $normal; - } - - .color-marker { - display: inline-block; - width: 15px; - height: 15px; - float: left; - margin: 0 10px 0 0; - border-radius: 15px; - - &.victims { background-color: #C90500; } - &.military { background-color: #319C31; } - &.nonstate { background-color: #AC28AC; } - &.state-police { background-color: #0000BF; } - &.iguala-municipal-police { background-color: #00558D; } - &.federal-police { background-color: #5756A2; } - &.huitzuco-municipal-police { background-color: #4ECAC1; } - &.cocula-municipal-police { background-color: #095959; } - &.ambulance { background-color: #ffffff; } - &.other { background-color: #D3CE2A; } - &.drivers { background-color: #822519; } - &.communications { background-color: #a6a6a6; } - &.GIEI { background-color: #ffffff; } - &.PGR { background-color: #000000; } - } + .legend-container { + height: 100%; + display: flex; + flex-direction: column; } + + .legend-section { + width: 300px; + // padding-left: 60px; + height: 25px; + display: flex; + align-items: center; + + svg { + width: 60px; + float: left; + display: inline-block; + } + + .legend-labels { + // float: lef; + display: flex; + + .label { + // display: block; + font-size: $xsmall; + // margin-top: 10px; + // margin-left: 10px; + + // .color-category { + // width: 8px; + // height: 8px; + // border-radius: 10px; + // display: inline-block; + // margin: 0px 5px 0 0; + // } + } + } + + // &:first-child { + // .legend-labels .label { + // margin-top: 0; + // } + // } + } + + // .legend-item { + // display: block; + // width: 100%; + // display: inline-block; + // margin-bottom: 3px; + // padding-left: 80px; + + // .item-label { + // line-height: 15px; + // height: 15px; + // font-size: $normal; + // } + + // .color-marker { + // display: inline-block; + // width: 15px; + // height: 15px; + // float: left; + // margin: 0 10px 0 0; + // border-radius: 15px; + + // &.victims { background-color: #C90500; } + // &.military { background-color: #319C31; } + // &.nonstate { background-color: #AC28AC; } + // &.state-police { background-color: #0000BF; } + // &.iguala-municipal-police { background-color: #00558D; } + // &.federal-police { background-color: #5756A2; } + // &.huitzuco-municipal-police { background-color: #4ECAC1; } + // &.cocula-municipal-police { background-color: #095959; } + // &.ambulance { background-color: #ffffff; } + // &.other { background-color: #D3CE2A; } + // &.drivers { background-color: #822519; } + // &.communications { background-color: #a6a6a6; } + // &.GIEI { background-color: #ffffff; } + // &.PGR { background-color: #000000; } + // } + // } } From ed9af1cbf6a37a9f0d162a5f2cd01765ed16cd22 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Thu, 7 Feb 2019 12:04:47 +0000 Subject: [PATCH 5/8] add cover with toggle --- .gitignore | 2 + example.config.js | 17 +++++---- src/actions/index.js | 7 ++++ src/components/Dashboard.jsx | 7 ++++ src/components/StaticPage.js | 9 +++++ src/js/utilities.js | 10 +++++ src/reducers/app.js | 72 +++++++++++------------------------- src/scss/cover.scss | 18 +++++++++ src/scss/main.scss | 1 + src/store/initial.js | 2 +- 10 files changed, 85 insertions(+), 60 deletions(-) create mode 100644 src/components/StaticPage.js create mode 100644 src/scss/cover.scss diff --git a/.gitignore b/.gitignore index 471ce0b..8c9ce65 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,5 @@ config.js dev.config.js src/\.DS_Store + +\.DS_Store diff --git a/example.config.js b/example.config.js index 8a790d9..176e5e2 100644 --- a/example.config.js +++ b/example.config.js @@ -11,6 +11,7 @@ module.exports = { INCOMING_DATETIME_FORMAT: '%m/%d/%YT%H:%M', MAPBOX_TOKEN: 'pk.EXAMPLE_MAPBOX_TOKEN', features: { + USE_COVER: true, USE_TAGS: false, USE_SEARCH: false, USE_SITES: true, @@ -32,15 +33,15 @@ module.exports = { new Date(2014, 5, 9), new Date(2018, 1, 6, 23) ] - } } - }, - ui: { - style: { - categories: {}, - shapes: {}, - narratives: {}, - selectedEvent: {}, } } + }, + ui: { + style: { + categories: {}, + shapes: {}, + narratives: {}, + selectedEvent: {} + } } } diff --git a/src/actions/index.js b/src/actions/index.js index 5f10662..8ee00c0 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -291,6 +291,13 @@ export function markNotificationsRead () { } } +export const TOGGLE_COVER = 'TOGGLE_COVER' +export function toggleCover () { + return { + type: TOGGLE_COVER + } +} + // ERRORS export const FETCH_SOURCE_ERROR = 'FETCH_SOURCE_ERROR' diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 4dbba51..778d1a4 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -13,6 +13,7 @@ import NarrativeControls from './presentational/Narrative/Controls.js' import InfoPopUp from './InfoPopup.jsx' import Timeline from './Timeline.jsx' import Notification from './Notification.jsx' +import StaticPage from './StaticPage' import { parseDate } from '../js/utilities' @@ -157,6 +158,12 @@ class Dashboard extends React.Component { } /> ) : null} + {process.env.features.USE_COVER && ( + + {/* enable USE_COVER in config.js features, and put content here if you want a header */} + {/* pass 'actions.toggleCover' as a prop to your custom header */} + + )} { + return ( +
    + {children} +
    + ) +} diff --git a/src/js/utilities.js b/src/js/utilities.js index 42bc3b9..b739bae 100644 --- a/src/js/utilities.js +++ b/src/js/utilities.js @@ -126,3 +126,13 @@ export function urlFromEnv (ext) { return null } } + +export function toggleFlagAC (flag) { + return (appState) => ({ + ...appState, + flags: { + ...appState.flags, + isCover: !appState.flags[flag] + } + }) +} diff --git a/src/reducers/app.js b/src/reducers/app.js index e4d7811..83f2187 100644 --- a/src/reducers/app.js +++ b/src/reducers/app.js @@ -1,6 +1,6 @@ /* global d3 */ import initial from '../store/initial.js' -import { parseDate } from '../js/utilities' +import { parseDate, toggleFlagAC } from '../js/utilities' import { UPDATE_HIGHLIGHTED, @@ -19,6 +19,7 @@ import { TOGGLE_FETCHING_SOURCES, TOGGLE_INFOPOPUP, TOGGLE_NOTIFICATIONS, + TOGGLE_COVER, FETCH_ERROR, FETCH_SOURCE_ERROR } from '../actions' @@ -189,16 +190,6 @@ function toggleLanguage (appState, action) { }) } -function toggleSites (appState, action) { - return { - ...appState, - flags: { - ...appState.flags, - isShowingSites: !appState.flags.isShowingSites - } - } -} - function updateSource (appState, action) { return { ...appState, @@ -214,37 +205,12 @@ function fetchError (state, action) { } } -function toggleFetchingDomain (appState, action) { - return Object.assign({}, appState, { - flags: Object.assign({}, appState.flags, { - isFetchingDomain: !appState.flags.isFetchingDomain - }) - }) -} - -function toggleFetchingSources (appState, action) { - return Object.assign({}, appState, { - flags: Object.assign({}, appState.flags, { - isFetchingSources: !appState.flags.isFetchingSources - }) - }) -} - -function toggleInfoPopup (appState, action) { - return Object.assign({}, appState, { - flags: Object.assign({}, appState.flags, { - isInfopopup: !appState.flags.isInfopopup - }) - }) -} - -function toggleNotifications (appState, action) { - return Object.assign({}, appState, { - flags: Object.assign({}, appState.flags, { - isNotification: !appState.flags.isNotification - }) - }) -} +const toggleSites = toggleFlagAC('isShowingSites') +const toggleFetchingDomain = toggleFlagAC('isFetchingDomain') +const toggleFetchingSources = toggleFlagAC('isFetchingSources') +const toggleInfoPopup = toggleFlagAC('isInfopopup') +const toggleNotifications = toggleFlagAC('isNotification') +const toggleCover = toggleFlagAC('isCover') function fetchSourceError (appState, action) { return { @@ -278,20 +244,24 @@ function app (appState = initial.app, action) { return updateSource(appState, action) case RESET_ALLFILTERS: return resetAllFilters(appState, action) + /* toggles */ case TOGGLE_LANGUAGE: return toggleLanguage(appState, action) case TOGGLE_SITES: - return toggleSites(appState, action) + return toggleSites(appState) + case TOGGLE_FETCHING_DOMAIN: + return toggleFetchingDomain(appState) + case TOGGLE_FETCHING_SOURCES: + return toggleFetchingSources(appState) + case TOGGLE_INFOPOPUP: + return toggleInfoPopup(appState) + case TOGGLE_NOTIFICATIONS: + return toggleNotifications(appState) + case TOGGLE_COVER: + return toggleCover(appState) + /* errors */ case FETCH_ERROR: return fetchError(appState, action) - case TOGGLE_FETCHING_DOMAIN: - return toggleFetchingDomain(appState, action) - case TOGGLE_FETCHING_SOURCES: - return toggleFetchingSources(appState, action) - case TOGGLE_INFOPOPUP: - return toggleInfoPopup(appState, action) - case TOGGLE_NOTIFICATIONS: - return toggleNotifications(appState, action) case FETCH_SOURCE_ERROR: return fetchSourceError(appState, action) default: diff --git a/src/scss/cover.scss b/src/scss/cover.scss new file mode 100644 index 0000000..ab1d94a --- /dev/null +++ b/src/scss/cover.scss @@ -0,0 +1,18 @@ +.cover-container { + position: absolute; + top: -100%; + left: 0; + background-color: black; + width: 100%; + height: 100%; + opacity: 0.95; + transition: top 0.4s ease; + z-index: $overheader + 1; + + color: $offwhite; + + &.showing { + top: 0; + left: 0; + } +} \ No newline at end of file diff --git a/src/scss/main.scss b/src/scss/main.scss index e2d7a82..21656c9 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -16,3 +16,4 @@ @import 'notification'; @import 'scene'; @import 'mediaplayer'; +@import 'cover'; diff --git a/src/store/initial.js b/src/store/initial.js index e1871d4..598ebf8 100644 --- a/src/store/initial.js +++ b/src/store/initial.js @@ -84,7 +84,7 @@ const initial = { flags: { isFetchingDomain: false, isFetchingSources: false, - + isCover: true, isCardstack: true, isInfopopup: true, isShowingSites: true From 4e96d92616f45ffdab6227eadfb5727924cf7ce8 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Thu, 7 Feb 2019 12:21:23 +0000 Subject: [PATCH 6/8] Add example cover --- example.config.js | 2 +- src/components/Dashboard.jsx | 4 +++- src/components/presentational/covers/Default.js | 16 ++++++++++++++++ src/js/utilities.js | 2 +- src/scss/cover.scss | 8 ++++++++ 5 files changed, 29 insertions(+), 3 deletions(-) create mode 100644 src/components/presentational/covers/Default.js diff --git a/example.config.js b/example.config.js index 176e5e2..27ae9e4 100644 --- a/example.config.js +++ b/example.config.js @@ -11,7 +11,7 @@ module.exports = { INCOMING_DATETIME_FORMAT: '%m/%d/%YT%H:%M', MAPBOX_TOKEN: 'pk.EXAMPLE_MAPBOX_TOKEN', features: { - USE_COVER: true, + USE_COVER: false, USE_TAGS: false, USE_SEARCH: false, USE_SITES: true, diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 778d1a4..3f971f8 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -14,6 +14,7 @@ import InfoPopUp from './InfoPopup.jsx' import Timeline from './Timeline.jsx' import Notification from './Notification.jsx' import StaticPage from './StaticPage' +import DefaultCover from './presentational/covers/Default' import { parseDate } from '../js/utilities' @@ -160,8 +161,9 @@ class Dashboard extends React.Component { ) : null} {process.env.features.USE_COVER && ( - {/* enable USE_COVER in config.js features, and put content here if you want a header */} + {/* enable USE_COVER in config.js features, and customise your header */} {/* pass 'actions.toggleCover' as a prop to your custom header */} + )} ( +
    +

    Here's an example cover.

    +

    Replace it with a more descriptive one:

    +
      +
    • Create a new component in components/presentational/covers.
      • +
    • Import in in components/Dashboard.jsx in the render function.
      • +
    +

    +
    + +
    +
    +) diff --git a/src/js/utilities.js b/src/js/utilities.js index b739bae..8d04788 100644 --- a/src/js/utilities.js +++ b/src/js/utilities.js @@ -132,7 +132,7 @@ export function toggleFlagAC (flag) { ...appState, flags: { ...appState.flags, - isCover: !appState.flags[flag] + [flag]: !appState.flags[flag] } }) } diff --git a/src/scss/cover.scss b/src/scss/cover.scss index ab1d94a..a033eb7 100644 --- a/src/scss/cover.scss +++ b/src/scss/cover.scss @@ -15,4 +15,12 @@ top: 0; left: 0; } +} + +.default-cover-container { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + height: 100%; } \ No newline at end of file From 52d8630ed2f24d4210b1e8c3705e40691c67aadb Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Thu, 7 Feb 2019 12:28:53 +0000 Subject: [PATCH 7/8] ignore all covers but default --- .gitignore | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.gitignore b/.gitignore index 8c9ce65..1297619 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,9 @@ build/ node_modules/ config.js dev.config.js +# ignore all covers but the default +src/components/presentational/covers/ +!src/src/components/presentational/covers/Default.js src/\.DS_Store From d105fbc6a93b0d4e39386fde9e52bd2706cd97dd Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Thu, 7 Feb 2019 14:53:45 +0000 Subject: [PATCH 8/8] rm comments --- src/scss/infopopup.scss | 56 ----------------------------------------- 1 file changed, 56 deletions(-) diff --git a/src/scss/infopopup.scss b/src/scss/infopopup.scss index 0552664..fd9c64e 100644 --- a/src/scss/infopopup.scss +++ b/src/scss/infopopup.scss @@ -53,7 +53,6 @@ .legend-section { width: 300px; - // padding-left: 60px; height: 25px; display: flex; align-items: center; @@ -65,67 +64,12 @@ } .legend-labels { - // float: lef; display: flex; .label { - // display: block; font-size: $xsmall; - // margin-top: 10px; - // margin-left: 10px; - - // .color-category { - // width: 8px; - // height: 8px; - // border-radius: 10px; - // display: inline-block; - // margin: 0px 5px 0 0; - // } } } - // &:first-child { - // .legend-labels .label { - // margin-top: 0; - // } - // } } - - // .legend-item { - // display: block; - // width: 100%; - // display: inline-block; - // margin-bottom: 3px; - // padding-left: 80px; - - // .item-label { - // line-height: 15px; - // height: 15px; - // font-size: $normal; - // } - - // .color-marker { - // display: inline-block; - // width: 15px; - // height: 15px; - // float: left; - // margin: 0 10px 0 0; - // border-radius: 15px; - - // &.victims { background-color: #C90500; } - // &.military { background-color: #319C31; } - // &.nonstate { background-color: #AC28AC; } - // &.state-police { background-color: #0000BF; } - // &.iguala-municipal-police { background-color: #00558D; } - // &.federal-police { background-color: #5756A2; } - // &.huitzuco-municipal-police { background-color: #4ECAC1; } - // &.cocula-municipal-police { background-color: #095959; } - // &.ambulance { background-color: #ffffff; } - // &.other { background-color: #D3CE2A; } - // &.drivers { background-color: #822519; } - // &.communications { background-color: #a6a6a6; } - // &.GIEI { background-color: #ffffff; } - // &.PGR { background-color: #000000; } - // } - // } }