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); } }