Initial attempt to address issue #274 Legend should not obscure map on mobile

app/src/frontend/legend.css

@@ -70,3 +70,11 @@
     padding: 0 0.5rem;
     opacity: 0.5;
 }
+.expander-button {
+    float: right;	
+}
+@media (min-height: 670px) {
+    .expander-button {
+        visibility: hidden;
+    }
+}

app/src/frontend/legend.js

@@ -96,10 +96,48 @@ const LEGEND_CONFIG = {
     }
 };
 
-const Legend = (props) => {
+
-    const details = LEGEND_CONFIG[props.slug];
+class Legend extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.state = {collapseList: false};
+        this.handleClick = this.handleClick.bind(this);
+        this.onResize= this.onResize.bind(this);
+    }
+
+
+    handleClick() {
+        this.setState(state => ({
+            collapseList: !state.collapseList
+        }));
+    }
+
+
+    componentDidMount() {  
+        window.addEventListener('resize', this.onResize);
+        if (window && window.outerHeight) {
+            // if we're in the browser, pass in as though from event to initialise
+            this.onResize({target: window});
+        }
+    }
+
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.onResize);
+    }
+
+
+    onResize(e) {
+        this.setState({collapseList: (e.target.outerHeight < 670)});  // magic number needs to be consistent with CSS expander-button media query 
+    }
+
+
+    render() { 
+        const details = LEGEND_CONFIG[this.props.slug];
         const title = details.title;
         const elements = details.elements;
+
         return (
             <div className="map-legend">
                 <div className="logo">
@@ -128,18 +166,23 @@ const Legend = (props) => {
                         <span>London</span>
                     </h3>
                 </div>
-            <h4 className="h4">{ title }</h4>
+                <h4 className="h4">{ title } {elements.length?<button className="expander-button btn btn-outline-secondary btn-sm" type="button" onClick={this.handleClick} >^</button>:null}</h4>
                 {
                     details.description?
-                    <p>{details.description}</p>
+                        <p>{details.description} </p>
                         : null
                 }
                 {
                     elements.length?
-                    <ul className="data-legend">
+                        <ul className={this.state.collapseList ? 'collapse data-legend' : 'data-legend'} >
                             {
                                 elements.map((item) => (
-                                <LegendItem {...item} key={item.color} />
+
+                                       <li key={item.color} >
+                                            <span className="key" style={ { background: item.color } }>-</span>
+                                            { item.text }
+                                       </li> 
+
                                 ))
                             }
                         </ul>
@@ -147,20 +190,14 @@ const Legend = (props) => {
                 }
             </div>
         );
+
+    }
+
 }
 
+
 Legend.propTypes = {
-    slug: PropTypes.string
+    slug: PropTypes.string,
-}
-
-const LegendItem = (props) => (
-    <li>
-        <span className="key" style={ { background: props.color } }>-</span>
-        { props.text }
-    </li>
-);
-
-LegendItem.propTypes = {
     color: PropTypes.string,
     text: PropTypes.string
 }