diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 5b97b57..5817f83 100644 --- a/src/components/Dashboard.jsx +++ b/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) diff --git a/src/components/SourceOverlay.jsx b/src/components/SourceOverlay.jsx index 393576c..4a6bb31 100644 --- a/src/components/SourceOverlay.jsx +++ b/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 (
{ e.stopPropagation(); }}> @@ -169,24 +169,31 @@ class SourceOverlay extends React.Component { {this._renderContent(media)}
-
-

{`${this.state.idx+1} / ${paths.length}`}

+
+

{`${this.state.idx+1} / ${paths.length}`}

{title?

{title}

: null} -
{this._renderCounts(counts)}
- {type ?

Media type

: null} - {type ?

perm_media{type}

: null} - {date ?

Date

: null} - {date ?

today{date}

: null} - {url ?

Link

: null} - {url ? linkLink to original URL : null} - {desc ?
: null} - {desc ?
{desc}
: null} +
{desc}
+
+ +
+
+ {type ?

Media type

: null} + {type ?

perm_media{type}

: null} +
+
+ {date ?

Date

: null} + {date ?

today{date}

: null} +
+
+ {url ?

Link

: null} + {url ? linkLink to original URL : null} +
) - + } } diff --git a/src/components/presentational/TimelineLabels.js b/src/components/presentational/TimelineLabels.js index 3f165aa..36466ba 100644 --- a/src/components/presentational/TimelineLabels.js +++ b/src/components/presentational/TimelineLabels.js @@ -22,23 +22,23 @@ const TimelineLabels = ({ dims, timelabels }) => { y2="20" > - - {formatterWithYear(timelabels[0])} - - - {formatterWithYear(timelabels[1])} - + {/* */} + {/* {formatterWithYear(timelabels[0])} */} + {/* */} + {/* */} + {/* {formatterWithYear(timelabels[1])} */} + {/* */} ) } -export default TimelineLabels; \ No newline at end of file +export default TimelineLabels; diff --git a/src/js/utilities.js b/src/js/utilities.js index 5568b17..dc242c3 100644 --- a/src/js/utilities.js +++ b/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) { diff --git a/src/scss/mediaoverlay.scss b/src/scss/mediaoverlay.scss index 47b2093..8ed8b8e 100644 --- a/src/scss/mediaoverlay.scss +++ b/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; }