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 {
z-index: 1000;
position: absolute;
bottom: 55px;
bottom: 50%;
right: 10px;
min-width: 12rem;
float: right;
@ -14,7 +14,7 @@
border: 1px solid #fff;
box-shadow: 0px 0px 1px 1px #222222;
}
@media (min-width: 380px){
@media (min-width: 768px){
.map-legend {
bottom: 40px;
}
@ -70,3 +70,11 @@
padding: 0 0.5rem;
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];
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>
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 || 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>
<h3 className="h3 logotype">
<span>Colouring</span>
<span>London</span>
</h3>
</div>
<h3 className="h3 logotype">
<span>Colouring</span>
<span>London</span>
</h3>
<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>
: 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>
<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 = {
slug: PropTypes.string
}
const LegendItem = (props) => (
<li>
<span className="key" style={ { background: props.color } }>-</span>
{ props.text }
</li>
);
LegendItem.propTypes = {
slug: PropTypes.string,
color: PropTypes.string,
text: PropTypes.string
}