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 }

6
src/scss/cover.scss
View File

@@ -103,7 +103,8 @@
max-width: 100%;
min-height: 100px;
&.thin {
min-width: 250px;
min-width: 350px;
width: 400px;
max-width: 400px;
}
margin: auto;
@@ -119,6 +120,9 @@
flex-direction: column;
}
justify-content: space-around;
&.vertical {
flex-direction: column;
}
.cell {
border: 1px solid white;
display: flex;

27
src/scss/overlay.scss
View File

@@ -48,7 +48,7 @@ $overlay-bg: rgba(239,239,239,0.9);
top: 0;
width: 100%;
display: flex;
justify-content: flex-start;
justify-content: space-between;
align-items: stretch;
flex-direction: row;
@@ -57,6 +57,7 @@ $overlay-bg: rgba(239,239,239,0.9);
justify-content: center;
align-items: center;
min-width: $banner-height;
width: $banner-height;
.material-icons {
font-size: 40pt;
background-color: transparent;
@@ -75,12 +76,12 @@ $overlay-bg: rgba(239,239,239,0.9);
}
.mo-banner-content {
flex: 11;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
h3 {
margin-left: $banner-height; // to offset the 2*$banner-height below
&.h3 {
border-radius: 2px;
padding: 10px 15px;
background-color: transparent;
@@ -88,6 +89,26 @@ $overlay-bg: rgba(239,239,239,0.9);
margin-left: -$banner-height;
}
}
.mo-banner-trans {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
min-width: 2 * $banner-height;
width: 2 * $banner-height;
// width: $banner-height;
.mo-trans {
padding: 15px;
margin: 10px;
border: 1px solid $darkwhite;
transition: 0.3s all ease;
&:hover {
background-color: $darkwhite;
cursor: pointer;
}
}
}
}
.media-gallery-controls {