some styling fixes (#178)

* logos at bottom

* use GT-Zirkon font

* update filter/category copy

* add a fallback font

* stop tracking

* make timeline smaller for smaller laptops

* fix for firefox responsive intropopup

* mobile fallback

* update design system version

src/components/CardStack.jsx

@@ -109,7 +109,8 @@ class CardStack extends React.Component {
               title: 'Type of Violation',
               value: event.associations.slice(0, -1).map(association => ({
                 text: association,
-                color: getFilterIdxFromColorSet(association, this.props.coloringSet) >= 0 ? this.props.colors[getFilterIdxFromColorSet(association, this.props.coloringSet)] : null
+                color: getFilterIdxFromColorSet(association, this.props.coloringSet) >= 0 ? this.props.colors[getFilterIdxFromColorSet(association, this.props.coloringSet)] : null,
+                normalCursor: true
               }))
             },
             {
@@ -117,7 +118,8 @@ class CardStack extends React.Component {
               title: 'Against',
               value: event.associations.slice(-1).map(category => ({
                 text: category,
-                color: null
+                color: null,
+                normalCursor: true
               }))
             }
           ],

src/components/Layout.js

@@ -239,13 +239,48 @@ class Dashboard extends React.Component {
     }
   }
 
+  renderIntroPopup (isMobile, styles) {
+    const { app, actions } = this.props
+
+    const extraContent = isMobile ? <div style={{ position: 'relative', bottom: 0 }}>
+      <h3 style={{ color: 'var(--error-red)' }}>This platform is not suitable for mobile.<br /><br />Please re-visit the site on a device with a larger screen.</h3>
+    </div> : null
+
+    return <Popup
+      title='Introduction to the platform'
+      theme='dark'
+      isOpen={app.flags.isIntropopup}
+      onClose={actions.toggleIntroPopup}
+      content={app.intro}
+      styles={styles}
+      isMobile={isMobile}
+    >
+      {extraContent}
+    </Popup>
+  }
+
   render () {
     const { actions, app, domain, features } = this.props
-    if (isMobile || window.innerWidth < 600) {
+    const dateHeight = 80
+    const padding = 2
+    const checkMobile = (isMobile || window.innerWidth < 600)
+
+    const popupStyles = {
+      height: checkMobile ? '100vh' : 'fit-content',
+      display: checkMobile ? 'block' : 'table',
+      width: checkMobile ? '100vw' : window.innerWidth > 768 ? '60vw' : `calc(100vw - var(--toolbar-width))`,
+      maxWidth: checkMobile ? '100vw' : 600,
+      maxHeight: checkMobile ? '100vh' : window.innerHeight > 768 ? `calc(100vh - ${app.timeline.dimensions.height}px - ${dateHeight}px)` : `100vh`,
+      left: checkMobile ? padding : 'inherit',
+      top: 0,
+      overflowY: 'scroll'
+    }
+
+    if (checkMobile) {
       const msg = 'This platform is not suitable for mobile. Please re-visit the site on a device with a larger screen.'
       return (
         <div>
-          {features.USE_COVER ? (
+          {(features.USE_COVER && !app.intro) && (
             <StaticPage showing={app.flags.isCover}>
               {/* enable USE_COVER in config.js features, and customise your header */}
               {/* pass 'actions.toggleCover' as a prop to your custom header */}
@@ -255,21 +290,17 @@ class Dashboard extends React.Component {
                 /* eslint-enable no-undef */
               }} />
             </StaticPage>
-          ) : <div className='fixedTooSmallMessage'>{msg}</div>}
+          )}
+          {app.intro && <>
+            {this.renderIntroPopup(true, popupStyles)}
+          </>}
+          {!app.intro && !features.USE_COVER && (
+            <div className='fixedTooSmallMessage'>{msg}</div>
+          )}
         </div>
       )
     }
 
-    const dateHeight = 80
-    const popupStyles = {
-      height: `fit-content`,
-      width: window.innerWidth > 768 ? '60vw' : `calc(100vw - var(--toolbar-width))`,
-      maxWidth: 600,
-      maxHeight: window.innerHeight > 768 ? `calc(100vh - ${app.timeline.dimensions.height}px - ${dateHeight}px)` : `100vh`,
-      top: 0,
-      overflowY: 'scroll'
-    }
-
     return (
       <div>
         <Toolbar
@@ -327,14 +358,7 @@ class Dashboard extends React.Component {
           isOpen={app.flags.isInfopopup}
           onClose={actions.toggleInfoPopup}
         />
-        <Popup
-          title='Introduction to the platform'
-          theme='dark'
-          isOpen={app.flags.isIntropopup}
-          onClose={actions.toggleIntroPopup}
-          content={app.intro}
-          styles={popupStyles}
-        />
+        {this.renderIntroPopup(false)}
         {app.debug ? <Notification
           isNotification={app.flags.isNotification}
           notifications={domain.notifications}

src/components/Toolbar/CategoriesListPanel.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import marked from 'marked'
 import Checkbox from '../presentational/Checkbox'
 import copy from '../../common/data/copy.json'
 
@@ -31,7 +32,7 @@ export default ({
   return (
     <div className='react-innertabpanel'>
       <h2>{copy[language].toolbar.categories}</h2>
-      <p>{copy[language].toolbar.explore_by_category__description}</p>
+      <p dangerouslySetInnerHTML={{ __html: marked(copy[language].toolbar.explore_by_category__description) }} />
       {renderCategoryTree()}
     </div>
   )

src/components/Toolbar/FilterListPanel.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import Checkbox from '../presentational/Checkbox'
+import marked from 'marked'
 import copy from '../../common/data/copy.json'
 import { getFilterIdxFromColorSet } from '../../common/utilities'
 
@@ -85,7 +86,7 @@ function FilterListPanel ({
   return (
     <div className='react-innertabpanel'>
       <h2>{copy[language].toolbar.filters}</h2>
-      <p>{copy[language].toolbar.explore_by_filter__description}</p>
+      <p dangerouslySetInnerHTML={{ __html: marked(copy[language].toolbar.explore_by_filter__description) }} />
       {renderTree(filters)}
     </div>
   )

src/components/presentational/Popup.js

@@ -9,15 +9,18 @@ export default ({
   isOpen = true,
   onClose,
   title,
-  theme = 'light'
+  theme = 'light',
+  isMobile = false,
+  children
 }) => (
   <div>
-    <div className={`infopopup ${isOpen ? '' : 'hidden'} ${theme === 'dark' ? 'dark' : 'light'}`} style={{ ...styles, fontSize }}>
+    <div className={`infopopup ${isOpen ? '' : 'hidden'} ${theme === 'dark' ? 'dark' : 'light'} ${isMobile ? 'mobile' : ''}`} style={{ ...styles, fontSize }}>
       <div className='legend-header'>
         <button onClick={onClose} className='side-menu-burg over-white is-active'><span /></button>
         <h2>{title}</h2>
       </div>
       {content.map(t => <div dangerouslySetInnerHTML={{ __html: marked(t) }} />)}
+      {children}
     </div>
   </div>
 )