mirror of
https://github.com/bellingcat/ukraine-timemap.git
synced 2026-06-12 13:28:36 +03:00
strip info panel
This commit is contained in:
Lachlan Kermode
@@ -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 => <p>{txt}</p>)
|
||||
}
|
||||
|
||||
function renderCategoryColors () {
|
||||
const colors = copy[app.language].legend.view2d.colors.slice(0)
|
||||
colors.reverse()
|
||||
return (
|
||||
<div className='legend-labels' style={{ 'margin-left': '-10px' }}>
|
||||
{colors.map((color, idx) => {
|
||||
return (
|
||||
<div className='label' style={{ 'margin-left': `${idx * 5}` }}>
|
||||
<div className={`color-category ${color.class}`} />
|
||||
{color.label}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
const categories = Object.keys(ui.style.categories).filter(label => label !== 'default')
|
||||
|
||||
return categories.map(category => (
|
||||
<div className='legend-section'>
|
||||
<svg x='0px' y='0px' width='50px' height='20px' viewBox='0 0 100 30' enableBackground='new 0 0 100 30'>
|
||||
<circle opacity='1' fill={ui.style.categories[category]} cx='50' cy='15' r='15' />
|
||||
</svg>
|
||||
<div className='legend-labels'>
|
||||
<div className='label'>{category}</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
))
|
||||
}
|
||||
|
||||
function renderView2DLegend () {
|
||||
return (
|
||||
<div className={`infopopup ${(app.flags.isInfopopup) ? '' : 'hidden'}`}>
|
||||
<button onClick={methods.onClose} className='side-menu-burg over-white is-active'><span /></button>
|
||||
<div className='legend-header'>
|
||||
<button onClick={methods.onClose} className='side-menu-burg over-white is-active'><span /></button>
|
||||
<h2>{copy[app.language].legend.default.header}</h2>
|
||||
</div>
|
||||
{renderIntro()}
|
||||
<div className='legend'>
|
||||
<div className='legend-section' style={{ 'height': '100px' }}>
|
||||
<svg x='0px' y='0px' width='100px' height='100px' viewBox='0 0 100 100' enableBackground='new 0 0 100 100'>
|
||||
<circle fill='#D2CD28' cx='50' cy='50' r='50' />
|
||||
<circle fill='#662770' cx='50' cy='50' r='40' />
|
||||
<circle fill='#2F409A' cx='50' cy='50' r='30' />
|
||||
<circle fill='#256C36' cx='50' cy='50' r='20' />
|
||||
<circle fill='#FF0000' cx='50' cy='50' r='10' />
|
||||
</svg>
|
||||
<div className='legend-container'>
|
||||
{renderCategoryColors()}
|
||||
</div>
|
||||
<div className='legend-section'>
|
||||
<svg x='0px' y='0px' width='100px' height='30px' viewBox='0 0 100 30' enableBackground='new 0 0 100 30'>
|
||||
<line fill='none' stroke='#2F409A' strokeDasharray='4,4' x1='30' y1='15' x2='70' y2='15' />
|
||||
<circle fill='2F409A' fillOpacity='0.2' stroke='#2F409A' strokeDasharray='4,4' cx='80' cy='15' r='10' />
|
||||
<circle fill='2F409A' fillOpacity='0.2' stroke='#2F409A' strokeDasharray='4,4' cx='20' cy='15' r='10' />
|
||||
</svg>
|
||||
<div className='legend-labels'>
|
||||
<div className='label'>Comunicaciones</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='legend-section'>
|
||||
<svg x='0px' y='0px' width='100px' height='30px' viewBox='0 0 100 30' enableBackground='new 0 0 100 30'>
|
||||
<circle opacity='0.3' fill='#FF0000' cx='50' cy='15' r='15' />
|
||||
</svg>
|
||||
<div className='legend-labels'>
|
||||
<div className='label'>Ataques</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='legend-section'>
|
||||
<svg x='0px' y='0px' width='100px' height='30px' viewBox='0 40 100 30' enableBackground='new 0 0 100 70'>
|
||||
<polyline fill='none' stroke='#000000' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' stroke-miterlimit='10' points='
|
||||
8.376,63.723 47.287,63.723 60,46 106,46 ' />
|
||||
<line stroke='#000000' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='33.723' y1='59.663' x2='39.069' y2='63.723' />
|
||||
<line stroke='#000000' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='33.723' y1='67.782' x2='39.069' y2='63.723' />
|
||||
<line stroke='#000000' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='78.849' y1='41.94' x2='84.195' y2='46' />
|
||||
<line stroke='#000000' strokeWidth='2' strokeLinecap='round' strokeLinejoin='round' x1='78.849' y1='50.06' x2='84.195' y2='46' />
|
||||
</svg>
|
||||
<div className='legend-labels'>
|
||||
<div className='label'>Rutas de bus</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
@@ -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."
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
@@ -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; }
|
||||
// }
|
||||
// }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user