From 86fcd1a942890d1fe1cfee6c724641794f0f99f6 Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Thu, 10 Mar 2022 07:20:48 -0500
Subject: [PATCH] :lipstick:

---
 package.json                                  |  2 +-
 public/index.html                             | 10 ++++----
 src/common/data/copy.json                     |  4 +--
 src/components/TemplateCover.js               | 12 ++++-----
 src/components/controls/CardStack.js          |  2 +-
 src/components/controls/atoms/Media.js        | 14 ++++++++++-
 .../controls/atoms/TelegramEmbed.js           |  1 +
 src/components/time/Timeline.js               |  2 +-
 src/components/time/atoms/Handles.js          | 11 ++++----
 src/scss/card.scss                            | 25 ++++++++++++-------
 src/scss/cardstack.scss                       |  2 +-
 src/scss/toolbar.scss                         |  3 ++-
 12 files changed, 54 insertions(+), 34 deletions(-)
diff --git a/package.json b/package.json
index 3912929..f7e6b30 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "guerrero",
+  "name": "timemap",
   "version": "0.1.0",
   "description": "",
   "homepage": ".",
diff --git a/public/index.html b/public/index.html
index 5261b4f..2c97495 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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"
diff --git a/src/common/data/copy.json b/src/common/data/copy.json
index 03b4f35..c121446 100644
--- a/src/common/data/copy.json
+++ b/src/common/data/copy.json
@@ -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",
diff --git a/src/components/TemplateCover.js b/src/components/TemplateCover.js
index c142128..155ab77 100644
--- a/src/components/TemplateCover.js
+++ b/src/components/TemplateCover.js
@@ -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" />
diff --git a/src/components/controls/CardStack.js b/src/components/controls/CardStack.js
index 7fafa40..3b083bd 100644
--- a/src/components/controls/CardStack.js
+++ b/src/components/controls/CardStack.js
@@ -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 (
diff --git a/src/components/controls/atoms/Media.js b/src/components/controls/atoms/Media.js
index 4f797a6..55bb2a9 100644
--- a/src/components/controls/atoms/Media.js
+++ b/src/components/controls/atoms/Media.js
@@ -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;
+      }
   }
 };
 
diff --git a/src/components/controls/atoms/TelegramEmbed.js b/src/components/controls/atoms/TelegramEmbed.js
index 01d823b..c874741 100644
--- a/src/components/controls/atoms/TelegramEmbed.js
+++ b/src/components/controls/atoms/TelegramEmbed.js
@@ -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}
diff --git a/src/components/time/Timeline.js b/src/components/time/Timeline.js
index 2ec6183..19dd63c 100644
--- a/src/components/time/Timeline.js
+++ b/src/components/time/Timeline.js
@@ -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) => {
diff --git a/src/components/time/atoms/Handles.js b/src/components/time/atoms/Handles.js
index 072b7c4..ef871c0 100644
--- a/src/components/time/atoms/Handles.js
+++ b/src/components/time/atoms/Handles.js
@@ -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} />
diff --git a/src/scss/card.scss b/src/scss/card.scss
index 4efe6f0..9d6c4e5 100644
--- a/src/scss/card.scss
+++ b/src/scss/card.scss
@@ -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;
+    }
+  }
 }
diff --git a/src/scss/cardstack.scss b/src/scss/cardstack.scss
index e759596..831bee5 100644
--- a/src/scss/cardstack.scss
+++ b/src/scss/cardstack.scss
@@ -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;
diff --git a/src/scss/toolbar.scss b/src/scss/toolbar.scss
index 4546e5c..39520fa 100644
--- a/src/scss/toolbar.scss
+++ b/src/scss/toolbar.scss
@@ -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);
 
