From 0d8a66ad2fa2f176423524a4b54acacf24a9b9ed Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Tue, 8 Jan 2019 14:19:54 +0000 Subject: [PATCH 1/5] mv NarrativeCard to presentational --- src/components/Dashboard.jsx | 2 +- src/components/{ => presentational}/NarrativeCard.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) rename src/components/{ => presentational}/NarrativeCard.js (96%) diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index abc68c2..1400db3 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -9,7 +9,7 @@ import LoadingOverlay from './presentational/LoadingOverlay' import Map from './Map.jsx' import Toolbar from './Toolbar.jsx' import CardStack from './CardStack.jsx' -import NarrativeCard from './NarrativeCard.js' +import NarrativeCard from './presentational/NarrativeCard.js' import InfoPopUp from './InfoPopup.jsx' import Timeline from './Timeline.jsx' import Notification from './Notification.jsx' diff --git a/src/components/NarrativeCard.js b/src/components/presentational/NarrativeCard.js similarity index 96% rename from src/components/NarrativeCard.js rename to src/components/presentational/NarrativeCard.js index 721f727..fc578c7 100644 --- a/src/components/NarrativeCard.js +++ b/src/components/presentational/NarrativeCard.js @@ -1,6 +1,6 @@ import React from 'react' import { connect } from 'react-redux' -import { selectActiveNarrative } from '../selectors' +import { selectActiveNarrative } from '../../selectors' function NarrativeCard ({ narrative, methods }) { const { onSelectNarrative, onNext, onPrev } = methods From 002447e70723ed5cb209a07fce959789b29d843e Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Tue, 8 Jan 2019 15:21:58 +0000 Subject: [PATCH 2/5] wip: narrative info to the right --- .../presentational/NarrativeCard.js | 24 ++++++++------ src/scss/cardstack.scss | 4 +-- src/scss/narrativecard.scss | 32 +++++++++++++++++-- 3 files changed, 46 insertions(+), 14 deletions(-) diff --git a/src/components/presentational/NarrativeCard.js b/src/components/presentational/NarrativeCard.js index fc578c7..a181a9d 100644 --- a/src/components/presentational/NarrativeCard.js +++ b/src/components/presentational/NarrativeCard.js @@ -42,15 +42,21 @@ function NarrativeCard ({ narrative, methods }) { return (
- {renderClose()} -

{narrative.label}

-

{narrative.description}

-
- location_on - {current + 1}/{steps.length}. {step.location} -
- {_renderActions(current, steps)} -
+
+
+
+ {current + 1}/{steps.length} +
+
+
+

{narrative.label}

+
+
+ + {/* location_on */} + {/* {_renderActions(current, steps)} */} +

{narrative.description}

+ ) } else { return null diff --git a/src/scss/cardstack.scss b/src/scss/cardstack.scss index 0b83da3..5edf312 100644 --- a/src/scss/cardstack.scss +++ b/src/scss/cardstack.scss @@ -17,8 +17,8 @@ $timeline-height: 170px; color: white; &.narrative-mode { - right: auto; - left: 10px; + right: 10px; + left: auto; top: $narrative-info-max-height + 12px; height: calc(100% - #{$narrative-info-max-height} - #{$timeline-height} - 12px); } diff --git a/src/scss/narrativecard.scss b/src/scss/narrativecard.scss index 36ebc63..b4c8930 100644 --- a/src/scss/narrativecard.scss +++ b/src/scss/narrativecard.scss @@ -6,20 +6,46 @@ NARRATIVE INFO .narrative-info { position: fixed; top: 10px; - left: 10px; + left: auto; + right: 10px; // height: auto; height: 170px; width: $narrative-info-width; box-sizing: border-box; - padding: 15px; max-height: calc(100% - 250px); - overflow: auto; box-shadow: 0 19px 38px rgba($black, 0.3), 0 15px 12px rgba($black, 0.22); background: $black; border: 1px solid $midgrey; color: $offwhite; font-family: 'Merriweather', 'Georgia', serif; + .narrative-info-header { + display: flex; + justify-content: space-between; + align-items: stretch; + border-bottom: 1px solid $darkwhite; + padding: 0 15px; + + .count-container { + display: flex; + justify-content: center; + align-items: center; + border-right: 1px solid $darkwhite; + } + .count { + position: relative; + padding-right: 15px; + } + } + + .narrative-info-desc { + overflow: auto; + } + + p { + padding: 0 15px; + } + h3, h6 { text-align: center; } From 51d7dd81916d4260b1c8eeb5115c06fb9bafc9ea Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Tue, 8 Jan 2019 16:59:42 +0000 Subject: [PATCH 3/5] refactor controls out of NarrativeCard --- src/components/Dashboard.jsx | 18 +++--- src/components/Timeline.jsx | 6 +- .../presentational/NarrativeCard.js | 55 +++++++++---------- .../presentational/NarrativeControls.js | 40 ++++++++++++++ src/scss/card.scss | 4 -- 5 files changed, 78 insertions(+), 45 deletions(-) create mode 100644 src/components/presentational/NarrativeControls.js diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 1400db3..c207d9f 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -9,15 +9,13 @@ import LoadingOverlay from './presentational/LoadingOverlay' import Map from './Map.jsx' import Toolbar from './Toolbar.jsx' import CardStack from './CardStack.jsx' -import NarrativeCard from './presentational/NarrativeCard.js' +import NarrativeControls from './presentational/NarrativeControls.js' import InfoPopUp from './InfoPopup.jsx' import Timeline from './Timeline.jsx' import Notification from './Notification.jsx' import { parseDate } from '../js/utilities' -import { injectNarrative } from '../js/utilities' - class Dashboard extends React.Component { constructor(props) { super(props) @@ -119,13 +117,6 @@ class Dashboard extends React.Component { getCategoryColor: category => this.getCategoryColor(category) }} /> - this.moveInNarrative(1), - onPrev: () => this.moveInNarrative(-1), - onSelectNarrative: this.setNarrative - }} - /> this.getNarrativeLinks(event)} getCategoryColor={category => this.getCategoryColor(category)} /> + this.moveInNarrative(1), + onPrev: () => this.moveInNarrative(-1), + onSelectNarrative: this.setNarrative + }} + /> - { this.onDragStart() }} onDrag={() => { this.onDrag() }} @@ -264,7 +264,7 @@ class Timeline extends React.Component { onSelect={this.props.methods.onSelect} /> - ); + ) } render() { diff --git a/src/components/presentational/NarrativeCard.js b/src/components/presentational/NarrativeCard.js index a181a9d..1112f16 100644 --- a/src/components/presentational/NarrativeCard.js +++ b/src/components/presentational/NarrativeCard.js @@ -2,35 +2,34 @@ import React from 'react' import { connect } from 'react-redux' import { selectActiveNarrative } from '../../selectors' -function NarrativeCard ({ narrative, methods }) { - const { onSelectNarrative, onNext, onPrev } = methods - function renderClose() { - return ( - - ) - } +function NarrativeCard ({ narrative }) { + // function renderClose() { + // return ( + // + // ) + // } - function _renderActions(current, steps) { - const prevExists = current !== 0 - const nextExists = current < steps.length - 1 - return ( -
-
← -
-
→ -
-
- ) - } + // function _renderActions(current, steps) { + // const prevExists = current !== 0 + // const nextExists = current < steps.length - 1 + // return ( + //
+ //
← + //
+ //
→ + //
+ //
+ // ) + // } // no display if no narrative if (!narrative) return null diff --git a/src/components/presentational/NarrativeControls.js b/src/components/presentational/NarrativeControls.js new file mode 100644 index 0000000..76f96e5 --- /dev/null +++ b/src/components/presentational/NarrativeControls.js @@ -0,0 +1,40 @@ +import React from 'react' +import NarrativeCard from './NarrativeCard' + +export default ({ narrative, methods }) => { + // function renderClose() { + // return ( + // + // ) + // } + + // function _renderActions(current, steps) { + // const prevExists = current !== 0 + // const nextExists = current < steps.length - 1 + // return ( + //
+ //
← + //
+ //
→ + //
+ //
+ // ) + // } + + + + return ( + + + + ) +} diff --git a/src/scss/card.scss b/src/scss/card.scss index a801f0e..a1b03de 100644 --- a/src/scss/card.scss +++ b/src/scss/card.scss @@ -42,10 +42,6 @@ margin: 5px 0 10px 0; padding-bottom: 10px; - &.details { - border-bottom: 1px solid $lightwhite; - } - .card-cell { flex: 1; } From 46aeaf52177e818065f89e7014f3e62ccab0b34c Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Tue, 8 Jan 2019 18:01:08 +0000 Subject: [PATCH 4/5] add NarrativeAdjust as arrows above timeline --- src/components/Dashboard.jsx | 14 +++----- .../presentational/NarrativeAdjust.js | 16 +++++++++ .../presentational/NarrativeCard.js | 32 +---------------- .../presentational/NarrativeControls.js | 15 ++++++++ src/scss/narrativecard.scss | 35 ++++++++++++++++++- 5 files changed, 70 insertions(+), 42 deletions(-) create mode 100644 src/components/presentational/NarrativeAdjust.js diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index c207d9f..18a77f6 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -126,6 +126,10 @@ class Dashboard extends React.Component { getCategoryColor={category => this.getCategoryColor(category)} /> this.moveInNarrative(1), onPrev: () => this.moveInNarrative(-1), @@ -165,16 +169,6 @@ function mapDispatchToProps(dispatch) { } } -function injectSource(id) { - return state => ({ - ...state, - app: { - ...state.app, - source: state.domain.sources[id] - } - }) -} - export default connect( state => state, mapDispatchToProps, diff --git a/src/components/presentational/NarrativeAdjust.js b/src/components/presentational/NarrativeAdjust.js new file mode 100644 index 0000000..2244632 --- /dev/null +++ b/src/components/presentational/NarrativeAdjust.js @@ -0,0 +1,16 @@ +import React from 'react' + +export default ({ isDisabled, direction, onClickHandler }) => { + return ( +
+ + chevron_{direction} + +
+ ) +} diff --git a/src/components/presentational/NarrativeCard.js b/src/components/presentational/NarrativeCard.js index 1112f16..874578c 100644 --- a/src/components/presentational/NarrativeCard.js +++ b/src/components/presentational/NarrativeCard.js @@ -3,37 +3,7 @@ import { connect } from 'react-redux' import { selectActiveNarrative } from '../../selectors' function NarrativeCard ({ narrative }) { - // function renderClose() { - // return ( - // - // ) - // } - - // function _renderActions(current, steps) { - // const prevExists = current !== 0 - // const nextExists = current < steps.length - 1 - // return ( - //
- //
← - //
- //
→ - //
- //
- // ) - // } - - // no display if no narrative - if (!narrative) return null - + // no display if no narrative const { steps, current } = narrative if (steps[current]) { diff --git a/src/components/presentational/NarrativeControls.js b/src/components/presentational/NarrativeControls.js index 76f96e5..2313f7e 100644 --- a/src/components/presentational/NarrativeControls.js +++ b/src/components/presentational/NarrativeControls.js @@ -1,5 +1,6 @@ import React from 'react' import NarrativeCard from './NarrativeCard' +import NarrativeAdjust from './NarrativeAdjust' export default ({ narrative, methods }) => { // function renderClose() { @@ -30,11 +31,25 @@ export default ({ narrative, methods }) => { // ) // } + if (!narrative) return null + const { current, steps } = narrative + const prevExists = current !== 0 + const nextExists = current < steps.length - 1 return ( + + ) } diff --git a/src/scss/narrativecard.scss b/src/scss/narrativecard.scss index b4c8930..6d7705a 100644 --- a/src/scss/narrativecard.scss +++ b/src/scss/narrativecard.scss @@ -1,4 +1,5 @@ $narrative-info-width: 370px; +$timeline-height: 170px; /* NARRATIVE INFO @@ -8,7 +9,6 @@ NARRATIVE INFO top: 10px; left: auto; right: 10px; - // height: auto; height: 170px; width: $narrative-info-width; box-sizing: border-box; @@ -101,3 +101,36 @@ NARRATIVE INFO } } } + +.narrative-adjust { + position: fixed; + // top: calc(50vh - 100pt); + bottom: $timeline-height; + right: auto; + background-color: rgba(0,0,0,0.8); + z-index: 15; // z-index of card-stack is 10 + + &.left { + left: 0; + } + + &.right { + // right: calc(#{$narrative-info-width} + 10px); + right: 0; + } + + .material-icons { + font-size: 60pt; + color: $offwhite; + transition: color 0.2s ease; + + &.disabled { + color: $darkgrey; + } + + &:hover { + cursor: pointer; + color: $darkgrey; + } + } +} From 22e91037b9739db8525ba8b5b9b602ec38048119 Mon Sep 17 00:00:00 2001 From: Lachlan Kermode Date: Wed, 9 Jan 2019 12:34:07 +0000 Subject: [PATCH 5/5] rethink narrative adjust placement; add close --- .../presentational/NarrativeAdjust.js | 2 +- .../presentational/NarrativeClose.js | 17 ++++++ .../presentational/NarrativeControls.js | 33 ++---------- src/scss/cardstack.scss | 4 +- src/scss/narrativecard.scss | 54 +++++++++++++++++-- 5 files changed, 76 insertions(+), 34 deletions(-) create mode 100644 src/components/presentational/NarrativeClose.js diff --git a/src/components/presentational/NarrativeAdjust.js b/src/components/presentational/NarrativeAdjust.js index 2244632..b7b4be3 100644 --- a/src/components/presentational/NarrativeAdjust.js +++ b/src/components/presentational/NarrativeAdjust.js @@ -9,7 +9,7 @@ export default ({ isDisabled, direction, onClickHandler }) => { - chevron_{direction} + {`chevron_${direction}`} ) diff --git a/src/components/presentational/NarrativeClose.js b/src/components/presentational/NarrativeClose.js new file mode 100644 index 0000000..c514479 --- /dev/null +++ b/src/components/presentational/NarrativeClose.js @@ -0,0 +1,17 @@ +import React from 'react' + +export default ({ onClickHandler, closeMsg }) => { + return ( +
+ +
{closeMsg}
+
+ ) +} diff --git a/src/components/presentational/NarrativeControls.js b/src/components/presentational/NarrativeControls.js index 2313f7e..5a120dd 100644 --- a/src/components/presentational/NarrativeControls.js +++ b/src/components/presentational/NarrativeControls.js @@ -1,36 +1,9 @@ import React from 'react' import NarrativeCard from './NarrativeCard' import NarrativeAdjust from './NarrativeAdjust' +import NarrativeClose from './NarrativeClose' export default ({ narrative, methods }) => { - // function renderClose() { - // return ( - // - // ) - // } - - // function _renderActions(current, steps) { - // const prevExists = current !== 0 - // const nextExists = current < steps.length - 1 - // return ( - //
- //
← - //
- //
→ - //
- //
- // ) - // } - if (!narrative) return null const { current, steps } = narrative @@ -50,6 +23,10 @@ export default ({ narrative, methods }) => { direction='right' onClickHandler={methods.onNext} /> + methods.onSelectNarrative(null)} + closeMsg='-- exit from narrative --' + /> ) } diff --git a/src/scss/cardstack.scss b/src/scss/cardstack.scss index 5edf312..a79a44e 100644 --- a/src/scss/cardstack.scss +++ b/src/scss/cardstack.scss @@ -19,8 +19,8 @@ $timeline-height: 170px; &.narrative-mode { right: 10px; left: auto; - top: $narrative-info-max-height + 12px; - height: calc(100% - #{$narrative-info-max-height} - #{$timeline-height} - 12px); + top: $narrative-info-max-height + 12px + 20px; + height: calc(100% - #{$narrative-info-max-height} - #{$timeline-height} - 12px - 20px); } &.full-height { diff --git a/src/scss/narrativecard.scss b/src/scss/narrativecard.scss index 6d7705a..9bf86a4 100644 --- a/src/scss/narrativecard.scss +++ b/src/scss/narrativecard.scss @@ -6,7 +6,7 @@ NARRATIVE INFO */ .narrative-info { position: fixed; - top: 10px; + top: 30px; left: auto; right: 10px; height: 170px; @@ -106,17 +106,18 @@ NARRATIVE INFO position: fixed; // top: calc(50vh - 100pt); bottom: $timeline-height; + // top: 0; right: auto; background-color: rgba(0,0,0,0.8); z-index: 15; // z-index of card-stack is 10 &.left { - left: 0; + right: calc(#{$narrative-info-width} - 70px); } &.right { // right: calc(#{$narrative-info-width} + 10px); - right: 0; + right: 10px; } .material-icons { @@ -134,3 +135,50 @@ NARRATIVE INFO } } } + +.narrative-close { + display: flex; + justify-content: flex-start; + position: fixed; + padding: 2px 5px 0 5px; + // right: $narrative-info-width - 15px - 10px; + right: 10px; + top: 5px; + width: $narrative-info-width - 10px - 2px; + // width: 15px; + background-color: black; + height: 20px; + transition: background-color 0.2s ease; + border: 1px solid black; + + button { + height: 15px; + width: 15px; + } + + .close-text { + display: none; + color: $midgrey; + flex: 1; + width: 100%; + justify-content: center; + font-size: 10pt; + } + + // disable whitening of crosshair on hover + button { + span, span:before, span:after { + background: $midwhite !important; + } + } + + + &:hover { + cursor: pointer; + background-color: $offwhite; + color: black; + .close-text { + display: flex; + } + } +}