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

Switched background image SVGs into regular images, made logo go over the top of the menu on mobile.

Browse Source
This commit is contained in:
Dominic Masters
2018-08-14 21:09:17 +10:00
parent 550cf15e76
commit 2235fe3983
10 changed files with 76 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/page/home/sections/BannerSection.jsx
View File

@ -33,13 +33,12 @@ import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
export default (props) => {
return (
<ImageSection
className="p-home-page__banner"
src={ require('./../../../images/banners/about/glasses.svg') }
alt="domsPlace"
width="2400"
height="1200"
test="true"
loadable
due
>
<PageBoundary full>
<FloatingContentBox position="middle center" size="large" className="u-text-center">

11
public/page/home/sections/ExistingWorkSection.jsx
View File

@ -24,7 +24,7 @@
import React from 'react';
import Language from './../../../language/Language';
import { PageBoundary } from './../../Page';
import Section, { SplitSection, Split, ClearSection } from './../../../section/Section';
import { ImageSection, SplitSection, Split, ClearSection } from './../../../section/Section';
import ContentBox from './../../../content/ContentBox';
import { Title, Subtitle, Paragraph, Heading1, Heading2 } from './../../../typography/Typography';
import { Button } from './../../../input/Input';
@ -111,7 +111,12 @@ const ExistingWorkFrame = (props) => {
export default (props) => {
return (
<Section className="p-home-page__promo p-home-page__promo-work">
<ImageSection
className="p-home-page__promo p-home-page__promo-work"
src={ require('./../../../images/patterns/arcade.svg') }
loadable
background
>
{/* Title */}
<PageBoundary small>
<ElementScrollFader from="left">
@ -176,6 +181,6 @@ export default (props) => {
<ClearSection />{/* Space a bit */}
</PageBoundary>
</Section>
</ImageSection>
);
}

13
public/page/home/sections/PlatformsSection.jsx
View File

@ -24,7 +24,7 @@
import React from 'react';
import Language from './../../../language/Language';
import { PageBoundary } from './../../Page';
import Section, { ImageSection, VideoSection, SplitSection, Split } from './../../../section/Section';
import { ImageSection, SplitSection, Split } from './../../../section/Section';
import FloatingContentBox from './../../../content/FloatingContentBox';
import ContentBox from './../../../content/ContentBox';
import Image from './../../../image/Image';
@ -34,7 +34,7 @@ import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
const Platform = (props) => {
let children;
let image = <Image src={props.src} loadable className="p-home-page__brands-image" />;
let image = <Image src={props.src} loadable className="p-home-page__brands-image" width="96" height="96" />;
if(props.to) {
children = (
@ -55,7 +55,12 @@ const Platform = (props) => {
export default (props) => {
return (
<Section className="p-home-page__promo p-home-page__promo-platforms">
<ImageSection
className="p-home-page__promo p-home-page__promo-platforms"
src={ require('./../../../images/patterns/game-show.svg') }
loadable
background
>
<PageBoundary>
<ElementScrollFader from="left">
<Title className="u-text-center p-home-page__brands-title">
@ -184,6 +189,6 @@ export default (props) => {
</Subtitle>
</ElementScrollFader>
</PageBoundary>
</Section>
</ImageSection>
);
}

11
public/page/home/sections/ProgrammingSection.jsx
View File

@ -25,14 +25,19 @@ import React from 'react';
import { connect } from 'react-redux';
import Language from './../../../language/Language';
import { PageBoundary } from './../../Page';
import Section from './../../../section/Section';
import { ImageSection } from './../../../section/Section';
import ContentBox from './../../../content/ContentBox';
import { Title, Paragraph, Heading1 } from './../../../typography/Typography';
import ElementScrollFader from './../../../animation/fade/ElementScrollFader';
export default (props) => {
return (
<Section className="p-home-page__promo p-home-page__promo-programming">
<ImageSection
className="p-home-page__promo p-home-page__promo-programming"
src={ require('./../../../images/patterns/rhythm-heaven.svg') }
loadable
background
>
<PageBoundary small>
<ElementScrollFader from="bottom">
<ContentBox box>
@ -43,6 +48,6 @@ export default (props) => {
</ContentBox>
</ElementScrollFader>
</PageBoundary>
</Section>
</ImageSection>
);
}

11
public/section/image/ImageSection.jsx
View File

@ -27,6 +27,8 @@ import Image from './../../image/Image';
export default function(props) {
let image;
let clazz = "c-image-section";
if(props.image) {
image = props.image;
} else {
@ -37,10 +39,17 @@ export default function(props) {
/>;
}
if(props.className) clazz += " " + props.className;
if(props.background) {
//Background Image Effect
clazz += " is-background";
}
return (
<Section
full={props.full}
className={"c-image-section" + (props.className ? " " + props.className : "" ) }
className={ clazz }
>
{ image }
<div className="c-image-section__content">

29
public/styles/components/_image-section.scss
View File

@ -5,10 +5,9 @@
* Dependencies:
*
* Version:
* 1.0.0 - 2018/05/11
* 1.1.0 - 2018/08/14
*/
.c-image-section {
position: relative;
&__image {
display: block;
@ -16,6 +15,8 @@
}
&.is-full {
position: relative;
.c-image-section__image {
@include t-absolute-fill();
object-fit: cover;
@ -32,4 +33,28 @@
width: 100%;
}
}
//Background Image
&.is-background {
position: relative;
.c-image-section {
&__image {
@include t-absolute-fill();
object-fit: cover;
object-position: bottom center;
}
&__content {
position: relative;
&-inner {
position: relative;
height: 100%;
width: 100%;
}
}
}
}
}

5
public/styles/components/_navbar.scss
View File

@ -10,7 +10,7 @@
* styles/tool/list.scss
*
* Version:
* 1.0.0 - 2018/05/03
* 1.1.0 - 2018/08/14
*/
$c-navbar--link-thickness: 5px;
@ -40,6 +40,9 @@ $c-navbar--link-thickness: 5px;
}
&__logo {
//To Allow the logo to go over the top of the menu!~
position: relative;
z-index: $s-z--logo;
width: 7em;
}

3
public/styles/objects/_loadable-image.scss
View File

@ -22,7 +22,6 @@
}
.o-loadable-image {
position: relative;
&__image-container {
opacity: 1;
@ -31,6 +30,8 @@
}
&.is-loading {
position: relative;
@include t-animation-name(o-loadable-image--load-flash);
@include t-animation-timing-function(linear);
@include t-animation-duration(2s);

23
public/styles/pages/_home-page.scss
View File

@ -8,9 +8,14 @@
* styles/tools/_responsive.scss
*
* Version:
* 1.0.0 - 2018/06/06
* 1.1.0 - 2018/08/14
*/
.p-home-page {
&__banner,
&__promo {
position: relative;
//@extend %t-dp--shadow-3d;
}
&__promo {
padding: 6em 0;
@ -18,22 +23,6 @@
&-video {
background-image: url('./../images/patterns/florida.svg');
@extend %t-dp--shadow-3d;
}
&-programming {
background-image: url('./../images/patterns/rhythm-heaven.svg');
@extend %t-dp--shadow-3d;
}
&-platforms {
background-image: url('./../images/patterns/game-show.svg');
@extend %t-dp--shadow-3d;
}
&-work {
background-image: url('./../images/patterns/arcade.svg');
@extend %t-dp--shadow-3d;
}
}

1
public/styles/settings/z.scss
View File

@ -10,5 +10,6 @@ $s-z--background: -1; //Background Element
$s-z--navbar: 10; //Navbar
$s-z--menu: 15; //Hamburger Menu
$s-z--menu-button: 16; //Button to toggle menu.
$s-z--logo: 16; //Logo (Goes over top of menu)
$s-z--modal: 100; //Modals
$s-z--transition: 1; //The Z-Index of an element in transition