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

Create component for section in building-view

Browse Source
This commit is contained in:
Tom Russell 2018-10-01 00:32:24 +01:00
parent 72a626e267
commit f8201da283
2 changed files with 49 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
app/src/frontend/building-view.js
View File

@ -1,10 +1,24 @@
import React, { Fragment } from 'react';
import React from 'react';
import { Link, NavLink } from 'react-router-dom';
import Sidebar from './sidebar';
import Tooltip from './tooltip';
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){
if (!props.building_id){
return (
@ -16,49 +30,36 @@ const BuildingView = function(props){
</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 (
<Sidebar title={`View Building`}>
<section className="data-section">
<NavLink className="bullet-prefix" to="#location">
<h3 className="h3 location">Location</h3>
</NavLink>
{
( hash.match('location') )
? (
<Fragment>
<p className="data-intro">
<DataSection title="Location" slug="location" hash={hash}>
<p className="data-intro">
Section introduction of up to roughly 100 characters will take
approx&shy;imately this much space.
Section introduction of up to roughly 100 characters will take
approx&shy;imately this much space.
<a href="/">Read more</a>.
</p>
<dl id="data-list-location" className="data-list collapse show">
<dt>
Building Name
<Tooltip text="Hint tooltip content should be ~40 chars." />
</dt>
<dd>{props.location_name ? props.location_name : '-'}</dd>
<dt>Building Number</dt>
<dd>{props.location_number ? props.location_number : '-'}</dd>
<dt>Street</dt>
<dd>{props.location_street ? props.location_street : '-'}</dd>
<dt>Address line 2</dt>
<dd>{props.location_line_two ? props.location_line_two : '-'}</dd>
<dt>Town</dt>
<dd>{props.location_town ? props.location_town : '-'}</dd>
<dt>Postcode</dt>
<dd>{props.location_postcode ? props.location_postcode : '-'}</dd>
</dl>
</Fragment>
) : null
}
</section>
<section className="data-section">
<NavLink className="bullet-prefix" to="#age">
<h3 className="h3 age">Age</h3>
</NavLink>
<a href="/">Read more</a>.
</p>
<dl id="data-list-location" className="data-list collapse show">
<dt>
Building Name
<Tooltip text="Hint tooltip content should be ~40 chars." />
</dt>
<dd>{props.location_name ? props.location_name : '-'}</dd>
<dt>Building Number</dt>
<dd>{props.location_number ? props.location_number : '-'}</dd>
<dt>Street</dt>
<dd>{props.location_street ? props.location_street : '-'}</dd>
<dt>Address line 2</dt>
<dd>{props.location_line_two ? props.location_line_two : '-'}</dd>
<dt>Town</dt>
<dd>{props.location_town ? props.location_town : '-'}</dd>
<dt>Postcode</dt>
<dd>{props.location_postcode ? props.location_postcode : '-'}</dd>
</dl>
</DataSection>
<DataSection title="Age" slug="age" hash={hash}>
<dl className="data-list">
<dt>Year built (best estimate)</dt>
<dd>{props.date_year? props.date_year : '-'}</dd>
@ -71,11 +72,8 @@ const BuildingView = function(props){
<dt>Facade date</dt>
<dd>{props.date_facade? props.date_facade : '-'}</dd>
</dl>
</section>
<section className="data-section">
<NavLink className="bullet-prefix" to="#size">
<h3 className="h3 size">Size</h3>
</NavLink>
</DataSection>
<DataSection title="Size" slug="size" hash={hash}>
<dl className="data-list">
<dt>Attic storeys</dt>
<dd>{props.size_storeys_attic? props.size_storeys_attic : '-'}</dd>
@ -84,16 +82,13 @@ const BuildingView = function(props){
<dt>Basement storeys</dt>
<dd>{props.size_storeys_basement? props.size_storeys_basement : '-'}</dd>
</dl>
</section>
<section className="data-section">
<NavLink className="bullet-prefix" to="#like">
<h3 className="h3 like">Like Me!</h3>
</NavLink>
</DataSection>
<DataSection title="Like Me!" slug="like" hash={hash}>
<dl className="data-list">
<dt>Likes</dt>
<dd>{props.likes ? props.likes.length : 0}</dd>
</dl>
</section>
</DataSection>
<div className="buttons-container">
<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>

3
app/src/frontend/styles/forms.css
View File

@ -21,6 +21,9 @@ label {
.buttons-container {
margin-bottom: 0.75rem;
}
.info-container .buttons-container {
padding: 0 0.75rem;
}
.buttons-container .btn {
margin-bottom: 0.25rem;
margin-right: 0.25rem;