a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Martin-dJ 2019-06-06 16:35:30 +00:00
parent 39a4fbcbbf
commit 8b99b61d85
2 changed files with 104 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/frontend/legend.css
View File

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

155
app/src/frontend/legend.js
View File

@ -96,71 +96,108 @@ const LEGEND_CONFIG = {
} }
}; };
const Legend = (props) => {
const details = LEGEND_CONFIG[props.slug]; class Legend extends React.Component {
const title = details.title;
const elements = details.elements; constructor(props) {
return ( super(props);
<div className="map-legend"> this.state = {collapseList: false};
<div className="logo"> this.handleClick = this.handleClick.bind(this);
<div className="grid"> this.onResize= this.onResize.bind(this);
<div className="row"> }
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div> handleClick() {
<div className="cell"></div> this.setState(state => ({
</div> collapseList: !state.collapseList
<div className="row"> }));
<div className="cell"></div> }
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div> componentDidMount() {
</div> window.addEventListener('resize', this.onResize);
<div className="row"> if (window && window.outerHeight) {
<div className="cell"></div> // if we're in the browser, pass in as though from event to initialise
<div className="cell"></div> this.onResize({target: window});
<div className="cell"></div> }
<div className="cell"></div> }
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">
<div className="grid">
<div className="row">
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
</div>
<div className="row">
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
</div>
<div className="row">
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
<div className="cell"></div>
</div>
</div> </div>
<h3 className="h3 logotype">
<span>Colouring</span>
<span>London</span>
</h3>
</div> </div>
<h3 className="h3 logotype"> <h4 className="h4">{ title } {elements.length?<button className="expander-button btn btn-outline-secondary btn-sm" type="button" onClick={this.handleClick} >^</button>:null}</h4>
<span>Colouring</span> {
<span>London</span> details.description?
</h3> <p>{details.description} </p>
: null
}
{
elements.length?
<ul className={this.state.collapseList ? 'collapse data-legend' : 'data-legend'} >
{
elements.map((item) => (
<li key={item.color} >
<span className="key" style={ { background: item.color } }>-</span>
{ item.text }
</li>
))
}
</ul>
: <p className="data-intro">Coming soon…</p>
}
</div> </div>
<h4 className="h4">{ title }</h4> );
{
details.description? }
<p>{details.description}</p>
: null
}
{
elements.length?
<ul className="data-legend">
{
elements.map((item) => (
<LegendItem {...item} key={item.color} />
))
}
</ul>
: <p className="data-intro">Coming soon…</p>
}
</div>
);
} }
Legend.propTypes = { 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, color: PropTypes.string,
text: PropTypes.string text: PropTypes.string
} }