Add transport page

This commit is contained in:
2017-03-03 22:02:29 +00:00
parent 8023484aa7
commit 179d0de047
7 changed files with 162 additions and 8 deletions

View File

@@ -35,7 +35,7 @@ class Map extends React.Component {
style={{
height: '360px',
width: '100%',
'max-width': '480px',
maxWidth: '480px',
overflow: 'hidden',
}}
/>
@@ -45,7 +45,7 @@ class Map extends React.Component {
style={{
height: '360px',
width: '100%',
'max-width': '480px',
maxWidth: '480px',
}}
/>
}

View File

@@ -3,13 +3,21 @@
top: 0;
right: 0;
left: 0;
text-align: center;
height: 40px;
background: rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.container {
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
text-align: center;
}
.link {
display: inline-block;
padding: 8px 8px 6px;
padding: 8px 2% 6px;
text-decoration: none;
font-size: 1.125em;
border-bottom: 2px solid transparent;

View File

@@ -14,10 +14,13 @@ class Navigation extends React.Component {
}
return (
<div className={s.root} role="navigation">
<Link className={[s.link, this.props.current === 'home' ? s.active : null].join(' ')} to="/">RSVP</Link>
<Link className={[s.link, this.props.current === 'ceremony' ? s.active : null].join(' ')} to="/ceremony">Church</Link>
<Link className={[s.link, this.props.current === 'reception' ? s.active : null].join(' ')} to="/reception">Venue</Link>
<Link className={[s.link, this.props.current === 'accomodation' ? s.active : null].join(' ')} to="/accomodation">Hotels</Link>
<div className={s.container}>
<Link className={[s.link, this.props.current === 'home' ? s.active : null].join(' ')} to="/">RSVP</Link>
<Link className={[s.link, this.props.current === 'ceremony' ? s.active : null].join(' ')} to="/ceremony">Church</Link>
<Link className={[s.link, this.props.current === 'reception' ? s.active : null].join(' ')} to="/reception">Venue</Link>
<Link className={[s.link, this.props.current === 'accomodation' ? s.active : null].join(' ')} to="/accomodation">Hotels</Link>
<Link className={[s.link, this.props.current === 'transport' ? s.active : null].join(' ')} to="/transport">Transport</Link>
</div>
</div>
);
}