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

correct color

Browse Source
This commit is contained in:
Lachlan Kermode
2019-08-14 17:19:40 +01:00
parent 0851259f61
commit f4350ba533
2 changed files with 71 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@ import { selectTypeFromPathWithPoster } from '../../common/utilities'
class SourceOverlay extends React.Component {
constructor () {
super()
this.state = { idx: 0 }
this.state = { mediaIdx: 0, transIdx: 0 }
this.onShiftGallery = this.onShiftGallery.bind(this)
}
@@ -22,10 +22,72 @@ class SourceOverlay extends React.Component {
onShiftGallery (shift) {
// no more left
if (this.state.idx === 0 && shift === -1) return
if (this.state.mediaIdx === 0 && shift === -1) return
// no more right
if (this.state.idx === this.props.source.paths.length - 1 && shift === 1) return
this.setState({ idx: this.state.idx + shift })
if (this.state.mediaIdx === this.props.source.paths.length - 1 && shift === 1) return
this.setState({ mediaIdx: this.state.mediaIdx + shift })
}
switchToTrans (idx) {
this.setState({ transIdx: idx });
}
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>
{(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>
)
}
render () {
@@ -33,60 +95,11 @@ 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)
const { transIdx } = this.state
return (
<div className={`mo-overlay ${this.props.opaque ? 'opaque' : ''}`}>
<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'>
{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()}>
<div className='mo-media-container'>
<Content media={paths.map(p => selectTypeFromPathWithPoster(p, poster))} viewIdx={this.state.idx} />
</div>
</div>
<div className='mo-footer'>
<Controls paths={paths} viewIdx={this.state.idx} 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>
{this.renderContent(transIdx === 0 ? this.props.source : this.props.translations[transIdx-1])}
</div>
)
}

4
src/scss/overlay.scss
View File

@@ -33,7 +33,7 @@ $banner-height: 100px;
align-items: center;
// height: calc(100vh - 350px);
// max-height: calc(100vh - 350px);
width: $panel-width;
width: 70vw;
max-width: 90vw;
box-shadow: 0 19px 19px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
overflow: auto;
@@ -44,6 +44,7 @@ $overlay-bg: rgba(239,239,239,0.9);
.mo-banner {
position: fixed;
min-height: 100px;
color: $offwhite;
background-color: transparent;
top: 0;
width: 100%;
@@ -308,6 +309,7 @@ $overlay-bg: rgba(239,239,239,0.9);
justify-content: center;
padding: 20px;
min-width: calc(100% - 40px);
z-index: 99999;
}
.media-player {