dan/wedding
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial attempt at a homepage design

Browse Source
This commit is contained in:
Dan Head
2017-02-12 16:27:54 +00:00
parent 97d5370e65
commit bbf757116d
12 changed files with 225 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/Html.js
View File

@@ -21,6 +21,7 @@ class Html extends React.Component {
<meta name="description" content={description} />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:500|Yesteryear" />
{style && <style id="css" dangerouslySetInnerHTML={{ __html: style }} />}
</head>
<body>

91
src/components/RsvpButton/RsvpButton.css Normal file
View File

@@ -0,0 +1,91 @@
@import '../variables.css';
.root {
margin: 0 auto;
max-width: 420px;
position: relative;
}
.rsvp,
.rsvpForm {
position: absolute;
width: 100%;
transition: opacity ease-in-out 0.25s;
display: none;
opacity: 0;
}
.rsvpVisible,
.rsvpFormVisible {
display: block;
opacity: 1;
}
.formGroup {
margin-bottom: 15px;
display: inline-block;
}
.rsvpGroup {
width: 60%;
}
.rsvpButtonGroup {
width: 30%;
float: right;
}
.label {
display: inline-block;
position: fixed;
top: -1000px;
left: -1000px;
}
.input {
display: block;
box-sizing: border-box;
padding: 12px 16px;
width: 100%;
height: 50px;
opacity: 0.75;
outline: 0;
border: 3px solid #fff;
border-radius: 14px;
background: #fff;
color: #616161;
font-size: 18px;
line-height: 1.3333333;
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}
.input:focus {
opacity: 1;
box-shadow: 0 0 4px #fff;
}
.button {
display: block;
box-sizing: border-box;
margin: 0;
padding: 10px 16px;
width: 100%;
opacity: 0.75;
outline: 0;
border: 4px solid #fff;
border-radius: 14px;
background: transparent;
color: #fff;
text-align: center;
text-decoration: none;
font-size: 18px;
line-height: 1.3333333;
cursor: pointer;
transition: opacity ease-in-out 0.25s, box-shadow ease-in-out 0.25s;
}
.button:hover,
.button:focus {
opacity: 1;
box-shadow: 0 0 4px #fff;
}

64
src/components/RsvpButton/RsvpButton.js Normal file
View File

@@ -0,0 +1,64 @@
import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './RsvpButton.css';
class RsvpButton extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
showRsvpForm = () => {
this.setState({ showRsvpForm: true });
setTimeout(() => {
this.rsvpInput.focus();
}, 250);
}
render() {
return (
<div className={s.root}>
<div
className={[
s.rsvp,
!this.state.showRsvpForm ? s.rsvpVisible : null,
].join(' ')}
>
<button className={s.button} onClick={this.showRsvpForm}>
RSVP
</button>
</div>
<div
className={[
s.rsvpForm,
this.state.showRsvpForm ? s.rsvpFormVisible : null,
].join(' ')}
>
<form method="post" action="/rsvp">
<div className={[s.formGroup, s.rsvpGroup].join(' ')}>
<label className={s.label} htmlFor="code">
Enter your RSVP code
</label>
<input
className={s.input}
ref={(input) => { this.rsvpInput = input; }}
id="code"
type="text"
name="code"
placeholder="Enter your RSVP code"
/>
</div>
<div className={[s.formGroup, s.rsvpButtonGroup].join(' ')}>
<button className={s.button} type="submit">
RSVP
</button>
</div>
</form>
</div>
</div>
);
}
}
export default withStyles(s)(RsvpButton);

6
src/components/RsvpButton/package.json Normal file
View File

@@ -0,0 +1,6 @@
{
"name": "RsvpButton",
"version": "0.0.0",
"private": true,
"main": "./RsvpButton.js"
}

17
src/components/RsvpCard/RsvpCard.js
View File

@@ -22,13 +22,16 @@ class RsvpCard extends React.Component {
}).isRequired,
};
state = {
detailsVisible: this.props.person.attending,
saveAttending: this.props.person.attending ? 'saved' : null,
saveStarter: this.props.person.starter !== '-1' ? 'saved' : null,
saveMain: this.props.person.main !== '-1' ? 'saved' : null,
saveDietary: this.props.person.dietary ? 'saved' : null,
};
constructor(props) {
super(props);
this.state = {
detailsVisible: this.props.person.attending,
saveAttending: this.props.person.attending ? 'saved' : null,
saveStarter: this.props.person.starter !== '-1' ? 'saved' : null,
saveMain: this.props.person.main !== '-1' ? 'saved' : null,
saveDietary: this.props.person.dietary ? 'saved' : null,
};
}
isRSVPComplete(prop, value) {
function isOK(str) {

25
src/components/variables.css
View File

@@ -3,7 +3,8 @@
* Typography
* ======================================================================== */
--font-family-base: 'Segoe UI', 'HelveticaNeue-Light', sans-serif;
--font-family-base: 'Poppins', 'Segoe UI', 'HelveticaNeue-Light', sans-serif;
--font-family-cursive: 'Yesteryear', cursive;
/*
* Layout
@@ -15,20 +16,20 @@
* Media queries breakpoints
* ======================================================================== */
/* --screen-xs-min: 480px; /* Extra small screen / phone */
/* --screen-sm-min: 768px; /* Small screen / tablet */
/* --screen-md-min: 992px; /* Medium screen / desktop */
/* --screen-lg-min: 1200px; /* Large screen / wide desktop */
@custom-media --xs-viewport (min-width: 480px);
@custom-media --sm-viewport (min-width: 768px);
@custom-media --md-viewport (min-width: 992px);
@custom-media --lg-viewport (min-width: 1200px);
--colour-primary: #6495ED;
--colour-secondary: #2A6FEB;
--colour-tertiary: #2A6FEB;
--colour-grey: #CCC;
--colour-green: #87EDA2;
--colour-red: #FA7575;
/*
* Colour palette
* ======================================================================== */
--colour-nearblack: #282828;
--colour-primary: #6495ed;
--colour-secondary: #2a6feb;
--colour-tertiary: #2a6feb;
--colour-grey: #ccc;
--colour-green: #87eda2;
--colour-red: #fa7575;
}