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

Shift legend/logo layout

Browse Source
This commit is contained in:
Tom Russell 2019-01-22 21:55:03 +00:00
parent b504b8f5ae
commit 7ca7fb59ac
3 changed files with 29 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,7 +6,7 @@
position: absolute;
bottom: 55px;
right: 10px;
min-width: 7rem;
min-width: 12rem;
float: right;
background: white;
border-radius: 4px;
@ -24,10 +24,14 @@
bottom: 24px;
}
}
.map-legend h4,
.map-legend .h4,
.map-legend p,
.data-legend {
padding: 0 0.5rem;
}
.map-legend p {
margin: 0.25rem 0 0.5rem;
}
.data-legend {
max-height: 30rem;
overflow-y: auto;

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

@ -106,6 +106,24 @@ const Legend = (props) => {
const elements = details.elements;
return (
<div className="map-legend">
<h4 className="h4">{ title }</h4>
{
details.description?
<p>{details.description}</p>
: null
}
{
elements.length?
(<ul className="data-legend">
{
elements.map((data_item) => (
<LegendItem {...data_item} key={data_item.color} />
))
}
</ul>)
: (<p className="data-intro">Coming soon…</p>)
}
<div className="logo">
<div className="grid">
<div className="row">
@ -132,18 +150,6 @@ const Legend = (props) => {
<span>London</span>
</h3>
</div>
<h4 className="h4">{ title }</h4>
{
elements.length?
(<ul className="data-legend">
{
elements.map((data_item) => (
<LegendItem {...data_item} key={data_item.color} />
))
}
</ul>)
: (<p className="data-intro">Coming soon…</p>)
}
</div>
);
}

10
app/src/frontend/logo.css
View File

@ -28,17 +28,17 @@
letter-spacing: 0;
}
.map-legend .logo {
margin-top: -5px;
padding: 0 0.4rem 0.4rem 0.4rem;
padding: 0.5rem;
}
.map-legend .logo .logotype {
font-size: 1.75rem;
position: relative;
top: 6px;
top: 3px;
}
.map-legend .logo .row .cell {
background-color: #ccc;
height: 11px;
width: 11px;
height: 10px;
width: 10px;
animation: none !important;
}
.logo .grid {