From 62b8908d03aef805811b5fffd69df39d8ad4924e Mon Sep 17 00:00:00 2001 From: Franc Camps-Febrer Date: Mon, 3 Dec 2018 16:40:27 +0000 Subject: [PATCH 1/6] Clean store fields, add narrative cards and some changes to toolbar --- src/actions/index.js | 16 ++++++++++++++++ src/components/Dashboard.jsx | 3 +++ src/components/Toolbar.jsx | 37 ++++++++++++++++++++++++++++++++++-- webpack.config.js | 2 +- 4 files changed, 55 insertions(+), 3 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index 0d3b0c4..06c7f68 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -180,6 +180,14 @@ export function updateTimeRange(timerange) { } } +export const UPDATE_NARRATIVE = 'UPDATE_NARRATIVE'; +export function updateNarrative(narrative) { + return { + type: UPDATE_NARRATIVE, + narrative + } +} + export const RESET_ALLFILTERS = 'RESET_ALLFILTERS' export function resetAllFilters() { return { @@ -256,3 +264,11 @@ export function fetchSourceError(msg) { msg } } + +export const TOGGLE_MAPVIEW = 'TOGGLE_MAPVIEW'; +export function toggleMapView(layer) { + return { + type: TOGGLE_MAPVIEW, + layer + } +} diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx index 4d6ac44..401d2a3 100644 --- a/src/components/Dashboard.jsx +++ b/src/components/Dashboard.jsx @@ -109,6 +109,9 @@ class Dashboard extends React.Component { onSelect={this.handleSelect} actions={this.props.actions} /> +

{title}

{/*this.renderToolbarTab(0, 'search')*/} - {this.renderToolbarTab(0, 'Narratives')} - {(isTags) ? this.renderToolbarTab(1, 'Explore by tag') : ''} + {this.renderToolbarTab(0, 'Focus stories')} + {this.renderToolbarTab(1, 'Explore freely')}
{ + const isActive = (idx === this.state.tab); + + let classes = (isActive) ? 'toolbar-tab active' : 'toolbar-tab'; + + return ( +
{ this.toggleTab(idx); }}> +
{nar.label}
+
+ ); + }) + } + return ''; + } + + renderToolbarTabs() { + const title = copy[this.props.language].toolbar.title; + return ( +
+

{title}

+
+ {/*this.renderToolbarTab(0, 'search')*/} + {(this.props.isModeGuided) + ? this.renderToolbarNavs() + : this.renderToolbarTagRoot()} +
+ {/* {this.renderBottomActions()} */} +
+ ) + } + render() { return (
diff --git a/webpack.config.js b/webpack.config.js index 4706f03..ba1c538 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,7 +1,7 @@ const webpack = require('webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); -const userConfig = require('./config'); +const userConfig = require('./dev.config'); const userConfigJSON = {}; const devMode = process.env.NODE_ENV !== 'production'; From 7c707ababf137c781851299a843b3c17982954ec Mon Sep 17 00:00:00 2001 From: Franc Camps-Febrer Date: Wed, 5 Dec 2018 12:57:43 +0000 Subject: [PATCH 2/6] Redesign card --- index.html | 3 +- src/components/Card.jsx | 8 +- src/components/presentational/CardCategory.js | 2 +- src/components/presentational/CardLocation.js | 18 +++-- .../presentational/CardNarrative.js | 2 +- src/components/presentational/CardSource.js | 2 +- src/components/presentational/CardSummary.js | 2 +- src/components/presentational/CardTags.js | 44 ++++++----- .../presentational/CardTimestamp.js | 16 ++-- src/js/data/copy.json | 7 +- src/scss/card.scss | 69 ++++++------------ src/scss/loading.scss | 73 +++++++++---------- 12 files changed, 120 insertions(+), 126 deletions(-) diff --git a/index.html b/index.html index fc87d89..4d49a8b 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,8 @@ TimeMap - Forensic Architecture - + + diff --git a/src/components/Card.jsx b/src/components/Card.jsx index 9c97da6..895b299 100644 --- a/src/components/Card.jsx +++ b/src/components/Card.jsx @@ -135,8 +135,11 @@ class Card extends React.Component { renderHeader() { return (
- {this.renderCategory()} - {this.renderTimestamp()} +
+ {this.renderTimestamp()} + {this.renderLocation()} +
+ {this.renderCategory()} {this.renderSummary()}
); @@ -150,7 +153,6 @@ class Card extends React.Component { } else { return (
- {this.renderLocation()} {this.renderTags()} {this.renderSource()} {this.renderNarrative()} diff --git a/src/components/presentational/CardCategory.js b/src/components/presentational/CardCategory.js index 43dd010..a99a9e4 100644 --- a/src/components/presentational/CardCategory.js +++ b/src/components/presentational/CardCategory.js @@ -1,7 +1,7 @@ import React from 'react'; const CardCategory = ({ categoryTitle, categoryLabel, color }) => ( -
+

{categoryTitle}

diff --git a/src/components/presentational/CardLocation.js b/src/components/presentational/CardLocation.js index a798a5e..092a66a 100644 --- a/src/components/presentational/CardLocation.js +++ b/src/components/presentational/CardLocation.js @@ -5,19 +5,23 @@ import { isNotNullNorUndefined } from '../../js/utilities'; const CardLocation = ({ language, location }) => { - const location_lang = copy[language].cardstack.location; if (isNotNullNorUndefined(location)) { return ( -

-

{location_lang}

-

{location}

+

+

+ location_on + {location} +

); } else { + const unknown = copy[language].cardstack.unknown_location; return ( -

-

{location_lang}

-

Sin localización conocida.

+

+

+ location_on + {unknown} +

); } diff --git a/src/components/presentational/CardNarrative.js b/src/components/presentational/CardNarrative.js index 9610215..587c5f3 100644 --- a/src/components/presentational/CardNarrative.js +++ b/src/components/presentational/CardNarrative.js @@ -3,7 +3,7 @@ import React from 'react'; import CardNarrativeLink from './CardNarrativeLink'; const CardNarrative = (props) => ( -
+

Connected events

Next:

Previous:

diff --git a/src/components/presentational/CardSource.js b/src/components/presentational/CardSource.js index 4597d49..42ac8cf 100644 --- a/src/components/presentational/CardSource.js +++ b/src/components/presentational/CardSource.js @@ -6,7 +6,7 @@ const CardSource = ({ source, language }) => { const source_lang = copy[language].cardstack.source; return ( -
+

{source_lang}

{source}

diff --git a/src/components/presentational/CardSummary.js b/src/components/presentational/CardSummary.js index bb4f10f..a34a9b3 100644 --- a/src/components/presentational/CardSummary.js +++ b/src/components/presentational/CardSummary.js @@ -8,7 +8,7 @@ const CardSummary = ({ language, description, isHighlighted }) => { const descriptionText = (isHighlighted) ? description : `${description.substring(0, 40)}...`; return ( -
+

{summary}

{descriptionText}

diff --git a/src/components/presentational/CardTags.js b/src/components/presentational/CardTags.js index 46088cb..0e44961 100644 --- a/src/components/presentational/CardTags.js +++ b/src/components/presentational/CardTags.js @@ -3,27 +3,35 @@ import React from 'react'; import copy from '../../js/data/copy.json'; const CardTags = ({ tags, language }) => { - const label = copy[language].cardstack.people; + const tags_lang = copy[language].cardstack.tags; + const no_tags_lang = copy[language].cardstack.notags; - return ( -
-

{label}

-

{ - tags.map((tag, idx) => { - return ( - - {tag.name} - { - (idx < tags.length - 1) + if (tags.length > 0) { + return ( +

+

{tags_lang}

+

+ {tags.map((tag, idx) => { + return ( + + {tag.name} + {(idx < tags.length - 1) ? ',' - : '' - } - - ); - }) - }

+ : ''} + + ); + })} +

+
+ ); + } + return ( +
+

{tags_lang}

+

{no_tags_lang}

-); + ); + } export default CardTags; diff --git a/src/components/presentational/CardTimestamp.js b/src/components/presentational/CardTimestamp.js index 4c4d594..0317896 100644 --- a/src/components/presentational/CardTimestamp.js +++ b/src/components/presentational/CardTimestamp.js @@ -12,16 +12,20 @@ const CardTimestamp = ({ makeTimelabel, language, timestamp }) => { if (isNotNullNorUndefined(timestamp)) { const timelabel = makeTimelabel(timestamp); return ( -
-

{daytime_lang}

- {timelabel} +
+

+ today + {timelabel} +

); } else { return ( -
-

{daytime_lang}

- {unknown_lang} +
+

+ today + {unknown_lang} +

); } diff --git a/src/js/data/copy.json b/src/js/data/copy.json index 66efb16..29a139b 100644 --- a/src/js/data/copy.json +++ b/src/js/data/copy.json @@ -133,10 +133,11 @@ "unknown_time": "Unknown time", "location": "Localization", "incident_type": "Type of action", - "description": "Summary of facts", - "people": "People involved", + "description": "Summary", + "tags": "Tags", + "notags": "No known tags for this event.", "source": "Source", - "category": "According to", + "category": "Category", "communication": "Communication", "transmitter": "Transmitter", "receiver": "Receiver", diff --git a/src/scss/card.scss b/src/scss/card.scss index 186508a..fc471bf 100644 --- a/src/scss/card.scss +++ b/src/scss/card.scss @@ -17,6 +17,23 @@ border: 1px solid $yellow; } + .material-icons { + font-size: $normal; + color: $darkwhite; + margin-right: 5px; + } + + .card-row { + display: flex; + flex-direction: row; + border-bottom: 1px solid $midwhite; + margin-bottom: 10px; + + .card-cell { + flex: 1; + } + } + .card-bottomhalf { transition: 0.4s ease; height: auto; @@ -29,8 +46,11 @@ } h4 { - text-transform: normal; margin-bottom: 0; + text-transform: uppercase; + font-size: $xsmall; + color: $darkwhite; + font-weight: 100; &:first-child { margin-top: 0; @@ -41,7 +61,7 @@ margin: 0; } - .event-card-section { + .card-cell { margin-bottom: 10px; a:hover { @@ -145,49 +165,4 @@ margin: 0; margin-right: 5px; } - - /* - https://github.com/tobiasahlin/SpinKit/blob/master/LICENSE - */ - .spinner { - width: 40px; - height: 40px; - - position: relative; - margin: 20px auto; - } - - .double-bounce1, .double-bounce2 { - width: 100%; - height: 100%; - border-radius: 50%; - background-color: $darkgrey; - opacity: 0.6; - position: absolute; - top: 0; - left: 0; - - -webkit-animation: sk-bounce 3.0s infinite ease-in-out; - animation: sk-bounce 3.0s infinite ease-in-out; - } - - .double-bounce2 { - -webkit-animation-delay: -1.0s; - animation-delay: -1.0s; - } - - @-webkit-keyframes sk-bounce { - 0%, 100% { -webkit-transform: scale(0.0) } - 50% { -webkit-transform: scale(1.0) } - } - - @keyframes sk-bounce { - 0%, 100% { - transform: scale(0.0); - -webkit-transform: scale(0.0); - } 50% { - transform: scale(1.0); - -webkit-transform: scale(1.0); - } - } } diff --git a/src/scss/loading.scss b/src/scss/loading.scss index 1ccd109..dee8697 100644 --- a/src/scss/loading.scss +++ b/src/scss/loading.scss @@ -31,50 +31,49 @@ opacity: 0; z-index: $hidden; } +} - - /* +/* https://github.com/tobiasahlin/SpinKit/blob/master/LICENSE - */ - .spinner { - width: 40px; - height: 40px; +*/ +.spinner { + width: 40px; + height: 40px; - position: relative; - margin: 20px auto; - } + position: relative; + margin: 20px auto; +} - .double-bounce1, .double-bounce2 { - width: 100%; - height: 100%; - border-radius: 50%; - background-color: $offwhite; - opacity: 0.6; - position: absolute; - top: 0; - left: 0; +.double-bounce1, .double-bounce2 { + width: 100%; + height: 100%; + border-radius: 50%; + background-color: $offwhite; + opacity: 0.6; + position: absolute; + top: 0; + left: 0; - -webkit-animation: sk-bounce 3.0s infinite ease-in-out; - animation: sk-bounce 3.0s infinite ease-in-out; - } + -webkit-animation: sk-bounce 3.0s infinite ease-in-out; + animation: sk-bounce 3.0s infinite ease-in-out; +} - .double-bounce2 { - -webkit-animation-delay: -1.0s; - animation-delay: -1.0s; - } +.double-bounce2 { + -webkit-animation-delay: -1.0s; + animation-delay: -1.0s; +} - @-webkit-keyframes sk-bounce { - 0%, 100% { -webkit-transform: scale(0.0) } - 50% { -webkit-transform: scale(1.0) } - } +@-webkit-keyframes sk-bounce { + 0%, 100% { -webkit-transform: scale(0.0) } + 50% { -webkit-transform: scale(1.0) } +} - @keyframes sk-bounce { - 0%, 100% { - transform: scale(0.0); - -webkit-transform: scale(0.0); - } 50% { - transform: scale(1.0); - -webkit-transform: scale(1.0); - } +@keyframes sk-bounce { + 0%, 100% { + transform: scale(0.0); + -webkit-transform: scale(0.0); + } 50% { + transform: scale(1.0); + -webkit-transform: scale(1.0); } } From d64a085fb2e6fc0e8013ad9f3e0510af7e56bf27 Mon Sep 17 00:00:00 2001 From: Franc Camps-Febrer Date: Thu, 6 Dec 2018 14:08:47 +0000 Subject: [PATCH 3/6] Add cells to card and tidy up --- src/components/Card.jsx | 2 +- src/components/presentational/CardCategory.js | 6 +- src/components/presentational/CardLocation.js | 8 +- .../presentational/CardNarrative.js | 8 +- src/components/presentational/CardSource.js | 5 +- src/components/presentational/CardSummary.js | 8 +- src/components/presentational/CardTags.js | 6 +- src/js/data/copy.json | 1 + src/js/utilities.js | 8 ++ src/scss/_colors.scss | 1 + src/scss/card.scss | 101 +++++++++--------- src/scss/timeline.scss | 2 +- 12 files changed, 89 insertions(+), 67 deletions(-) diff --git a/src/components/Card.jsx b/src/components/Card.jsx index 895b299..0184063 100644 --- a/src/components/Card.jsx +++ b/src/components/Card.jsx @@ -139,7 +139,7 @@ class Card extends React.Component { {this.renderTimestamp()} {this.renderLocation()}
- {this.renderCategory()} + {this.renderCategory()} {this.renderSummary()}
); diff --git a/src/components/presentational/CardCategory.js b/src/components/presentational/CardCategory.js index a99a9e4..fd9691b 100644 --- a/src/components/presentational/CardCategory.js +++ b/src/components/presentational/CardCategory.js @@ -1,11 +1,13 @@ import React from 'react'; +import { capitalizeFirstLetter } from '../../js/data/utilities.js'; + const CardCategory = ({ categoryTitle, categoryLabel, color }) => ( -
+

{categoryTitle}

+ {capitalizeFirstLetter(categoryLabel)} - {categoryLabel}

); diff --git a/src/components/presentational/CardLocation.js b/src/components/presentational/CardLocation.js index 092a66a..e9598fa 100644 --- a/src/components/presentational/CardLocation.js +++ b/src/components/presentational/CardLocation.js @@ -7,22 +7,22 @@ const CardLocation = ({ language, location }) => { if (isNotNullNorUndefined(location)) { return ( -

+

location_on {location}

-

+
); } else { const unknown = copy[language].cardstack.unknown_location; return ( -

+

location_on {unknown}

-

+
); } } diff --git a/src/components/presentational/CardNarrative.js b/src/components/presentational/CardNarrative.js index 587c5f3..49f590d 100644 --- a/src/components/presentational/CardNarrative.js +++ b/src/components/presentational/CardNarrative.js @@ -3,10 +3,12 @@ import React from 'react'; import CardNarrativeLink from './CardNarrativeLink'; const CardNarrative = (props) => ( -
+

Connected events

-

Next:

-

Previous:

+
+

←

+

→

+
); diff --git a/src/components/presentational/CardSource.js b/src/components/presentational/CardSource.js index 42ac8cf..4abb38a 100644 --- a/src/components/presentational/CardSource.js +++ b/src/components/presentational/CardSource.js @@ -4,10 +4,11 @@ import copy from '../../js/data/copy.json'; const CardSource = ({ source, language }) => { const source_lang = copy[language].cardstack.source; + if (!source) source = copy[language].cardstack.unknown_source; return ( -
-

{source_lang}

+
+

{source_lang}:

{source}

); diff --git a/src/components/presentational/CardSummary.js b/src/components/presentational/CardSummary.js index a34a9b3..8dd9d8d 100644 --- a/src/components/presentational/CardSummary.js +++ b/src/components/presentational/CardSummary.js @@ -8,9 +8,11 @@ const CardSummary = ({ language, description, isHighlighted }) => { const descriptionText = (isHighlighted) ? description : `${description.substring(0, 40)}...`; return ( -
-

{summary}

-

{descriptionText}

+
+
+

{summary}

+

{descriptionText}

+
); } diff --git a/src/components/presentational/CardTags.js b/src/components/presentational/CardTags.js index 0e44961..b4b48b6 100644 --- a/src/components/presentational/CardTags.js +++ b/src/components/presentational/CardTags.js @@ -8,8 +8,8 @@ const CardTags = ({ tags, language }) => { if (tags.length > 0) { return ( -
-

{tags_lang}

+
+

{tags_lang}:

{tags.map((tag, idx) => { return ( @@ -26,7 +26,7 @@ const CardTags = ({ tags, language }) => { ); } return ( -

+

{tags_lang}

{no_tags_lang}

diff --git a/src/js/data/copy.json b/src/js/data/copy.json index 29a139b..5fd1890 100644 --- a/src/js/data/copy.json +++ b/src/js/data/copy.json @@ -137,6 +137,7 @@ "tags": "Tags", "notags": "No known tags for this event.", "source": "Source", + "unknown_source": "Unknown source. The relability of this event cannot be confirmed.", "category": "Category", "communication": "Communication", "transmitter": "Transmitter", diff --git a/src/js/utilities.js b/src/js/utilities.js index c9c9309..c51596c 100644 --- a/src/js/utilities.js +++ b/src/js/utilities.js @@ -36,6 +36,14 @@ export function isNotNullNorUndefined(variable) { return (typeof variable !== 'undefined' && variable !== null); } +/* +* Capitalizes _only_ the first letter of a string +* Taken from: https://stackoverflow.com/questions/1026069/how-do-i-make-the-first-letter-of-a-string-uppercase-in-javascript +*/ +export function capitalizeFirstLetter(string) { + return string.charAt(0).toUpperCase() + string.slice(1); +} + /** * Return a Date object given a datetime string of the format: "2016-09-10T07:00:00" * @param {string} datetime diff --git a/src/scss/_colors.scss b/src/scss/_colors.scss index 5b8f0e2..fa96ae6 100644 --- a/src/scss/_colors.scss +++ b/src/scss/_colors.scss @@ -1,6 +1,7 @@ $event_default: red; $offwhite: #efefef; +$lightwhite: #dfdfdf; $midwhite: #a0a0a0; $darkwhite: darken($midwhite, 15%); $yellow: #ffd800; diff --git a/src/scss/card.scss b/src/scss/card.scss index fc471bf..5a544bf 100644 --- a/src/scss/card.scss +++ b/src/scss/card.scss @@ -10,43 +10,18 @@ box-shadow: 0 19px 19px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); font-size: $large; line-height: $xxlarge; - transition: 0.2s ease; height: auto; + opacity: 0.9; + transition: opacity 0.2s ease; &:hover { - border: 1px solid $yellow; - } - - .material-icons { - font-size: $normal; - color: $darkwhite; - margin-right: 5px; - } - - .card-row { - display: flex; - flex-direction: row; - border-bottom: 1px solid $midwhite; - margin-bottom: 10px; - - .card-cell { - flex: 1; - } - } - - .card-bottomhalf { - transition: 0.4s ease; - height: auto; - - &.folded { - transition: 0.4s ease; - height: 0; - overflow: hidden; - } + opacity: 1; + transition: opacity 0.2s ease; } h4 { margin-bottom: 0; + margin-right: 5px; text-transform: uppercase; font-size: $xsmall; color: $darkwhite; @@ -61,19 +36,58 @@ margin: 0; } - .card-cell { - margin-bottom: 10px; + .material-icons { + font-size: $normal; + color: $darkwhite; + margin-right: 5px; + } + .card-row { + display: flex; + flex-direction: row; + border-bottom: 1px solid $lightwhite; + margin: 5px 0 10px 0; + padding-bottom: 10px; + + .card-cell { + flex: 1; + } + + h4 { + min-width: 80px; + max-width: 80px; + } + } + + .card-cell { + a { + font-weight: bold; + transition: color 0.2s; + } a:hover { - color: $red; + color: $darkwhite; cursor: pointer; + transition: color 0.2s; } a.disabled { color: $midgrey; + font-weight: normal; cursor: default; } } + + .card-bottomhalf { + transition: 0.4s ease; + height: auto; + + &.folded { + transition: 0.4s ease; + height: 0; + overflow: hidden; + } + } + .card-toggle p { text-align: center; cursor: pointer; @@ -126,28 +140,19 @@ } .category { + margin-bottom: 5px; + .color-category { width: 12px; height: 12px; border-radius: 20px; display: inline-block; - margin: 0px 5px 0 0; + margin: 0 0 0 5px; } - } - .event-type { - margin: 0 0 10px 0; - - span { - display: inline-block; - margin: 0 5px 2px 0; - color: $darkgrey; - - &.flagged { - background: $red; - color: $offwhite; - padding: 0 5px; - } + p { + text-align: right; + flex: 1; } } diff --git a/src/scss/timeline.scss b/src/scss/timeline.scss index 2ffda13..6e8cddf 100644 --- a/src/scss/timeline.scss +++ b/src/scss/timeline.scss @@ -78,7 +78,7 @@ &:first-child { text-transform: none; font-size: $normal; - letter-spacing: 0.05; + letter-spacing: 0.05em; } } } From f76000d4d9e6283459e0e1f1e6039a8898e751c9 Mon Sep 17 00:00:00 2001 From: Franc Camps-Febrer Date: Thu, 6 Dec 2018 14:15:53 +0000 Subject: [PATCH 4/6] Change font sizes for card cells --- src/components/presentational/CardNarrativeLink.js | 4 ++-- src/components/presentational/CardSource.js | 2 +- src/components/presentational/CardTags.js | 4 ++-- src/scss/card.scss | 1 - 4 files changed, 5 insertions(+), 6 deletions(-) diff --git a/src/components/presentational/CardNarrativeLink.js b/src/components/presentational/CardNarrativeLink.js index febffc5..4d93316 100644 --- a/src/components/presentational/CardNarrativeLink.js +++ b/src/components/presentational/CardNarrativeLink.js @@ -6,12 +6,12 @@ const CardNarrativeLink = ({ event, makeTimelabel, select }) => { return ( select(event)}> - {`${timelabel} - ${event.location}`} + {`${timelabel} / ${event.location}`} ); } - return (None); + return (None); } export default CardNarrativeLink; diff --git a/src/components/presentational/CardSource.js b/src/components/presentational/CardSource.js index 4abb38a..b234143 100644 --- a/src/components/presentational/CardSource.js +++ b/src/components/presentational/CardSource.js @@ -9,7 +9,7 @@ const CardSource = ({ source, language }) => { return (

{source_lang}:

-

{source}

+

{source}

); } diff --git a/src/components/presentational/CardTags.js b/src/components/presentational/CardTags.js index b4b48b6..6841cd4 100644 --- a/src/components/presentational/CardTags.js +++ b/src/components/presentational/CardTags.js @@ -14,7 +14,7 @@ const CardTags = ({ tags, language }) => { {tags.map((tag, idx) => { return ( - {tag.name} + {tag.name} {(idx < tags.length - 1) ? ',' : ''} @@ -28,7 +28,7 @@ const CardTags = ({ tags, language }) => { return (

{tags_lang}

-

{no_tags_lang}

+

{no_tags_lang}

); diff --git a/src/scss/card.scss b/src/scss/card.scss index 5a544bf..1f310fb 100644 --- a/src/scss/card.scss +++ b/src/scss/card.scss @@ -61,7 +61,6 @@ .card-cell { a { - font-weight: bold; transition: color 0.2s; } a:hover { From dc1dece1d9faefd353850f5f5992172581dc6386 Mon Sep 17 00:00:00 2001 From: Franc Camps-Febrer Date: Mon, 10 Dec 2018 16:12:18 +0100 Subject: [PATCH 5/6] Fix some rebasing conflicts --- src/actions/index.js | 18 +----------------- src/components/Toolbar.jsx | 11 +++++++---- src/components/presentational/CardCategory.js | 2 +- src/store/initial.js | 4 ++-- webpack.config.js | 2 +- 5 files changed, 12 insertions(+), 25 deletions(-) diff --git a/src/actions/index.js b/src/actions/index.js index 06c7f68..99f65e0 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -66,7 +66,7 @@ export function fetchDomain () { let tagsPromise if (process.env.features.USE_TAGS) { - tagsPromise = fetch(TAG_TREE_URL) + tagsPromise = fetch(TAG_URL) .then(response => response.json()) .catch(handleError('tags')) } @@ -164,14 +164,6 @@ export function updateTagFilters(tag) { } } -export const UPDATE_NARRATIVE = 'UPDATE_NARRATIVE'; - export function updateNarrative(narrative) { - return { - type: UPDATE_NARRATIVE, - narrative - } - } - export const UPDATE_TIMERANGE = 'UPDATE_TIMERANGE'; export function updateTimeRange(timerange) { return { @@ -264,11 +256,3 @@ export function fetchSourceError(msg) { msg } } - -export const TOGGLE_MAPVIEW = 'TOGGLE_MAPVIEW'; -export function toggleMapView(layer) { - return { - type: TOGGLE_MAPVIEW, - layer - } -} diff --git a/src/components/Toolbar.jsx b/src/components/Toolbar.jsx index bf31a9b..70fcabc 100644 --- a/src/components/Toolbar.jsx +++ b/src/components/Toolbar.jsx @@ -156,16 +156,19 @@ class Toolbar extends React.Component { renderToolbarTabs() { const title = copy[this.props.language].toolbar.title; + const isTags = this.props.tags && (this.props.tags.children > 0); + return (

{title}

{/*this.renderToolbarTab(0, 'search')*/} - {(this.props.isModeGuided) - ? this.renderToolbarNavs() - : this.renderToolbarTagRoot()} + {this.renderToolbarTab(0, 'Narratives')} + {(isTags) ? this.renderToolbarTab(1, 'Explore by tag') : ''}
- {/* {this.renderBottomActions()} */} +
) } diff --git a/src/components/presentational/CardCategory.js b/src/components/presentational/CardCategory.js index fd9691b..20b396d 100644 --- a/src/components/presentational/CardCategory.js +++ b/src/components/presentational/CardCategory.js @@ -1,6 +1,6 @@ import React from 'react'; -import { capitalizeFirstLetter } from '../../js/data/utilities.js'; +import { capitalizeFirstLetter } from '../../js/utilities.js'; const CardCategory = ({ categoryTitle, categoryLabel, color }) => (
diff --git a/src/store/initial.js b/src/store/initial.js index c387910..d487022 100644 --- a/src/store/initial.js +++ b/src/store/initial.js @@ -106,8 +106,8 @@ const initial = { categories: { default: 'red', // Add here other categories to differentiate by color, like: - alpha: '#c73e1d', - beta: '#f40000', + alpha: '#00ff00', + beta: '#ff0000', other: '#f3de2c' }, diff --git a/webpack.config.js b/webpack.config.js index ba1c538..4706f03 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,7 +1,7 @@ const webpack = require('webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); -const userConfig = require('./dev.config'); +const userConfig = require('./config'); const userConfigJSON = {}; const devMode = process.env.NODE_ENV !== 'production'; From 8e7226423446f79d58f494b7b49bd4fa86a45f59 Mon Sep 17 00:00:00 2001 From: Franc Camps-Febrer Date: Mon, 10 Dec 2018 16:25:22 +0100 Subject: [PATCH 6/6] Removed hover for cards --- src/scss/card.scss | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/scss/card.scss b/src/scss/card.scss index 1f310fb..2afcb63 100644 --- a/src/scss/card.scss +++ b/src/scss/card.scss @@ -12,12 +12,6 @@ line-height: $xxlarge; height: auto; opacity: 0.9; - transition: opacity 0.2s ease; - - &:hover { - opacity: 1; - transition: opacity 0.2s ease; - } h4 { margin-bottom: 0;