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

Legend style for desktop

Browse Source
This commit is contained in:
Tom Russell 2019-01-22 21:23:35 +00:00
parent d276160ecd
commit 45b716791b
3 changed files with 41 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,7 @@
float: right; float: right;
background: white; background: white;
border-radius: 4px; border-radius: 4px;
padding: 0.5rem 0 0.25rem; padding: 0.5rem 0rem 0.25rem;
border: 1px solid #fff; border: 1px solid #fff;
box-shadow: 0px 0px 1px 1px #222222; box-shadow: 0px 0px 1px 1px #222222;
} }
@ -24,7 +24,6 @@
bottom: 24px; bottom: 24px;
} }
} }
.map-legend h3,
.map-legend h4, .map-legend h4,
.data-legend { .data-legend {
padding: 0 0.5rem; padding: 0 0.5rem;

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

@ -105,7 +105,32 @@ 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> <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>
<h4 className="h4">{ title }</h4> <h4 className="h4">{ title }</h4>
{ {
elements.length? elements.length?

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

@ -27,6 +27,20 @@
font-size: 0.625em; font-size: 0.625em;
letter-spacing: 0; letter-spacing: 0;
} }
.map-legend .logo {
margin-top: -5px;
padding: 0 0.4rem 0.4rem 0.4rem;
}
.map-legend .logo .logotype {
position: relative;
top: 6px;
}
.map-legend .logo .row .cell {
background-color: #ccc;
height: 11px;
width: 11px;
animation: none !important;
}
.logo .grid { .logo .grid {
position: relative; position: relative;
top: -1px; top: -1px;