Adding ObsExplainer component, will now only use node 12 in the CI pipeline

Author: gareth-j

.github/workflows/node.js.yml

@@ -13,7 +13,7 @@ jobs:
     if: "!contains(github.event.head_commit.message, '[skip ci]')"
     strategy:
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [12.x]
 
     steps:
     - uses: actions/checkout@v2
@@ -35,7 +35,7 @@ jobs:
         git config --global user.email $user_email
         git remote set-url origin https://${github_token}@github.com/${repository}
         npm run deploy
-      if: github.ref == 'refs/heads/main' && matrix.node-version == '14.x'
+      if: github.ref == 'refs/heads/main' && matrix.node-version == '12.x'
       env:
         user_name: 'github-actions[bot]'
         user_email: 'github-actions[bot]@users.noreply.github.com'

src/components/ObsExplainer/ObsExplainer.js

@@ -0,0 +1,66 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+import styles from "./ObsExplainer.module.css";
+
+class ObsExplainer extends React.Component {
+  render() {
+    const style = this.props.nogap ? styles.containerNoGap : styles.container;
+
+    return (
+      <div className={style}>
+        <div className={styles.header}>Observations</div>
+        <div className={styles.explain}>
+          <li>Greenhouse gas concentrations are monitored from a network of sites across the city.</li>
+          <li>Measurements are made of carbon dioxide and methane, the most important greenhouse gases.</li>
+          <li>
+            Scientists are using these observations to learn more about the UK's methane emissions. 
+          </li>
+          
+
+          <li>
+            Measurements are made by the&nbsp;
+            <a
+              href="https://www.bristol.ac.uk/chemistry/research/acrg/current/decc.html"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              UK DECC network
+            </a>
+            ,&nbsp;
+            <a href="https://www.bristol.ac.uk/chemistry/research/acrg/" target="_blank" rel="noopener noreferrer">
+              University of Bristol
+            </a>
+            ,&nbsp;
+            <a href="https://www.npl.co.uk/emissions-atmospheric-metrology" target="_blank" rel="noopener noreferrer">
+              National Physical Laboratory
+            </a>
+            ,&nbsp;
+            <a href="http://beacon.berkeley.edu/about/" target="_blank" rel="noopener noreferrer">
+              BEACO2N
+            </a>
+            &nbsp;and&nbsp;
+            <a
+              href="https://www.royalholloway.ac.uk/research-and-teaching/departments-and-schools/earth-sciences/research/research-laboratories/greenhouse-gas-laboratory/"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Royal Holloway University of London.
+            </a>
+          </li>
+          <li>
+          Start exploring the measurements by selecting a site from the map
+          </li>
+        </div>
+      </div>
+    );
+  }
+}
+
+ObsExplainer.propTypes = {
+  explain: PropTypes.string,
+  header: PropTypes.string,
+  intro: PropTypes.string,
+};
+
+export default ObsExplainer;

src/components/ObsExplainer/ObsExplainer.module.css

@@ -0,0 +1,44 @@
+.container {
+  background: white;
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-template-columns: 1fr;
+  grid-template-rows: 0.3fr auto auto;
+  gap: 2vh 0vw;
+  grid-template-areas:
+    "header"
+    "intro"
+    "explain";
+}
+
+.containerNoGap {
+  background: white;
+  display: grid;
+  grid-auto-columns: 1fr;
+  grid-template-columns: 1fr;
+  grid-template-rows: 0.3fr auto;
+  gap: 0vh 0px;
+  grid-template-areas:
+    "header"
+    "explain";
+}
+
+.header {
+  grid-area: header;
+  font-size: 1.6em;
+  font-weight: 700;
+  padding-left: 1.5vw;
+  color: #82aeb1;
+}
+
+.explain {
+  grid-area: explain;
+  padding-left: 2.5vw;
+  padding-top: 1vh;
+  padding-right: 1.5vw;
+  font-size: 18px;
+}
+
+.li.menu-item:not(:last-child) {
+  margin-bottom: 5px;
+}