bellingcat/ukraine-timemap
1
0
Fork 0
mirror of https://github.com/bellingcat/ukraine-timemap.git synced 2026-06-08 03:18:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

Redesign card

Browse Source
This commit is contained in:
Franc Camps-Febrer
2018-12-05 12:57:43 +00:00
parent 62b8908d03
commit 7c707ababf
12 changed files with 120 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@@ -5,7 +5,8 @@
<title>TimeMap - Forensic Architecture</title>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js" charset="utf-8"></script>
</head>
<body>

8
src/components/Card.jsx
View File

@@ -135,8 +135,11 @@ class Card extends React.Component {
renderHeader() {
return (
<div className="card-collapsed">
{this.renderCategory()}
{this.renderTimestamp()}
<div className="card-row">
{this.renderTimestamp()}
{this.renderLocation()}
</div>
{this.renderCategory()}
{this.renderSummary()}
</div>
);
@@ -150,7 +153,6 @@ class Card extends React.Component {
} else {
return (
<div className="card-bottomhalf">
{this.renderLocation()}
{this.renderTags()}
{this.renderSource()}
{this.renderNarrative()}

2
src/components/presentational/CardCategory.js
View File

@@ -1,7 +1,7 @@
import React from 'react';
const CardCategory = ({ categoryTitle, categoryLabel, color }) => (
<div className="event-card-section category">
<div className="card-cell category">
<h4>{categoryTitle}</h4>
<p>
<span className='color-category' style={{ background: color }}/>

18
src/components/presentational/CardLocation.js
View File

@@ -5,19 +5,23 @@ import { isNotNullNorUndefined } from '../../js/utilities';
const CardLocation = ({ language, location }) => {
const location_lang = copy[language].cardstack.location;
if (isNotNullNorUndefined(location)) {
return (
<p className="event-card-section location">
<h4>{location_lang}</h4>
<p>{location}</p>
<p className="card-cell location">
<p>
<i className="material-icons left">location_on</i>
{location}
</p>
</p>
);
} else {
const unknown = copy[language].cardstack.unknown_location;
return (
<p className="event-card-section location">
<h4>{location_lang}</h4>
<p>Sin localización conocida.</p>
<p className="card-cell location">
<p>
<i className="material-icons left">location_on</i>
{unknown}
</p>
</p>
);
}

2
src/components/presentational/CardNarrative.js
View File

@@ -3,7 +3,7 @@ import React from 'react';
import CardNarrativeLink from './CardNarrativeLink';
const CardNarrative = (props) => (
<div className="event-card-section">
<div className="card-cell">
<h4>Connected events</h4>
<p>Next: <CardNarrativeLink {...props} event={props.next}/></p>
<p>Previous: <CardNarrativeLink {...props} event={props.prev} /></p>

2
src/components/presentational/CardSource.js
View File

@@ -6,7 +6,7 @@ const CardSource = ({ source, language }) => {
const source_lang = copy[language].cardstack.source;
return (
<div className="event-card-section source">
<div className="card-cell source">
<h4>{source_lang}</h4>
<p>{source}</p>
</div>

2
src/components/presentational/CardSummary.js
View File

@@ -8,7 +8,7 @@ const CardSummary = ({ language, description, isHighlighted }) => {
const descriptionText = (isHighlighted) ? description : `${description.substring(0, 40)}...`;
return (
<div className="event-card-section summary">
<div className="card-cell summary">
<h4>{summary}</h4>
<p>{descriptionText}</p>
</div>

44
src/components/presentational/CardTags.js
View File

@@ -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 (
<div className="event-card-section tags">
<h4>{label}</h4>
<p>{
tags.map((tag, idx) => {
return (
<span className="tag">
{tag.name}
{
(idx < tags.length - 1)
if (tags.length > 0) {
return (
<div className="card-cell tags">
<h4>{tags_lang}</h4>
<p>
{tags.map((tag, idx) => {
return (
<span className="tag">
{tag.name}
{(idx < tags.length - 1)
? ','
: ''
}
</span>
);
})
}</p>
: ''}
</span>
);
})}
</p>
</div>
);
}
return (
<div className="card-cell tags">
<h4>{tags_lang}</h4>
<p>{no_tags_lang}</p>
</div>
);
);
}
export default CardTags;

16
src/components/presentational/CardTimestamp.js
View File

@@ -12,16 +12,20 @@ const CardTimestamp = ({ makeTimelabel, language, timestamp }) => {
if (isNotNullNorUndefined(timestamp)) {
const timelabel = makeTimelabel(timestamp);
return (
<div className="event-card-section timestamp">
<h4>{daytime_lang}</h4>
{timelabel}
<div className="card-cell timestamp">
<p>
<i className="material-icons left">today</i>
{timelabel}
</p>
</div>
);
} else {
return (
<div className="event-card-section timestamp">
<h4>{daytime_lang}</h4>
{unknown_lang}
<div className="card-cell timestamp">
<p>
<i className="material-icons left">today</i>
{unknown_lang}
</p>
</div>
);
}

7
src/js/data/copy.json
View File

@@ -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",

69
src/scss/card.scss
View File

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

73
src/scss/loading.scss
View File

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