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

Changed homepage backgrounds, improved @sections

Browse Source
This commit is contained in:
Dominic Masters
2018-11-26 19:24:41 +11:00
parent 88cd1a9a53
commit 829a152a1e
18 changed files with 121 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/assets/images/favicon/browserconfig.xml
View File

@ -1,2 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<browserconfig><msapplication><tile><square70x70logo src="/ms-icon-70x70.png"/><square150x150logo src="/ms-icon-150x150.png"/><square310x310logo src="/ms-icon-310x310.png"/><TileColor>#ffffff</TileColor></tile></msapplication></browserconfig>

BIN
public/assets/images/favicon/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

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

@ -32,7 +32,7 @@
}
&__background {
position: absolute;
position: fixed;
z-index: -1;
width: 100%;
height: 100%;

17
public/components/section/Section.jsx
View File

@ -37,20 +37,3 @@ export default props => {
return <section {...newProps} className={clazz} />;
}
import BodySection from './body/BodySection';
import ClearSection from './layout/ClearSection';
import ImageSection from './image/ImageSection';
import BannerImageSection from './image/banner/BannerImageSection';
import SplitSection, { Split } from './layout/SplitSection';
import VideoSection from './video/VideoSection';
export {
BodySection,
ClearSection,
ImageSection,
BannerImageSection,
SplitSection,
Split,
VideoSection
}

52
public/components/section/banner/BannerSection.jsx Normal file
View File

@ -0,0 +1,52 @@
// 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 Section from './../Section';
import { PageBoundary } from '@components/page/Page';
import BoxSizer from '@objects/layout/BoxSizer';
import Styles from './BannerSection.scss';
export default props => {
let { className, width, height, children } = props;
return (
<Section {...props} className={`c-banner-section ${className||""}`}>
{/* Mobile Box Sizer */}
<BoxSizer
className="c-banner-section__sizer for-mobile"
ratioWidth={1} ratioHeight={1}
/>
{/* Desktop Box Sizer */}
<BoxSizer
className="c-banner-section__sizer for-desktop"
ratioWidth={3} ratioHeight={1}
/>
<PageBoundary children={children} />
</Section>
);
};

14
public/components/section/banner/BannerSection.scss Normal file
View File

@ -0,0 +1,14 @@
@import '~@styles/global';
.c-banner-section {
position: relative;
&__sizer {
&.for-desktop {display: none;}
@include t-media-query($s-small-up) {
&.for-mobile {display: none;}
&.for-desktop {display: block;}
}
}
}

3
public/language/en-AU.jsx
View File

@ -150,8 +150,7 @@ export default {
Requiring a strong and versitile mobile browsing experience, as
well as many fast and easy to use filtering systems to help
search through their range to find the perfect fit for each pair
of underpants. I built on Shopify while working at
<a target="_blank" href="//processcreative.com.au">
of underpants. I built on Shopify while working at <a target="_blank" href="//processcreative.com.au">
Process Creative
</a>
</p>

3
public/pages/blog/BlogPage.scss
View File

@ -6,7 +6,4 @@
* 1.0.0 - 2018/10/30
*/
.p-blog-page {
.c-page__background {
position: fixed;
}
}

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

@ -28,10 +28,13 @@ import { bindActionCreators } from 'redux';
//Actions
import { openModal } from '@public/actions/ModalActions';
//High Order Components
import { withLanguage } from '@public/language/Language';
//Components
import Page, { PageBoundary } from '@components/page/Page';
import { withLanguage } from '@public/language/Language';
import { ClearSection } from '@components/section/Section';
import ClearSection from '@sections/layout/ClearSection';
import ContactForm from './form/ContactForm';
//Objects
import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
@ -40,8 +43,6 @@ import { Title, Heading1, Paragraph } from '@objects/typography/Typography';
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 {

2
public/pages/error/ErrorPage.jsx
View File

@ -25,7 +25,7 @@ import React from 'react';
import { withLanguage} from '@public/language/Language';
import Page, { PageBoundary } from '@components/page/Page';
import { ClearSection } from '@components/section/Section';
import ClearSection from '@sections/layout/ClearSection';
import ErrorSection from '@sections/error/ErrorSection';
import { Title } from '@objects/typography/Typography';

11
public/pages/home/HomePage.jsx
View File

@ -23,8 +23,6 @@
import React from 'react';
import Styles from './HomePage.scss';
import Page from '@components/page/Page';
import BannerSection from './sections/BannerSection';
import PromoVideoSection from './sections/PromoVideoSection';
@ -32,10 +30,17 @@ import ProgrammingSection from './sections/ProgrammingSection';
import PlatformsSection from './sections/PlatformsSection';
import ExistingWorkSection from './sections/ExistingWorkSection';
import Styles from './HomePage.scss';
export default props => {
//Return
return (
<Page style="home-page" className="p-home-page" title={0}>
<Page
style="home-page"
className="p-home-page"
title={0}
background={ require('@assets/images/banners/about/glasses.svg') }
>
{ /* Banner */ }
<BannerSection />

2
public/pages/home/HomePage.scss
View File

@ -18,7 +18,7 @@
}
&__promo {
padding: 8em 0;
padding: 4em 0;
background-size: 150% auto;
&-video {

23
public/pages/home/sections/BannerSection.jsx
View File

@ -23,8 +23,10 @@
import React from 'react';
import { withLanguage } from '@public/language/Language';
import { PageBoundary } from '@components/page/Page';
import { BannerImageSection } from '@sections/Section';
import BannerSection from '@sections/banner/BannerSection';
import FloatingContentBox from '@objects/content/box/FloatingContentBox';
import { Title, Subtitle } from '@objects/typography/Typography';
@ -33,18 +35,11 @@ export default withLanguage(props => {
let { lang } = props;
return (
<BannerImageSection
className="p-home-page__banner"
src={ require('@assets/images/banners/about/glasses.svg') }
alt="domsPlace"
width="2400" height="1200" loadable
>
<PageBoundary full>
<FloatingContentBox position="middle center" size="large" className="u-text-center">
<Title>{ lang.pages.home.banner.title }</Title>
<Subtitle>{ lang.pages.home.banner.subtitle }</Subtitle>
</FloatingContentBox>
</PageBoundary>
</BannerImageSection>
<BannerSection className="p-home-page__banner" width="3" height="1">
<FloatingContentBox position="middle center" size="large" className="u-text-center">
<Title>{ lang.pages.home.banner.title }</Title>
<Subtitle>{ lang.pages.home.banner.subtitle }</Subtitle>
</FloatingContentBox>
</BannerSection>
);
});

15
public/pages/home/sections/ExistingWorkSection.jsx
View File

@ -23,8 +23,12 @@
import React from 'react';
import { withLanguage } from '@public/language/Language';
import { PageBoundary } from '@components/page/Page';
import { ImageSection, SplitSection, Split, ClearSection } from '@components/section/Section';
import Section from '@sections/Section';
import SplitSection, { Split } from '@sections/layout/SplitSection';
import ClearSection from '@sections/layout/ClearSection';
import ContentBox from '@objects/content/box/ContentBox';
import { Title, Subtitle, Paragraph, Heading1, Heading2 } from '@objects/typography/Typography';
import { Button } from '@objects/input/Input';
@ -111,12 +115,7 @@ export default withLanguage(props => {
let { lang } = props;
return (
<ImageSection
className="p-home-page__promo p-home-page__promo-work"
src={ require('@assets/images/banners/hills-night.svg') }
loadable
background
>
<Section className="p-home-page__promo p-home-page__promo-work">
{/* Title */}
<PageBoundary small>
<ElementScrollFader from="left">
@ -191,6 +190,6 @@ export default withLanguage(props => {
<ClearSection />{/* Space a bit */}
</PageBoundary>
</ImageSection>
</Section>
);
});

15
public/pages/home/sections/PlatformsSection.jsx
View File

@ -22,9 +22,13 @@
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import { withLanguage } from '@public/language/Language';
import { PageBoundary } from '@components/page/Page';
import { ImageSection, SplitSection, Split } from '@components/section/Section';
import Section from '@sections/Section';
import SplitSection, { Split } from '@sections/layout/SplitSection';
import FloatingContentBox from '@objects/content/box/FloatingContentBox';
import ContentBox from '@objects/content/box/ContentBox';
import Image from '@objects/image/Image';
@ -54,12 +58,7 @@ const Platform = props => {
export default withLanguage(props => {
let { lang } = props;
return (
<ImageSection
className="p-home-page__promo p-home-page__promo-platforms"
src={ require('@assets/images/banners/palms.svg') }
loadable
background
>
<Section className="p-home-page__promo p-home-page__promo-platforms">
<PageBoundary>
<ElementScrollFader >
<Title className="u-text-center p-home-page__brands-title">
@ -186,6 +185,6 @@ export default withLanguage(props => {
</Subtitle>
</ElementScrollFader>
</PageBoundary>
</ImageSection>
</Section>
);
});

19
public/pages/home/sections/ProgrammingSection.jsx
View File

@ -24,31 +24,30 @@
import React from 'react';
import { connect } from 'react-redux';
import { withLanguage } from '@public/language/Language';
import { PageBoundary } from '@components/page/Page';
import { ImageSection } from '@components/section/Section';
import Section from '@sections/Section';
import ContentBox from '@objects/content/box/ContentBox';
import { Title, Paragraph, Heading1 } from '@objects/typography/Typography';
import ElementScrollFader from '@objects/animation/fade/ElementScrollFader';
export default withLanguage(props => {
let { lang } = props;
let l = lang.pages.home.programming;
return (
<ImageSection
className="p-home-page__promo p-home-page__promo-programming"
src={ require('@assets/images/patterns/florida.svg') }
loadable
background
>
<Section className="p-home-page__promo p-home-page__promo-programming">
<PageBoundary small>
<ElementScrollFader from="bottom">
<ContentBox box>
<Heading1 className="u-text-center">
{ lang.pages.home.programming.heading }
{ l.heading }
</Heading1>
{ lang.pages.home.programming.paragraph }
{ l.paragraph }
</ContentBox>
</ElementScrollFader>
</PageBoundary>
</ImageSection>
</Section>
);
});

5
public/pages/home/sections/PromoVideoSection.jsx
View File

@ -23,8 +23,11 @@
import React from 'react';
import { withLanguage } from '@public/language/Language';
import Page, { PageBoundary } from '@components/page/Page';
import Section, { SplitSection, Split } from '@components/section/Section';
import Section from '@sections/Section';
import SplitSection, { Split } from '@sections/layout/SplitSection';
import ContentBox from '@objects/content/box/ContentBox';
import FloatingContentBox from '@objects/content/box/FloatingContentBox';
import Video from '@objects/video/Video';

3
public/pages/legal/privacy/PrivacyPolicyPage.jsx
View File

@ -26,7 +26,8 @@ import { connect } from 'react-redux';
import { withLanguage } from '@public/language/Language';
import Page, { PageBoundary } from '@components/page/Page';
import { BodySection, ClearSection } from '@components/section/Section';
import BodySection from '@sections/body/BodySection';
import ClearSection from '@sections/layout/ClearSection';
import { Title } from '@objects/typography/Typography';