adjust media styling, rm timeline text

src/components/Dashboard.jsx

@@ -14,7 +14,7 @@ import InfoPopUp from './InfoPopup.jsx'
 import Timeline from './Timeline.jsx'
 import Notification from './Notification.jsx'
 
-import { parseDate } from '../js/utilities'
+import { parseDate, injectSource } from '../js/utilities'
 
 class Dashboard extends React.Component {
   constructor(props) {
@@ -171,5 +171,6 @@ function mapDispatchToProps(dispatch) {
 
 export default connect(
   state => state,
+  // state => injectSource("Youtube - Novodvirske Tank Separatist Patrol Video"),
   mapDispatchToProps,
 )(Dashboard)

src/components/SourceOverlay.jsx

@@ -154,7 +154,7 @@ class SourceOverlay extends React.Component {
     const {id, url, title, paths, date, type, desc} = this.props.source
     const media = paths.map(this.toMedia)
     const counts = this.getTypeCounts(media)
-  
+
     return (
       <div className="mo-overlay" onClick={this.props.onCancel}>
         <div className="mo-container" onClick={(e) => { e.stopPropagation(); }}>
@@ -169,24 +169,31 @@ class SourceOverlay extends React.Component {
             {this._renderContent(media)}
           </div>
           <div className="mo-meta-container">
-            <div className="mo-box">
-              <p style={{ textAlign: 'center'}}>{`${this.state.idx+1} / ${paths.length}`}</p>
+            <div className="mo-box-title">
+              <p>{`${this.state.idx+1} / ${paths.length}`}</p>
               {title? <p><b>{title}</b></p> : null}
-              <div>{this._renderCounts(counts)}</div>
-              {type ? <h4>Media type</h4> : null}
-              {type ? <p><i className="material-icons left">perm_media</i>{type}</p> : null}
-              {date ? <h4>Date</h4> : null}
-              {date ? <p><i className="material-icons left">today</i>{date}</p>: null}
-              {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}
-              {desc ? <hr /> : null}
-              {desc ? <div>{desc}</div> : null}
+              <div>{desc}</div>
+            </div>
+
+            <div className="mo-box">
+              <div>
+                {type ? <h4>Media type</h4> : null}
+                {type ? <p><i className="material-icons left">perm_media</i>{type}</p> : null}
+              </div>
+              <div>
+                {date ? <h4>Date</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>
         </div>
       </div>
     )
-  
+
   }
 }
 

src/components/presentational/TimelineLabels.js

@@ -22,23 +22,23 @@ const TimelineLabels = ({ dims, timelabels }) => {
         y2="20"
       >
       </line>
-      <text
-        class="timeLabel0 timeLabel"
-        x="5"
-        y="15"
-      >
-        {formatterWithYear(timelabels[0])}
-      </text>
-      <text
-        class="timelabelF timeLabel"
-        x={dims.width - dims.width_controls - 5}
-        y="15"
-        style={{ textAnchor: 'end' }}
-      >
-        {formatterWithYear(timelabels[1])}
-      </text>      
+      {/* <text */}
+      {/*   class="timeLabel0 timeLabel" */}
+      {/*   x="5" */}
+      {/*   y="15" */}
+      {/* > */}
+      {/*   {formatterWithYear(timelabels[0])} */}
+      {/* </text> */}
+      {/* <text */}
+      {/*   class="timelabelF timeLabel" */}
+      {/*   x={dims.width - dims.width_controls - 5} */}
+      {/*   y="15" */}
+      {/*   style={{ textAnchor: 'end' }} */}
+      {/* > */}
+      {/*   {formatterWithYear(timelabels[1])} */}
+      {/* </text> */}
     </g>
   )
 }
 
-export default TimelineLabels;
+export default TimelineLabels;

src/js/utilities.js

@@ -108,13 +108,15 @@ export function insetSourceFrom(allSources) {
  * view that source modal by default
  */
 export function injectSource(id) {
-  return state => ({
-    ...state,
-    app: {
-      ...state.app,
-      source: state.domain.sources[id]
+  return state => {
+    return {
+      ...state,
+      app: {
+        ...state.app,
+        source: state.domain.sources[id]
+      }
     }
-  })
+  }
 }
 
 export function urlFromEnv(ext) {

src/scss/mediaoverlay.scss

@@ -1,4 +1,4 @@
-$panel-width: 800px;
+$panel-width: 1000px;
 $panel-height: 700px;
 $vimeo-width: $panel-width - 100;
 $vimeo-height: $panel-height / 2;
@@ -27,7 +27,12 @@ $header-inset: 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
+<<<<<<< HEAD
   max-height: 80vh;
+=======
+  height: 80vh;
+  width: $panel-width;
+>>>>>>> adjust media styling, rm timeline text
   max-width: 90vw;
   box-shadow: 0 19px 19px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
 
@@ -112,7 +117,7 @@ $header-inset: 10px;
   display: flex;
   flex-direction: row;
   justify-content: center;
-  align-items: center;  
+  align-items: center;
   overflow-x: hidden;
   box-sizing: border-box;
   width: 100%;
@@ -145,15 +150,23 @@ $header-inset: 10px;
   min-width: $panel-width;
   max-width: $panel-height;
   display: flex;
-  justify-content: center;  
+  flex-direction: column;
+  justify-content: center;
   box-sizing: border-box;
   min-height: 100px;
   width: 100%;
   padding: $padding;
 
+  .mo-box-title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
   .mo-box {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    justify-content: space-around;
     max-width: $panel-width;
     width: 100%;
     padding: $padding 0;
@@ -166,7 +179,7 @@ $header-inset: 10px;
       text-transform: uppercase;
       font-size: $xsmall;
       color: $darkwhite;
-      font-weight: 100;      
+      font-weight: 100;
     }
 
     p {
@@ -178,7 +191,7 @@ $header-inset: 10px;
       font-size: $normal;
       color: $darkwhite;
       margin-right: 5px;
-    }      
+    }
 
     a {
       font-size: $large;
@@ -246,6 +259,8 @@ $header-inset: 10px;
   flex-direction: row;
   height: 100%;
   transition: transform 0.6s ease 0s;
+  // min-width: $panel-width - 30px;
+  // min-height: $panel-height;
 }
 
 .source-text-container {
@@ -273,5 +288,5 @@ $header-inset: 10px;
 }
 
 .media-player {
-  overflow-y: hidden;
+  // overflow-y: hidden;
 }