Create component for section in building-view
This commit is contained in:
parent
72a626e267
commit
f8201da283
@ -1,10 +1,24 @@
|
|||||||
import React, { Fragment } from 'react';
|
import React from 'react';
|
||||||
import { Link, NavLink } from 'react-router-dom';
|
import { Link, NavLink } from 'react-router-dom';
|
||||||
|
|
||||||
import Sidebar from './sidebar';
|
import Sidebar from './sidebar';
|
||||||
import Tooltip from './tooltip';
|
import Tooltip from './tooltip';
|
||||||
import InfoBox from './info-box';
|
import InfoBox from './info-box';
|
||||||
|
|
||||||
|
|
||||||
|
const DataSection = function(props){
|
||||||
|
const match = props.hash && props.slug.match(props.hash);
|
||||||
|
return (
|
||||||
|
<section className="data-section">
|
||||||
|
<NavLink className="bullet-prefix" to={(match)? '#': `#${props.slug}`}
|
||||||
|
isActive={() => match}>
|
||||||
|
<h3 className="h3">{props.title}</h3>
|
||||||
|
</NavLink>
|
||||||
|
{ (match)? props.children : null }
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
const BuildingView = function(props){
|
const BuildingView = function(props){
|
||||||
if (!props.building_id){
|
if (!props.building_id){
|
||||||
return (
|
return (
|
||||||
@ -16,17 +30,10 @@ const BuildingView = function(props){
|
|||||||
</Sidebar>
|
</Sidebar>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
const hash = (props.location && props.location.hash)? props.location.hash: undefined;
|
const hash = (props.location && props.location.hash)? props.location.hash.replace('#', ''): undefined;
|
||||||
return (
|
return (
|
||||||
<Sidebar title={`View Building`}>
|
<Sidebar title={`View Building`}>
|
||||||
<section className="data-section">
|
<DataSection title="Location" slug="location" hash={hash}>
|
||||||
<NavLink className="bullet-prefix" to="#location">
|
|
||||||
<h3 className="h3 location">Location</h3>
|
|
||||||
</NavLink>
|
|
||||||
{
|
|
||||||
( hash.match('location') )
|
|
||||||
? (
|
|
||||||
<Fragment>
|
|
||||||
<p className="data-intro">
|
<p className="data-intro">
|
||||||
|
|
||||||
Section introduction of up to roughly 100 characters will take
|
Section introduction of up to roughly 100 characters will take
|
||||||
@ -51,14 +58,8 @@ const BuildingView = function(props){
|
|||||||
<dt>Postcode</dt>
|
<dt>Postcode</dt>
|
||||||
<dd>{props.location_postcode ? props.location_postcode : '-'}</dd>
|
<dd>{props.location_postcode ? props.location_postcode : '-'}</dd>
|
||||||
</dl>
|
</dl>
|
||||||
</Fragment>
|
</DataSection>
|
||||||
) : null
|
<DataSection title="Age" slug="age" hash={hash}>
|
||||||
}
|
|
||||||
</section>
|
|
||||||
<section className="data-section">
|
|
||||||
<NavLink className="bullet-prefix" to="#age">
|
|
||||||
<h3 className="h3 age">Age</h3>
|
|
||||||
</NavLink>
|
|
||||||
<dl className="data-list">
|
<dl className="data-list">
|
||||||
<dt>Year built (best estimate)</dt>
|
<dt>Year built (best estimate)</dt>
|
||||||
<dd>{props.date_year? props.date_year : '-'}</dd>
|
<dd>{props.date_year? props.date_year : '-'}</dd>
|
||||||
@ -71,11 +72,8 @@ const BuildingView = function(props){
|
|||||||
<dt>Facade date</dt>
|
<dt>Facade date</dt>
|
||||||
<dd>{props.date_facade? props.date_facade : '-'}</dd>
|
<dd>{props.date_facade? props.date_facade : '-'}</dd>
|
||||||
</dl>
|
</dl>
|
||||||
</section>
|
</DataSection>
|
||||||
<section className="data-section">
|
<DataSection title="Size" slug="size" hash={hash}>
|
||||||
<NavLink className="bullet-prefix" to="#size">
|
|
||||||
<h3 className="h3 size">Size</h3>
|
|
||||||
</NavLink>
|
|
||||||
<dl className="data-list">
|
<dl className="data-list">
|
||||||
<dt>Attic storeys</dt>
|
<dt>Attic storeys</dt>
|
||||||
<dd>{props.size_storeys_attic? props.size_storeys_attic : '-'}</dd>
|
<dd>{props.size_storeys_attic? props.size_storeys_attic : '-'}</dd>
|
||||||
@ -84,16 +82,13 @@ const BuildingView = function(props){
|
|||||||
<dt>Basement storeys</dt>
|
<dt>Basement storeys</dt>
|
||||||
<dd>{props.size_storeys_basement? props.size_storeys_basement : '-'}</dd>
|
<dd>{props.size_storeys_basement? props.size_storeys_basement : '-'}</dd>
|
||||||
</dl>
|
</dl>
|
||||||
</section>
|
</DataSection>
|
||||||
<section className="data-section">
|
<DataSection title="Like Me!" slug="like" hash={hash}>
|
||||||
<NavLink className="bullet-prefix" to="#like">
|
|
||||||
<h3 className="h3 like">Like Me!</h3>
|
|
||||||
</NavLink>
|
|
||||||
<dl className="data-list">
|
<dl className="data-list">
|
||||||
<dt>Likes</dt>
|
<dt>Likes</dt>
|
||||||
<dd>{props.likes ? props.likes.length : 0}</dd>
|
<dd>{props.likes ? props.likes.length : 0}</dd>
|
||||||
</dl>
|
</dl>
|
||||||
</section>
|
</DataSection>
|
||||||
<div className="buttons-container">
|
<div className="buttons-container">
|
||||||
<Link to="/map/date_year.html" className="btn btn-secondary">Back to maps</Link>
|
<Link to="/map/date_year.html" className="btn btn-secondary">Back to maps</Link>
|
||||||
<Link to={`/building/${props.building_id}/edit.html`} className="btn btn-primary">Edit data</Link>
|
<Link to={`/building/${props.building_id}/edit.html`} className="btn btn-primary">Edit data</Link>
|
||||||
|
@ -21,6 +21,9 @@ label {
|
|||||||
.buttons-container {
|
.buttons-container {
|
||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
.info-container .buttons-container {
|
||||||
|
padding: 0 0.75rem;
|
||||||
|
}
|
||||||
.buttons-container .btn {
|
.buttons-container .btn {
|
||||||
margin-bottom: 0.25rem;
|
margin-bottom: 0.25rem;
|
||||||
margin-right: 0.25rem;
|
margin-right: 0.25rem;
|
||||||
|
Loading…
Reference in New Issue
Block a user