From 75764f744d3fa2c742a3aef87bcd564f44770076 Mon Sep 17 00:00:00 2001
From: Dominic Masters <dominic@domsplace.com>
Date: Thu, 15 Nov 2018 07:34:30 +1100
Subject: [PATCH] Basic blog template layout (incomplete)

---
 public/components/App.jsx                     |  2 +-
 .../blog/article/ArticleGridSection.scss      | 20 +++--
 .../blog/article/FeaturedArticleSection.jsx   | 41 +++++----
 .../blog/article/FeaturedArticleSection.scss  | 86 +++++++------------
 .../objects/blog/article/ArticleThumbnail.jsx | 51 ++++++-----
 public/pages/blog/BlogPage.jsx                | 19 +++-
 public/pages/blog/BlogPage.scss               |  5 ++
 7 files changed, 120 insertions(+), 104 deletions(-)

diff --git a/public/components/App.jsx b/public/components/App.jsx
index 8f1e9d3..b1cc141 100644
--- a/public/components/App.jsx
+++ b/public/components/App.jsx
@@ -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>
   );
 };
diff --git a/public/components/section/blog/article/ArticleGridSection.scss b/public/components/section/blog/article/ArticleGridSection.scss
index ff4a488..789fa18 100644
--- a/public/components/section/blog/article/ArticleGridSection.scss
+++ b/public/components/section/blog/article/ArticleGridSection.scss
@@ -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;
+      }
     }
   }
 }
diff --git a/public/components/section/blog/article/FeaturedArticleSection.jsx b/public/components/section/blog/article/FeaturedArticleSection.jsx
index 9094c9d..f89c87d 100644
--- a/public/components/section/blog/article/FeaturedArticleSection.jsx
+++ b/public/components/section/blog/article/FeaturedArticleSection.jsx
@@ -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>
   );
 });
diff --git a/public/components/section/blog/article/FeaturedArticleSection.scss b/public/components/section/blog/article/FeaturedArticleSection.scss
index 5ba9470..2787afd 100644
--- a/public/components/section/blog/article/FeaturedArticleSection.scss
+++ b/public/components/section/blog/article/FeaturedArticleSection.scss
@@ -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;
     }
   }
 }
diff --git a/public/objects/blog/article/ArticleThumbnail.jsx b/public/objects/blog/article/ArticleThumbnail.jsx
index 4c19e14..982d640 100644
--- a/public/objects/blog/article/ArticleThumbnail.jsx
+++ b/public/objects/blog/article/ArticleThumbnail.jsx
@@ -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>
   );
diff --git a/public/pages/blog/BlogPage.jsx b/public/pages/blog/BlogPage.jsx
index 7ccd57c..0f9a100 100644
--- a/public/pages/blog/BlogPage.jsx
+++ b/public/pages/blog/BlogPage.jsx
@@ -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]} />
diff --git a/public/pages/blog/BlogPage.scss b/public/pages/blog/BlogPage.scss
index ccc7337..d51acc5 100644
--- a/public/pages/blog/BlogPage.scss
+++ b/public/pages/blog/BlogPage.scss
@@ -5,3 +5,8 @@
  *  Version:
  *    1.0.0 - 2018/10/30
  */
+.p-blog-page {
+  .c-page__background {
+    position: fixed;
+  }
+}