diff --git a/app/src/frontend/building-view.js b/app/src/frontend/building-view.js index 8dbeebd1..e06c1d1b 100644 --- a/app/src/frontend/building-view.js +++ b/app/src/frontend/building-view.js @@ -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­imately this much space. + Section introduction of up to roughly 100 characters will take + approx­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> diff --git a/app/src/frontend/styles/forms.css b/app/src/frontend/styles/forms.css index 53e2d2c8..e010a481 100644 --- a/app/src/frontend/styles/forms.css +++ b/app/src/frontend/styles/forms.css @@ -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;