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

Merge branch 'feature/legend_mobile'

Browse Source
This commit is contained in:
Tom Russell 2019-07-07 18:10:32 +01:00
commit b4a210fe54
2 changed files with 106 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,7 +4,7 @@
.map-legend { .map-legend {
z-index: 1000; z-index: 1000;
position: absolute; position: absolute;
bottom: 55px; bottom: 50%;
right: 10px; right: 10px;
min-width: 12rem; min-width: 12rem;
float: right; float: right;
@ -14,7 +14,7 @@
border: 1px solid #fff; border: 1px solid #fff;
box-shadow: 0px 0px 1px 1px #222222; box-shadow: 0px 0px 1px 1px #222222;
} }
@media (min-width: 380px){ @media (min-width: 768px){
.map-legend { .map-legend {
bottom: 40px; bottom: 40px;
} }
@ -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) and (min-width: 768px) {
.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 || e.target.outerWidth < 768)}); // 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
} }