Legend size and spacing
This commit is contained in:
parent
368ccf1ef4
commit
a35df52b75
@ -6,14 +6,32 @@
|
||||
position: absolute;
|
||||
bottom: 55px;
|
||||
right: 10px;
|
||||
min-width: 7rem;
|
||||
float: right;
|
||||
background: white;
|
||||
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 {
|
||||
max-height: 20rem;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.data-legend .key {
|
||||
display: inline-block;
|
||||
@ -24,3 +42,7 @@
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
}
|
||||
.map-legend .data-intro {
|
||||
padding: 0 0.5rem;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
@ -55,7 +55,7 @@ const LEGEND_CONFIG = {
|
||||
like: {
|
||||
title: "Like Me",
|
||||
elements: [
|
||||
{ color: '#f65400', text: 'We like these buildings 👍 🎉 +1' },
|
||||
{ color: '#f65400', text: '👍 🎉 +1' },
|
||||
]
|
||||
},
|
||||
use: {
|
||||
@ -98,14 +98,19 @@ const Legend = (props) => {
|
||||
const elements = details.elements;
|
||||
return (
|
||||
<div className="map-legend">
|
||||
<h3 className="h3 logotype">Colouring London</h3>
|
||||
<h4 className="h4">{ title }</h4>
|
||||
<ul className="data-legend">
|
||||
{
|
||||
elements.length?
|
||||
(<ul className="data-legend">
|
||||
{
|
||||
elements.map((data_item) => (
|
||||
<LegendItem {...data_item} key={data_item.color} />
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</ul>)
|
||||
: (<p className="data-intro">Coming soon…</p>)
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -114,8 +114,8 @@ class ColouringMap extends Component {
|
||||
<ZoomControl position="topright" />
|
||||
<AttributionControl prefix="" />
|
||||
</Map>
|
||||
<ThemeSwitcher onSubmit={this.themeSwitch} currentTheme={this.state.theme} />
|
||||
<Legend slug={cat} />
|
||||
<ThemeSwitcher onSubmit={this.themeSwitch} currentTheme={this.state.theme} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
@ -1,33 +1,20 @@
|
||||
.theme-switcher {
|
||||
z-index: 1000;
|
||||
position: absolute;
|
||||
bottom: 55px;
|
||||
top: 75px;
|
||||
right: 10px;
|
||||
float: right;
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@media (min-width: 380px){
|
||||
.theme-switcher {
|
||||
bottom: 40px;
|
||||
}
|
||||
}
|
||||
@media (min-width: 1020px){
|
||||
.theme-switcher {
|
||||
bottom: 24px;
|
||||
}
|
||||
}
|
||||
.theme-switcher .btn {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.theme-switcher.night .btn {
|
||||
color: #fff;
|
||||
background-color: #343a40;
|
||||
border-color: #343a40;
|
||||
}
|
||||
|
||||
.theme-switcher.night .btn:hover {
|
||||
color: #343a40;
|
||||
background-color: transparent;
|
||||
|
Loading…
Reference in New Issue
Block a user