bellingcat/ukraine-timemap
1
0
Fork 0
mirror of https://github.com/bellingcat/ukraine-timemap.git synced 2026-06-12 13:28:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

lint jsx files

Browse Source
This commit is contained in:
Lachlan Kermode
2019-01-23 11:35:34 +00:00
parent 939a4833b8
commit fb4d0c2d86
28 changed files with 572 additions and 627 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/components/InfoPopup.jsx
View File

@@ -1,22 +1,21 @@
import React from 'react';
import copy from '../js/data/copy.json';
import React from 'react'
import copy from '../js/data/copy.json'
// NB: should we make this componetn part of a future feature?
export default class InfoPopUp extends React.Component{
renderView2DCopy() {
return copy[this.props.app.language].legend.view2d.paragraphs.map(paragraph => <p>{paragraph}</p>);
export default class InfoPopUp extends React.Component {
renderView2DCopy () {
return copy[this.props.app.language].legend.view2d.paragraphs.map(paragraph => <p>{paragraph}</p>)
}
renderCategoryColors() {
const colors = copy[this.props.app.language].legend.view2d.colors.slice(0);
colors.reverse();
renderCategoryColors () {
const colors = copy[this.props.app.language].legend.view2d.colors.slice(0)
colors.reverse()
return (
<div className="legend-labels" style={{ 'margin-left': '-10px' }}>
<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}`}></div>
<div className='label' style={{ 'margin-left': `${idx * 5}` }}>
<div className={`color-category ${color.class}`} />
{color.label}
</div>
)
@@ -25,51 +24,51 @@ export default class InfoPopUp extends React.Component{
)
}
renderView2DLegend() {
renderView2DLegend () {
return (
<div className={`infopopup ${(this.props.app.flags.isInfopopup) ? '' : 'hidden'}`}>
<button onClick={() => this.props.toggle()} className="side-menu-burg over-white is-active"><span /></button>
<button onClick={() => this.props.toggle()} className='side-menu-burg over-white is-active'><span /></button>
{this.renderView2DCopy()}
<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"/>
<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>
{this.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"/>
<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 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"/>
<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 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"/>
<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 className='legend-labels'>
<div className='label'>Rutas de bus</div>
</div>
</div>
</div>
@@ -77,7 +76,7 @@ export default class InfoPopUp extends React.Component{
)
}
render() {
render () {
return (
<div>{this.renderView2DLegend()}</div>
)