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

Cleaned more code, still untested.

Browse Source
This commit is contained in:
Dominic Masters
2018-10-24 09:06:18 +11:00
parent 7030a513de
commit f1b10e223e
28 changed files with 183 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,27 +23,25 @@
import React from 'react';
export default class Section extends React.Component {
constructor(props) {
super(props);
}
import Styles from './Section';
render() {
return (
<section className={
"c-section" +
(this.props.full?" is-full":"") +
(this.props.className ? " "+this.props.className : "")
}>
{ this.props.children }
</section>
);
}
export default (props) => {
let newProps = {...props};
let { full, className, children } = props;
["full"].forEach(e => delete newProps[e]);
let clazz = "c-section";
if(full) clazz += " is-full";
if(className) clazz += ` ${className}`;
return (
<section {...newProps} className={clazz} />
);
}
import BodySection from './body/BodySection';
import ClearSection from './layout/ClearSection';
import FeaturedBlogSection from './blog/FeaturedBlogSection';
import ImageSection from './image/ImageSection';
import SplitSection, { Split } from './layout/SplitSection';
import VideoSection from './video/VideoSection';
@ -51,7 +49,6 @@ import VideoSection from './video/VideoSection';
export {
BodySection,
ClearSection,
FeaturedBlogSection,
ImageSection,
SplitSection,
Split,

19
public/components/section/Section.scss Normal file
View File

@ -0,0 +1,19 @@
/*
* Section
* Styles for the base section component.
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/05/07
*/
@import '~@styles/global';
.c-section {
//border: 1px solid red;
width: 100%;
&.is-full {
height: 100vh;
}
}

66
public/components/section/blog/FeaturedBlogSection.jsx
View File

@ -1,66 +0,0 @@
// 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';
const FeaturedArticle = function(props) {
let clazz = "c-featured-blog-section__article";
let internals;
internals = "test";
if(props.contain) {
internals = <PageBoundary>{internals}</PageBoundary>
clazz += " is-contained";
}
return (
<article className={ clazz }>
{ internals }
</article>
);
}
export default (props) => {
let firstArticle;
let articles = [];
for(let i = 0; i < props.data.length; i++) {
let art = <FeaturedArticle data={props.data[i]} key={i} contain />
if(i === 0) {
firstArticle = art;
continue;
}
articles.push(art);
}
return (
<Section className="c-featured-blog-section">
{ firstArticle }
<PageBoundary className="c-featured-blog-section__articles">
{ articles }
</PageBoundary>
</Section>
);
};

5
public/components/section/body/BodySection.jsx
View File

@ -22,11 +22,14 @@
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import Styles from './BodySection.scss';
import Section from './../Section';
export default function(props) {
let clazz = "c-body-section";
if(props.className) clazz += " " + props.className;
if(props.className) clazz += ` ${props.className}`;
return (
<Section {...props} className={clazz} />

20
public/components/section/body/BodySection.scss Normal file
View File

@ -0,0 +1,20 @@
/*
* Body Section
* Body Section.
*
* Dependencies:
* styles/settings/colors.scss
* styles/tools/_shadow.scss
*
* Version:
* 1.0.0 - 2018/05/13
*/
@import '~@styles/global';
$c-body-section--padding: 1em;
.c-body-section {
@extend %t-dp--shadow;
background: $s-color--background;
padding: $c-body-section--padding;
}

3
public/components/section/image/ImageSection.jsx
View File

@ -22,7 +22,10 @@
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import Styles from './ImageSection.scss';
import Section from './../Section';
import Image from '@objects/image/Image';
export default function(props) {

62
public/components/section/image/ImageSection.scss Normal file
View File

@ -0,0 +1,62 @@
/*
* Image Section
* Styles for Image Sections, usually contains videos (hmmmm).
*
* Dependencies:
*
* Version:
* 1.1.0 - 2018/08/14
*/
@import '~@styles/global';
.c-image-section {
&__image {
display: block;
width: 100%;
}
&.is-full {
position: relative;
.c-image-section__image {
@include t-absolute-fill();
object-fit: cover;
object-position: bottom center;
}
}
&__content {
@include t-absolute-fill();
&-inner {
position: relative;
height: 100%;
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%;
}
}
}
}
}

3
public/components/section/layout/ClearSection.jsx
View File

@ -22,6 +22,9 @@
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import Styles from './ClearSection.scss';
import Section from './../Section';
export default (props) => {

17
public/components/section/layout/ClearSection.scss Normal file
View File

@ -0,0 +1,17 @@
/*
* Clear section
* Simple section that is designed to clear pass the navbar (and some).
* Can also be used to add spacing between sections.
*
* Dependencies:
*
* Version:
* 1.0.0 - 2018/06/05
*/
@import '~@styles/global';
.c-clear-section {
width: 100%;
padding-bottom: 15%;
position: relative;
}

24
public/components/section/layout/SplitSection.jsx
View File

@ -22,32 +22,36 @@
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import Styles from './SplitSection.scss';
import Section from './../Section';
export default (props) => {
let aligned = "stretched";
if(props.align) {
aligned = props.align;
}
let { align, className } = props;
let newProps = {...props};
let clazz = "c-split-section is-" + aligned;
if(props.className) clazz += " " + props.className;
align = align || "stretched";
let clazz = "c-split-section is-" + align;
if(className) clazz += ` ${className}`;
return (
<Section {...props} className={clazz} />
<Section {...newProps} className={clazz} />
)
};
const Split = function(props) {
let { padded, className, children } = props;
let clazz = "c-split-section__split";
if(props.padded) clazz += " is-padded";
if(props.className) clazz += " "+props.className;
if(padded) clazz += " is-padded";
if(className) clazz += ` ${className}`;
return (
<div className={clazz}>
{ props.children }
{ children }
</div>
);
}

38
public/components/section/layout/SplitSection.scss Normal file
View File

@ -0,0 +1,38 @@
/*
* Split section
* Simple Section that is split into multiple columns
*
* Dependencies:
* styles/tools/_flex.scss
*
* Version:
* 1.0.0 - 2018/05/28
*/
@import '~@styles/global.scss';
$c-split-section__split--padding: 1em;
.c-split-section {
display: flex;
flex-wrap: wrap;
&.is-stretched {
align-items: stretch;
}
&.is-center {
align-items: center;
}
&__split {
width: 100%;
&.is-padded {
padding: $c-split-section__split--padding;
}
}
@include t-media-query($s-small-up) {
flex-wrap: nowrap;
}
}

46
public/components/section/video/VideoSection.jsx
View File

@ -22,29 +22,35 @@
// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
import React from 'react';
import Styles from './VideoSection.scss';
import Section from './../Section';
import Video from '@objects/video/Video';
import Loader from '@objects/loading/Loader';
class VideoSection extends React.Component {
constructor(props) {
super(props);
}
export default (props) => {
let { full, className, sources } = props;
let videoProps = {...props};
let sectionProps = {...props};
render() {
return (
<Section full={this.props.full} className="c-video-section">
<Video
className="c-video-section__video"
autoPlay
loop
fill
sources={ this.props.sources ? this.props.sources : this.props }
/>
{ this.props.children }
</Section>
);
}
[
"autoPlay", "fill", "loop", "sources"
].forEach(e => delete sectionProps[e]);
delete videoProps.children;
if(typeof props.autoPlay === typeof undefined) props.autoPlay = true;
if(typeof props.loop === typeof undefined) props.loop = true;
if(typeof props.fill === typeof undefined) props.fill = true;
return (
<Section {...sectionProps} className={"c-video-section"+(className?` ${className}`:``)}>
<Video {...videoProps} className="c-video-section__video" sources={ sources ? sources : props } />
{ children }
</Section>
);
}
export default VideoSection;

21
public/components/section/video/VideoSection.scss Normal file
View File

@ -0,0 +1,21 @@
/*
* Video Section
* Styles for Video Sections, usually contains videos.
*
* Dependencies:
* styles/tools/_absolute-centering.scss
*
* Version:
* 1.0.0 - 2018/05/03
*/
@import '~@styles/global';
.c-video-section {
position: relative;
&__video {
@include t-absolute-fill();
object-fit: cover;
object-position: center;
}
}