Restyle legend

app/src/frontend/components/icons.tsx

@@ -5,7 +5,7 @@ import React from 'react'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faQuestionCircle, faPaintBrush, faInfoCircle, faTimes, faCheck, faCheckDouble,
-    faAngleLeft, faCaretDown, faSearch, faEye } from '@fortawesome/free-solid-svg-icons'
+    faAngleLeft, faCaretDown, faSearch, faEye, faCaretUp } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
     faQuestionCircle,
@@ -16,6 +16,7 @@ library.add(
     faCheckDouble,
     faAngleLeft,
     faCaretDown,
+    faCaretUp,
     faSearch,
     faEye
 );
@@ -56,6 +57,10 @@ const DownIcon = () => (
     <FontAwesomeIcon icon="caret-down" />
 );
 
+const UpIcon = () => (
+    <FontAwesomeIcon icon="caret-up" />
+);
+
 const SearchIcon = () => (
     <FontAwesomeIcon icon="search" />
 );
@@ -70,5 +75,6 @@ export {
     SaveDoneIcon,
     BackIcon,
     DownIcon,
+    UpIcon,
     SearchIcon
 };

app/src/frontend/map/legend.css

@@ -2,28 +2,53 @@
  * Map legend
  */
 .map-legend {
-    z-index: 1000;
     position: absolute;
-    bottom: 50%;
+    bottom: 2.5rem;
     right: 10px;
+    z-index: 1000;
+
     min-width: 12rem;
-    float: right;
+    max-height: 50%;
+    display: flex;
+    flex-direction: column;
+
     background: white;
     border-radius: 4px;
     padding: 0.5rem 0rem 0.25rem;
     border: 1px solid #fff;
     box-shadow: 0px 0px 1px 1px #222222;
 }
+
+.map-legend * {
+    flex: 0;
+}
+
+.map-legend .logo {
+    display: none;
+}
+@media (min-width: 768px) {
+    .map-legend .logo {
+        display: block;
+    }
+}
+
+/* Prevent legend from overlapping with attribution */
+@media (min-width: 706px){
+    .map-legend {
+        bottom: 1.5rem;
+    }
+}
 @media (min-width: 768px) {
     .map-legend {
-        bottom: 40px;
+        bottom: 2.5rem;
     }
 }
-@media (min-width: 1020px){
+@media (min-width: 1072px){
     .map-legend {
-        bottom: 24px;
+        bottom: 1.5rem;
     }
 }
+
 .map-legend .h4,
 .map-legend p,
 .data-legend {
@@ -33,30 +58,12 @@
     margin: 0.25rem 0 0.5rem;
 }
 .data-legend {
-    max-height: 80px;
+    overflow: scroll;
-    max-height: 20vh;
-    overflow-y: auto;
     list-style: none;
     margin-bottom: 0;
+    flex: 1;
 }
-@media (min-height: 470px) {
+
-    .data-legend {
-        max-height: 150px;
-        max-height: 30vh;
-    }
-}
-@media (min-height: 550px) {
-    .data-legend {
-        max-height: 220px;
-        max-height: 40vh;
-    }
-}
-@media (min-height: 670px) {
-    .data-legend {
-        max-height: 330px;
-        max-height: 50vh;
-    }
-}
 .data-legend .key {
     display: inline-block;
     width: 1.3rem;
@@ -71,7 +78,20 @@
     opacity: 0.5;
 }
 .expander-button {
-    float: right;	
+    display: inline-block;
+    position: absolute;
+    bottom: 1rem;
+    right: 1rem;
+    
+    height: 1rem;
+    width: 1rem;
+    line-height: 0.5;
+    padding: 0;
+}
+.expander-button:focus,
+.expander-button:active,
+.expander-button:hover {
+    box-shadow: none;
 }
 @media (min-height: 670px) and (min-width: 768px) {
     .expander-button {

app/src/frontend/map/legend.tsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import './legend.css';
 import { MinorLogo } from '../components/logo';
+import { DownIcon, UpIcon, BackIcon } from '../components/icons';
 
 const LEGEND_CONFIG = {
     location: {
@@ -147,7 +148,20 @@ class Legend extends React.Component<any, any> { // TODO: add proper types
         return (
             <div className="map-legend">
                 <MinorLogo />
-                <h4 className="h4">{ title } {elements.length?<button className="expander-button btn btn-outline-secondary btn-sm" type="button" onClick={this.handleClick} >^</button>:null}</h4>
+                <h4 className="h4">
+                    { title }
+                </h4>
+                {
+                    elements.length > 0 ?
+                        <button className="expander-button btn btn-outline-secondary btn-sm" type="button" onClick={this.handleClick} >
+                            {
+                                this.state.collapseList ?
+                                    <UpIcon /> :
+                                    <DownIcon />
+                            }
+                        </button> :
+                        null
+                }
                 {
                     details.description?
                         <p>{details.description} </p>