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 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">
<Categories <Sidebar>
mode="view" <Categories
building_id={building_id} mode="view"
/> building_id={building_id}
/>
</Sidebar>
</Route> </Route>
<Route exact path="/edit/categories.html"> <Route exact path="/edit/categories.html">
<Categories <Sidebar>
mode="edit" <Categories
building_id={building_id} mode="edit"
/> 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

46
app/src/frontend/building/categories.css
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;
} }

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

@ -7,118 +7,116 @@ 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?" slug="location"
slug="location" help="https://pages.colouring.london/location"
help="https://pages.colouring.london/location" inactive={false}
inactive={false} mode={props.mode}
mode={props.mode} building_id={props.building_id}
building_id={props.building_id} />
/> <Category
<Category title="Land Use"
title="Land Use" desc="What's it used for?"
desc="What's it used for?" slug="use"
slug="use" help="https://pages.colouring.london/use"
help="https://pages.colouring.london/use" inactive={true}
inactive={true} mode={props.mode}
mode={props.mode} building_id={props.building_id}
building_id={props.building_id} />
/> <Category
<Category title="Type"
title="Type" desc="Building type"
desc="Building type" slug="type"
slug="type" help="https://pages.colouring.london/buildingtypology"
help="https://pages.colouring.london/buildingtypology" inactive={true}
inactive={true} mode={props.mode}
mode={props.mode} building_id={props.building_id}
building_id={props.building_id} />
/> <Category
<Category title="Age"
title="Age" desc="Age and history"
desc="Age and history" slug="age"
slug="age" help="https://pages.colouring.london/age"
help="https://pages.colouring.london/age" inactive={false}
inactive={false} mode={props.mode}
mode={props.mode} building_id={props.building_id}
building_id={props.building_id} />
/> <Category
<Category title="Size &amp; Shape"
title="Size &amp; Shape" desc="Form and scale"
desc="Form and scale" slug="size"
slug="size" help="https://pages.colouring.london/shapeandsize"
help="https://pages.colouring.london/shapeandsize" inactive={false}
inactive={false} mode={props.mode}
mode={props.mode} building_id={props.building_id}
building_id={props.building_id} />
/> <Category
<Category title="Construction"
title="Construction" desc="Methods and materials"
desc="Methods and materials" slug="construction"
slug="construction" help="https://pages.colouring.london/construction"
help="https://pages.colouring.london/construction" inactive={true}
inactive={true} mode={props.mode}
mode={props.mode} building_id={props.building_id}
building_id={props.building_id} />
/> <Category
<Category title="Team"
title="Team" desc="Builder and designer"
desc="Builder and designer" slug="team"
slug="team" help="https://pages.colouring.london/team"
help="https://pages.colouring.london/team" inactive={true}
inactive={true} mode={props.mode}
mode={props.mode} building_id={props.building_id}
building_id={props.building_id} />
/> <Category
<Category title="Sustainability"
title="Sustainability" desc="Performance"
desc="Performance" slug="sustainability"
slug="sustainability" help="https://pages.colouring.london/sustainability"
help="https://pages.colouring.london/sustainability" inactive={true}
inactive={true} mode={props.mode}
mode={props.mode} building_id={props.building_id}
building_id={props.building_id} />
/> <Category
<Category title="Greenery"
title="Greenery" desc="Green context"
desc="Green context" slug="greenery"
slug="greenery" help="https://pages.colouring.london/greenery"
help="https://pages.colouring.london/greenery" inactive={true}
inactive={true} mode={props.mode}
mode={props.mode} building_id={props.building_id}
building_id={props.building_id} />
/> <Category
<Category title="Community"
title="Community" desc="Public asset?"
desc="Public asset?" slug="community"
slug="community" help="https://pages.colouring.london/community"
help="https://pages.colouring.london/community" inactive={false}
inactive={false} mode={props.mode}
mode={props.mode} building_id={props.building_id}
building_id={props.building_id} />
/> <Category
<Category title="Planning"
title="Planning" desc="Special controls?"
desc="Special controls?" slug="planning"
slug="planning" help="https://pages.colouring.london/planning"
help="https://pages.colouring.london/planning" inactive={true}
inactive={true} mode={props.mode}
mode={props.mode} building_id={props.building_id}
building_id={props.building_id} />
/> <Category
<Category title="Like Me?"
title="Like Me?" desc="Adds to the city?"
desc="Adds to the city?" slug="like"
slug="like" help="https://pages.colouring.london/likeme"
help="https://pages.colouring.london/likeme" inactive={false}
inactive={false} mode={props.mode}
mode={props.mode} building_id={props.building_id}
building_id={props.building_id} />
/> </ol>
</ol></nav>
</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>

84
app/src/frontend/building/sidebar.css
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;

40
app/src/frontend/styles/colours.css
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;
}