Add back buttons to sidebar header

This commit is contained in:
Tom Russell 2018-10-01 17:20:25 +01:00
parent a012b24bd1
commit fe8e6f7737
5 changed files with 32 additions and 10 deletions

View File

@ -59,7 +59,7 @@ class BuildingEdit extends Component {
}
if (!this.props.building_id){
return (
<Sidebar title="Building Not Found">
<Sidebar title="Building Not Found" back="/map/date_year.html">
<InfoBox msg="We can't find that one anywhere - try the map again?" />
<div className="buttons-container">
<Link to="/map/date_year.html" className="btn btn-secondary">Back to maps</Link>
@ -68,10 +68,10 @@ class BuildingEdit extends Component {
);
}
return (
<Sidebar title={`Edit Building`}>
<Sidebar title={`Edit Building`} back={`/building/${this.props.building_id}.html`}>
{
CONFIG.map((props) => {
return <EditForm {...props} {...this.props} key={props.slug} />
CONFIG.map((conf_props) => {
return <EditForm {...conf_props} {...this.props} key={conf_props.slug} />
})
}
</Sidebar>

View File

@ -4,7 +4,7 @@ import { Link, NavLink } from 'react-router-dom';
import Sidebar from './sidebar';
import Tooltip from './tooltip';
import InfoBox from './info-box';
import { InfoIcon, EditIcon } from './icons';
import { HelpIcon, EditIcon } from './icons';
const DataSection = function(props){
@ -18,7 +18,7 @@ const DataSection = function(props){
{
props.helpLink?
<a className="icon-button help" title="Find out more" href={props.helpLink} target="_blank" rel="noopener noreferrer">
<InfoIcon />
<HelpIcon />
</a>
: null
}
@ -55,7 +55,7 @@ const BuildingView = function(props){
}
const hash = (props.location && props.location.hash)? props.location.hash.replace('#', ''): undefined;
return (
<Sidebar title={`View Building`}>
<Sidebar title={`View Building`} back="/map/date_year.html">
<DataSection title="Location" slug="location" hash={hash}
helpLink="https://pollyhudson.wixsite.com/colouringlondon/location">
<p className="data-intro">

View File

@ -47,3 +47,14 @@
height: auto;
}
}
.sidebar-header .h2 {
display: inline-block;
}
.sidebar-header .icon-button {
margin-left: 0.25rem;
margin-top: 0.4rem;
}
.sidebar-header .icon-button:hover {
background-color: #eee;
}

View File

@ -1,10 +1,21 @@
import React from 'react';
import { Link } from 'react-router-dom';
import './sidebar.css';
import { BackIcon } from './icons';
const Sidebar = (props) => (
<div id="legend" className="info-container">
<header className="sidebar-header">
{
props.back?
<Link className="icon-button back" to={props.back}>
<BackIcon />
</Link>
: null
}
<h2 className="h2">{props.title}</h2>
</header>
{props.children}
</div>
);

View File

@ -1,7 +1,7 @@
import React, { Component, Fragment } from 'react';
import './tooltip.css';
import { HelpIcon } from './icons';
import { InfoIcon } from './icons';
class Tooltip extends Component {
constructor(props) {
@ -25,7 +25,7 @@ class Tooltip extends Component {
<div className="tooltip-wrap">
<button className="tooltip-hint icon-button" title={this.props.text}
onClick={this.handleClick}>
<HelpIcon />
<InfoIcon />
</button>
{
this.state.active?