Feature/smallfixes (#177)

* return logos

* dates w/o commas

* make arrows slightly larger

* intro/info popup fixes

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."

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}`
 }

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}

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

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>

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

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: "* ";
       }

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;