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

Basic blog template layout (incomplete)

Browse Source
This commit is contained in:
Dominic Masters
2018-11-15 07:34:30 +11:00
parent 0102df42aa
commit 75764f744d
7 changed files with 120 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/components/App.jsx
View File

@ -39,7 +39,7 @@ const AppRoutes = (props) => {
<RouteWrapper exact path="/" page={ () => import('@pages/home/HomePage') } /> <RouteWrapper exact path="/" page={ () => import('@pages/home/HomePage') } />
<RouteWrapper exact path="/contact" page={ () => import ('@pages/contact/ContactPage') } /> <RouteWrapper exact path="/contact" page={ () => import ('@pages/contact/ContactPage') } />
<RouteWrapper exact path="/legal/privacy" page={ () => import('@pages/legal/privacy/PrivacyPolicyPage') } /> <RouteWrapper exact path="/legal/privacy" page={ () => import('@pages/legal/privacy/PrivacyPolicyPage') } />
{/*<RouteWrapper exact path="/blog" page={ () => import('@pages/blog/BlogPage') } />*/} <RouteWrapper exact path="/blog" page={ () => import('@pages/blog/BlogPage') } />
</Routes> </Routes>
); );
}; };

20
public/components/section/blog/article/ArticleGridSection.scss
View File

@ -9,6 +9,7 @@
@import '~@styles/global'; @import '~@styles/global';
.c-article-grid { .c-article-grid {
&__grid { &__grid {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -19,15 +20,22 @@
width: 100%; width: 100%;
} }
@include t-media-query($s-xsmall-up) { @include t-media-query($s-small-up) {
&__grid {
padding: 1em 0;
}
&__article { &__article {
width: 50%; width: 50%;
} padding: 1em 2em;
}
@include t-media-query($s-small-up) { &:nth-child(odd) {
&__article { padding-right: 1em;
width: (100%/3); }
&:nth-child(even) {
padding-left: 1em;
}
} }
} }
} }

41
public/components/section/blog/article/FeaturedArticleSection.jsx
View File

@ -25,7 +25,7 @@ import React from 'react';
import { NavLink } from 'react-router-dom'; import { NavLink } from 'react-router-dom';
import { withLanguage } from '@public/language/Language'; import { withLanguage } from '@public/language/Language';
import BannerImageSection from '@sections/image/banner/BannerImageSection'; import Section from '@sections/Section';
import { PageBoundary } from '@components/page/Page'; import { PageBoundary } from '@components/page/Page';
import Image from '@objects/image/Image'; import Image from '@objects/image/Image';
@ -39,26 +39,29 @@ export default withLanguage(props => {
let { article, lang } = props; let { article, lang } = props;
return ( return (
<BannerImageSection <Section>
className="c-featured-article" <PageBoundary>
src={ article.image } alt={ article.title } loadable <article role="article" itemScope itemType="http://schema.org/Article" className="c-featured-article">
> <ContentBox box className="c-featured-article__content">
<PageBoundary className="c-featured-article__content" full> <NavLink to={ article.url } className="c-featured-article__box is-image">
<Image src={ article.image } className="c-featured-article__image" maxWidth="800" />
</NavLink>
<ContentBox box className="c-featured-article__header"> <div className="c-featured-article__box is-content">
<Title className="c-featured-article__title"> <ContentBox box className="c-featured-article__heading">
<NavLink to={ article.url } children={ article.title} /> <NavLink to={ article.url }>
</Title> <Title itemProp="name" className="c-featured-article__title">
</ContentBox> { article.title }
</Title>
<ContentBox box className="c-featured-article__body"> </NavLink>
<Paragraph className="c-featured-article__description"> </ContentBox>
{ article.shortDescription }&nbsp;
<NavLink to={ article.url } children={ lang.blog.article.readMore } />
</Paragraph>
</ContentBox>
<Paragraph itemProp="description" children={ article.description } />
<NavLink itemProp="sameAs" to={ article.url } children={ lang.blog.article.readMore } />
</div>
</ContentBox>
</article>
</PageBoundary> </PageBoundary>
</BannerImageSection> </Section>
); );
}); });

86
public/components/section/blog/article/FeaturedArticleSection.scss
View File

@ -7,72 +7,52 @@
*/ */
@import '~@styles/global'; @import '~@styles/global';
$c-featured-article--overlay: rgba(black, 0.3);
.c-featured-article { .c-featured-article {
position: relative; display: block;
width: 100%;
&__header, &__content {width: 100%;}
&__body {
position: absolute; &__box {}
z-index: 2;
right: 1.5em; &__image {
bottom: 0.5em; display: block;
width: 100%;
} }
&__body { display: none; } &__heading {
transform: translateY(-60%);
margin-bottom: -2em;
overflow: visible;
}
&__title, &__title {
&__description {
display: inline-block;
margin: 0; margin: 0;
} }
&:after {
//content: "";
@include t-absolute-fill();
background: $c-featured-article--overlay;
transition: all 1s $s-animation--ease-out;
z-index: 1;
}
@include t-media-query($s-xsmall-up) {
&__header {
right: 5em;
bottom: 3em;
}
}
@include t-media-query($s-small-up) { @include t-media-query($s-small-up) {
&__header { padding: 1em;
left: 2em;
top: 7em; &__content { display: flex; }
bottom: auto;
right: auto; &__heading {
transform: translate(-10%, -60%);
}
&__box {
width: 40%;
padding: 0.5em;
&.is-image{order:2;width: 60%;}
} }
} }
@include t-media-query($s-medium-up) { @include t-media-query($s-medium-up) {
&__header { padding: 2em;
left: 4em; &__box {
top: 8em; width: 50%;
} &.is-image {width: 50%;}
padding: 2em;
&__body {
display: block;
bottom: 1.5em;
right: 2.5em;
}
}
@include t-media-query($s-large-up) {
&__header {
top: 11em;
}
&__body {
bottom: 5em;
right: 0em;
} }
} }
} }

51
public/objects/blog/article/ArticleThumbnail.jsx
View File

@ -47,31 +47,36 @@ export default withLanguage(props => {
} }
return ( return (
<article className={`o-article-thumbnail ${className||""}`}> <article
<NavLink to={article.url} className="o-article-thumbnail__header"> className={`o-article-thumbnail ${className||""}`}
{/* Image */} role="article" itemScope itemType="http://schema.org/Article"
<Image >
src={article.image} alt={article.title} loadable <ContentBox box>
className="o-article-thumbnail__image" <NavLink to={article.url} className="o-article-thumbnail__header">
maxWidth="250" {/* Image */}
/> <Image
src={article.image} alt={article.title} loadable
className="o-article-thumbnail__image"
maxWidth="250"
/>
{/* Title */} {/* Title */}
<FloatingContentBox box position={pos} className="o-article-thumbnail__title-box"> <FloatingContentBox box position={pos} className="o-article-thumbnail__title-box">
<Heading2 className="o-article-thumbnail__title"> <Heading2 className="o-article-thumbnail__title" itemProp="name" >
{ article.title } { article.title }
</Heading2> </Heading2>
</FloatingContentBox> </FloatingContentBox>
</NavLink>
<ContentBox className="o-article-thumbnail__content">
<Paragraph>
{ article.shortDescription }
</Paragraph>
<NavLink to={ article.url }>
{ lang.blog.article.readMore }
</NavLink> </NavLink>
<div className="o-article-thumbnail__content" >
<Paragraph itemProp="description">
{ article.shortDescription }
</Paragraph>
<NavLink to={ article.url } itemProps="sameAs">
{ lang.blog.article.readMore }
</NavLink>
</div>
</ContentBox> </ContentBox>
</article> </article>
); );

19
public/pages/blog/BlogPage.jsx
View File

@ -28,20 +28,35 @@ import Page, { PageBoundary } from '@components/page/Page';
import FeaturedArticleSection from '@sections/blog/article/FeaturedArticleSection'; import FeaturedArticleSection from '@sections/blog/article/FeaturedArticleSection';
import ArticleGridSection from '@sections/blog/article/ArticleGridSection'; import ArticleGridSection from '@sections/blog/article/ArticleGridSection';
import ClearSection from '@sections/layout/ClearSection';
import Styles from './BlogPage.scss';
const TestBlogData = { const TestBlogData = {
handle: "test-blog", handle: "test-blog",
title: "Test Blog Article", title: "Test Blog Article",
url: '/', url: '/',
image: require('@assets/images/photo.jpg'), image: require('@assets/images/photo.jpg'),
shortDescription: "Read how the latest lorem ipsum is dolor sit amet for business owners..." shortDescription: `Read how the latest lorem ipsum is dolor sit amet for business owners...`,
description: `Est magna esse amet admodum est ex noster elit quem probant, id qui minim
possumus, ut esse enim esse senserit. Ullamco quae quis incurreret dolore.
Laborum est ingeniis, quibusdam fugiat non deserunt adipisicing.Nam quid velit
aut litteris, laborum export incididunt admodum et nam fabulas instituendarum,
id nam praesentibus. Aliquip anim consequat, est export commodo praetermissum, e
ab multos ingeniis ut ipsum ab laborum de tamen. Sed quem proident fidelissimae,
quae te singulis o ita sint culpa qui ingeniis, e export officia. Quem vidisse
ut quis aliqua.`
}; };
export default withLanguage(props => { export default withLanguage(props => {
let { lang } = props; let { lang } = props;
return ( return (
<Page style="blog-page" className="p-blog-page" title={ lang.pages.blog.title }> <Page
style="blog-page" className="p-blog-page" title={ lang.pages.blog.title }
background={require('@assets/images/banners/sunset.svg')}
>
<ClearSection />
{/* First (Featured) Blog */} {/* First (Featured) Blog */}
<FeaturedArticleSection article={ TestBlogData } /> <FeaturedArticleSection article={ TestBlogData } />
<ArticleGridSection articles={[ TestBlogData, TestBlogData, TestBlogData, TestBlogData, TestBlogData]} /> <ArticleGridSection articles={[ TestBlogData, TestBlogData, TestBlogData, TestBlogData, TestBlogData]} />

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

@ -5,3 +5,8 @@
* Version: * Version:
* 1.0.0 - 2018/10/30 * 1.0.0 - 2018/10/30
*/ */
.p-blog-page {
.c-page__background {
position: fixed;
}
}