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/actions/index.js b/src/actions/index.js index 0d3b0c4..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 { @@ -180,6 +172,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 { diff --git a/src/components/Card.jsx b/src/components/Card.jsx index 9c97da6..0184063 100644 --- a/src/components/Card.jsx +++ b/src/components/Card.jsx @@ -135,8 +135,11 @@ class Card extends React.Component { renderHeader() { return (
+
+ {this.renderTimestamp()} + {this.renderLocation()} +
{this.renderCategory()} - {this.renderTimestamp()} {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/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; + const isTags = this.props.tags && (this.props.tags.children > 0); + + return ( +
+

{title}

+
+ {/*this.renderToolbarTab(0, 'search')*/} + {this.renderToolbarTab(0, 'Narratives')} + {(isTags) ? this.renderToolbarTab(1, 'Explore by tag') : ''} +
+ +
+ ) + } + render() { return (
diff --git a/src/components/presentational/CardCategory.js b/src/components/presentational/CardCategory.js index 43dd010..20b396d 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/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 a798a5e..e9598fa 100644 --- a/src/components/presentational/CardLocation.js +++ b/src/components/presentational/CardLocation.js @@ -5,20 +5,24 @@ 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..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/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 4597d49..b234143 100644 --- a/src/components/presentational/CardSource.js +++ b/src/components/presentational/CardSource.js @@ -4,11 +4,12 @@ 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}

+
+

{source_lang}:

+

{source}

); } diff --git a/src/components/presentational/CardSummary.js b/src/components/presentational/CardSummary.js index bb4f10f..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 46088cb..6841cd4 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..5fd1890 100644 --- a/src/js/data/copy.json +++ b/src/js/data/copy.json @@ -133,10 +133,12 @@ "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", + "unknown_source": "Unknown source. The relability of this event cannot be confirmed.", + "category": "Category", "communication": "Communication", "transmitter": "Transmitter", "receiver": "Receiver", 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 186508a..2afcb63 100644 --- a/src/scss/card.scss +++ b/src/scss/card.scss @@ -10,27 +10,16 @@ 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; - - &:hover { - border: 1px solid $yellow; - } - - .card-bottomhalf { - transition: 0.4s ease; - height: auto; - - &.folded { - transition: 0.4s ease; - height: 0; - overflow: hidden; - } - } + opacity: 0.9; h4 { - text-transform: normal; margin-bottom: 0; + margin-right: 5px; + text-transform: uppercase; + font-size: $xsmall; + color: $darkwhite; + font-weight: 100; &:first-child { margin-top: 0; @@ -41,19 +30,57 @@ margin: 0; } - .event-card-section { - 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 { + 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; @@ -106,28 +133,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; } } @@ -145,49 +163,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); } } 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; } } } 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' },