Category sidebar block styles

This commit is contained in:
Tom Russell 2019-08-14 13:06:07 +01:00
parent 94d158c59e
commit dec4801688
5 changed files with 207 additions and 213 deletions

View File

@ -12,6 +12,7 @@ import ColouringMap from './map/map';
import Header from './header'; import Header from './header';
import MultiEdit from './building/multi-edit'; import MultiEdit from './building/multi-edit';
import Categories from './building/categories'; import Categories from './building/categories';
import Sidebar from './building/sidebar';
import AboutPage from './pages/about'; import AboutPage from './pages/about';
import ContributorAgreementPage from './pages/contributor-agreement'; import ContributorAgreementPage from './pages/contributor-agreement';
@ -207,16 +208,20 @@ class App extends React.Component<any, any> { // TODO: add proper types
<Welcome /> <Welcome />
</Route> </Route>
<Route exact path="/view/categories.html"> <Route exact path="/view/categories.html">
<Sidebar>
<Categories <Categories
mode="view" mode="view"
building_id={building_id} building_id={building_id}
/> />
</Sidebar>
</Route> </Route>
<Route exact path="/edit/categories.html"> <Route exact path="/edit/categories.html">
<Sidebar>
<Categories <Categories
mode="edit" mode="edit"
building_id={building_id} building_id={building_id}
/> />
</Sidebar>
</Route> </Route>
<Route exact path="/multi-edit/:cat.html" render={(props) => ( <Route exact path="/multi-edit/:cat.html" render={(props) => (
<MultiEdit <MultiEdit

View File

@ -2,18 +2,52 @@
* Data categories * Data categories
*/ */
.data-category-list { .data-category-list {
padding: 0; padding: 0 0 0.75rem;
text-align: center; text-align: center;
list-style: none; list-style: none;
margin: 0 -0.75em; margin: 0 0 0 0.2rem;
text-align: center;
width: 100%;
} }
.data-category-list li { .data-category-list li {
display: inline-block; display: inline-block;
vertical-align: bottom; vertical-align: bottom;
width: 9em; width: 11rem;
height: 9em; height: 11rem;
margin: 0.375em; 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; 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 { .data-category-list .category {
text-align: center; text-align: center;
@ -23,5 +57,5 @@
.data-category-list .description { .data-category-list .description {
text-align: center; text-align: center;
font-size: 1em; font-size: 1em;
margin: 0; margin: 0 0 1em;
} }

View File

@ -7,8 +7,7 @@ import Sidebar from './sidebar';
import './categories.css' import './categories.css'
const Categories = (props) => ( const Categories = (props) => (
<Sidebar> <ol className="data-category-list">
<nav><ol className="data-category-list">
<Category <Category
title="Location" title="Location"
desc="Where's the building?" desc="Where's the building?"
@ -117,8 +116,7 @@ const Categories = (props) => (
mode={props.mode} mode={props.mode}
building_id={props.building_id} building_id={props.building_id}
/> />
</ol></nav> </ol>
</Sidebar>
) )
Categories.propTypes = { Categories.propTypes = {
@ -127,13 +125,14 @@ Categories.propTypes = {
} }
const Category = (props) => ( const Category = (props) => (
<li className={`category-block ${props.slug}`}> <li className={`category-block ${props.slug} background-${props.slug}`}>
<NavLink <NavLink
className="category-link"
to={`/${props.mode}/${props.slug}/building/${props.building_id}.html`} to={`/${props.mode}/${props.slug}/building/${props.building_id}.html`}
title={ title={
(props.inactive)? (props.inactive)?
'Coming soon… Click the ? for more info.' 'Coming soon… Click more info for details.'
: 'Show on map' : 'View/Edit Map'
}> }>
<h3 className="category">{props.title}</h3> <h3 className="category">{props.title}</h3>
<p className="description">{props.desc}</p> <p className="description">{props.desc}</p>

View File

@ -98,90 +98,6 @@
.data-section:first-of-type .section-header { .data-section:first-of-type .section-header {
border-top-color: #fff; 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 { .section-header > a::before {
display: block; display: block;

View File

@ -52,3 +52,43 @@
.pale-brown { .pale-brown {
background-color: #918e6e; 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;
}