Legend size and spacing

This commit is contained in:
Tom Russell 2018-12-03 10:21:00 +00:00
parent 368ccf1ef4
commit a35df52b75
4 changed files with 37 additions and 23 deletions

View File

@ -6,14 +6,32 @@
position: absolute; position: absolute;
bottom: 55px; bottom: 55px;
right: 10px; right: 10px;
min-width: 7rem;
float: right; float: right;
background: white; background: white;
border-radius: 4px; border-radius: 4px;
padding: 0.25rem 0.5rem; padding: 0.25rem 0;
}
@media (min-width: 380px){
.map-legend {
bottom: 40px;
}
}
@media (min-width: 1020px){
.map-legend {
bottom: 24px;
}
}
.map-legend h3,
.map-legend h4,
.data-legend {
padding: 0 0.5rem;
} }
.data-legend { .data-legend {
max-height: 20rem;
overflow-y: auto;
list-style: none; list-style: none;
padding: 0; margin-bottom: 0;
} }
.data-legend .key { .data-legend .key {
display: inline-block; display: inline-block;
@ -24,3 +42,7 @@
vertical-align: middle; vertical-align: middle;
overflow: hidden; overflow: hidden;
} }
.map-legend .data-intro {
padding: 0 0.5rem;
opacity: 0.5;
}

View File

@ -55,7 +55,7 @@ const LEGEND_CONFIG = {
like: { like: {
title: "Like Me", title: "Like Me",
elements: [ elements: [
{ color: '#f65400', text: 'We like these buildings 👍 🎉 +1' }, { color: '#f65400', text: '👍 🎉 +1' },
] ]
}, },
use: { use: {
@ -98,14 +98,19 @@ const Legend = (props) => {
const elements = details.elements; const elements = details.elements;
return ( return (
<div className="map-legend"> <div className="map-legend">
<h3 className="h3 logotype">Colouring London</h3>
<h4 className="h4">{ title }</h4> <h4 className="h4">{ title }</h4>
<ul className="data-legend"> {
elements.length?
(<ul className="data-legend">
{ {
elements.map((data_item) => ( elements.map((data_item) => (
<LegendItem {...data_item} key={data_item.color} /> <LegendItem {...data_item} key={data_item.color} />
)) ))
} }
</ul> </ul>)
: (<p className="data-intro">Coming soon</p>)
}
</div> </div>
); );
} }

View File

@ -114,8 +114,8 @@ class ColouringMap extends Component {
<ZoomControl position="topright" /> <ZoomControl position="topright" />
<AttributionControl prefix="" /> <AttributionControl prefix="" />
</Map> </Map>
<ThemeSwitcher onSubmit={this.themeSwitch} currentTheme={this.state.theme} />
<Legend slug={cat} /> <Legend slug={cat} />
<ThemeSwitcher onSubmit={this.themeSwitch} currentTheme={this.state.theme} />
</Fragment> </Fragment>
); );
} }

View File

@ -1,33 +1,20 @@
.theme-switcher { .theme-switcher {
z-index: 1000; z-index: 1000;
position: absolute; position: absolute;
bottom: 55px; top: 75px;
right: 10px; right: 10px;
float: right; float: right;
background: white; background: white;
border-radius: 4px; border-radius: 4px;
} }
@media (min-width: 380px){
.theme-switcher {
bottom: 40px;
}
}
@media (min-width: 1020px){
.theme-switcher {
bottom: 24px;
}
}
.theme-switcher .btn { .theme-switcher .btn {
margin: 0; margin: 0;
} }
.theme-switcher.night .btn { .theme-switcher.night .btn {
color: #fff; color: #fff;
background-color: #343a40; background-color: #343a40;
border-color: #343a40; border-color: #343a40;
} }
.theme-switcher.night .btn:hover { .theme-switcher.night .btn:hover {
color: #343a40; color: #343a40;
background-color: transparent; background-color: transparent;