Doomsday - BlockNews & GridNews

src/components/BlockNews/BlockNews.stories.js

@@ -0,0 +1,20 @@
+import BlockNews from "./BlockNews"
+import API from "@/static/db.json"
+
+export default {
+    title: "@austinblanchard / BlockNews"
+}
+
+export const BlockNewsDefault = () => ({
+    components: { BlockNews },
+    data() {
+        return {
+            api: API
+        }
+    },
+    template: `<block-news
+                :image="api.images[0]"
+                title="Why Doomsday Entertainment Is a Much Nicer Production Company than the Name Suggests"
+                date="2020-06-03T14:14:01"
+                to="" />`
+})

src/components/BlockNews/BlockNews.vue

@@ -0,0 +1,119 @@
+<template>
+    <nuxt-link class="block-news">
+        <div class="block-text">
+            <h2 v-if="title" class="title" v-html="title" />
+            <p v-if="date" v-html="formattedDate" class="date" />
+        </div>
+        <wp-image class="block-image" :image="image" />
+    </nuxt-link>
+</template>
+
+<script>
+// Components
+import NuxtLink from "@/components/global/NuxtLink"
+import WpImage from "@/components/global/WpImage"
+// Helpers
+// TODO changed the function in utils to match designs
+import { formatDate } from "@/utils/tools"
+
+export default {
+    components: {
+        NuxtLink,
+        WpImage,
+    },
+    props: {
+        image: {
+            type: Object,
+            default: () => {}
+        },
+        title: {
+            type: String,
+            default: ""
+        },
+        date: {
+            type: String,
+            default: ""
+        },
+        to: {
+            type: String,
+            default: ""
+        }
+    },
+    computed: {
+        formattedDate() {
+            return formatDate(this.date)
+        }
+    },
+}
+</script>
+
+<style lang="scss">
+.block-news {
+    position: relative;
+    display: block;
+    width: 100%;
+    padding-left: 50px;
+    box-sizing: border-box;
+
+    // Text
+    .block-text {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        z-index: 40;
+        max-width: 400px;
+        transition: transform 0.4s $authenticMotion;
+    }
+    .title {
+        margin: 0;
+        font-family: var(--font-secondary);
+        font-size: 20px;
+        font-weight: 700;
+
+    }
+    .date {
+        margin-top: 10px;
+        margin-bottom: 0;
+        font-size: 14px;
+    }
+    // Image
+    .block-image {
+        width: 34%;
+        transform-origin: left;
+
+        transition: transform 0.4s $authenticMotion;
+    }
+
+    // Hovers
+    @media #{$has-hover} {
+        &:hover {
+            z-index: 30;
+
+            .block-image {
+                transform: scale(1.4);
+            }
+            .block-text {
+                transform: translate(100px, -50%);
+            }
+        }
+    }
+    // Breakpoints
+    @media #{$lt-tablet} {
+        .block-image {
+            width: 50%;
+        }
+    }
+    @media #{$lt-phone} {
+        .title {
+            font-size: 15px;
+        }
+        .date {
+            font-size: 12px;
+        }
+        .block-image {
+            width: 100%;
+        }
+    }
+}
+</style>

src/components/GridNews/GridNews.stories.js

@@ -0,0 +1,54 @@
+import GridNews from "./GridNews"
+import API from "@/static/db.json"
+
+let pageItem = {
+    ...API.pages[0]
+}
+
+const pageItems = [
+    {
+        ...pageItem,
+        title: "Why Doomsday Entertainment Is a Much Nicer Production Company than the Name Suggests",
+        id: "cG9zDoxMTY="
+    },
+    {
+        ...pageItem,
+        title: "“How are you?” It’s something we ask people in passing every day, at times losing its meaning with our busy and crowded lives.",
+        id: "cG9zdDoxMY="
+    },
+    {
+        ...pageItem,
+        title: "Sending love and positivity from Doomsday.",
+        id: "G9zdDoxMTY="
+    },
+    {
+        ...pageItem,
+        title: "Doomsday is 10 years old, the old girl!",
+        id: "cG9zdDoxMTdY="
+    },
+    {
+        ...pageItem,
+        title: "Doomsday is to announce that we are producing the upcoming documentary “Women in the Wilderness”.",
+        id: "cG9zsdDoxMTY="
+    },
+    {
+        ...pageItem,
+        title: "Our fearless leader discusses music videos and what makes them go viral!",
+        id: "cG9zsdDeeoxMTY="
+    }
+]
+
+export default {
+    title: "@austinblanchard / GridNews"
+}
+
+export const GridNewsDefault = () => ({
+    components: { GridNews },
+    data() {
+        return {
+            api: API,
+            pageItems: pageItems
+        }
+    },
+    template: `<grid-news :items="pageItems" />`
+})

src/components/GridNews/GridNews.vue

@@ -0,0 +1,129 @@
+<template>
+    <div class="grid-news">
+        <block-news
+            v-for="(item, i) in items"
+            :key="item.id"
+            :to="item.uri"
+            :title="item.title"
+            :date="item.date"
+            :image="item.featuredImage"
+        />
+    </div>
+</template>
+
+<script>
+// Components
+import BlockNews from "@/components/BlockNews/BlockNews"
+
+export default {
+    components: {
+        BlockNews
+    },
+    props: {
+        items: {
+            type: Array,
+            default: () => []
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+:root {
+    --color: #FFCFA8;
+}
+.grid-news {
+    width: 100%;
+    max-width: var(--unit-max-width);
+    margin: 120px auto;
+    padding: 0 var(--unit-gutter);
+    box-sizing: border-box;
+    color: var(--color);
+
+    .block-news {
+        margin: -50px auto;
+
+        // Reverse every other block-news
+        &:nth-child(2n + 2) {
+            padding-left: 0;
+            padding-right: 50px;
+
+            .block-text {
+                right: 0;
+                left: auto;
+                text-align: right;
+            }
+            .block-image {
+                margin-left: auto;
+                transform-origin: right;
+            }
+        }
+        // Set size of every 2nd out of 3 pattern
+        &:nth-child(3n + 2) {
+            .block-image {
+                width: 40%;
+            }
+        }
+        // Set size of every 3rd out of 3 pattern
+        &:nth-child(3n + 3) {
+            .block-image {
+                width: 47%;
+            }
+        }
+    }
+
+    // Hovers
+    @media #{$has-hover} {
+        .block-news {
+            &:nth-child(2n + 2):hover {
+                .block-text {
+                    transform: translate(-100px, -50%);
+                }
+            }
+            &:nth-child(3n + 2):hover {
+                .block-image {
+                    transform: scale(1.3);
+                }
+            }
+            &:nth-child(3n + 3):hover {
+                .block-image {
+                    transform: scale(1.1);
+                }
+            }
+        }
+    }
+    // Breakpoints
+    @media #{$lt-tablet} {
+        .block-news {
+            margin: 50px auto;
+
+            &:nth-child(3n + 2) {
+                .block-image {
+                    width: 56%;
+                }
+            }
+            &:nth-child(3n + 3) {
+                .block-image {
+                    width: 69%;
+                }
+            }
+        }
+    }
+    @media #{$lt-phone} {
+        margin: 50px auto;
+
+        .block-news {
+            &:nth-child(3n + 2) {
+                .block-image {
+                    width: 100%;
+                }
+            }
+            &:nth-child(3n + 3) {
+                .block-image {
+                    width: 100%;
+                }
+            }
+        }
+    }
+}
+</style>

src/styles/global.scss

@@ -9,7 +9,7 @@
     --font-secondary: "Druk Wide", sans-serif;
 
     --color-black: #000000;
-    --color-white: #000000;
+    --color-white: #ffffff;
     --color-orange: #ffb762;
     --color-pink: #f7aea8;
     --color-red: #f96447;
@@ -18,10 +18,15 @@
     --unit-100vh: 100vh;
     --unit-gutter: 50px;
     --unit-max-width: 1800px;
+
+    @media #{$lt-phone} {
+        --unit-gutter: 20px;
+    }
 }
 
 // Base styles
 body {
+    margin: 0;
     font-family: var(--font-primary);
     color: var(--color-orange);
     background-color: var(--color-black);

src/utils/tools.js

@@ -4,20 +4,20 @@ import _isUndefined from "lodash/isUndefined"
 /*
  * This function builds out a Date using regaulr JS (not moment.js)
  */
-export const formatDate = date => {
-    // Safari doesn't like the default WP-GQL date format, so need to replace the space with a T
-    // See: https://stackoverflow.com/questions/21883699/safari-javascript-date-nan-issue-yyyy-mm-dd-hhmmss
-    const d = new Date(date.replace(/\s/, "T"))
-    const year = d.getFullYear()
-    const month = d.toLocaleString("en-us", { month: "long" })
+ export const formatDate = date => {
+     // Safari doesn't like the default WP-GQL date format, so need to replace the space with a T
+     // See: https://stackoverflow.com/questions/21883699/safari-javascript-date-nan-issue-yyyy-mm-dd-hhmmss
+     const d = new Date(date.replace(/\s/, "T"))
+     const year = d.getFullYear()
+     const month = ("0" + (d.getMonth() + 1)).slice(-2)
 
-    const day = d
-        .getDate()
-        .toString()
-        .padStart(2, "0")
+     const day = d
+         .getDate()
+         .toString()
+         .padStart(2, "0")
 
-    return `${month} ${day}, ${year}`
-};
+     return `${month}.${day}.${year}`
+ };
 
 /*
  * Take array of items and sort equally across n new arrays. Great for sorting items into columns.