From 1db2fe219a9bcad013e98ed5d458a32299f4753c Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Wed, 13 Feb 2019 16:13:54 +0000 Subject: [PATCH 1/4] restructure overlay --- src/components/App.jsx | 6 +- src/components/{Dashboard.jsx => Layout.js} | 6 +- src/components/Overlay/Content.js | 61 +++++ src/components/Overlay/Controls.js | 36 +++ .../LoadingOverlay.js => Overlay/Loading.js} | 0 src/components/{Md.jsx => Overlay/Md.js} | 0 src/components/Overlay/Media.js | 77 +++++++ src/components/SourceOverlay.jsx | 216 ------------------ src/js/utilities.js | 15 ++ 9 files changed, 194 insertions(+), 223 deletions(-) rename src/components/{Dashboard.jsx => Layout.js} (97%) create mode 100644 src/components/Overlay/Content.js create mode 100644 src/components/Overlay/Controls.js rename src/components/{presentational/LoadingOverlay.js => Overlay/Loading.js} (100%) rename src/components/{Md.jsx => Overlay/Md.js} (100%) create mode 100644 src/components/Overlay/Media.js delete mode 100644 src/components/SourceOverlay.jsx diff --git a/src/components/App.jsx b/src/components/App.jsx index ac12e14..f876253 100644 --- a/src/components/App.jsx +++ b/src/components/App.jsx @@ -1,13 +1,11 @@ import '../scss/main.scss' import React from 'react' -import Dashboard from './Dashboard.jsx' +import Layout from './Layout' class App extends React.Component { render () { return ( -
- -
+ ) } } diff --git a/src/components/Dashboard.jsx b/src/components/Layout.js similarity index 97% rename from src/components/Dashboard.jsx rename to src/components/Layout.js index 133b744..8a26dd8 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Layout.js @@ -4,8 +4,8 @@ import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import * as actions from '../actions' -import SourceOverlay from './SourceOverlay.jsx' -import LoadingOverlay from './presentational/LoadingOverlay' +import MediaOverlay from './Overlay/Media' +import LoadingOverlay from './Overlay/Loading' import Map from './Map.jsx' import Toolbar from './Toolbar.jsx' import CardStack from './CardStack.jsx' @@ -171,7 +171,7 @@ class Dashboard extends React.Component { onToggle={actions.markNotificationsRead} /> {app.source ? ( - { actions.updateSource(null) diff --git a/src/components/Overlay/Content.js b/src/components/Overlay/Content.js new file mode 100644 index 0000000..9c1db50 --- /dev/null +++ b/src/components/Overlay/Content.js @@ -0,0 +1,61 @@ +import React from 'react' +import { Player } from 'video-react' +import Img from 'react-image' +import Md from './Md' +import Spinner from '../presentational/Spinner' +import NoSource from '../presentational/NoSource' + +export default ({ media, viewIdx }) => { + const el = document.querySelector(`.source-media-gallery`) + const shiftW = el ? el.getBoundingClientRect().width : 0 + + function renderMedia (media) { + const { path, type } = media + switch (type) { + case 'Image': + return ( +
+
} + unloader={} + /> + + ) + case 'Video': + return ( +
+ +
+ ) + case 'Text': + return ( +
+ } + unloader={() => this.renderError()} + /> +
+ ) + default: + return ( + + ) + } + } + + return ( +
+ {media.map((m) => renderMedia(m))} +
+ ) +} diff --git a/src/components/Overlay/Controls.js b/src/components/Overlay/Controls.js new file mode 100644 index 0000000..e547123 --- /dev/null +++ b/src/components/Overlay/Controls.js @@ -0,0 +1,36 @@ +import React from 'react' + +export default ({ viewIdx, paths, onShiftHandler }) => { + const backArrow = viewIdx !== 0 ? ( +
onShiftHandler(-1)} + > + + + +
+ ) : null + const forwardArrow = viewIdx < paths.length - 1 ? ( +
onShiftHandler(1)} + > + + + +
+ ) : null + + if (paths.length > 1) { + return ( +
+ {backArrow} + {forwardArrow} +
+ ) + } + return ( +
+ ) +} diff --git a/src/components/presentational/LoadingOverlay.js b/src/components/Overlay/Loading.js similarity index 100% rename from src/components/presentational/LoadingOverlay.js rename to src/components/Overlay/Loading.js diff --git a/src/components/Md.jsx b/src/components/Overlay/Md.js similarity index 100% rename from src/components/Md.jsx rename to src/components/Overlay/Md.js diff --git a/src/components/Overlay/Media.js b/src/components/Overlay/Media.js new file mode 100644 index 0000000..158f8ae --- /dev/null +++ b/src/components/Overlay/Media.js @@ -0,0 +1,77 @@ +import React from 'react' +import Content from './Content' +import Controls from './Controls' +import { selectTypeFromPath } from '../../js/utilities' + +class SourceOverlay extends React.Component { + constructor () { + super() + this.state = { idx: 0 } + this.onShiftGallery = this.onShiftGallery.bind(this) + } + + getTypeCounts (media) { + return media.reduce( + (acc, vl) => { + acc[vl.type] += 1 + return acc + }, + { Image: 0, Video: 0, Text: 0 } + ) + } + + onShiftGallery (shift) { + // no more left + if (this.state.idx === 0 && shift === -1) return + // no more right + if (this.state.idx === this.props.source.paths.length - 1 && shift === 1) return + this.setState({ idx: this.state.idx + shift }) + } + + render () { + if (typeof (this.props.source) !== 'object') { + return this.renderError() + } + const { url, title, paths, date, type, desc } = this.props.source + + return ( +
+
e.stopPropagation()}> +
+
+ +
+
{this.props.source.title.substring(0, 200)}
+
+
+ + +
+
+
+ {title ?

{title}

: 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} +
+
+
+
+
+ ) + } +} + +export default SourceOverlay diff --git a/src/components/SourceOverlay.jsx b/src/components/SourceOverlay.jsx deleted file mode 100644 index 5b3a254..0000000 --- a/src/components/SourceOverlay.jsx +++ /dev/null @@ -1,216 +0,0 @@ -import React from 'react' -import Img from 'react-image' -import { Player } from 'video-react' -import Md from './Md.jsx' -import Spinner from './presentational/Spinner' -import NoSource from './presentational/NoSource' -// TODO: move render functions into presentational components - -class SourceOverlay extends React.Component { - constructor () { - super() - this.state = { idx: 0 } - } - - renderImage (path) { - return ( -
-
} - unloader={} - /> -
- ) - } - - renderVideo (path) { - return ( -
- -
- ) - } - - renderText (path) { - return ( -
- } - unloader={() => this.renderError()} - /> -
- ) - } - - renderNoSupport (ext) { - return ( - - ) - } - - toMedia (path) { - let type - switch (true) { - case /\.(png|jpg)$/.test(path): - type = 'Image'; break - case /\.(mp4)$/.test(path): - type = 'Video'; break - case /\.(md)$/.test(path): - type = 'Text'; break - default: - type = 'Unknown'; break - } - return { type, path } - } - - getTypeCounts (media) { - return media.reduce( - (acc, vl) => { - acc[vl.type] += 1 - return acc - }, - { Image: 0, Video: 0, Text: 0 } - ) - } - - _renderPath (media) { - const { path, type } = media - switch (type) { - case 'Image': - return this.renderImage(path) - case 'Video': - return this.renderVideo(path) - case 'Text': - return this.renderText(path) - default: - return this.renderNoSupport(path.split('.')[1]) - } - } - - _renderCounts (counts) { - const strFor = type => - counts[type] > 0 - ? `${counts[type]} ${type.toLowerCase()}${counts[type] > 1 ? 's' : ''}` - : '' - const img = strFor('Image') - const vid = strFor('Video') - const txt = strFor('Text') - - return ( -
- {img || ''} - {(img && vid) ? `, ${vid}` : (vid || '')} - {((img || vid) && txt) ? `, ${txt}` : (txt || '')} -
- ) - } - - _renderContent (media) { - const el = document.querySelector(`.source-media-gallery`) - const shiftW = el ? el.getBoundingClientRect().width : 0 - return ( -
- {media.map((m) => this._renderPath(m))} -
- ) - } - - onShiftGallery (shift) { - // no more left - if (this.state.idx === 0 && shift === -1) return - // no more right - if (this.state.idx === this.props.source.paths.length - 1 && shift === 1) return - this.setState({ idx: this.state.idx + shift }) - } - - _renderControls () { - const backArrow = this.state.idx !== 0 ? ( -
this.onShiftGallery(-1)} - > - - - -
- ) : null - const forwardArrow = this.state.idx < this.props.source.paths.length - 1 ? ( -
this.onShiftGallery(1)} - > - - - -
- ) : null - - if (this.props.source.paths.length > 1) { - return ( -
- {backArrow} - {forwardArrow} -
- ) - } - return ( -
- ) - } - - render () { - if (typeof (this.props.source) !== 'object') { - return this.renderError() - } - const { url, title, paths, date, type, desc } = this.props.source - const media = paths.map(this.toMedia) - - return ( -
-
e.stopPropagation()}> -
-
- -
-
{this.props.source.title.substring(0, 200)}
-
-
- {this._renderContent(media)} - {this._renderControls()} -
-
-
- {/*

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

*/} - {title ?

{title}

: 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} -
-
-
-
-
- ) - } -} - -export default SourceOverlay diff --git a/src/js/utilities.js b/src/js/utilities.js index 8d04788..00d9987 100644 --- a/src/js/utilities.js +++ b/src/js/utilities.js @@ -136,3 +136,18 @@ export function toggleFlagAC (flag) { } }) } + +export function selectTypeFromPath (path) { + let type + switch (true) { + case /\.(png|jpg)$/.test(path): + type = 'Image'; break + case /\.(mp4)$/.test(path): + type = 'Video'; break + case /\.(md)$/.test(path): + type = 'Text'; break + default: + type = 'Unknown'; break + } + return { type, path } +} From 44598d602f2da42e7eecc77fc649268afde0df38 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Wed, 13 Feb 2019 18:08:46 +0000 Subject: [PATCH 2/4] wip: restyling overlay --- src/components/Overlay/Media.js | 26 +- src/scss/main.scss | 2 +- src/scss/{sourceoverlay.scss => overlay.scss} | 223 +++++++++++------- 3 files changed, 160 insertions(+), 91 deletions(-) rename src/scss/{sourceoverlay.scss => overlay.scss} (54%) diff --git a/src/components/Overlay/Media.js b/src/components/Overlay/Media.js index 158f8ae..9fc73dc 100644 --- a/src/components/Overlay/Media.js +++ b/src/components/Overlay/Media.js @@ -33,20 +33,20 @@ class SourceOverlay extends React.Component { return this.renderError() } const { url, title, paths, date, type, desc } = this.props.source + const shortenedTitle = this.props.source.title.substring(0, 100) return (
-
e.stopPropagation()}> -
-
- -
-
{this.props.source.title.substring(0, 200)}
+
+
+ close
-
- - + +
+

{shortenedTitle}

+
+
{title ?

{title}

: null} @@ -69,6 +69,14 @@ class SourceOverlay extends React.Component {
+
e.stopPropagation()}> +
+ + +
+ +
+
) } diff --git a/src/scss/main.scss b/src/scss/main.scss index 21656c9..1c10ad5 100644 --- a/src/scss/main.scss +++ b/src/scss/main.scss @@ -7,7 +7,7 @@ @import 'header'; @import 'cardstack'; @import 'narrativecard'; -@import 'sourceoverlay'; +@import 'overlay'; @import 'map'; @import 'timeline'; @import 'tag-filters'; diff --git a/src/scss/sourceoverlay.scss b/src/scss/overlay.scss similarity index 54% rename from src/scss/sourceoverlay.scss rename to src/scss/overlay.scss index 6909eac..94bfddd 100644 --- a/src/scss/sourceoverlay.scss +++ b/src/scss/overlay.scss @@ -6,27 +6,30 @@ $vimeo-height: $panel-height / 2; $padding: 20px; $header-inset: 10px; +$banner-height: 100px; + .mo-overlay { display: flex; flex-direction: column; - justify-content: center; + // justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; - background-color: rgba(239, 239, 239, 0.5); + background-color: rgba(0,0,0, 0.85); z-index: 20; } .mo-container { - background-color: rgba(239, 239, 239, 0.9); + margin-top: $banner-height; + background-color: transparent; display: flex; flex-direction: column; align-items: center; - height: $panel-height; - max-height: calc(100% - 40px); + height: calc(100vh - 350px); + max-height: calc(100vh - 350px); width: $panel-width; max-width: 90vw; box-shadow: 0 19px 19px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); @@ -55,32 +58,92 @@ $header-inset: 10px; } } -.mo-header { - min-height: 42px; - max-height: 42px; +$overlay-bg: rgba(239,239,239,0.9); + +.mo-banner { + position: fixed; + min-height: 100px; + background-color: transparent; + top: 0; width: 100%; display: flex; + justify-content: flex-start; + align-items: stretch; flex-direction: row; - background-color: black; - color: white; - .mo-header-close { + .mo-banner-close { display: flex; justify-content: center; align-items: center; - margin-left: $header-inset + 8px; + min-width: $banner-height; + .material-icons { + font-size: 40pt; + background-color: transparent; + display: flex; + justify-content: center; + align-items: center; + transition: 0.3s all ease; + color: $overlay-bg; + + &:hover { + text-decoration: none; + cursor: pointer; + color: white; + } + } } - .mo-header-text { - flex: 1; + .mo-banner-content { + flex: 11; + text-align: center; display: flex; + justify-content: center; align-items: center; - justify-content: flex-end; - padding-right: $padding; - font-family: "Lato", Helvetica, sans-serif; + h3 { + border-radius: 2px; + padding: 10px 15px; + background-color: transparent; + color: $overlay-bg; + margin-left: -$banner-height; + } } } +.mo-footer { + position: fixed; + min-height: 250px; + background-color: $offwhite; + width: 100%; + opacity: 0.9; + bottom: 0; +} + +// .mo-header { +// min-height: 42px; +// max-height: 42px; +// 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; +// } +// } + .mo-media-container { flex: 1; flex-direction: row; @@ -90,13 +153,12 @@ $header-inset: 10px; box-sizing: border-box; width: 100%; max-height: calc(#{$panel-height} - 100px); - padding: 20px; font-family: "Lato", Helvetica, sans-serif; - .media-player { - width: 100%; - max-width: $vimeo-width; - } + // .media-player { + // width: 100%; + // max-width: $vimeo-width; + // } .media-content { display: flex; @@ -117,64 +179,64 @@ $header-inset: 10px; } } -.mo-meta-container { - display: flex; - flex-direction: column; - justify-content: center; - box-sizing: border-box; - min-height: 100px; - width: 100%; - // padding: $padding; +// .mo-meta-container { +// display: flex; +// 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; +// padding: 0 20px; +// } - .mo-box-title { - display: flex; - flex-direction: row; - justify-content: space-between; - padding: 0 20px; - } - - .mo-box { - display: flex; - flex-direction: row; - justify-content: space-around; - max-width: $panel-width; - width: 100%; - padding: $padding 0; - border-top: 1px solid rgb(189,189,189); - font-family: "Lato", Helvetica, sans-serif; - font-size: $normal; - - h4 { - margin: 0 0 5px 0; - text-transform: uppercase; - font-size: $xsmall; - color: $darkwhite; - font-weight: 100; - } - - p { - margin-top: 0; - font-size: $large; - } - - .material-icons { - font-size: $normal; - color: $darkwhite; - margin-right: 5px; - } - - a { - font-size: $large; - color: $darkgrey; - border-bottom: 1px solid $red; - &:hover { border-bottom: 1px solid $darkgrey; } - } - } - - .indent { - margin-left: 2*$header-inset; - } -} + // .mo-box { + // display: flex; + // flex-direction: row; + // justify-content: space-around; + // max-width: $panel-width; + // width: 100%; + // padding: $padding 0; + // border-top: 1px solid rgb(189,189,189); + // font-family: "Lato", Helvetica, sans-serif; + // font-size: $normal; + // + // h4 { + // margin: 0 0 5px 0; + // text-transform: uppercase; + // font-size: $xsmall; + // color: $darkwhite; + // font-weight: 100; + // } + // + // p { + // margin-top: 0; + // font-size: $large; + // } + // + // .material-icons { + // font-size: $normal; + // color: $darkwhite; + // margin-right: 5px; + // } + // + // a { + // font-size: $large; + // color: $darkgrey; + // border-bottom: 1px solid $red; + // &:hover { border-bottom: 1px solid $darkgrey; } + // } + // } + // + // .indent { + // margin-left: 2*$header-inset; + // } +// } .mo-controls { color: white; @@ -220,7 +282,6 @@ $header-inset: 10px; } .source-text-container { - padding: 20px; display: flex; justify-content: center; box-sizing: border-box; @@ -261,7 +322,7 @@ $header-inset: 10px; .source-image, .source-video { padding: 0px; font-family: 'Lato', Helvetica, sans-serif; - max-width: calc(#{$panel-width} - 100px); + // max-width: calc(#{$panel-width} - 100px); max-height: $panel-height; margin: auto; width: auto; From c297c63fffcd571b3e9e34b0760af6861f95ffda Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Wed, 13 Feb 2019 18:34:21 +0000 Subject: [PATCH 3/4] wip: restyling overlay controls --- src/components/Overlay/Media.js | 25 ++--- src/scss/overlay.scss | 160 ++++++++++++++++---------------- 2 files changed, 93 insertions(+), 92 deletions(-) diff --git a/src/components/Overlay/Media.js b/src/components/Overlay/Media.js index 9fc73dc..4248f9a 100644 --- a/src/components/Overlay/Media.js +++ b/src/components/Overlay/Media.js @@ -46,12 +46,22 @@ class SourceOverlay extends React.Component {

{shortenedTitle}

+ +
e.stopPropagation()}> +
+ +
+ +
+
+ +
-
- {title ?

{title}

: null} -
{desc}
-
+ {/*
*/} + {/* {title ?

{title}

: null} */} + {/*
{desc}
*/} + {/*
*/}
@@ -69,13 +79,6 @@ class SourceOverlay extends React.Component {
-
e.stopPropagation()}> -
- - -
- -
) diff --git a/src/scss/overlay.scss b/src/scss/overlay.scss index 94bfddd..0449b76 100644 --- a/src/scss/overlay.scss +++ b/src/scss/overlay.scss @@ -109,14 +109,7 @@ $overlay-bg: rgba(239,239,239,0.9); } } -.mo-footer { - position: fixed; - min-height: 250px; - background-color: $offwhite; - width: 100%; - opacity: 0.9; - bottom: 0; -} + // .mo-header { // min-height: 42px; @@ -144,6 +137,14 @@ $overlay-bg: rgba(239,239,239,0.9); // } // } +.media-gallery-controls { + height: 100%; + display: flex; + justify-content: space-between; + align-items: center; + margin-top: -50%; +} + .mo-media-container { flex: 1; flex-direction: row; @@ -155,88 +156,84 @@ $overlay-bg: rgba(239,239,239,0.9); max-height: calc(#{$panel-height} - 100px); font-family: "Lato", Helvetica, sans-serif; - // .media-player { - // width: 100%; - // max-width: $vimeo-width; - // } - .media-content { display: flex; flex-direction: column; } - .media-gallery-controls { - height: 100%; - display: flex; - justify-content: space-between; - align-items: center; - margin-top: -50%; - } - // NB: topcushion seems to be necessary with certain overflows.. &.topcushion { padding-top: 150px; } } -// .mo-meta-container { -// display: flex; -// 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; -// padding: 0 20px; -// } - // .mo-box { - // display: flex; - // flex-direction: row; - // justify-content: space-around; - // max-width: $panel-width; - // width: 100%; - // padding: $padding 0; - // border-top: 1px solid rgb(189,189,189); - // font-family: "Lato", Helvetica, sans-serif; - // font-size: $normal; - // - // h4 { - // margin: 0 0 5px 0; - // text-transform: uppercase; - // font-size: $xsmall; - // color: $darkwhite; - // font-weight: 100; - // } - // - // p { - // margin-top: 0; - // font-size: $large; - // } - // - // .material-icons { - // font-size: $normal; - // color: $darkwhite; - // margin-right: 5px; - // } - // - // a { - // font-size: $large; - // color: $darkgrey; - // border-bottom: 1px solid $red; - // &:hover { border-bottom: 1px solid $darkgrey; } - // } - // } - // - // .indent { - // margin-left: 2*$header-inset; - // } -// } +.mo-footer { + position: fixed; + height: 250px; + background-color: transparent; + width: 100%; + opacity: 0.9; + bottom: 0; + display: flex; + justify-content: center; +} + +.mo-meta-container { + color: $overlay-bg; + display: flex; + flex-direction: column; + justify-content: center; + box-sizing: border-box; + min-height: 100px; + + .mo-box-title { + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 0 20px; + } + + .mo-box { + display: flex; + flex-direction: row; + justify-content: space-around; + width: $panel-width; + padding: $padding 0; + border-top: 1px solid rgb(189,189,189); + font-family: "Lato", Helvetica, sans-serif; + font-size: $normal; + + h4 { + margin: 0 0 5px 0; + text-transform: uppercase; + font-size: $xsmall; + color: $darkwhite; + font-weight: 100; + } + + p { + margin-top: 0; + font-size: $large; + } + + .material-icons { + font-size: $normal; + color: $darkwhite; + margin-right: 5px; + } + + a { + font-size: $large; + color: $yellow; + border-bottom: 1px solid $yellow; + } + } + + .indent { + margin-left: 2*$header-inset; + } +} .mo-controls { color: white; @@ -291,10 +288,11 @@ $overlay-bg: rgba(239,239,239,0.9); line-height: 1.5em; min-width: 100%; + color: $overlay-bg; + a { - color: $darkgrey; - border-bottom: 1px solid $red; - &:hover { border-bottom: 1px solid $darkgrey; color: $darkgrey; } + color: $yellow; + border-bottom: 1px solid $yellow; } .md-container { From 6484e37d6dd9fadfc4fe2454af901657b19252a5 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Thu, 14 Feb 2019 08:37:34 +0000 Subject: [PATCH 4/4] restyle next/prev arrows --- src/components/Overlay/Controls.js | 12 ++-- src/components/Overlay/Media.js | 6 +- src/scss/overlay.scss | 94 +++++++++++------------------- 3 files changed, 43 insertions(+), 69 deletions(-) diff --git a/src/components/Overlay/Controls.js b/src/components/Overlay/Controls.js index e547123..5351ece 100644 --- a/src/components/Overlay/Controls.js +++ b/src/components/Overlay/Controls.js @@ -6,9 +6,9 @@ export default ({ viewIdx, paths, onShiftHandler }) => { className='back' onClick={() => onShiftHandler(-1)} > - - - +
+ arrow_left +
) : null const forwardArrow = viewIdx < paths.length - 1 ? ( @@ -16,9 +16,9 @@ export default ({ viewIdx, paths, onShiftHandler }) => { className='next' onClick={() => onShiftHandler(1)} > - - - +
+ arrow_right +
) : null diff --git a/src/components/Overlay/Media.js b/src/components/Overlay/Media.js index 4248f9a..f7df127 100644 --- a/src/components/Overlay/Media.js +++ b/src/components/Overlay/Media.js @@ -32,11 +32,11 @@ class SourceOverlay extends React.Component { if (typeof (this.props.source) !== 'object') { return this.renderError() } - const { url, title, paths, date, type, desc } = this.props.source - const shortenedTitle = this.props.source.title.substring(0, 100) + const { url, title, paths, date, type } = this.props.source + const shortenedTitle = title.substring(0, 100) return ( -
+
close diff --git a/src/scss/overlay.scss b/src/scss/overlay.scss index 0449b76..ae5367e 100644 --- a/src/scss/overlay.scss +++ b/src/scss/overlay.scss @@ -34,28 +34,7 @@ $banner-height: 100px; max-width: 90vw; box-shadow: 0 19px 19px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); - .back, .next { - width: 30px; - max-width: 30px; - max-height: 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; } - z-index: 1; - } - .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)} - } } $overlay-bg: rgba(239,239,239,0.9); @@ -109,40 +88,46 @@ $overlay-bg: rgba(239,239,239,0.9); } } - - -// .mo-header { -// min-height: 42px; -// max-height: 42px; -// 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; -// } -// } - .media-gallery-controls { height: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: -50%; + + .back, .next { + position: fixed; + bottom: 0; + height: 170px; + background: transparent; + 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; } + z-index: 1; + } + + .centerer { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + } + + .material-icons { + font-size: 40pt; + } + + .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-media-container { @@ -235,17 +220,6 @@ $overlay-bg: rgba(239,239,239,0.9); } } -.mo-controls { - color: white; - width: $vimeo-width; - background-color: black; -} - -.media-controls { - padding: 0 50px; -} - - /* source overlay specific styles */ .no-source-container { display: flex;