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

lint it

Browse Source
This commit is contained in:
Lachlan Kermode
2019-08-15 11:24:54 +01:00
parent f4350ba533
commit a0d224ca9c
8 changed files with 121 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,64 +29,64 @@ class SourceOverlay extends React.Component {
}
switchToTrans (idx) {
this.setState({ transIdx: idx });
this.setState({ transIdx: idx })
}
renderContent(source) {
renderContent (source) {
const { url, title, paths, date, type, desc, poster } = source
const shortenedTitle = title.substring(0, 100)
return (
<React.Fragment>
<div className='mo-banner'>
<div className='mo-banner-close' onClick={this.props.onCancel}>
<i className='material-icons'>close</i>
</div>
<h3 className='mo-banner-content'>{shortenedTitle}</h3>
<div className='mo-banner-trans'>
{this.props.translations ? this.props.translations.map((trans, idx) => (
this.state.transIdx !== idx + 1 ? (
<div className='mo-trans' onClick={() => this.switchToTrans(idx + 1)}>{trans.code}</div>
) : (
<div className='mo-trans' onClick={() => this.switchToTrans(0)}>EN</div>
)
)) : null}
</div>
</div>
<div className='mo-container' onClick={e => e.stopPropagation()}>
<div className='mo-media-container'>
<Content media={paths.map(p => selectTypeFromPathWithPoster(p, poster))} viewmediaIdx={this.state.mediaIdx} />
</div>
</div>
<div className='mo-footer'>
<Controls paths={paths} viewmediaIdx={this.state.mediaIdx} onShiftHandler={this.onShiftGallery} />
<div className='mo-meta-container'>
<div className='mo-box-title'>
<div>{desc}</div>
<div className='mo-banner'>
<div className='mo-banner-close' onClick={this.props.onCancel}>
<i className='material-icons'>close</i>
</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}
</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}
<h3 className='mo-banner-content'>{shortenedTitle}</h3>
<div className='mo-banner-trans'>
{this.props.translations ? this.props.translations.map((trans, idx) => (
this.state.transIdx !== idx + 1 ? (
<div className='mo-trans' onClick={() => this.switchToTrans(idx + 1)}>{trans.code}</div>
) : (
<div className='mo-trans' onClick={() => this.switchToTrans(0)}>EN</div>
)
)) : null}
</div>
</div>
</div>
</React.Fragment>
<div className='mo-container' onClick={e => e.stopPropagation()}>
<div className='mo-media-container'>
<Content media={paths.map(p => selectTypeFromPathWithPoster(p, poster))} viewmediaIdx={this.state.mediaIdx} />
</div>
</div>
<div className='mo-footer'>
<Controls paths={paths} viewmediaIdx={this.state.mediaIdx} onShiftHandler={this.onShiftGallery} />
<div className='mo-meta-container'>
<div className='mo-box-title'>
<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}
</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}
</div>
</div>
</React.Fragment>
)
}
@@ -94,12 +94,11 @@ class SourceOverlay extends React.Component {
if (typeof (this.props.source) !== 'object') {
return this.renderError()
}
const { url, title, paths, date, type, desc, poster } = this.props.source
const { transIdx } = this.state
return (
<div className={`mo-overlay ${this.props.opaque ? 'opaque' : ''}`}>
{this.renderContent(transIdx === 0 ? this.props.source : this.props.translations[transIdx-1])}
{this.renderContent(transIdx === 0 ? this.props.source : this.props.translations[transIdx - 1])}
</div>
)
}