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

Feature/smallfixes (#177)

Browse Source 
* return logos

* dates w/o commas

* make arrows slightly larger

* intro/info popup fixes
This commit is contained in:
Lachlan Kermode
2020-10-29 09:31:13 +01:00
committed by GitHub
parent 001365976c
commit 7080c6d7af
8 changed files with 33 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Layout.js
View File

@@ -260,11 +260,13 @@ class Dashboard extends React.Component {
)
}
const dateHeight = 80
const popupStyles = {
fontSize: 18,
height: `calc(100vh - ${app.timeline.dimensions.height}px)`,
width: '40vw',
bottom: app.timeline.dimensions.height
height: `calc(100vh - ${app.timeline.dimensions.height}px - ${dateHeight}px)`,
width: '60vw',
maxWidth: 600,
bottom: app.timeline.dimensions.height + dateHeight,
overflowY: 'scroll'
}
return (
@@ -325,7 +327,7 @@ class Dashboard extends React.Component {
onClose={actions.toggleInfoPopup}
/>
<Popup
title={process.env.display_title}
title='Introduction to the platform'
theme='dark'
isOpen={app.flags.isIntropopup}
onClose={actions.toggleIntroPopup}

2
src/components/TimelineCategories.jsx
View File

@@ -66,7 +66,7 @@ class TimelineCategories extends React.Component {
x={dims.marginLeft}
y={dims.marginTop}
width={dims.width - dims.marginLeft - dims.width_controls}
height='100%'
height={dims.contentHeight}
/>
</g>
)

4
src/components/presentational/Popup.js
View File

@@ -1,6 +1,8 @@
import React from 'react'
import marked from 'marked'
const fontSize = window.innerWidth > 1000 ? 14 : 18
export default ({
content = [],
styles = {},
@@ -10,7 +12,7 @@ export default ({
theme = 'light'
}) => (
<div>
<div className={`infopopup ${isOpen ? '' : 'hidden'} ${theme === 'dark' ? 'dark' : 'light'}`} style={styles}>
<div className={`infopopup ${isOpen ? '' : 'hidden'} ${theme === 'dark' ? 'dark' : 'light'}`} style={{ ...styles, fontSize }}>
<div className='legend-header'>
<button onClick={onClose} className='side-menu-burg over-white is-active'><span /></button>
<h2>{title}</h2>

10
src/components/presentational/Timeline/Handles.js
View File

@@ -1,21 +1,23 @@
import React from 'react'
const TimelineHandles = ({ dims, onMoveTime }) => {
const transform = 'scale(1.5,1.5)'
const size = 45
return (
<g className='time-controls-inline'>
<g
transform={`translate(${dims.marginLeft - 20}, ${dims.contentHeight - 10})`}
onClick={() => onMoveTime('backwards')}
>
<circle r='15' />
<path d='M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z' transform='rotate(270)' />
<circle r={size} />
<path d='M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z' transform={`rotate(270) ${transform}`} />
</g>
<g
transform={`translate(${dims.width - dims.width_controls + 20}, ${dims.contentHeight - 10})`}
onClick={() => onMoveTime('forward')}
>
<circle r='15' />
<path d='M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z' transform='rotate(90)' />
<circle r={size} />
<path d='M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z' transform={`rotate(90) ${transform}`} />
</g>
</g>
)