Allow expand/collapse maps (fallback to 'base')
This commit is contained in:
parent
7f8683a1b9
commit
35d2e8ffd8
@ -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>
|
||||
|
@ -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">
|
||||
{
|
||||
|
@ -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.' :
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user