mirror of
https://github.com/bellingcat/ukraine-timemap.git
synced 2026-06-08 03:18:36 +03:00
💄
This commit is contained in:
Lachlan Kermode
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "guerrero",
|
||||
"name": "timemap",
|
||||
"version": "0.1.0",
|
||||
"description": "",
|
||||
"homepage": ".",
|
||||
|
||||
@@ -2,15 +2,15 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>TimeMap - Forensic Architecture</title>
|
||||
<title>Civilian Harm in Ukraine</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=Lato" -->
|
||||
<!-- rel="stylesheet" -->
|
||||
<!-- /> -->
|
||||
<link
|
||||
href="https://fonts.googleapis.com/icon?family=Material+Icons"
|
||||
rel="stylesheet"
|
||||
|
||||
@@ -112,7 +112,7 @@
|
||||
"Zoom in either with a mouse-scroll or by clicking a ‘cluster’ dot.",
|
||||
"Use **filters** and **categories** to segment the data. Selecting certain filters and categories will show only the datapoints that relate to them. If no filters or categories are selected, all the datapoints are displayed.",
|
||||
"Selecting more than one filter will introduce colour-coded datapoints, which allow you to compare types of incident across time and space. This feature works up to a maximum of six filters.",
|
||||
"Use the left and right arrows to move back and forward through time. You can also click and drag anywhere on the timeline. Use the handles on the right to select a date range."
|
||||
"Once you have clicked on an event, use the left and right arrows to move back and forward day by day. You can also click and drag anywhere on the timeline. Use the handles on the right to select a date range."
|
||||
],
|
||||
"notation": "Combinations of colours within a circle indicate multiple events in a single location.",
|
||||
"arrows": "Use the left/right arrows on the keboard to move back and forth between events in time."
|
||||
@@ -161,7 +161,7 @@
|
||||
"Other"
|
||||
],
|
||||
"info": "Seeing events that occurred between",
|
||||
"default_categories_label": "Last 12 Days"
|
||||
"default_categories_label": ""
|
||||
},
|
||||
"cardstack": {
|
||||
"header": "selected events",
|
||||
|
||||
@@ -3,7 +3,7 @@ import { connect } from "react-redux";
|
||||
import { Player } from "video-react";
|
||||
import marked from "marked";
|
||||
import MediaOverlay from "./atoms/Media";
|
||||
import falogo from "../assets/fa-logo.png";
|
||||
// import falogo from "../assets/fa-logo.png";
|
||||
import bcatlogo from "../assets/bellingcat-logo.png";
|
||||
const MEDIA_HIDDEN = -2;
|
||||
|
||||
@@ -158,11 +158,11 @@ class TemplateCover extends React.Component {
|
||||
className="cover-logo-container"
|
||||
href="https://forensic-architecture.org"
|
||||
>
|
||||
<img
|
||||
className="cover-logo"
|
||||
src={falogo}
|
||||
alt="Forensic Architecture logo"
|
||||
/>
|
||||
{/* <img */}
|
||||
{/* className="cover-logo" */}
|
||||
{/* src={falogo} */}
|
||||
{/* alt="Forensic Architecture logo" */}
|
||||
{/* /> */}
|
||||
</a>
|
||||
<a className="cover-logo-container" href="https://bellingcat.com">
|
||||
<img className="cover-logo" src={bcatlogo} alt="Bellingcat logo" />
|
||||
|
||||
@@ -145,7 +145,7 @@ class CardStack extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { isCardstack, selected, narrative, timelineDims } = this.props;
|
||||
const { isCardstack, selected, narrative } = this.props;
|
||||
if (selected.length > 0) {
|
||||
if (!narrative) {
|
||||
return (
|
||||
|
||||
@@ -75,7 +75,19 @@ const Media = ({ src, title }) => {
|
||||
</div>
|
||||
);
|
||||
default:
|
||||
return null;
|
||||
if (src === "HIDDEN") {
|
||||
return (
|
||||
<div className="card-cell media source-hidden">
|
||||
<h4>
|
||||
Source hidden
|
||||
<br />
|
||||
Privacy concerns
|
||||
</h4>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -87,6 +87,7 @@ class TelegramEmbed extends Component {
|
||||
return (
|
||||
<div data-sharing-id={container} style={containerStyles}>
|
||||
<iframe
|
||||
title={src}
|
||||
ref={(node) => (this.iFrame = node)}
|
||||
src={src + "?embed=1"}
|
||||
height={height}
|
||||
|
||||
@@ -423,7 +423,7 @@ class Timeline extends React.Component {
|
||||
.default_categories_label
|
||||
}
|
||||
/>
|
||||
{app.timeline.dimensions.ticks == 1 && (
|
||||
{app.timeline.dimensions.ticks === 1 && (
|
||||
<Handles
|
||||
dims={dims}
|
||||
onMoveTime={(dir) => {
|
||||
|
||||
@@ -3,12 +3,11 @@ import React from "react";
|
||||
const TimelineHandles = ({ dims, onMoveTime }) => {
|
||||
const transform = "scale(1.5,1.5)";
|
||||
const size = 45;
|
||||
const handleOffset = dims.contentHeight / 2;
|
||||
return (
|
||||
<g className="time-controls-inline">
|
||||
<g
|
||||
transform={`translate(${dims.marginLeft - 20}, ${
|
||||
dims.contentHeight - 10
|
||||
})`}
|
||||
transform={`translate(${dims.marginLeft - 20}, ${handleOffset})`}
|
||||
onClick={() => onMoveTime("backwards")}
|
||||
>
|
||||
<circle r={size} />
|
||||
@@ -18,9 +17,9 @@ const TimelineHandles = ({ dims, onMoveTime }) => {
|
||||
/>
|
||||
</g>
|
||||
<g
|
||||
transform={`translate(${dims.width - dims.width_controls + 20}, ${
|
||||
dims.contentHeight - 10
|
||||
})`}
|
||||
transform={`translate(${
|
||||
dims.width - dims.width_controls + 20
|
||||
}, ${handleOffset})`}
|
||||
onClick={() => onMoveTime("forward")}
|
||||
>
|
||||
<circle r={size} />
|
||||
|
||||
@@ -10,8 +10,6 @@
|
||||
list-style-type: none;
|
||||
font-size: $large;
|
||||
line-height: $xxlarge;
|
||||
// height: auto;
|
||||
// opacity: 0.9;
|
||||
transition: background-color 0.4s;
|
||||
text-align: left;
|
||||
overflow-y: scroll;
|
||||
@@ -184,8 +182,6 @@
|
||||
|
||||
.media {
|
||||
display: flex;
|
||||
// max-height: 350px;
|
||||
// justify-content: center;
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -193,14 +189,9 @@
|
||||
width: 100%;
|
||||
display: flex;
|
||||
img {
|
||||
// width: auto;
|
||||
// height: 100%;
|
||||
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
// width: 100%;
|
||||
// height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -274,4 +265,20 @@
|
||||
.embedded {
|
||||
width: calc(#{$card-width} - 50px) !important;
|
||||
}
|
||||
|
||||
.source-hidden {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
width: calc(#{$card-width} - 35px);
|
||||
border: 2px solid $midgrey;
|
||||
min-height: 260px;
|
||||
background-color: $darkgrey;
|
||||
border-radius: 5px;
|
||||
cursor: auto;
|
||||
h4 {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@ $card-stack-header-height: 38px;
|
||||
position: absolute;
|
||||
top: calc(#{$card-right} + #{$card-stack-header-height});
|
||||
right: $card-right;
|
||||
max-height: calc(100% - 10px);
|
||||
max-height: calc(100% - #{$timeline-height} + 60px);
|
||||
height: auto;
|
||||
width: $card-width;
|
||||
overflow-y: scroll;
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
position: relative;
|
||||
width: $toolbar-width;
|
||||
height: 100%;
|
||||
padding: 20px 0px;
|
||||
padding: 20px 0px 0px 0px;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
color: $offwhite;
|
||||
@@ -275,6 +275,7 @@
|
||||
position: fixed;
|
||||
transition: 0.2s ease;
|
||||
left: $toolbar-width;
|
||||
max-height: calc(100vh - #{$timeline-height});
|
||||
box-shadow: 10px -10px 38px rgba(0, 0, 0, 0.3),
|
||||
10px 15px 12px rgba(0, 0, 0, 0.22);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user