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

in prep for translations

Browse Source
This commit is contained in:
Lachlan Kermode
2019-08-14 16:11:55 +01:00
parent cfa890d562
commit 28b52d6c6e
4 changed files with 66 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/Overlay/Media.js
View File

@@ -33,6 +33,7 @@ class SourceOverlay extends React.Component {
return this.renderError()
}
const { url, title, paths, date, type, desc, poster } = this.props.source
const { translations } = this.props
const shortenedTitle = title.substring(0, 100)
return (
@@ -42,9 +43,14 @@ class SourceOverlay extends React.Component {
<i className='material-icons'>close</i>
</div>
<div className='mo-banner-content'>
<h3>{shortenedTitle}</h3>
<h3 className='mo-banner-content'>{shortenedTitle}</h3>
<div className='mo-banner-trans'>
{translations ? translations.map(trans => (
<div className='mo-trans' onClick={() => alert("TODO:")}>{trans.code}</div>
)) : null}
</div>
</div>
<div className='mo-container' onClick={e => e.stopPropagation()}>
@@ -62,20 +68,22 @@ class SourceOverlay extends React.Component {
<div>{desc}</div>
</div>
{(type || date || url) ? <div className='mo-box'>
<div>
{type ? <h4>Evidence type</h4> : null}
{type ? <p><i className='material-icons left'>perm_media</i>{type}</p> : null}
{(type || date || url) ? (
<div className='mo-box'>
<div>
{type ? <h4>Evidence type</h4> : null}
{type ? <p><i className='material-icons left'>perm_media</i>{type}</p> : null}
</div>
<div>
{date ? <h4>Date Published</h4> : null}
{date ? <p><i className='material-icons left'>today</i>{date}</p> : null}
</div>
<div>
{url ? <h4>Link</h4> : null}
{url ? <span><i className='material-icons left'>link</i><a href={url} target='_blank'>Link to original URL</a></span> : null}
</div>
</div>
<div>
{date ? <h4>Date Published</h4> : null}
{date ? <p><i className='material-icons left'>today</i>{date}</p> : null}
</div>
<div>
{url ? <h4>Link</h4> : null}
{url ? <span><i className='material-icons left'>link</i><a href={url} target='_blank'>Link to original URL</a></span> : null}
</div>
</div> : null}
) : null}
</div>
</div>

23
src/components/presentational/covers/TemplateCover.js
View File

@@ -15,9 +15,9 @@ class TemplateCover extends React.Component {
}
}
getVideo(index) {
if(index == MEDIA_HOWTO) {
return this.props.cover.howToVideo
getVideo(index, headerEndIndex) {
if(index < headerEndIndex) {
return this.props.cover.headerVideos[index]
} else if(index >= 0) {
return this.props.cover.videos[index]
} else {
@@ -26,7 +26,8 @@ class TemplateCover extends React.Component {
}
render () {
var video = this.getVideo(this.state.video)
const { headerVideos } = this.props.cover
var video = this.getVideo(this.state.video, headerVideos.length || 0)
return (
<div className='default-cover-container'>
<div className="cover-content">
@@ -55,11 +56,13 @@ class TemplateCover extends React.Component {
<hr />
<div className='hero thin'>
{
this.props.cover.howToVideo ? (
headerVideos ? (
<div className='row'>
<div className='cell plain' onClick={() => this.setState({ video: -1 })}>
How to Use the Platform
</div>
{ headerVideos.slice(0,2).map( (media, index) => (
<div className='cell plain' onClick={() => this.setState({ video: index })}>
{media.buttonTitle}
</div>
) ) }
</div>
) : null
}
@@ -76,8 +79,9 @@ class TemplateCover extends React.Component {
this.props.cover.videos ? (
<div className='hero'>
<div className='row'>
{/* NOTE: only take first four videos, drop any others for style reasons */}
{ this.props.cover.videos.slice(0,4).map( (media, index) => (
<div className='cell small' onClick={() => this.setState({ video: index })} >
<div className='cell small' onClick={() => this.setState({ video: index + (headerVideos.length || 0)})} >
{media.buttonTitle}<br />{media.buttonSubtitle}
</div>
)) }
@@ -98,6 +102,7 @@ class TemplateCover extends React.Component {
paths: [video.file],
poster: video.poster
}}
translations={video.translations}
onCancel={() => this.setState({ video: MEDIA_HIDDEN })}
/>
) : null }