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

Category sidebar block styles

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
app/src/frontend/app.tsx
View File

@ -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">
<Categories
mode="view"
building_id={building_id}
/>
<Sidebar>
<Categories
mode="view"
building_id={building_id}
/>
</Sidebar>
</Route>
<Route exact path="/edit/categories.html">
<Categories
mode="edit"
building_id={building_id}
/>
<Sidebar>
<Categories
mode="edit"
building_id={building_id}
/>
</Sidebar>
</Route>
<Route exact path="/multi-edit/:cat.html" render={(props) => (
<MultiEdit

46
app/src/frontend/building/categories.css
View File

@ -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;
}

229
app/src/frontend/building/categories.tsx
View File

@ -7,118 +7,116 @@ import Sidebar from './sidebar';
import './categories.css'
const Categories = (props) => (
<Sidebar>
<nav><ol className="data-category-list">
<Category
title="Location"
desc="Where's the building?"
slug="location"
help="https://pages.colouring.london/location"
inactive={false}
mode={props.mode}
building_id={props.building_id}
/>
<Category
title="Land Use"
desc="What's it used for?"
slug="use"
help="https://pages.colouring.london/use"
inactive={true}
mode={props.mode}
building_id={props.building_id}
/>
<Category
title="Type"
desc="Building type"
slug="type"
help="https://pages.colouring.london/buildingtypology"
inactive={true}
mode={props.mode}
building_id={props.building_id}
/>
<Category
title="Age"
desc="Age and history"
slug="age"
help="https://pages.colouring.london/age"
inactive={false}
mode={props.mode}
building_id={props.building_id}
/>
<Category
title="Size &amp; Shape"
desc="Form and scale"
slug="size"
help="https://pages.colouring.london/shapeandsize"
inactive={false}
mode={props.mode}
building_id={props.building_id}
/>
<Category
title="Construction"
desc="Methods and 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="Sustainability"
desc="Performance"
slug="sustainability"
help="https://pages.colouring.london/sustainability"
inactive={true}
mode={props.mode}
building_id={props.building_id}
/>
<Category
title="Greenery"
desc="Green context"
slug="greenery"
help="https://pages.colouring.london/greenery"
inactive={true}
mode={props.mode}
building_id={props.building_id}
/>
<Category
title="Community"
desc="Public asset?"
slug="community"
help="https://pages.colouring.london/community"
inactive={false}
mode={props.mode}
building_id={props.building_id}
/>
<Category
title="Planning"
desc="Special controls?"
slug="planning"
help="https://pages.colouring.london/planning"
inactive={true}
mode={props.mode}
building_id={props.building_id}
/>
<Category
title="Like Me?"
desc="Adds to the city?"
slug="like"
help="https://pages.colouring.london/likeme"
inactive={false}
mode={props.mode}
building_id={props.building_id}
/>
</ol></nav>
</Sidebar>
<ol className="data-category-list">
<Category
title="Location"
desc="Where's the building?"
slug="location"
help="https://pages.colouring.london/location"
inactive={false}
mode={props.mode}
building_id={props.building_id}
/>
<Category
title="Land Use"
desc="What's it used for?"
slug="use"
help="https://pages.colouring.london/use"
inactive={true}
mode={props.mode}
building_id={props.building_id}
/>
<Category
title="Type"
desc="Building type"
slug="type"
help="https://pages.colouring.london/buildingtypology"
inactive={true}
mode={props.mode}
building_id={props.building_id}
/>
<Category
title="Age"
desc="Age and history"
slug="age"
help="https://pages.colouring.london/age"
inactive={false}
mode={props.mode}
building_id={props.building_id}
/>
<Category
title="Size &amp; Shape"
desc="Form and scale"
slug="size"
help="https://pages.colouring.london/shapeandsize"
inactive={false}
mode={props.mode}
building_id={props.building_id}
/>
<Category
title="Construction"
desc="Methods and 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="Sustainability"
desc="Performance"
slug="sustainability"
help="https://pages.colouring.london/sustainability"
inactive={true}
mode={props.mode}
building_id={props.building_id}
/>
<Category
title="Greenery"
desc="Green context"
slug="greenery"
help="https://pages.colouring.london/greenery"
inactive={true}
mode={props.mode}
building_id={props.building_id}
/>
<Category
title="Community"
desc="Public asset?"
slug="community"
help="https://pages.colouring.london/community"
inactive={false}
mode={props.mode}
building_id={props.building_id}
/>
<Category
title="Planning"
desc="Special controls?"
slug="planning"
help="https://pages.colouring.london/planning"
inactive={true}
mode={props.mode}
building_id={props.building_id}
/>
<Category
title="Like Me?"
desc="Adds to the city?"
slug="like"
help="https://pages.colouring.london/likeme"
inactive={false}
mode={props.mode}
building_id={props.building_id}
/>
</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>

84
app/src/frontend/building/sidebar.css
View File

@ -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;

40
app/src/frontend/styles/colours.css
View File

@ -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;
}