diff --git a/app/src/frontend/legend.css b/app/src/frontend/legend.css index 15f5173b..1b8680d0 100644 --- a/app/src/frontend/legend.css +++ b/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; + } +} diff --git a/app/src/frontend/legend.js b/app/src/frontend/legend.js index 54e16762..8632ff7a 100644 --- a/app/src/frontend/legend.js +++ b/app/src/frontend/legend.js @@ -96,71 +96,108 @@ const LEGEND_CONFIG = { } }; -const Legend = (props) => { - const details = LEGEND_CONFIG[props.slug]; - const title = details.title; - const elements = details.elements; - return ( -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ +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 ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+ Colouring + London +

-

- Colouring - London -

+

{ title } {elements.length?:null}

+ { + details.description? +

{details.description}

+ : null + } + { + elements.length? +
    + { + elements.map((item) => ( + +
  • + - + { item.text } +
  • + + )) + } +
+ :

Coming soon…

+ }
-

{ title }

- { - details.description? -

{details.description}

- : null - } - { - elements.length? -
    - { - elements.map((item) => ( - - )) - } -
- :

Coming soon…

- } -
- ); + ); + + } + } + Legend.propTypes = { - slug: PropTypes.string -} - -const LegendItem = (props) => ( -
  • - - - { props.text } -
  • -); - -LegendItem.propTypes = { + slug: PropTypes.string, color: PropTypes.string, text: PropTypes.string }