Feature/misc ui fixes (#449)
* Re-style category links, remove More button * Fix colour, order and text of categories * Increase legend max height
This commit is contained in:
parent
606a36ce6c
commit
e7b7e3fe67
@ -26,7 +26,9 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
.data-category-list .category-link {
|
||||
display: block;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.1em;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -36,32 +38,14 @@
|
||||
.data-category-list .category-link:focus {
|
||||
color: #222;
|
||||
}
|
||||
.data-category-list .help {
|
||||
position: absolute;
|
||||
bottom: 0.75rem;
|
||||
right: 0.75rem;
|
||||
color: #222;
|
||||
}
|
||||
.data-category-list .help:hover,
|
||||
.data-category-list .help:active,
|
||||
.data-category-list .help:focus {
|
||||
color: #000;
|
||||
background-color: rgba(37, 10, 10, 0.3);
|
||||
}
|
||||
|
||||
.data-category-list .help::before {
|
||||
content: "\f05a";
|
||||
font-family: FontAwesome;
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
.data-category-list .category {
|
||||
text-align: center;
|
||||
font-size: 1.5em;
|
||||
margin: 1.4em 0 0.5em;
|
||||
font-size: 1.4em;
|
||||
margin: 0 0 0.5em;
|
||||
}
|
||||
.data-category-list .description {
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
margin: 0 0 1em;
|
||||
font-size: 0.9em;
|
||||
margin: 0;
|
||||
}
|
||||
|
@ -35,7 +35,7 @@ const Categories = (props) => (
|
||||
/>
|
||||
<Category
|
||||
title="Age"
|
||||
desc="Age and history"
|
||||
desc="Age & history"
|
||||
slug="age"
|
||||
help="https://pages.colouring.london/age"
|
||||
inactive={false}
|
||||
@ -44,7 +44,7 @@ const Categories = (props) => (
|
||||
/>
|
||||
<Category
|
||||
title="Size & Shape"
|
||||
desc="Form and scale"
|
||||
desc="Form & scale"
|
||||
slug="size"
|
||||
help="https://pages.colouring.london/shapeandsize"
|
||||
inactive={false}
|
||||
@ -53,22 +53,13 @@ const Categories = (props) => (
|
||||
/>
|
||||
<Category
|
||||
title="Construction"
|
||||
desc="Methods and materials"
|
||||
desc="Methods & materials"
|
||||
slug="construction"
|
||||
help="https://pages.colouring.london/construction"
|
||||
inactive={true}
|
||||
mode={props.mode}
|
||||
building_id={props.building_id}
|
||||
/>
|
||||
<Category
|
||||
title="Team"
|
||||
desc="Builder and designer"
|
||||
slug="team"
|
||||
help="https://pages.colouring.london/team"
|
||||
inactive={true}
|
||||
mode={props.mode}
|
||||
building_id={props.building_id}
|
||||
/>
|
||||
<Category
|
||||
title="Streetscape"
|
||||
desc="Environment"
|
||||
@ -78,6 +69,15 @@ const Categories = (props) => (
|
||||
mode={props.mode}
|
||||
building_id={props.building_id}
|
||||
/>
|
||||
<Category
|
||||
title="Team"
|
||||
desc="Builder & designer"
|
||||
slug="team"
|
||||
help="https://pages.colouring.london/team"
|
||||
inactive={true}
|
||||
mode={props.mode}
|
||||
building_id={props.building_id}
|
||||
/>
|
||||
<Category
|
||||
title="Sustainability"
|
||||
desc="Performance"
|
||||
@ -136,12 +136,11 @@ const Category = (props) => {
|
||||
'Coming soon… Click more info for details.'
|
||||
: 'View/Edit Map'
|
||||
}>
|
||||
<div className="category-title-container">
|
||||
<h3 className="category">{props.title}</h3>
|
||||
<p className="description">{props.desc}</p>
|
||||
</div>
|
||||
</NavLink>
|
||||
<a className="icon-button help" href={props.help}>
|
||||
More
|
||||
</a>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
@ -8,7 +8,8 @@
|
||||
z-index: 1000;
|
||||
|
||||
min-width: 12rem;
|
||||
max-height: 50%;
|
||||
max-height: 60%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
@ -74,13 +74,13 @@
|
||||
.background-construction {
|
||||
background-color: #aa7fa7;
|
||||
}
|
||||
.background-team {
|
||||
.background-streetscape {
|
||||
background-color: #6f879c;
|
||||
}
|
||||
.background-sustainability {
|
||||
.background-team {
|
||||
background-color: #5ec232;
|
||||
}
|
||||
.background-streetscape {
|
||||
.background-sustainability {
|
||||
background-color: #6dbb8b;
|
||||
}
|
||||
.background-community {
|
||||
|
Loading…
Reference in New Issue
Block a user