Category sidebar block styles
This commit is contained in:
Tom Russell
parent
94d158c59e
commit
dec4801688
@ -12,6 +12,7 @@ import ColouringMap from './map/map';
|
||||
import Header from './header';
|
||||
import MultiEdit from './building/multi-edit';
|
||||
import Categories from './building/categories';
|
||||
import Sidebar from './building/sidebar';
|
||||
|
||||
import AboutPage from './pages/about';
|
||||
import ContributorAgreementPage from './pages/contributor-agreement';
|
||||
@ -207,16 +208,20 @@ class App extends React.Component<any, any> { // TODO: add proper types
|
||||
<Welcome />
|
||||
</Route>
|
||||
<Route exact path="/view/categories.html">
|
||||
<Sidebar>
|
||||
<Categories
|
||||
mode="view"
|
||||
building_id={building_id}
|
||||
/>
|
||||
</Sidebar>
|
||||
</Route>
|
||||
<Route exact path="/edit/categories.html">
|
||||
<Sidebar>
|
||||
<Categories
|
||||
mode="edit"
|
||||
building_id={building_id}
|
||||
/>
|
||||
</Sidebar>
|
||||
</Route>
|
||||
<Route exact path="/multi-edit/:cat.html" render={(props) => (
|
||||
<MultiEdit
|
||||
|
||||
@ -2,18 +2,52 @@
|
||||
* Data categories
|
||||
*/
|
||||
.data-category-list {
|
||||
padding: 0;
|
||||
padding: 0 0 0.75rem;
|
||||
text-align: center;
|
||||
list-style: none;
|
||||
margin: 0 -0.75em;
|
||||
margin: 0 0 0 0.2rem;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
}
|
||||
.data-category-list li {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
width: 9em;
|
||||
height: 9em;
|
||||
margin: 0.375em;
|
||||
width: 11rem;
|
||||
height: 11rem;
|
||||
margin: 0.375rem;
|
||||
box-shadow: 0 0 2px 5px #ffffff;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
.data-category-list li:hover {
|
||||
box-shadow: 0 0 2px 5px #00ffff;
|
||||
}
|
||||
.data-category-list a {
|
||||
color: #222;
|
||||
text-decoration: none;
|
||||
}
|
||||
.data-category-list .category-link {
|
||||
display: block;
|
||||
padding: 0.1em;
|
||||
width: 100%;
|
||||
height: 7rem;
|
||||
}
|
||||
.data-category-list .category-link:hover,
|
||||
.data-category-list .category-link:active,
|
||||
.data-category-list .category-link:focus {
|
||||
color: #222;
|
||||
}
|
||||
.data-category-list .help {
|
||||
height: 4rem;
|
||||
padding: 1.5em 0;
|
||||
width: 100%;
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
.data-category-list .help:hover,
|
||||
.data-category-list .help:active,
|
||||
.data-category-list .help:focus {
|
||||
color: #222;
|
||||
background-color: rgba(255,255,255,0.3);
|
||||
}
|
||||
.data-category-list .category {
|
||||
text-align: center;
|
||||
@ -23,5 +57,5 @@
|
||||
.data-category-list .description {
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
margin: 0;
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
|
||||
@ -7,8 +7,7 @@ import Sidebar from './sidebar';
|
||||
import './categories.css'
|
||||
|
||||
const Categories = (props) => (
|
||||
<Sidebar>
|
||||
<nav><ol className="data-category-list">
|
||||
<ol className="data-category-list">
|
||||
<Category
|
||||
title="Location"
|
||||
desc="Where's the building?"
|
||||
@ -117,8 +116,7 @@ const Categories = (props) => (
|
||||
mode={props.mode}
|
||||
building_id={props.building_id}
|
||||
/>
|
||||
</ol></nav>
|
||||
</Sidebar>
|
||||
</ol>
|
||||
)
|
||||
|
||||
Categories.propTypes = {
|
||||
@ -127,13 +125,14 @@ Categories.propTypes = {
|
||||
}
|
||||
|
||||
const Category = (props) => (
|
||||
<li className={`category-block ${props.slug}`}>
|
||||
<li className={`category-block ${props.slug} background-${props.slug}`}>
|
||||
<NavLink
|
||||
className="category-link"
|
||||
to={`/${props.mode}/${props.slug}/building/${props.building_id}.html`}
|
||||
title={
|
||||
(props.inactive)?
|
||||
'Coming soon… Click the ? for more info.'
|
||||
: 'Show on map'
|
||||
'Coming soon… Click more info for details.'
|
||||
: 'View/Edit Map'
|
||||
}>
|
||||
<h3 className="category">{props.title}</h3>
|
||||
<p className="description">{props.desc}</p>
|
||||
|
||||
@ -98,90 +98,6 @@
|
||||
.data-section:first-of-type .section-header {
|
||||
border-top-color: #fff;
|
||||
}
|
||||
.section-header.active.location {
|
||||
border-bottom-color: #edc40b;
|
||||
}
|
||||
.section-header.location:hover > a::before,
|
||||
.section-header.location.active > a::before {
|
||||
color: #edc40b;
|
||||
}
|
||||
.section-header.active.use {
|
||||
border-bottom-color: #f0ee0c;
|
||||
}
|
||||
.section-header.use:hover > a::before,
|
||||
.section-header.use.active > a::before {
|
||||
color: #f0ee0c;
|
||||
}
|
||||
.section-header.active.type {
|
||||
border-bottom-color: #ff9100;
|
||||
}
|
||||
.section-header.type:hover > a::before,
|
||||
.section-header.type.active > a::before {
|
||||
color: #ff9100;
|
||||
}
|
||||
.section-header.active.age {
|
||||
border-bottom-color: #ee5f63;
|
||||
}
|
||||
.section-header.age:hover > a::before,
|
||||
.section-header.age.active > a::before {
|
||||
color: #ee5f63;
|
||||
}
|
||||
.section-header.active.size {
|
||||
border-bottom-color: #ee91bf;
|
||||
}
|
||||
.section-header.size:hover > a::before,
|
||||
.section-header.size.active > a::before {
|
||||
color: #ee91bf;
|
||||
}
|
||||
.section-header.active.construction {
|
||||
border-bottom-color: #aa7fa7;
|
||||
}
|
||||
.section-header.construction:hover > a::before,
|
||||
.section-header.construction.active > a::before {
|
||||
color: #aa7fa7;
|
||||
}
|
||||
.section-header.active.team {
|
||||
border-bottom-color: #6f879c;
|
||||
}
|
||||
.section-header.team:hover > a::before,
|
||||
.section-header.team.active > a::before {
|
||||
color: #6f879c;
|
||||
}
|
||||
.section-header.active.sustainability {
|
||||
border-bottom-color: #5ec232;
|
||||
}
|
||||
.section-header.sustainability:hover > a::before,
|
||||
.section-header.sustainability.active > a::before {
|
||||
color: #5ec232;
|
||||
}
|
||||
.section-header.active.greenery {
|
||||
border-bottom-color: #6dbb8b;
|
||||
}
|
||||
.section-header.greenery:hover > a::before,
|
||||
.section-header.greenery.active > a::before {
|
||||
color: #6dbb8b;
|
||||
}
|
||||
.section-header.active.community {
|
||||
border-bottom-color: #65b7ff;
|
||||
}
|
||||
.section-header.community:hover > a::before,
|
||||
.section-header.community.active > a::before {
|
||||
color: #65b7ff;
|
||||
}
|
||||
.section-header.active.planning {
|
||||
border-bottom-color: #a1a3a9;
|
||||
}
|
||||
.section-header.planning:hover > a::before,
|
||||
.section-header.planning.active > a::before {
|
||||
color: #a1a3a9;
|
||||
}
|
||||
.section-header.active.like {
|
||||
border-bottom-color: #9c896d;
|
||||
}
|
||||
.section-header.like:hover > a::before,
|
||||
.section-header.like.active > a::before {
|
||||
color: #9c896d;
|
||||
}
|
||||
|
||||
.section-header > a::before {
|
||||
display: block;
|
||||
|
||||
@ -52,3 +52,43 @@
|
||||
.pale-brown {
|
||||
background-color: #918e6e;
|
||||
}
|
||||
|
||||
/**
|
||||
* Category colours
|
||||
*/
|
||||
.background-location {
|
||||
background-color: #edc40b;
|
||||
}
|
||||
.background-use {
|
||||
background-color: #f0ee0c;
|
||||
}
|
||||
.background-type {
|
||||
background-color: #ff9100;
|
||||
}
|
||||
.background-age {
|
||||
background-color: #ee5f63;
|
||||
}
|
||||
.background-size {
|
||||
background-color: #ee91bf;
|
||||
}
|
||||
.background-construction {
|
||||
background-color: #aa7fa7;
|
||||
}
|
||||
.background-team {
|
||||
background-color: #6f879c;
|
||||
}
|
||||
.background-sustainability {
|
||||
background-color: #5ec232;
|
||||
}
|
||||
.background-greenery {
|
||||
background-color: #6dbb8b;
|
||||
}
|
||||
.background-community {
|
||||
background-color: #65b7ff;
|
||||
}
|
||||
.background-planning {
|
||||
background-color: #a1a3a9;
|
||||
}
|
||||
.background-like {
|
||||
background-color: #9c896d;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user