YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Updated contact page to be more new-code.

Browse Source
This commit is contained in:
Dominic Masters
2018-10-31 21:32:30 +11:00
parent 5b4be02593
commit 23c003519a
8 changed files with 152 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
public/components/page/Page.jsx
View File

@ -26,16 +26,19 @@ import { connect } from 'react-redux';
import { Helmet } from "react-helmet";
import { withLanguage } from '@public/language/Language';
import Styles from './Page.scss';
import Image from '@objects/image/Image';
//Components
import PageBoundary from './boundary/PageBoundary';
export default withLanguage(props => {
let { title, style, className, lang, children } = props;
import Styles from './Page.scss';
export default withLanguage(props => {
let { title, style, className, lang, children, background } = props;
//Switch classes
let clazzes = `c-page ${className||""}`;
//Setup page title
let titleHelmet;
if((!title || !title.length) && style != "home-page") {
console.exception(`This page (${style||className}) does not have a title!`);
@ -43,11 +46,19 @@ export default withLanguage(props => {
titleHelmet = <title>{ title }</title>
}
//Extras
let bg;
if(background) {
bg = <Image src={ background } className="c-page__background" loadable />;
clazzes += ' has-background';
}
return (
<div className={clazzes}>
<Helmet defaultTitle={ lang.site.title } titleTemplate={ lang.site.titleTemplate }>
{ titleHelmet }
</Helmet>
{ bg }
{ children }
</div>
);

12
public/components/page/Page.scss
View File

@ -13,6 +13,10 @@
.c-page {
flex-grow: 1;
&.has-background {
position: relative;
}
&__boundary {
max-width: $s-screen-boundary;
margin: 0 auto;
@ -26,4 +30,12 @@
max-width: $s-screen-boundary / 2;
}
}
&__background {
position: absolute;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
}

110
public/pages/contact/ContactPage.jsx
View File

@ -25,34 +25,24 @@ import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Forms from '@common/Forms';
//Actions
import { openModal } from '@public/actions/ModalActions';
//Components
import Page, { PageBoundary } from '@components/page/Page';
import { withLanguage } from '@public/language/Language';
import Section, {
BodySection,
ClearSection,
SplitSection,
Split
} from '@components/section/Section';
import { ClearSection } from '@components/section/Section';
//Objects
import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
import ContentBox from '@objects/content/box/ContentBox';
import { Title, Heading1, Paragraph } from '@objects/typography/Typography';
import Input, {
Form,
FormManager,
FormGroup,
TextArea,
Label,
ButtonGroup
} from '@objects/input/Input';
import Modal from '@objects/modal/Modal';
import { FormManager } from '@objects/input/Input';
import ContactForm from './form/ContactForm';
import Styles from './ContactPage.scss';
class ContactPage extends React.Component {
constructor(props) {
@ -61,16 +51,12 @@ class ContactPage extends React.Component {
//Form Manager (For the form and elements)
this.manager = new FormManager();
this.state = {
sent: false
};
this.state = { sent: false };
}
onSuccess(data) {
if(data !== true) return this.onError(data);
this.setState({
sent: true
});
this.setState({ sent: true });
}
onError(e, a, b) {
@ -83,16 +69,17 @@ class ContactPage extends React.Component {
render() {
let { lang } = this.props;
let { sent } = this.state;
//Form
let inners;
if(this.state.sent) {
if(sent) {
//Sent Display
inners = (
<ElementScrollFader from="bottom">
<ContentBox box className="u-text-center">
<Heading1>{ lang.pages.contact.success.heading }</Heading1>
<Paragraph>{ lang.pages.contact.success.paragraph }</Paragraph>
<Heading1 children={ lang.pages.contact.success.heading } />
<Paragraph children={ lang.pages.contact.success.paragraph } />
</ContentBox>
</ElementScrollFader>
);
@ -100,73 +87,27 @@ class ContactPage extends React.Component {
//Form
inners = (
<ElementScrollFader from="right">
<BodySection>
<Form
post="/api/contact/send"
contentType="application/json"
ajax
loader
<ContentBox box>
<ContactForm
onSuccess={ (e) => this.onSuccess(e) }
onError={ (e) => this.onError(e) }
manager={ this.manager }
>
<FormGroup>
<Label htmlFor="name">
{ lang.pages.contact.name.label }
</Label>
<Input
name="name"
type="text"
placeholder={ lang.pages.contact.name.placeholder }
required={ Forms.contact.name.required }
maxLength={ Forms.contact.name.maxLength }
manager={ this.manager }
/>
</FormGroup>
<FormGroup >
<Label htmlFor="email">
{ lang.pages.contact.email.label }
</Label>
<Input
name="email"
type="email"
placeholder={ lang.pages.contact.email.placeholder }
required={ Forms.contact.email.required }
maxLength={ Forms.contact.email.maxLength }
manager={ this.manager }
/>
</FormGroup>
<FormGroup>
<Label> htmlFor="message">
{ lang.pages.contact.message.label }
</Label>
<TextArea
name="message"
placeholder={ lang.pages.contact.message.placeholder }
rows="8"
className="p-contact-page__message"
required={ Forms.contact.message.required }
maxLength={ Forms.contact.message.maxLength }
manager={ this.manager }
/>
</FormGroup>
<ButtonGroup>
<Input type="submit" value={ lang.pages.contact.send } primary="true" />
<Input type="reset" value={ lang.pages.contact.reset } />
</ButtonGroup>
</Form>
</BodySection>
/>
</ContentBox>
</ElementScrollFader>
);
}
return (
<Page style="contact-page" className="p-contact-page" title={ lang.pages.contact.title }>
<Page
style="contact-page"
className="p-contact-page"
title={ lang.pages.contact.title }
background={ require('@assets/images/patterns/lemon-triangle.svg') }
>
<ClearSection />
<PageBoundary small>
<ElementScrollFader from="left">
<ContentBox box className="u-text-center">
<Title>{ lang.pages.contact.heading }</Title>
@ -175,11 +116,8 @@ class ContactPage extends React.Component {
</Paragraph>
</ContentBox>
</ElementScrollFader>
<br />
<br />
{ inners }
</PageBoundary>
<ClearSection />
</Page>

12
public/pages/contact/ContactPage.scss Normal file
View File

@ -0,0 +1,12 @@
/*
* Contact Page
* Contact Page specific styles and designs
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/05/28
*/
@import '~@styles/global';
.p-contact-page {
}

89
public/pages/contact/form/ContactForm.jsx Normal file
View File

@ -0,0 +1,89 @@
// Copyright (c) 2018 Dominic Masters
//
// MIT License
//
// Permission is hereby granted, free of charge, to any person obtaining
// a copy of this software and associated documentation files (the
// "Software"), to deal in the Software without restriction, including
// without limitation the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software, and to
// permit persons to whom the Software is furnished to do so, subject to
// the following conditions:
//
// The above copyright notice and this permission notice shall be
// included in all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import Forms from '@common/Forms';
import { withLanguage } from '@public/language/Language';
import Input, {
Form, FormManager, FormGroup,
TextArea, Label, ButtonGroup
} from '@objects/input/Input';
import Styles from './ContactForm.scss';
export default withLanguage(props => {
let newProps = {...props};
let { className, lang, manager } = props;
["setLanguage"].forEach(e => delete newProps[e]);
return (
<Form
{...newProps}
className={ `c-contact-form ${className||""}` }
post="/api/contact/send" contentType="application/json" ajax loader
>
<FormGroup>
<Label htmlFor="name" children={ lang.pages.contact.name.label } />
<Input
name="name" type="text"
placeholder={ lang.pages.contact.name.placeholder }
required={ Forms.contact.name.required }
maxLength={ Forms.contact.name.maxLength }
manager={ manager }
/>
</FormGroup>
<FormGroup >
<Label htmlFor="email" children={ lang.pages.contact.email.label } />
<Input
name="email" type="email"
placeholder={ lang.pages.contact.email.placeholder }
required={ Forms.contact.email.required }
maxLength={ Forms.contact.email.maxLength }
manager={ manager }
/>
</FormGroup>
<FormGroup>
<Label htmlFor="message" children={ lang.pages.contact.message.label } />
<TextArea
className="p-contact-page__message"
name="message" rows="8"
placeholder={ lang.pages.contact.message.placeholder }
required={ Forms.contact.message.required }
maxLength={ Forms.contact.message.maxLength }
manager={ manager }
/>
</FormGroup>
<ButtonGroup>
<Input type="submit" value={ lang.pages.contact.send } primary="true" />
<Input type="reset" value={ lang.pages.contact.reset } />
</ButtonGroup>
</Form>
);
});

0
public/pages/contact/form/ContactForm.scss Normal file
View File

1
public/styles/common.scss
View File

@ -46,7 +46,6 @@
//TEMP
@import './objects/_page-transition.scss';
@import './pages/_contact-page.scss';
@import './pages/_privacy-policy-page.scss';
//Utilities

25
public/styles/pages/_contact-page.scss
View File

@ -1,25 +0,0 @@
/*
* Contact Page
* Contact Page specific styles and designs
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/05/28
*/
.p-contact-page {
background-color: #37085E;
background-image: url($s-asset--directory+'images/patterns/lemon-triangle.svg');
background-size: 75% auto;
&__message-element {
resize: none;
}
&__floppy {
width: 80%;
display: block;
margin: auto;
max-width: 320px;
}
}