Sidebar header/section styles
This commit is contained in:
Tom Russell
parent
8c0452920d
commit
df91d98383
@ -1,19 +1,20 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { Link, NavLink, Redirect } from 'react-router-dom';
|
||||
import queryString from 'query-string';
|
||||
|
||||
import ErrorBox from './error-box';
|
||||
import InfoBox from './info-box';
|
||||
import Sidebar from './sidebar';
|
||||
import { HelpIcon, CloseIcon, SaveIcon } from './icons';
|
||||
|
||||
import CONFIG from './fields-config.json';
|
||||
|
||||
|
||||
class BuildingEdit extends Component {
|
||||
render() {
|
||||
if (!this.props.user){
|
||||
const BuildingEdit = (props) => {
|
||||
if (!props.user){
|
||||
return <Redirect to="/sign-up.html" />
|
||||
}
|
||||
if (!this.props.building_id){
|
||||
if (!props.building_id){
|
||||
return (
|
||||
<Sidebar title="Building Not Found" back="/map/date_year.html">
|
||||
<InfoBox msg="We can't find that one anywhere - try the map again?" />
|
||||
@ -23,16 +24,21 @@ class BuildingEdit extends Component {
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
|
||||
const search = (props.location && props.location.search)?
|
||||
queryString.parse(props.location.search):
|
||||
{};
|
||||
return (
|
||||
<Sidebar title={`Edit Building`} back={`/building/${this.props.building_id}.html`}>
|
||||
<Sidebar title={`Edit Building`} back={`/building/${props.building_id}.html`}>
|
||||
{
|
||||
CONFIG.map((conf_props) => {
|
||||
return <EditForm {...conf_props} {...this.props} key={conf_props.slug} />
|
||||
return <EditForm
|
||||
{...conf_props} {...props}
|
||||
search={search} key={conf_props.slug} />
|
||||
})
|
||||
}
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class EditForm extends Component {
|
||||
@ -89,14 +95,42 @@ class EditForm extends Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const match = true;
|
||||
const match = this.props.search.cat === this.props.slug;
|
||||
return (
|
||||
<section className={(this.props.inactive)? "data-section inactive": "data-section"}>
|
||||
<NavLink className="bullet-prefix" to={(match)? '#': `#${this.props.slug}`}
|
||||
<header className={(match? "active " : "") + "bullet-prefix section-header"}>
|
||||
<NavLink
|
||||
to={`/building/${this.props.building_id}/edit.html` + ((match)? '': `?cat=${this.props.slug}`)}
|
||||
isActive={() => match}>
|
||||
<h3 className="h3">{this.props.title}</h3>
|
||||
</NavLink>
|
||||
<form action={`/building/${this.props.building_id}.html#${this.props.slug}`}
|
||||
{
|
||||
this.props.help?
|
||||
<a className="icon-button help" title="Find out more" href={this.props.help}
|
||||
target="_blank" rel="noopener noreferrer">
|
||||
<HelpIcon />
|
||||
</a>
|
||||
: null
|
||||
}
|
||||
{
|
||||
match?
|
||||
<Fragment>
|
||||
<NavLink className="icon-button save" title="Save Changes"
|
||||
to={`/building/${this.props.building_id}.html?cat=${this.props.slug}`}>
|
||||
<SaveIcon />
|
||||
</NavLink>
|
||||
<NavLink className="icon-button close" title="Cancel"
|
||||
to={`/building/${this.props.building_id}.html?cat=${this.props.slug}`}>
|
||||
<CloseIcon />
|
||||
</NavLink>
|
||||
</Fragment>
|
||||
: null
|
||||
}
|
||||
</header>
|
||||
{ (match && this.props.intro)? <p className="data-intro">{ this.props.intro }</p> : null }
|
||||
{
|
||||
match?
|
||||
<form action={`/building/${this.props.building_id}.html?cat=${this.props.slug}`}
|
||||
method="GET" onSubmit={this.handleSubmit}>
|
||||
<ErrorBox msg={this.state.error} />
|
||||
<Fragment>{
|
||||
@ -133,6 +167,8 @@ class EditForm extends Component {
|
||||
)
|
||||
}</Fragment>
|
||||
</form>
|
||||
: null
|
||||
}
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { Fragment } from 'react';
|
||||
import { Link, NavLink } from 'react-router-dom';
|
||||
import queryString from 'query-string';
|
||||
|
||||
import Sidebar from './sidebar';
|
||||
import Tooltip from './tooltip';
|
||||
@ -20,19 +21,19 @@ const BuildingView = (props) => {
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
const hash = (props.location && props.location.hash)? props.location.hash.replace('#', ''): undefined;
|
||||
const search = (props.location && props.location.search)? queryString.parse(props.location.search): {};
|
||||
return (
|
||||
<Sidebar title={`View Building`} back="/map/date_year.html">
|
||||
{
|
||||
CONFIG.map(section_props => (
|
||||
<DataSection
|
||||
title={section_props.title} slug={section_props.slug} hash={hash}
|
||||
key={section_props.slug} search={search}
|
||||
building_id={props.building_id}
|
||||
intro={section_props.intro}
|
||||
helpLink={section_props.help}>
|
||||
{...section_props}>
|
||||
{
|
||||
section_props.fields.map(field_props => (
|
||||
<DataEntry
|
||||
key={field_props.slug}
|
||||
title={field_props.title}
|
||||
value={props[field_props.slug]}
|
||||
tooltip={field_props.tooltip} />
|
||||
@ -47,23 +48,26 @@ const BuildingView = (props) => {
|
||||
|
||||
|
||||
const DataSection = (props) => {
|
||||
const match = props.hash && props.slug.match(props.hash);
|
||||
const match = props.search.cat === props.slug;
|
||||
return (
|
||||
<section id={props.slug} className={(props.inactive)? "data-section inactive": "data-section"}>
|
||||
<header className="bullet-prefix section-header">
|
||||
<NavLink to={(match)? '#': `#${props.slug}`} isActive={() => match}>
|
||||
<header className={(match? "active " : "") + "bullet-prefix section-header"}>
|
||||
<NavLink
|
||||
to={`/building/${props.building_id}.html` + ((match)? '': `?cat=${props.slug}`)}
|
||||
isActive={() => match}>
|
||||
<h3 className="h3">{props.title}</h3>
|
||||
</NavLink>
|
||||
{
|
||||
props.helpLink?
|
||||
<a className="icon-button help" title="Find out more" href={props.helpLink} target="_blank" rel="noopener noreferrer">
|
||||
props.help?
|
||||
<a className="icon-button help" title="Find out more" href={props.help} target="_blank" rel="noopener noreferrer">
|
||||
<HelpIcon />
|
||||
</a>
|
||||
: null
|
||||
}
|
||||
{
|
||||
!props.inactive?
|
||||
<NavLink className="icon-button edit" title="Edit data" to={`/building/${props.building_id}/edit.html#${props.slug}`}>
|
||||
<NavLink className="icon-button edit" title="Edit data"
|
||||
to={`/building/${props.building_id}/edit.html?cat=${props.slug}`}>
|
||||
<EditIcon />
|
||||
</NavLink>
|
||||
: null
|
||||
|
||||
@ -1,17 +1,18 @@
|
||||
import React, { Component, Fragment } from 'react';
|
||||
import { Link, NavLink } from 'react-router-dom';
|
||||
import React, { Fragment } from 'react';
|
||||
import { NavLink } from 'react-router-dom';
|
||||
|
||||
import Sidebar from './sidebar';
|
||||
import { HelpIcon } from './icons';
|
||||
import './legend.css';
|
||||
|
||||
const data_map = [
|
||||
import CONFIG from './fields-config.json';
|
||||
|
||||
|
||||
const LEGEND_CONFIG = {
|
||||
age: [
|
||||
{
|
||||
title: 'Year Built',
|
||||
slug: 'date_year',
|
||||
label: 'Age',
|
||||
elements: [
|
||||
{
|
||||
slug: 'date_year',
|
||||
label: 'Year Built',
|
||||
elements: [
|
||||
{ color: '#f0eaba', text: '≥2000' },
|
||||
{ color: '#fae269', text: '1980–2000' },
|
||||
@ -34,15 +35,11 @@ const data_map = [
|
||||
{ color: '#7a5732', text: '<1660' },
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
size: [
|
||||
{
|
||||
title: 'Number of storeys',
|
||||
slug: 'size_storeys',
|
||||
label: 'Size',
|
||||
elements: [
|
||||
{
|
||||
slug: 'size_storeys',
|
||||
label: 'Number of storeys',
|
||||
elements: [
|
||||
{ color: '#ffc584', text: '≥20' },
|
||||
{ color: '#f46259', text: '10–20' },
|
||||
@ -53,21 +50,80 @@ const data_map = [
|
||||
{ color: '#360f69', text: '1' },
|
||||
]
|
||||
}
|
||||
],
|
||||
like: [
|
||||
{
|
||||
title: 'Like Me!',
|
||||
slug: 'like',
|
||||
elements: [
|
||||
{ color: '#f65400', text: 'Liked' },
|
||||
]
|
||||
}
|
||||
];
|
||||
]
|
||||
};
|
||||
|
||||
const LegendItem = (props) => (
|
||||
<li>
|
||||
<span className="key" style={ { background: props.color } }>-</span>
|
||||
{ props.text }
|
||||
</li>
|
||||
);
|
||||
|
||||
const Legend = (props) => {
|
||||
var data_layer = undefined;
|
||||
if (props.match && props.match.params && props.match.params.map) {
|
||||
data_layer = props.match.params.map;
|
||||
}
|
||||
|
||||
return (
|
||||
<Sidebar title="Maps">
|
||||
{
|
||||
CONFIG.map((data_group) => (
|
||||
<LegendGroup {...data_group} maps={LEGEND_CONFIG[data_group.slug]}
|
||||
data_layer={data_layer} key={data_group.slug} />
|
||||
))
|
||||
}
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
|
||||
const LegendGroup = (props) => {
|
||||
const match = props.data_layer === props.slug;
|
||||
const inactive = props.inactive || !props.maps;
|
||||
return (
|
||||
<section className={(inactive? "inactive ": "") + "data-section legend"}>
|
||||
<header className="bullet-prefix section-header">
|
||||
<NavLink
|
||||
to={`/map/${props.slug}.html`}
|
||||
isActive={() => match}>
|
||||
<h3 className="h3">{props.title}</h3>
|
||||
</NavLink>
|
||||
{
|
||||
props.help?
|
||||
<a className="icon-button help" title="Find out more" href={props.help} target="_blank" rel="noopener noreferrer">
|
||||
<HelpIcon />
|
||||
</a>
|
||||
: null
|
||||
}
|
||||
</header>
|
||||
{ (match && props.intro)? <p className="data-intro">{ props.intro }</p> : null }
|
||||
<dl className="data-list">
|
||||
{
|
||||
(match && props.maps)?
|
||||
props.maps.map((data_section) => (
|
||||
<LegendSection {...data_section} key={data_section.slug}>
|
||||
{
|
||||
data_section.elements.map((data_item) => (
|
||||
<LegendItem {...data_item} key={data_item.color} />
|
||||
))
|
||||
}
|
||||
</LegendSection>
|
||||
))
|
||||
: null
|
||||
}
|
||||
</dl>
|
||||
</section>
|
||||
)
|
||||
};
|
||||
|
||||
const LegendSection = (props) => (
|
||||
<Fragment>
|
||||
<dt>
|
||||
<Link to={`/map/${ props.slug }.html`}>{ props.label }</Link>
|
||||
{ props.title }
|
||||
</dt>
|
||||
<dd>
|
||||
<ul className="data-legend">
|
||||
@ -77,50 +133,11 @@ const LegendSection = (props) => (
|
||||
</Fragment>
|
||||
);
|
||||
|
||||
const LegendGroup = (props) => (
|
||||
<div className="data-section legend">
|
||||
<NavLink className={`bullet-prefix ${ props.slug }`} to={`/map/${ props.slug }.html`}>
|
||||
<h3 className="h3">{ props.label }</h3>
|
||||
</NavLink>
|
||||
<dl className="data-list">
|
||||
{ props.children }
|
||||
</dl>
|
||||
</div>
|
||||
const LegendItem = (props) => (
|
||||
<li>
|
||||
<span className="key" style={ { background: props.color } }>-</span>
|
||||
{ props.text }
|
||||
</li>
|
||||
);
|
||||
|
||||
class Legend extends Component {
|
||||
render() {
|
||||
var data_layer = undefined;
|
||||
if (this.props.match && this.props.match.params && this.props.match.params.map) {
|
||||
data_layer = this.props.match.params.map;
|
||||
}
|
||||
|
||||
return (
|
||||
<Sidebar title="Maps">
|
||||
{
|
||||
data_map.map((data_group) => (
|
||||
<LegendGroup {...data_group} key={data_group.slug}>
|
||||
{
|
||||
( data_layer.match(data_group.slug) )
|
||||
? data_group.elements.map((data_section) => (
|
||||
<LegendSection {...data_section} key={data_section.slug}>
|
||||
{
|
||||
( data_layer.match(data_section.slug) )
|
||||
? data_section.elements.map((data_item) => (
|
||||
<LegendItem {...data_item} key={data_item.color} />
|
||||
))
|
||||
: null
|
||||
}
|
||||
</LegendSection>
|
||||
))
|
||||
: null
|
||||
}
|
||||
</LegendGroup>
|
||||
))
|
||||
}
|
||||
</Sidebar>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Legend;
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
display: block;
|
||||
position: relative;
|
||||
padding: 0.6rem 0.5rem 0.5rem 2.25rem;
|
||||
cursor: pointer;
|
||||
/* cursor: pointer; */
|
||||
text-decoration: none;
|
||||
color: #222;
|
||||
transition: background-color 0.2s;
|
||||
@ -23,6 +23,9 @@
|
||||
.bullet-prefix h3 {
|
||||
display: inline-block;
|
||||
}
|
||||
.bullet-prefix a:first-child {
|
||||
color: #222;
|
||||
}
|
||||
.bullet-prefix.active,
|
||||
.bullet-prefix:hover {
|
||||
color: #222;
|
||||
@ -30,7 +33,7 @@
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
.bullet-prefix::before {
|
||||
display: inline-block;
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0.55rem;
|
||||
top: 0.3rem;
|
||||
@ -51,7 +54,7 @@
|
||||
content: '\25BC';
|
||||
}
|
||||
.bullet-prefix.active:hover::before {
|
||||
content: '\25A0';
|
||||
content: '\25B2';
|
||||
}
|
||||
|
||||
.icon-button {
|
||||
@ -84,13 +87,22 @@
|
||||
background-color: #fff;
|
||||
}
|
||||
.icon-button.edit:hover svg {
|
||||
color: rgb(11, 247, 255);
|
||||
color: rgb(11, 225, 225);
|
||||
}
|
||||
.icon-button.help:hover svg {
|
||||
color: rgb(255, 11, 222);
|
||||
color: rgb(0, 81, 255)
|
||||
}
|
||||
.icon-button.tooltip-hint:hover svg {
|
||||
color: rgb(11, 255, 72);
|
||||
color: rgb(255, 11, 245);
|
||||
}
|
||||
.icon-button.close svg {
|
||||
margin-top: -1px;
|
||||
}
|
||||
.icon-button.close:hover svg {
|
||||
color: rgb(255, 72, 11)
|
||||
}
|
||||
.icon-button.save:hover svg {
|
||||
color: rgb(11, 225, 72);
|
||||
}
|
||||
.section-header .icon-button {
|
||||
float: right;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user