From 58aaadc5d43299692adf3e7413cbb94a342a313e Mon Sep 17 00:00:00 2001 From: Franc Camps-Febrer Date: Thu, 13 Dec 2018 11:07:24 +0100 Subject: [PATCH] Hide toolbar on narrative mode --- src/components/Card.jsx | 4 +- src/components/Dashboard.jsx | 3 - src/components/NarrativeCard.js | 7 +- src/components/Timeline.jsx | 4 +- src/components/Toolbar.jsx | 3 +- src/components/Viewport.jsx | 6 +- src/js/map/map.js | 32 +++++-- src/scss/map.scss | 6 +- src/scss/narrativecard.scss | 8 +- src/scss/timeline.scss | 4 + src/scss/toolbar.scss | 154 +++----------------------------- 11 files changed, 71 insertions(+), 160 deletions(-) diff --git a/src/components/Card.jsx b/src/components/Card.jsx index b85a144..35def13 100644 --- a/src/components/Card.jsx +++ b/src/components/Card.jsx @@ -129,11 +129,11 @@ class Card extends React.Component { renderHeader() { return (
-
+
{this.renderTimestamp()} {this.renderLocation()}
- {/* {this.renderCategory()} */} + {this.renderCategory()}
{this.renderSummary()}
diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 479be0a..c2873bd 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -109,9 +109,6 @@ class Dashboard extends React.Component { onSelect={this.handleSelect} actions={this.props.actions} /> - {this.renderClose()} -
{this.props.narrative.label}
+

{this.props.narrative.label}

{this.props.narrative.description}

-

{this.state.step + 1}/{steps.length}. {step.location}

+
+ location_on + {this.state.step + 1}/{steps.length}. {step.location} +
this.goToPrevKeyFrame()}>←
= this.props.narrative.steps.length - 1) ? 'disabled ' : ''} action`} onClick={() => this.goToNextKeyFrame()}>→
diff --git a/src/components/Timeline.jsx b/src/components/Timeline.jsx index 273fc98..ff4d089 100644 --- a/src/components/Timeline.jsx +++ b/src/components/Timeline.jsx @@ -47,6 +47,7 @@ class Timeline extends React.Component { const labels_title_lang = copy[this.props.app.language].timeline.labels_title; const info_lang = copy[this.props.app.language].timeline.info; let classes = `timeline-wrapper ${(this.state.isFolded) ? ' folded' : ''}`; + classes += this.props.app.narrative ? 'narrative-mode' : ''; const date0 = formatterWithYear(this.props.app.timerange[0]); const date1 = formatterWithYear(this.props.app.timerange[1]); @@ -80,7 +81,8 @@ function mapStateToProps(state) { timerange: selectors.getTimeRange(state), selected: state.app.selected, language: state.app.language, - zoomLevels: state.app.zoomLevels + zoomLevels: state.app.zoomLevels, + narrative: state.app.narrative }, dom: state.ui.dom, } diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index 70fcabc..087dab8 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -175,7 +175,7 @@ class Toolbar extends React.Component { render() { return ( -
+
{this.renderToolbarTabs()} {this.renderToolbarPanels()}
@@ -193,6 +193,7 @@ function mapStateToProps(state) { categoryFilter: state.app.filters.categories, viewFilters: state.app.filters.views, features: state.app.features, + narrative: state.app.narrative, } } diff --git a/src/components/Viewport.jsx b/src/components/Viewport.jsx index 3bcc808..b712f5e 100644 --- a/src/components/Viewport.jsx +++ b/src/components/Viewport.jsx @@ -19,8 +19,9 @@ class Viewport extends React.Component { } render() { + const classes = this.props.app.narrative ? 'map-wrapper narrative-mode' : 'map-wrapper'; return ( -
+
) @@ -39,7 +40,8 @@ function mapStateToProps(state) { views: state.app.filters.views, selected: state.app.selected, highlighted: state.app.highlighted, - mapAnchor: state.app.mapAnchor + mapAnchor: state.app.mapAnchor, + narrative: state.app.narrative }, ui: { dom: state.ui.dom, diff --git a/src/js/map/map.js b/src/js/map/map.js index 78c2e4e..4a4c68d 100644 --- a/src/js/map/map.js +++ b/src/js/map/map.js @@ -17,6 +17,7 @@ export default function(newApp, ui, methods) { const app = { selected: [], highlighted: null, + narrative: null, views: Object.assign({}, newApp.views), } @@ -362,7 +363,6 @@ Stop and start the development process in terminal after you have added your tok .exit() .remove(); - let styleName narrativesDom .enter().append('path') .attr('class', 'narrative') @@ -384,7 +384,24 @@ Stop and start the development process in terminal after you have added your tok const styleProps = getNarrativeStyle(d[0].narrative); return styleProps.stroke; }) + .style('stroke-opacity', d => { + if (app.narrative === null) return 0; + if (!d[0] || app.narrative.id !== d[0].narrative) return 0.2; + return 1; + }) .style('fill', 'none'); + + narrativesDom + .style('stroke', d => { + if (!d[0]) return 'none'; + const styleProps = getNarrativeStyle(d[0].narrative); + return styleProps.stroke; + }) + .style('stroke-opacity', d => { + if (app.narrative === null) return 0; + if (!d[0] || app.narrative.id !== d[0].narrative) return 0.2; + return 1; + }) } /** @@ -393,22 +410,25 @@ Stop and start the development process in terminal after you have added your tok */ function update(newDomain, newApp) { updateSVG(); + const isNewDomain = (hash(domain) !== hash(newDomain)); + const isNewAppProps = (hash(app) !== hash(newApp)); - if (hash(domain) !== hash(newDomain)) { + if (isNewDomain) { domain.locations = newDomain.locations; domain.narratives = newDomain.narratives; domain.categories = newDomain.categories; domain.sites = newDomain.sites; - renderDomain(); } - if (hash(app) !== hash(newApp)) { + if (isNewAppProps) { app.selected = newApp.selected; app.highlighted = newApp.highlighted; + app.narrative = newApp.narrative; app.views = newApp.views; - - renderSelectedAndHighlight(); } + + if (isNewDomain || isNewAppProps) renderDomain(); + if (isNewAppProps) renderSelectedAndHighlight(); } /** diff --git a/src/scss/map.scss b/src/scss/map.scss index d2c51cf..fc4f2ea 100644 --- a/src/scss/map.scss +++ b/src/scss/map.scss @@ -27,8 +27,12 @@ z-index: $hidden; } &.show { - z-index: $map; + z-index: $map; } + &.narrative-mode { + left: 0; + } + .event { fill: $event_default; cursor: pointer; diff --git a/src/scss/narrativecard.scss b/src/scss/narrativecard.scss index 3f7f7a5..b8e5e11 100644 --- a/src/scss/narrativecard.scss +++ b/src/scss/narrativecard.scss @@ -4,9 +4,9 @@ NARRATIVE INFO .narrative-info { position: fixed; top: 10px; - left: 130px; + left: 10px; height: auto; - width: 270px; + width: 370px; box-sizing: border-box; padding: 15px; max-height: calc(100% - 250px); @@ -23,6 +23,10 @@ NARRATIVE INFO h3 { font-size: $large; + font-family: 'Merriweather', 'Georgia', serif; + letter-spacing: 0.1em; + text-transform: uppercase; + font-weight: 100; } p { diff --git a/src/scss/timeline.scss b/src/scss/timeline.scss index 6e8cddf..2205ce1 100644 --- a/src/scss/timeline.scss +++ b/src/scss/timeline.scss @@ -22,6 +22,10 @@ } } + &.narrative-mode { + left: 0; + } + .timeline-header { height: 0px; width: 100%; diff --git a/src/scss/toolbar.scss b/src/scss/toolbar.scss index 9459f1d..d6178f6 100644 --- a/src/scss/toolbar.scss +++ b/src/scss/toolbar.scss @@ -9,6 +9,10 @@ z-index: $header; background: $midgrey; + &.narrative-mode { + left: -110px; + } + .toolbar { position: relative; width: 110px; @@ -292,37 +296,6 @@ } } - .people-tab { - width: 50%; - font-family: 'Lato', Helvetica, sans-serif; - font-size: $normal; - text-transform: uppercase; - letter-spacing: 0.1em; - - svg { - transform: translate(-2px,0)scale(0.6); - &:hover { - transition: 0.2s ease; - stroke: $offwhite; - } - } - - &.react-tabs__tab--selected { - svg circle, - svg path { - stroke: $offwhite; - } - } - - svg circle, - svg path { - transition: 0.2s ease; - fill: none; - stroke: $midwhite; - stroke-width: 3; - } - } - .react-tabs__tab-list { height: 40px; overflow: hidden; @@ -362,6 +335,14 @@ height: 0; margin: 0; } + + .panel-header { + visibility: hidden; + + .caret { + transform: translate(8px, 5px)rotate(225deg); + } + } } input { @@ -491,7 +472,7 @@ } } - &:first-child { + /*&:first-child { button { background-image: url("/static/archive/img/scene01.jpg"); } } &:nth-child(2n) { @@ -503,114 +484,7 @@ &.back-to-map { button { background-image: url("/static/archive/img/map.jpg"); } - } - } -} - -.taggroup-wrapper { - margin-top: 30px; - z-index: 10; - border-bottom: none; - - &:last-child { - margin-bottom: 0; - border-bottom: 1px solid rgba(white, 0); - } - - &:hover { - transition: 0.1s ease; - } - - .collapsible-item { - width: calc(100% - 32px); - float: left; - } - - .taggroup-header { - width: 100%; - margin: 0; - font-size: $large; - - h2::first-letter { - margin-top: 0; - } - } - - .taggroup-content { - width: 100%; - display: inline-block; - padding-left: 10px; - box-sizing: border-box; - transition: 0.2s ease; - - .tagsubgroup-wrapper { - border: none; - border-bottom: 1px solid rgba(white, 0.25); - &:first-letter { - text-transform: uppercase; - } - - &:last-child { - border-bottom: 0; - } - - .tagsubgroup-header { - cursor: pointer; - } - - &.folded { - .tagsubgroup-content { - overflow: hidden; - padding: 0 10px; - transition: 0.2s ease; - height: 0; - border-top: 0; - } - } - - .item { - overflow: auto; - min-height: 32px; - height: auto; - - span { - height: auto; - } - } - } - - .tag-filter { - outline: none; - border: 0; - background: none; - color: $offwhite; - margin-left: 20px; - width: calc(100% - 20px); - box-sizing: border-box; - padding: 0; - font-size: $normal; - font-weight: 400; - text-align: left; - cursor: pointer; - border: 1px solid $black; - border-bottom: 1px solid rgba(white, 0.25); - &:first-letter { - text-transform: uppercase; - } - - &:last-child { - border-bottom: 1px solid rgba(white, 0); - } - } - } - - &.folded { - .filter-list-content { - padding: 0 10px; - border-top: 0; - transition: 0.2s ease; - height: 0; - } + }*/ } }