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;
}

8
src/routes/admin/index.js
View File

@@ -11,17 +11,13 @@ export default {
async action() {
const resp = await fetchQL('{getAllPersons{key,firstname,lastname,email,password,completed,starter,main}}');
const { data } = await resp.json();
const people = data.getAllPersons || [];
const food = {
starters: starters.map(name => ({ name, total: 0 })),
mains: mains.map(name => ({ name, total: 0 })),
};
let people = await resp.json();
if (people.data && people.data.getAllPersons) {
people = people.data.getAllPersons;
} else {
people = [];
}
const Admin = await new Promise((resolve) => {
require.ensure([], (require) => resolve(require('./Admin').default), 'admin');

84
src/routes/home/Home.css
View File

@@ -1,73 +1,43 @@
@import '../../components/variables.css';
.root {
padding-left: 20px;
padding-right: 20px;
width: 100vw;
height: 100vh;
}
.formContainer {
margin: 0 auto;
max-width: 420px;
.churchImage {
position: fixed;
width: 100vw;
height: 100vh;
background-image: url('/img/church_2500.jpg');
background-size: cover;
background-position-x: 40%;
filter: grayscale(1) brightness(0.4);
z-index: -1;
}
.formGroup {
margin-bottom: 15px;
.container {
padding-top: 5vh;
margin: 0 20px;
}
.label {
display: inline-block;
margin-bottom: 5px;
max-width: 100%;
font-weight: 700;
}
.input {
display: block;
box-sizing: border-box;
padding: 10px 16px;
width: 100%;
height: 46px;
outline: 0;
border: 1px solid var(--colour-grey);
border-radius: 0;
background: #fff;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
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 {
border-color: var(--colour-tertiary);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 116, 194, 0.6);
}
.button {
display: block;
box-sizing: border-box;
margin: 0;
padding: 10px 16px;
width: 100%;
outline: 0;
border: 1px solid var(--colour-secondary);
border-radius: 0;
background: var(--colour-primary);;
color: #fff;
.headings {
max-width: 640px;
margin: 0 auto 40px;
text-align: center;
text-decoration: none;
font-size: 18px;
line-height: 1.3333333;
cursor: pointer;
color: var(--colour-nearblack);
}
.button:hover {
background: var(--colour-secondary);
.headings > * {
margin: 0 0 20px;
font-size: 2.5em;
}
.button:focus {
border-color: var(--colour-tertiary);
box-shadow: 0 0 8px var(--colour-secondary);
.headings h3 {
margin-top: 40px;
font-family: var(--font-family-cursive);
}
.rsvp {
padding-top: 15vh;
}

31
src/routes/home/Home.js
View File

@@ -1,31 +1,22 @@
import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import s from './Home.css';
import RsvpButton from '../../components/RsvpButton';
class Home extends React.Component {
render() {
return (
<div className={s.root}>
<div className={s.formContainer}>
<form method="post" action="/rsvp">
<div className={s.formGroup}>
<label className={s.label} htmlFor="code">
Enter your RSVP code:
</label>
<input
className={s.input}
id="code"
type="text"
name="code"
autoFocus
/>
</div>
<div className={s.formGroup}>
<button className={s.button} type="submit">
RSVP
</button>
</div>
</form>
<div className={s.churchImage} />
<div className={s.container}>
<div className={s.headings}>
<h1>Daniel and Hana</h1>
<h2>are getting married</h2>
<h3>- 27th July 2017 -</h3>
</div>
<div className={s.rsvp}>
<RsvpButton />
</div>
</div>
</div>
);

4
src/routes/login/Login.css
View File

@@ -11,10 +11,6 @@
max-width: 380px;
}
.lead {
font-size: 1.25em;
}
.formGroup {
margin-bottom: 15px;
}

1
src/routes/login/Login.js
View File

@@ -12,7 +12,6 @@ class Login extends React.Component {
<div className={s.root}>
<div className={s.container}>
<h1>{this.props.title}</h1>
<p className={s.lead}>Log in with your username or company email address.</p>
<div className={s.formGroup}>
<a className={s.facebook} href="/login/facebook">
<svg