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="/contact" page={ () => import ('@pages/contact/ContactPage') } />
<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>
);
};

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

@ -9,6 +9,7 @@
@import '~@styles/global';
.c-article-grid {
&__grid {
display: flex;
flex-wrap: wrap;
@ -19,15 +20,22 @@
width: 100%;
}
@include t-media-query($s-xsmall-up) {
@include t-media-query($s-small-up) {
&__grid {
padding: 1em 0;
}
&__article {
width: 50%;
}
}
padding: 1em 2em;
@include t-media-query($s-small-up) {
&__article {
width: (100%/3);
&:nth-child(odd) {
padding-right: 1em;
}
&: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 { withLanguage } from '@public/language/Language';
import BannerImageSection from '@sections/image/banner/BannerImageSection';
import Section from '@sections/Section';
import { PageBoundary } from '@components/page/Page';
import Image from '@objects/image/Image';
@ -39,26 +39,29 @@ export default withLanguage(props => {
let { article, lang } = props;
return (
<BannerImageSection
className="c-featured-article"
src={ article.image } alt={ article.title } loadable
>
<PageBoundary className="c-featured-article__content" full>
<Section>
<PageBoundary>
<article role="article" itemScope itemType="http://schema.org/Article" className="c-featured-article">
<ContentBox box className="c-featured-article__content">
<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">
<Title className="c-featured-article__title">
<NavLink to={ article.url } children={ article.title} />
</Title>
</ContentBox>
<ContentBox box className="c-featured-article__body">
<Paragraph className="c-featured-article__description">
{ article.shortDescription }&nbsp;
<NavLink to={ article.url } children={ lang.blog.article.readMore } />
</Paragraph>
</ContentBox>
<div className="c-featured-article__box is-content">
<ContentBox box className="c-featured-article__heading">
<NavLink to={ article.url }>
<Title itemProp="name" className="c-featured-article__title">
{ article.title }
</Title>
</NavLink>
</ContentBox>
<Paragraph itemProp="description" children={ article.description } />
<NavLink itemProp="sameAs" to={ article.url } children={ lang.blog.article.readMore } />
</div>
</ContentBox>
</article>
</PageBoundary>
</BannerImageSection>
</Section>
);
});

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

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

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

@ -47,31 +47,36 @@ export default withLanguage(props => {
}
return (
<article className={`o-article-thumbnail ${className||""}`}>
<NavLink to={article.url} className="o-article-thumbnail__header">
{/* Image */}
<Image
src={article.image} alt={article.title} loadable
className="o-article-thumbnail__image"
maxWidth="250"
/>
<article
className={`o-article-thumbnail ${className||""}`}
role="article" itemScope itemType="http://schema.org/Article"
>
<ContentBox box>
<NavLink to={article.url} className="o-article-thumbnail__header">
{/* Image */}
<Image
src={article.image} alt={article.title} loadable
className="o-article-thumbnail__image"
maxWidth="250"
/>
{/* Title */}
<FloatingContentBox box position={pos} className="o-article-thumbnail__title-box">
<Heading2 className="o-article-thumbnail__title">
{ article.title }
</Heading2>
</FloatingContentBox>
</NavLink>
<ContentBox className="o-article-thumbnail__content">
<Paragraph>
{ article.shortDescription }
</Paragraph>
<NavLink to={ article.url }>
{ lang.blog.article.readMore }
{/* Title */}
<FloatingContentBox box position={pos} className="o-article-thumbnail__title-box">
<Heading2 className="o-article-thumbnail__title" itemProp="name" >
{ article.title }
</Heading2>
</FloatingContentBox>
</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>
</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 ArticleGridSection from '@sections/blog/article/ArticleGridSection';
import ClearSection from '@sections/layout/ClearSection';
import Styles from './BlogPage.scss';
const TestBlogData = {
handle: "test-blog",
title: "Test Blog Article",
url: '/',
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 => {
let { lang } = props;
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 */}
<FeaturedArticleSection article={ TestBlogData } />
<ArticleGridSection articles={[ TestBlogData, TestBlogData, TestBlogData, TestBlogData, TestBlogData]} />

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

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