From 7080c6d7af961bc40f5652a7fd918280be2d3853 Mon Sep 17 00:00:00 2001
From: Lachlan Kermode <lachiekermode@gmail.com>
Date: Thu, 29 Oct 2020 09:31:13 +0100
Subject: [PATCH] Feature/smallfixes (#177)

* return logos

* dates w/o commas

* make arrows slightly larger

* intro/info popup fixes
---
 src/common/data/copy.json                         |  2 +-
 src/common/utilities.js                           |  2 +-
 src/components/Layout.js                          | 12 +++++++-----
 src/components/TimelineCategories.jsx             |  2 +-
 src/components/presentational/Popup.js            |  4 +++-
 src/components/presentational/Timeline/Handles.js | 10 ++++++----
 src/scss/cover.scss                               |  3 +--
 src/scss/infopopup.scss                           | 13 +++++++++++++
 8 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/common/data/copy.json b/src/common/data/copy.json
index d811f9f..7ee89dd 100644
--- a/src/common/data/copy.json
+++ b/src/common/data/copy.json
@@ -98,7 +98,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. Use the handles on the right to select a date range."
+          "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."
         ],
         "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."
diff --git a/src/common/utilities.js b/src/common/utilities.js
index 1b94098..ba931ad 100644
--- a/src/common/utilities.js
+++ b/src/common/utilities.js
@@ -406,5 +406,5 @@ export function makeNiceDate (datetime) {
     { value: year }
   ] = dateTimeFormat.formatToParts(datetime)
 
-  return `${day} ${month}, ${year}`
+  return `${day} ${month} ${year}`
 }
diff --git a/src/components/Layout.js b/src/components/Layout.js
index d9c806a..29c92e4 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -260,11 +260,13 @@ class Dashboard extends React.Component {
       )
     }
 
+    const dateHeight = 80
     const popupStyles = {
-      fontSize: 18,
-      height: `calc(100vh - ${app.timeline.dimensions.height}px)`,
-      width: '40vw',
-      bottom: app.timeline.dimensions.height
+      height: `calc(100vh - ${app.timeline.dimensions.height}px - ${dateHeight}px)`,
+      width: '60vw',
+      maxWidth: 600,
+      bottom: app.timeline.dimensions.height + dateHeight,
+      overflowY: 'scroll'
     }
 
     return (
@@ -325,7 +327,7 @@ class Dashboard extends React.Component {
           onClose={actions.toggleInfoPopup}
         />
         <Popup
-          title={process.env.display_title}
+          title='Introduction to the platform'
           theme='dark'
           isOpen={app.flags.isIntropopup}
           onClose={actions.toggleIntroPopup}
diff --git a/src/components/TimelineCategories.jsx b/src/components/TimelineCategories.jsx
index 760646e..4fc08cf 100644
--- a/src/components/TimelineCategories.jsx
+++ b/src/components/TimelineCategories.jsx
@@ -66,7 +66,7 @@ class TimelineCategories extends React.Component {
           x={dims.marginLeft}
           y={dims.marginTop}
           width={dims.width - dims.marginLeft - dims.width_controls}
-          height='100%'
+          height={dims.contentHeight}
         />
       </g>
     )
diff --git a/src/components/presentational/Popup.js b/src/components/presentational/Popup.js
index 3170110..6cb47ca 100644
--- a/src/components/presentational/Popup.js
+++ b/src/components/presentational/Popup.js
@@ -1,6 +1,8 @@
 import React from 'react'
 import marked from 'marked'
 
+const fontSize = window.innerWidth > 1000 ? 14 : 18
+
 export default ({
   content = [],
   styles = {},
@@ -10,7 +12,7 @@ export default ({
   theme = 'light'
 }) => (
   <div>
-    <div className={`infopopup ${isOpen ? '' : 'hidden'} ${theme === 'dark' ? 'dark' : 'light'}`} style={styles}>
+    <div className={`infopopup ${isOpen ? '' : 'hidden'} ${theme === 'dark' ? 'dark' : 'light'}`} style={{ ...styles, fontSize }}>
       <div className='legend-header'>
         <button onClick={onClose} className='side-menu-burg over-white is-active'><span /></button>
         <h2>{title}</h2>
diff --git a/src/components/presentational/Timeline/Handles.js b/src/components/presentational/Timeline/Handles.js
index 3606a14..1e08703 100644
--- a/src/components/presentational/Timeline/Handles.js
+++ b/src/components/presentational/Timeline/Handles.js
@@ -1,21 +1,23 @@
 import React from 'react'
 
 const TimelineHandles = ({ dims, onMoveTime }) => {
+  const transform = 'scale(1.5,1.5)'
+  const size = 45
   return (
     <g className='time-controls-inline'>
       <g
         transform={`translate(${dims.marginLeft - 20}, ${dims.contentHeight - 10})`}
         onClick={() => onMoveTime('backwards')}
       >
-        <circle r='15' />
-        <path d='M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z' transform='rotate(270)' />
+        <circle r={size} />
+        <path d='M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z' transform={`rotate(270) ${transform}`} />
       </g>
       <g
         transform={`translate(${dims.width - dims.width_controls + 20}, ${dims.contentHeight - 10})`}
         onClick={() => onMoveTime('forward')}
       >
-        <circle r='15' />
-        <path d='M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z' transform='rotate(90)' />
+        <circle r={size} />
+        <path d='M0,-7.847549217020565L6.796176979388489,3.9237746085102825L-6.796176979388489,3.9237746085102825Z' transform={`rotate(90) ${transform}`} />
       </g>
     </g>
   )
diff --git a/src/scss/cover.scss b/src/scss/cover.scss
index 21253d6..cc12f2d 100644
--- a/src/scss/cover.scss
+++ b/src/scss/cover.scss
@@ -46,7 +46,6 @@
     top: 0;
     max-width: $toolbar-width;
     max-height: 30px;
-    display: none;
     justify-content: center;
     align-items: center;
     .cover-logo-container {
@@ -224,7 +223,7 @@
       ul {
         list-style: none;
       }
-  
+
       li::before {
         content: "* ";
       }
diff --git a/src/scss/infopopup.scss b/src/scss/infopopup.scss
index 6e4451b..79e019b 100644
--- a/src/scss/infopopup.scss
+++ b/src/scss/infopopup.scss
@@ -40,6 +40,18 @@
     color: white;
   }
 
+  iframe {
+    flex: 1;
+    width: 100%;
+    min-height: 400px;
+  }
+
+  @media (max-height: 1000px) {
+    iframe {
+      min-height: 230px;
+    }
+  }
+
 
   .legend {
     display: flex;
@@ -49,6 +61,7 @@
   .legend-header {
     display: flex;
     flex-direction: row;
+    justify-content: center;
     h2 {
       display: flex;
       font-size: 12pt;