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

Styling Contact Page

Browse Source
This commit is contained in:
Dominic Masters
2018-06-28 05:23:23 +10:00
parent 6a38c234b5
commit 3dc7f73b2a
2 changed files with 49 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
public/page/contact/ContactPage.jsx
View File

@ -27,6 +27,8 @@ import Page, { PageBoundary } from './../Page';
import Input, { Form, InputGroup, TextArea, Label, ButtonGroup } from './../../input/Input'; import Input, { Form, InputGroup, TextArea, Label, ButtonGroup } from './../../input/Input';
import Language from './../../language/Language'; import Language from './../../language/Language';
import ElementScrollFader from './../../animation/fade/ElementScrollFader'; import ElementScrollFader from './../../animation/fade/ElementScrollFader';
import ContentBox from './../../content/ContentBox';
import { Title, Paragraph } from './../../typography/Typography'
import Section, { import Section, {
BodySection, BodySection,
ClearSection, ClearSection,
@ -46,46 +48,56 @@ class ContactPage extends React.Component {
<ClearSection /> <ClearSection />
<PageBoundary small> <PageBoundary small>
<SplitSection>
<Split>
<ElementScrollFader>
<BodySection>
<Form>
<InputGroup>
<Label>{ Language.get("pages.contact.name.label") }</Label>
<Input
type="text"
placeholder={ Language.get("pages.contact.name.placeholder") }
/>
</InputGroup>
<InputGroup > <ElementScrollFader from="left">
<Label>{ Language.get("pages.contact.email.label") }</Label> <ContentBox box className="u-text-center">
<Input <Title>Contact Me</Title>
type="email" <Paragraph>
placeholder={ Language.get("pages.contact.email.placeholder") } Want to get in touch with me? Fill out this easy form and I should be
/> in touch shortly to chat! More of a phone person? Leave a number
</InputGroup> and we can chat.
</Paragraph>
</ContentBox>
</ElementScrollFader>
<InputGroup> <br />
<Label>{ Language.get("pages.contact.message.label") }</Label> <br />
<TextArea
placeholder={ Language.get("pages.contact.message.placeholder") }
rows="8"
className="p-contact-page__message"
/>
</InputGroup>
<ButtonGroup> <ElementScrollFader from="right">
<Input type="submit" value={ Language.get("pages.contact.send") } primary="true" /> <BodySection>
<Input type="reset" value={ Language.get("pages.contact.reset") } /> <Form>
</ButtonGroup> <InputGroup>
</Form> <Label>{ Language.get("pages.contact.name.label") }</Label>
</BodySection> <Input
</ElementScrollFader> type="text"
</Split> placeholder={ Language.get("pages.contact.name.placeholder") }
/>
</InputGroup>
</SplitSection> <InputGroup >
<Label>{ Language.get("pages.contact.email.label") }</Label>
<Input
type="email"
placeholder={ Language.get("pages.contact.email.placeholder") }
/>
</InputGroup>
<InputGroup>
<Label>{ Language.get("pages.contact.message.label") }</Label>
<TextArea
placeholder={ Language.get("pages.contact.message.placeholder") }
rows="8"
className="p-contact-page__message"
/>
</InputGroup>
<ButtonGroup>
<Input type="submit" value={ Language.get("pages.contact.send") } primary="true" />
<Input type="reset" value={ Language.get("pages.contact.reset") } />
</ButtonGroup>
</Form>
</BodySection>
</ElementScrollFader>
</PageBoundary> </PageBoundary>
<ClearSection /> <ClearSection />

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

@ -10,6 +10,7 @@
.p-contact-page { .p-contact-page {
background-color: #37085E; background-color: #37085E;
background-image: url('./../images/patterns/arcade.svg'); background-image: url('./../images/patterns/arcade.svg');
background-size: 150% auto;
&__message-element { &__message-element {
resize: none; resize: none;