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

fmt source display: photo

Browse Source
This commit is contained in:
Lachlan Kermode
2018-12-21 11:34:36 +00:00
parent 8aba901ee7
commit ff7ef5ccb1
5 changed files with 121 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Dashboard.jsx
View File

@@ -155,13 +155,13 @@ function mapDispatchToProps(dispatch) {
}
export default connect(
// state => ({
// ...state,
// app: {
// ...state.app,
// source: state.domain.sources["24Kanal - Chervonosilske Damaged Tank Photo"]
// }
// }),
state => state,
state => ({
...state,
app: {
...state.app,
source: state.domain.sources["24Kanal - Chervonosilske Damaged Tank Photo"]
}
}),
// state => state,
mapDispatchToProps,
)(Dashboard);

22
src/components/SourceOverlay.jsx
View File

@@ -1,5 +1,7 @@
import React from 'react'
import Img from 'react-image'
import Spinner from './presentational/Spinner'
import NoSource from './presentational/NoSource'
class SourceOverlay extends React.Component {
constructor(props) {
@@ -24,9 +26,11 @@ class SourceOverlay extends React.Component {
const imageExts = ['.jpg', '.png']
const possibleUrls = imageExts.map(ext => `${this.props.source.path}${ext}`)
return (
<div>
<Img src={possibleUrls} />
</div>
<Img
src={possibleUrls}
loader={<Spinner />}
unloader={<NoSource failedUrls={possibleUrls} />}
/>
)
}
@@ -56,6 +60,7 @@ class SourceOverlay extends React.Component {
}
render() {
const {id, url, title, date, type, affil_1, affil_2} = this.props.source
return (
<div className="mo-overlay">
<div className="mo-container" onClick={this.props.onCancel}>
@@ -68,6 +73,17 @@ class SourceOverlay extends React.Component {
<div className="mo-media-container">
{this._renderSwitch()}
</div>
<div className="mo-meta-container">
<div className="mo-box">
{id ? <div><b>{id}</b></div> : null}
{title? <div><b>{title}</b></div> : null}
<hr/>
{type ? <div>Type: <span className="indent">{type}</span></div> : null}
{date ? <div>Date:<span className="indent">{date}</span></div> : null}
<hr/>
{url ? <div><a href={url} target="_blank">Link to original webpage</a></div> : null}
</div>
</div>
</div>
</div>
)

22
src/components/presentational/NoSource.js Normal file
View File

@@ -0,0 +1,22 @@
import React from 'react';
const NoSource = ({ failedUrls }) => {
return (
<div className="no-source-container">
<div className="no-source-row">
<i className="material-icons no-source-icon">
error
</i>
<div>No media found.</div>
</div>
<div className="no-source-row">
The following URLs were tried:
</div>
<ul>
{failedUrls.map((url, idx) => <li key={idx}>{url}</li>)}
</ul>
</div>
)
}
export default NoSource;

77
src/scss/mediaoverlay.scss
View File

@@ -1,5 +1,9 @@
$vimeo-height: 800px;
$vimeo-width: 1000px;
$panel-width: 800px;
$panel-height: 800px;
$vimeo-width: $panel-width;
$vimeo-height: $panel-height;
$header-inset: 10px;
.mo-overlay {
display: flex;
@@ -11,39 +15,43 @@ $vimeo-width: 1000px;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(230, 230, 230, 0.5);
background-color: rgba(239, 239, 239, 0.5);
z-index: 20;
}
.mo-header {
min-height: 4em;
min-height: 38px;
max-height: 38px;
width: 100%;
display: flex;
flex-direction: row;
justify-content: flex-start;
justify-content: flex-end;
background-color: black;
color: white;
.mo-header-close {
display: flex;
justify-content: center;
align-items: center;
min-width: 4em;
margin-left: $header-inset + 8px;
}
.mo-header-text {
flex: 1;
margin-left: -4em;
margin-right: $header-inset;
display: flex;
align-items: center;
justify-content: center;
justify-content: right;
}
}
.mo-container {
background-color: rgba(230,230,230,0.98);
max-width: 800px;
min-width: 800px;
max-height: 600px;
min-height: 600px;
background-color: rgba(239, 239, 239, 0.8);
max-width: $panel-width;
min-width: $panel-width;
max-height: $panel-height;
min-height: $panel-height;
display: flex;
flex-direction: column;
justify-content: flex-start;
@@ -57,7 +65,32 @@ $vimeo-width: 1000px;
}
.mo-media-container {
padding-top: 3*$header-inset;
font-family: "Lato", Helvetica, sans-serif;
max-height: $vimeo-height;
min-width: 100%;
}
.mo-meta-container {
padding: 3*$header-inset;
min-height: 100px;
min-width: $panel-width;
max-width: $panel-height;
display: flex;
justify-content: center;
.mo-box {
display: flex;
flex-direction: column;
max-width: $panel-width - (6*$header-inset);
min-width: $panel-width - (6*$header-inset);
border: 1px solid rgb(189,189,189);
padding: $header-inset;
}
.indent {
margin-left: 2*$header-inset;
}
}
.mo-controls {
@@ -73,3 +106,23 @@ $vimeo-width: 1000px;
max-width: $vimeo-width;
border: none;
}
/* source overlay specific styles */
.no-source-container {
border: 1px solid black;
padding: 2em;
min-height: 200px;
}
.no-source-row {
display: flex;
justify-content: flex-start;
margin-bottom: 0.7em;
// min-width: 150px;
// max-width: 150px;
.no-source-icon {
margin-right: 1em;
}
}

28
yarn.lock
View File

@@ -3746,7 +3746,6 @@ js-string-escape@^1.0.1:
"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
js-tokens@^3.0.2:
version "3.0.2"
@@ -3977,7 +3976,6 @@ loglevel@^1.4.1:
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
version "1.4.0"
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
dependencies:
js-tokens "^3.0.0 || ^4.0.0"
@@ -4521,7 +4519,6 @@ oauth-sign@~0.9.0:
object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
object-copy@^0.1.0:
version "0.1.0"
@@ -4970,13 +4967,7 @@ promise-inflight@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
promise@^7.1.1:
version "7.3.1"
resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
dependencies:
asap "~2.0.3"
prop-types@15.6.2, prop-types@^15.5.0, prop-types@^15.5.10, prop-types@^15.5.7, prop-types@^15.6.0:
prop-types@15.6.2, prop-types@^15.5.0, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2:
version "15.6.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
dependencies:
@@ -5098,20 +5089,12 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
react-dom@^16.6.3:
version "16.6.3"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.6.3.tgz#8fa7ba6883c85211b8da2d0efeffc9d3825cccc0"
integrity sha512-8ugJWRCWLGXy+7PmNh8WJz3g1TaTUt1XyoIcFN+x0Zbkoz+KKdUyx1AQLYJdbFXjuF41Nmjn5+j//rxvhFjgSQ==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.2"
scheduler "^0.11.2"
react-portal@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.2.0.tgz#5400831cdb0ae64dccb8128121cf076089ab1afd"
integrity sha512-Zf+vGQ/VEAb5XAy+muKEn48yhdCNYPZaB1BWg1xc8sAZWD8pXTgPtQT4ihBdmWzsfCq8p8/kqf0GWydSBqc+Eg==
dependencies:
prop-types "^15.5.8"
react-image@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/react-image/-/react-image-1.5.1.tgz#e900baa3f48b15ca94500542a2aff762c94431b8"
@@ -5119,6 +5102,12 @@ react-image@^1.5.1:
"@babel/runtime" "^7.0.0"
prop-types "15.6.2"
react-portal@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.2.0.tgz#5400831cdb0ae64dccb8128121cf076089ab1afd"
dependencies:
prop-types "^15.5.8"
react-redux@^5.0.4:
version "5.0.7"
resolved "http://registry.npmjs.org/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8"
@@ -5140,7 +5129,6 @@ react-tabs@^1.0.0:
react@^16.6.3:
version "16.6.3"
resolved "https://registry.yarnpkg.com/react/-/react-16.6.3.tgz#25d77c91911d6bbdd23db41e70fb094cc1e0871c"
integrity sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
@@ -5497,7 +5485,6 @@ safe-regex@^1.1.0:
"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
version "2.1.2"
resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
sass-graph@^2.2.4:
version "2.2.4"
@@ -5526,7 +5513,6 @@ sax@^1.2.4:
scheduler@^0.11.2:
version "0.11.3"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.3.tgz#b5769b90cf8b1464f3f3cfcafe8e3cd7555a2d6b"
integrity sha512-i9X9VRRVZDd3xZw10NY5Z2cVMbdYg6gqFecfj79USv1CFN+YrJ3gIPRKf1qlY+Sxly4djoKdfx1T+m9dnRB8kQ==
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"