Allow expand/collapse maps (fallback to 'base')

This commit is contained in:
Tom Russell 2018-10-25 12:15:19 +01:00
parent 7f8683a1b9
commit 35d2e8ffd8
6 changed files with 24 additions and 24 deletions

View File

@ -194,15 +194,14 @@ const AboutPage = () => (
Receive occasional newsletters about the project as it develops. You can
read previous newsletters in our <a
href="https://tinyletter.com/colouringlondon/archive"
target="_blank" rel="noopener noreferrer">newsletter archive</a>.
href="https://tinyletter.com/colouringlondon/archive">newsletter archive</a>.
</p>
<label htmlFor="tlemail">Enter your email address:</label>
<input className="form-control" type="email" name="email" id="tlemail" placeholder="name@example.com" />
<input type="hidden" value="1" name="embed"/>
<small className="form-text text-muted">
<a href="https://tinyletter.com" target="_blank" rel="noopener noreferrer">
<a href="https://tinyletter.com">
powered by TinyLetter</a>.
We'll never share your email address.
</small>

View File

@ -113,7 +113,7 @@ class EditForm extends Component {
}
return (
<section className={(this.props.inactive)? "data-section inactive": "data-section"}>
<header className={(match? "active " : "") + "bullet-prefix section-header"}>
<header className={(match? "active " : "") + " section-header edit"}>
<a><h3 className="h3">{this.props.title}</h3></a>
<nav className="icon-buttons">
{

View File

@ -51,7 +51,7 @@ const DataSection = (props) => {
const match = props.search.cat === props.slug;
return (
<section id={props.slug} className={(props.inactive)? "data-section inactive": "data-section"}>
<header className={(match? "active " : "") + "bullet-prefix section-header"}>
<header className={(match? "active " : "") + " section-header view"}>
<NavLink
to={`/building/${props.building_id}.html` + ((match)? '': `?cat=${props.slug}`)}
title={(props.inactive)? 'Coming soon… Click the ? for more info.' :

View File

@ -87,9 +87,9 @@ const LegendGroup = (props) => {
const inactive = props.inactive || !props.maps;
return (
<section className={(inactive? "inactive ": "") + "data-section legend"}>
<header className="bullet-prefix section-header">
<header className={(match? "active " : "") + " section-header view"}>
<NavLink
to={`/map/${props.slug}.html`}
to={match? "/map/base.html": `/map/${props.slug}.html`}
isActive={() => match}
title={(inactive)? 'Coming soon… Click the ? for more info.' :
(match)? '' : 'Show on map'}>
@ -98,7 +98,8 @@ const LegendGroup = (props) => {
{
props.help?
<nav className="icon-buttons">
<a className="icon-button help" title="Find out more" href={props.help} target="_blank" rel="noopener noreferrer">
<a className="icon-button help" title="Find out more" href={props.help}>
Help
<HelpIcon />
</a>
</nav>

View File

@ -125,7 +125,7 @@ function get_cat(is_building, location, url) {
cat = search.cat;
} else {
matches = /\/map\/([^.]+).html/.exec(url);
cat = (matches && matches.length < 1)? matches[1] : "";
cat = (matches && matches.length > 1)? matches[1] : "";
}
return cat;
}

View File

@ -69,7 +69,7 @@
/**
* Data list section headers
*/
.bullet-prefix {
.section-header {
display: block;
position: relative;
clear: both;
@ -77,21 +77,21 @@
color: #222;
transition: background-color 0.2s;
}
.bullet-prefix h3 {
.section-header h3 {
display: inline-block;
}
.bullet-prefix > a {
.section-header > a {
display: block;
padding: 0.6rem 0.5rem 0.5rem 2.25rem;
color: #222;
}
.bullet-prefix.active,
.bullet-prefix:hover {
.section-header.active,
.section-header:hover {
color: #222;
text-decoration: none;
background-color: #eeeeee;
}
.bullet-prefix > a::before {
.section-header > a::before {
display: block;
position: absolute;
left: 0.55rem;
@ -104,27 +104,27 @@
content: '\25B8';
transition: color 0.2s;
}
.bullet-prefix:hover > a::before,
.bullet-prefix.active > a::before {
.section-header:hover > a::before,
.section-header.active > a::before {
font-size: 1rem;
}
.bullet-prefix:hover > a::before,
.bullet-prefix.active > a::before {
.section-header:hover > a::before,
.section-header.active > a::before {
content: '\25BC';
}
.bullet-prefix.active:hover > a::before {
.section-header.view.active:hover > a::before {
content: '\25B2';
}
.data-section.inactive .bullet-prefix > a::before,
.data-section.inactive .bullet-prefix:hover > a::before,
.data-section.inactive .bullet-prefix.active:hover > a::before {
.data-section.inactive .section-header > a::before,
.data-section.inactive .section-header:hover > a::before,
.data-section.inactive .section-header.active:hover > a::before {
opacity: 0.4;
color: #222;
font-size: 1.2rem;
content: '\25B8';
}
.bullet-prefix .icon-buttons {
.section-header .icon-buttons {
position: absolute;
top: 0;
right: 0;