diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 6b3db5b..e5e6050 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -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); diff --git a/src/components/SourceOverlay.jsx b/src/components/SourceOverlay.jsx index c5fc864..2855038 100644 --- a/src/components/SourceOverlay.jsx +++ b/src/components/SourceOverlay.jsx @@ -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 ( -
- -
+ } + unloader={} + /> ) } @@ -56,6 +60,7 @@ class SourceOverlay extends React.Component { } render() { + const {id, url, title, date, type, affil_1, affil_2} = this.props.source return (
@@ -68,6 +73,17 @@ class SourceOverlay extends React.Component {
{this._renderSwitch()}
+
+
+ {id ?
{id}
: null} + {title?
{title}
: null} +
+ {type ?
Type: {type}
: null} + {date ?
Date:{date}
: null} +
+ {url ? : null} +
+
) diff --git a/src/components/presentational/NoSource.js b/src/components/presentational/NoSource.js new file mode 100644 index 0000000..85cb542 --- /dev/null +++ b/src/components/presentational/NoSource.js @@ -0,0 +1,22 @@ +import React from 'react'; + +const NoSource = ({ failedUrls }) => { + return ( +
+
+ + error + +
No media found.
+
+
+ The following URLs were tried: +
+ +
+ ) +} + +export default NoSource; diff --git a/src/scss/mediaoverlay.scss b/src/scss/mediaoverlay.scss index 8ebd864..77b48f2 100644 --- a/src/scss/mediaoverlay.scss +++ b/src/scss/mediaoverlay.scss @@ -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; + } +} diff --git a/yarn.lock b/yarn.lock index fc7cad3..19f5926 100644 --- a/yarn.lock +++ b/yarn.lock @@ -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"