From 92a5c08b223ea51555417a6672975fa3a46c6f91 Mon Sep 17 00:00:00 2001 From: Franc Camps-Febrer Date: Wed, 16 Jan 2019 13:06:28 -0500 Subject: [PATCH 01/13] Make images in source overlay as gallery --- src/components/SourceOverlay.jsx | 131 +++++++++++++++++++------------ src/scss/mediaoverlay.scss | 50 ++++++++++-- 2 files changed, 123 insertions(+), 58 deletions(-) diff --git a/src/components/SourceOverlay.jsx b/src/components/SourceOverlay.jsx index ea94e2d..393576c 100644 --- a/src/components/SourceOverlay.jsx +++ b/src/components/SourceOverlay.jsx @@ -6,27 +6,36 @@ import Spinner from './presentational/Spinner' import NoSource from './presentational/NoSource' // TODO: move render functions into presentational components -function SourceOverlay ({ source, onCancel }) { - function renderError() { +class SourceOverlay extends React.Component { + + constructor() { + super() + + this.state = { + idx: 0 + } + } + + renderError() { return ( ) } - function renderImage(path) { + renderImage(path) { return (
} - unloader={} + unloader={} /> ) } - function renderVideo(path) { + renderVideo(path) { // NB: assume only one video return (
@@ -39,26 +48,26 @@ function SourceOverlay ({ source, onCancel }) { ) } - function renderText(path) { + renderText(path) { return (
} - unloader={renderError()} + unloader={() => this.renderError()} />
) } - function renderNoSupport(ext) { + renderNoSupport(ext) { return ( ) } - function toMedia(path) { + toMedia(path) { let type; switch (true) { case /\.(png|jpg)$/.test(path): @@ -73,7 +82,7 @@ function SourceOverlay ({ source, onCancel }) { return { type, path } } - function getTypeCounts(media) { + getTypeCounts(media) { let counts = { Image: 0, Video: 0, Text: 0 } media.forEach(m => { counts[m.type] += 1 @@ -81,21 +90,21 @@ function SourceOverlay ({ source, onCancel }) { return counts } - function _renderPath(media) { + _renderPath(media) { const { path, type } = media switch (type) { case 'Image': - return renderImage(path) + return this.renderImage(path) case 'Video': - return renderVideo(path) + return this.renderVideo(path) case 'Text': - return renderText(path) + return this.renderText(path) default: - return renderNoSupport(path.split('.')[1]) + return this.renderNoSupport(path.split('.')[1]) } } - function _renderCounts(counts) { + _renderCounts(counts) { const strFor = type => counts[type] > 0 ? `${counts[type]} ${type.toLowerCase()}${counts[type] > 1 ? 's': ''}` @@ -113,52 +122,72 @@ function SourceOverlay ({ source, onCancel }) { ) } - function _renderContent(media) { + _renderContent(media) { + const el = document.querySelector(`.source-media-gallery`); + const shiftW = (!!el) ? el.getBoundingClientRect().width : 0; return ( - - {media.map(_renderPath)} - +
+ {media.map((m) => this._renderPath(m))} +
) } - if (typeof(source) !== 'object') { - return renderError() + onShiftGallery(shift) { + if (this.state.idx === 0 && shift === -1) return; + if (this.state.idx - 1 === this.props.source.paths.length && shift === 1) return + this.setState({ idx: this.state.idx+shift }); } - const {id, url, title, paths, date, type, desc} = source - const media = paths.map(toMedia) - const counts = getTypeCounts(media) + _renderControls() { + return ( + +
this.onShiftGallery(-1)}>
+
this.onShiftGallery(1)}>
+ + ); + } - return ( -
-
{ e.stopPropagation(); }}> -
-
- + render () { + if (typeof(this.props.source) !== 'object') { + return this.renderError() + } + 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(); }}> +
+
+ +
+
{this.props.source.title}
-
{source.title}
-
-
- {_renderContent(media)} -
-
-
- {title?

{title}

: null} -
{_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} +
+ {(media.length > 1) ? this._renderControls() : ''} + {this._renderContent(media)} +
+
+
+

{`${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} +
-
- ) + ) + + } } export default SourceOverlay diff --git a/src/scss/mediaoverlay.scss b/src/scss/mediaoverlay.scss index d48a851..47b2093 100644 --- a/src/scss/mediaoverlay.scss +++ b/src/scss/mediaoverlay.scss @@ -65,6 +65,19 @@ $header-inset: 10px; padding-right: $padding; font-family: "Lato", Helvetica, sans-serif; } + .back, .next { + position: absolute; + width: 30px; + height: 30px; + background: $darkgrey; + color: $offwhite; + cursor: pointer; + box-shadow: 0 19px 19px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); + svg path { fill: $offwhite; } + } + + .back { left: 10px; svg path { transform: translate(17px,15px)rotate(-90deg)} } + .next { right: 10px; svg path { transform: translate(17px,15px)rotate(90deg)} } } .mo-header { @@ -95,11 +108,16 @@ $header-inset: 10px; .mo-media-container { background-color: rgba(239, 239, 239, 0.9); + flex: 1; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + overflow-x: hidden; box-sizing: border-box; - min-width: 100%; + width: 100%; max-height: 60vh; padding: 20px; - overflow-y: auto; font-family: "Lato", Helvetica, sans-serif; .media-player { @@ -223,16 +241,34 @@ $header-inset: 10px; } } -.source-image-container, .source-text-container { - padding: $padding; - display: inline-block; +.source-media-gallery { + display: flex; + flex-direction: row; + height: 100%; + transition: transform 0.6s ease 0s; +} + +.source-text-container { + padding: 0 10em; + display: flex; + justify-content: center; align-items: center; } +.source-image-container, .media-player { + display: flex; + justify-content: center; + width: calc(100% - 20px); + height: 100%; + min-width: calc(100% - 20px); + margin: 0 10px; + background: $lightwhite; + border-radius: 2px; +} + .source-image, .source-video { max-width: calc(100% - 20px); - max-height: 350px !important; - // height: 100%; + max-height: calc(100% - 20px); padding: 10px; } From f93a1feccc1403ca245c7cafad038c580518f609 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Thu, 17 Jan 2019 10:35:42 +0000 Subject: [PATCH 02/13] add scroll for cardstack overflow --- src/scss/cardstack.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scss/cardstack.scss b/src/scss/cardstack.scss index a79a44e..39c5f4a 100644 --- a/src/scss/cardstack.scss +++ b/src/scss/cardstack.scss @@ -9,9 +9,9 @@ $timeline-height: 170px; position: absolute; top: 10px; right: 10px; - max-height: calc(100% - 208px); + max-height: calc(100% - 180px); height: auto; - overflow: hidden; + overflow-y: scroll; box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); z-index: $header; color: white; From bf012ebed926bde24b71e5172782b2e4c31315e8 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Thu, 17 Jan 2019 10:37:21 +0000 Subject: [PATCH 03/13] move narrative header across to match cardstack --- src/scss/narrativecard.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/scss/narrativecard.scss b/src/scss/narrativecard.scss index 9bf86a4..a38a09c 100644 --- a/src/scss/narrativecard.scss +++ b/src/scss/narrativecard.scss @@ -8,7 +8,7 @@ NARRATIVE INFO position: fixed; top: 30px; left: auto; - right: 10px; + right: 25px; height: 170px; width: $narrative-info-width; box-sizing: border-box; @@ -142,7 +142,7 @@ NARRATIVE INFO position: fixed; padding: 2px 5px 0 5px; // right: $narrative-info-width - 15px - 10px; - right: 10px; + right: 25px; top: 5px; width: $narrative-info-width - 10px - 2px; // width: 15px; From 87f2f5c7962e89412a4149519b0aba310179b4bd Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Thu, 17 Jan 2019 10:41:53 +0000 Subject: [PATCH 04/13] fix sites toggle hover states --- src/components/ToolbarBottomActions.jsx | 2 +- src/components/presentational/Icons/SitesIcon.js | 7 +++++-- src/scss/toolbar.scss | 4 ++++ 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/src/components/ToolbarBottomActions.jsx b/src/components/ToolbarBottomActions.jsx index 7e20bd2..e20a4be 100644 --- a/src/components/ToolbarBottomActions.jsx +++ b/src/components/ToolbarBottomActions.jsx @@ -14,7 +14,7 @@ function ToolbarBottomActions (props) { {/* isEnabled={this.props.viewFilters.routes} */} {/* /> */} {/* { - const classes = (isEnabled) ? 'action-button enabled' : 'action-button disabled'; +const SitesIcon = ({ isActive, isDisabled, onClickHandler }) => { + let classes = (isActive) ? 'action-button enabled' : 'action-button'; + if (isDisabled) { + classes = 'action-button disabled' + } return (
) } else { diff --git a/src/scss/cardstack.scss b/src/scss/cardstack.scss index 39c5f4a..230d63c 100644 --- a/src/scss/cardstack.scss +++ b/src/scss/cardstack.scss @@ -2,7 +2,7 @@ @import 'card'; $card-width: 370px; -$narrative-info-max-height: 170px; +$narrative-info-max-height: 200px; $timeline-height: 170px; .card-stack { diff --git a/src/scss/narrativecard.scss b/src/scss/narrativecard.scss index a38a09c..adf5e8b 100644 --- a/src/scss/narrativecard.scss +++ b/src/scss/narrativecard.scss @@ -1,4 +1,4 @@ -$narrative-info-width: 370px; +$narrative-info-width: 386px; $timeline-height: 170px; /* @@ -8,8 +8,8 @@ NARRATIVE INFO position: fixed; top: 30px; left: auto; - right: 25px; - height: 170px; + right: 9px; + height: 205px; width: $narrative-info-width; box-sizing: border-box; max-height: calc(100% - 250px); @@ -39,7 +39,8 @@ NARRATIVE INFO } .narrative-info-desc { - overflow: auto; + height: 153px; + overflow-y: auto; } p { @@ -117,7 +118,7 @@ NARRATIVE INFO &.right { // right: calc(#{$narrative-info-width} + 10px); - right: 10px; + right: 25px; } .material-icons { @@ -142,7 +143,7 @@ NARRATIVE INFO position: fixed; padding: 2px 5px 0 5px; // right: $narrative-info-width - 15px - 10px; - right: 25px; + right: 10px; top: 5px; width: $narrative-info-width - 10px - 2px; // width: 15px; From faf3ac576e8fcff60e4818d1e24d8efb02608d46 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Thu, 17 Jan 2019 14:30:15 +0000 Subject: [PATCH 09/13] adjust media styling, rm timeline text --- src/components/Dashboard.jsx | 3 +- src/components/SourceOverlay.jsx | 33 +++++++++++-------- .../presentational/TimelineLabels.js | 32 +++++++++--------- src/js/utilities.js | 14 ++++---- src/scss/mediaoverlay.scss | 29 ++++++++++++---- 5 files changed, 68 insertions(+), 43 deletions(-) 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; } From c2c78f6b988106192aec55d471334372815d14f3 Mon Sep 17 00:00:00 2001 From: Franc Camps-Febrer Date: Thu, 17 Jan 2019 10:38:53 -0500 Subject: [PATCH 10/13] Style video and text --- src/scss/mediaoverlay.scss | 39 +++++++++++++++++++++++++++++++++----- yarn.lock | 1 + 2 files changed, 35 insertions(+), 5 deletions(-) diff --git a/src/scss/mediaoverlay.scss b/src/scss/mediaoverlay.scss index 8ed8b8e..b2b4d9c 100644 --- a/src/scss/mediaoverlay.scss +++ b/src/scss/mediaoverlay.scss @@ -259,15 +259,27 @@ $header-inset: 10px; flex-direction: row; height: 100%; transition: transform 0.6s ease 0s; + width: 100%; // min-width: $panel-width - 30px; // min-height: $panel-height; } .source-text-container { - padding: 0 10em; + padding: 20px; display: flex; justify-content: center; - align-items: center; + background: $lightwhite; + box-sizing: border-box; + padding: 0 calc(50% - 400px); + overflow-y: scroll; + font-family: 'Merriweather', Georgia, serif; + line-height: 1.5em; + + a { + color: $darkgrey; + border-bottom: 1px solid $red; + &:hover { border-bottom: 1px solid $darkgrey; color: $darkgrey; } + } } .source-image-container, .media-player { @@ -281,12 +293,29 @@ $header-inset: 10px; border-radius: 2px; } +.media-player { + box-sizing: border-box; + width: 100%; + min-width: 100%; + max-width: 100%; + height: 100%; + min-height: 100%; + max-height: 100%; + padding: 20px 10%; + align-self: center; +} + .source-image, .source-video { max-width: calc(100% - 20px); max-height: calc(100% - 20px); - padding: 10px; + padding: 0px; + font-family: 'Lato', Helvetica, sans-serif; } -.media-player { - // overflow-y: hidden; +.video-react .video-react-progress-control { + align-self: center; } + +.video-react .video-react-control { + min-height: 100%; +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 7b7a92e..2f8e62f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5062,6 +5062,7 @@ quick-lru@^1.0.0: ramda@^0.26.1: version "0.26.1" resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06" + integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ== randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5: version "2.0.6" From daba3749584345d756fcfcdff07514291025e44c Mon Sep 17 00:00:00 2001 From: Franc Camps-Febrer Date: Thu, 17 Jan 2019 11:08:43 -0500 Subject: [PATCH 11/13] Style media gallery controls --- src/components/Md.jsx | 2 +- src/components/SourceOverlay.jsx | 15 ++++++++++----- src/scss/mediaoverlay.scss | 31 ++++++++++++++++++++++++++----- 3 files changed, 37 insertions(+), 11 deletions(-) diff --git a/src/components/Md.jsx b/src/components/Md.jsx index eefb1ba..95060e0 100644 --- a/src/components/Md.jsx +++ b/src/components/Md.jsx @@ -25,7 +25,7 @@ class Md extends React.Component { render() { if (this.state.md && !this.state.error) { return ( -
+
) } else if (this.state.error) { return this.props.unloader ||
Error: couldn't load source
diff --git a/src/components/SourceOverlay.jsx b/src/components/SourceOverlay.jsx index 4a6bb31..9191307 100644 --- a/src/components/SourceOverlay.jsx +++ b/src/components/SourceOverlay.jsx @@ -139,11 +139,16 @@ class SourceOverlay extends React.Component { } _renderControls() { + if (this.props.source.paths.length > 1) { + return ( +
+
this.onShiftGallery(-1)}>
+
this.onShiftGallery(1)}>
+
+ ); + } return ( - -
this.onShiftGallery(-1)}>
-
this.onShiftGallery(1)}>
- +
); } @@ -165,8 +170,8 @@ class SourceOverlay extends React.Component {
{this.props.source.title}
- {(media.length > 1) ? this._renderControls() : ''} {this._renderContent(media)} + {this._renderControls()}
diff --git a/src/scss/mediaoverlay.scss b/src/scss/mediaoverlay.scss index b2b4d9c..527058b 100644 --- a/src/scss/mediaoverlay.scss +++ b/src/scss/mediaoverlay.scss @@ -71,7 +71,6 @@ $header-inset: 10px; font-family: "Lato", Helvetica, sans-serif; } .back, .next { - position: absolute; width: 30px; height: 30px; background: $darkgrey; @@ -79,10 +78,18 @@ $header-inset: 10px; cursor: pointer; box-shadow: 0 19px 19px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); svg path { fill: $offwhite; } + z-index: 1; } - .back { left: 10px; svg path { transform: translate(17px,15px)rotate(-90deg)} } - .next { right: 10px; svg path { transform: translate(17px,15px)rotate(90deg)} } + .back { + left: 10px; + svg path { transform: translate(17px,15px)rotate(-90deg)} + } + .next { + margin-left: calc(100% - 60px); + right: 10px; + svg path { transform: translate(17px,15px)rotate(90deg)} + } } .mo-header { @@ -114,10 +121,11 @@ $header-inset: 10px; .mo-media-container { background-color: rgba(239, 239, 239, 0.9); flex: 1; - display: flex; + /*display: flex; flex-direction: row; justify-content: center; - align-items: center; + align-items: center;*/ + display: inline-block; overflow-x: hidden; box-sizing: border-box; width: 100%; @@ -135,6 +143,14 @@ $header-inset: 10px; flex-direction: column; } + .media-gallery-controls { + height: 100%; + display: flex; + justify-content: center; + align-items: center; + margin-top: -50%; + } + // NB: topcushion seems to be necessary with certain overflows.. &.topcushion { padding-top: 150px; @@ -280,6 +296,11 @@ $header-inset: 10px; border-bottom: 1px solid $red; &:hover { border-bottom: 1px solid $darkgrey; color: $darkgrey; } } + + .md-container { + width: 100%; + overflow-wrap: break-word; + } } .source-image-container, .media-player { From b9aec0381660dadde02c0c24f5aa41484086480f Mon Sep 17 00:00:00 2001 From: Franc Camps-Febrer Date: Thu, 17 Jan 2019 11:58:09 -0500 Subject: [PATCH 12/13] Fix rebase conflicts --- src/scss/mediaoverlay.scss | 48 ++------------------------------------ 1 file changed, 2 insertions(+), 46 deletions(-) diff --git a/src/scss/mediaoverlay.scss b/src/scss/mediaoverlay.scss index 527058b..0bad5a2 100644 --- a/src/scss/mediaoverlay.scss +++ b/src/scss/mediaoverlay.scss @@ -2,6 +2,7 @@ $panel-width: 1000px; $panel-height: 700px; $vimeo-width: $panel-width - 100; $vimeo-height: $panel-height / 2; + $padding: 20px; $header-inset: 10px; @@ -20,6 +21,7 @@ $header-inset: 10px; } .mo-container { + background-color: rgba(239, 239, 239, 0.9); // max-width: $panel-width; // min-width: $panel-width; // max-height: $panel-height; @@ -27,49 +29,11 @@ $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); - .mo-media-container { - flex: 1; - display: flex; - flex-direction: column; - align-items: center; - } -} - -.mo-header { - min-height: 42px; - max-height: 42px; - margin-bottom: 2px; - border-radius: 2px; - width: 100%; - display: flex; - flex-direction: row; - background-color: black; - color: white; - - .mo-header-close { - display: flex; - justify-content: center; - align-items: center; - margin-left: $header-inset + 8px; - } - - .mo-header-text { - flex: 1; - display: flex; - align-items: center; - justify-content: flex-end; - padding-right: $padding; - font-family: "Lato", Helvetica, sans-serif; - } .back, .next { width: 30px; height: 30px; @@ -119,7 +83,6 @@ $header-inset: 10px; } .mo-media-container { - background-color: rgba(239, 239, 239, 0.9); flex: 1; /*display: flex; flex-direction: row; @@ -158,13 +121,6 @@ $header-inset: 10px; } .mo-meta-container { - background-color: rgba(239, 239, 239, 0.9); - display: flex; - justify-content: center; - box-sizing: border-box; - min-height: 100px; - min-width: $panel-width; - max-width: $panel-height; display: flex; flex-direction: column; justify-content: center; From ed57ff82e86703664e134e0f6b2e0a35a068af23 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Thu, 17 Jan 2019 17:12:09 +0000 Subject: [PATCH 13/13] return lost import --- src/reducers/app.js | 59 +++++++++++++++++++++++---------------------- 1 file changed, 30 insertions(+), 29 deletions(-) diff --git a/src/reducers/app.js b/src/reducers/app.js index b7164ea..43e39aa 100644 --- a/src/reducers/app.js +++ b/src/reducers/app.js @@ -1,4 +1,5 @@ import initial from '../store/initial.js' +import { parseDate } from '../js/utilities' import { UPDATE_HIGHLIGHTED, @@ -35,49 +36,49 @@ function updateSelected(appState, action) { } function updateNarrative(appState, action) { - let minTime = appState.filters.timerange[0]; - let maxTime = appState.filters.timerange[1]; + let minTime = appState.filters.timerange[0] + let maxTime = appState.filters.timerange[1] - let cornerBound0 = [180, 180]; - let cornerBound1 = [-180, -180]; + let cornerBound0 = [180, 180] + let cornerBound1 = [-180, -180] // Compute narrative time range and map bounds if (!!action.narrative) { - minTime = parseDate('2100-01-01T00:00:00'); - maxTime = parseDate('1900-01-01T00:00:00'); + minTime = parseDate('2100-01-01T00:00:00') + maxTime = parseDate('1900-01-01T00:00:00') // Find max and mins coordinates of narrative events action.narrative.steps.forEach(step => { - const stepTime = parseDate(step.timestamp); - if (stepTime < minTime) minTime = stepTime; - if (stepTime > maxTime) maxTime = stepTime; + const stepTime = parseDate(step.timestamp) + if (stepTime < minTime) minTime = stepTime + if (stepTime > maxTime) maxTime = stepTime if (!!step.longitude && !!step.latitude) { - if (+step.longitude < cornerBound0[1]) cornerBound0[1] = +step.longitude; - if (+step.longitude > cornerBound1[1]) cornerBound1[1] = +step.longitude; - if (+step.latitude < cornerBound0[0]) cornerBound0[0] = +step.latitude; - if (+step.latitude > cornerBound1[0]) cornerBound1[0] = +step.latitude; + if (+step.longitude < cornerBound0[1]) cornerBound0[1] = +step.longitude + if (+step.longitude > cornerBound1[1]) cornerBound1[1] = +step.longitude + if (+step.latitude < cornerBound0[0]) cornerBound0[0] = +step.latitude + if (+step.latitude > cornerBound1[0]) cornerBound1[0] = +step.latitude } - }); + }) // Adjust bounds to center around first event, while keeping visible all others // Takes first event, finds max ditance with first attempt bounds, and use this max distance // on the other side, both in latitude and longitude - const first = action.narrative.steps[0]; + const first = action.narrative.steps[0] if (!!first.longitude && !!first.latitude) { - const firstToLong0 = Math.abs(+first.longitude - cornerBound0[1]); - const firstToLong1 = Math.abs(+first.longitude - cornerBound1[1]); - const firstToLat0 = Math.abs(+first.latitude - cornerBound0[0]); - const firstToLat1 = Math.abs(+first.latitude - cornerBound1[0]); + const firstToLong0 = Math.abs(+first.longitude - cornerBound0[1]) + const firstToLong1 = Math.abs(+first.longitude - cornerBound1[1]) + const firstToLat0 = Math.abs(+first.latitude - cornerBound0[0]) + const firstToLat1 = Math.abs(+first.latitude - cornerBound1[0]) - if (firstToLong0 > firstToLong1) cornerBound1[1] = +first.longitude + firstToLong0; - if (firstToLong0 < firstToLong1) cornerBound0[1] = +first.longitude - firstToLong1; - if (firstToLat0 > firstToLat1) cornerBound1[0] = +first.latitude + firstToLat0; - if (firstToLat0 < firstToLat1) cornerBound0[0] = +first.latitude - firstToLat1; + if (firstToLong0 > firstToLong1) cornerBound1[1] = +first.longitude + firstToLong0 + if (firstToLong0 < firstToLong1) cornerBound0[1] = +first.longitude - firstToLong1 + if (firstToLat0 > firstToLat1) cornerBound1[0] = +first.latitude + firstToLat0 + if (firstToLat0 < firstToLat1) cornerBound0[0] = +first.latitude - firstToLat1 } - + // Add some buffer on both sides of the time extent - minTime = new Date(minTime.getTime() - Math.abs((maxTime - minTime) / 10)); - maxTime = new Date(maxTime.getTime() + Math.abs((maxTime - minTime) / 10)); + minTime = new Date(minTime.getTime() - Math.abs((maxTime - minTime) / 10)) + maxTime = new Date(maxTime.getTime() + Math.abs((maxTime - minTime) / 10)) } return { @@ -138,14 +139,14 @@ function updateTagFilters(appState, action) { function updateCategoryFilters(appState, action) { const categoryFilters = appState.filters.categories.slice(0) - const catFilter = categoryFilters.find(cF => cF.category === action.category.category); + const catFilter = categoryFilters.find(cF => cF.category === action.category.category) if (!catFilter) { categoryFilters.push(action.category) } else { - catFilter.active = (!!action.category.active); + catFilter.active = (!!action.category.active) } - + return Object.assign({}, appState, { filters: Object.assign({}, appState.filters, {