fmt source display: photo

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);

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 (
-      <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>
     )

src/components/presentational/NoSource.js

@@ -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;

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;
+  }
+}