Doomsday - BlockWork & GridWork

src/components/BlockWork/BlockWork.stories.js

@@ -0,0 +1,20 @@
+import BlockWork from "./BlockWork"
+import API from "@/static/db.json"
+
+export default {
+    title: "@austinblanchard / BlockWork"
+}
+
+export const BlockWorkDefault = () => ({
+    components: { BlockWork },
+    data() {
+        return {
+            api: API
+        }
+    },
+    template: `<block-work
+                :image="api.images[0]"
+                title="HP - Meant To Move"
+                credit="Yoni Lappin"
+                to="" />`
+})

src/components/BlockWork/BlockWork.vue

@@ -0,0 +1,125 @@
+<template>
+    <nuxt-link class="block-work">
+        <div class="block-text">
+            <split-text
+                v-if="title"
+                element="h2"
+                :text="title"
+                class="title"
+                separator=" - "
+            />
+            <p v-if="credit" class="credit">by {{ credit }}</p>
+        </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"
+import SplitText from "@/components/global/SplitText"
+
+export default {
+    components: {
+        NuxtLink,
+        WpImage,
+        SplitText
+    },
+    props: {
+        image: {
+            type: Object,
+            default: () => {}
+        },
+        title: {
+            type: String,
+            default: ""
+        },
+        credit: {
+            type: String,
+            default: ""
+        },
+        to: {
+            type: String,
+            default: ""
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.block-work {
+    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;
+        transition: transform 0.4s $authenticMotion;
+    }
+    .title {
+        display: flex;
+        flex-direction: column;
+
+        margin: 0;
+        font-family: var(--font-secondary);
+        font-weight: 700;
+    }
+    .line-1 {
+        font-size: 30px;
+    }
+    .credit {
+        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} {
+        .line-1 {
+            font-size: 25px;
+        }
+        .line-2 {
+            font-size: 15px;
+        }
+        .credit {
+            font-size: 12px;
+        }
+        .block-image {
+            width: 100%;
+        }
+    }
+}
+</style>

src/components/GridWork/GridWork.stories.js

@@ -0,0 +1,57 @@
+import GridWork from "./GridWork"
+import API from "@/static/db.json"
+
+let pageItem = {
+    ...API.pages[0]
+}
+
+const pageItems = [
+    {
+        ...pageItem,
+        title: "Philip J. - Fry",
+        credit: "Yoni Lappin",
+        id: "cG9zDoxMTY="
+    },
+    {
+        ...pageItem,
+        title: "Headless Body - of Agnew",
+        credit: "Yoni Lappin",
+        id: "cG9zdDoxMY="
+    },
+    {
+        ...pageItem,
+        title: "Bender Bending - Rodriguez",
+        id: "G9zdDoxMTY="
+    },
+    {
+        ...pageItem,
+        title: "Amy - Wong",
+        credit: "Yoni Lappin",
+        id: "cG9zdDoxMTdY="
+    },
+    {
+        ...pageItem,
+        title: "Hermes - Conrad",
+        id: "cG9zsdDoxMTY="
+    },
+    {
+        ...pageItem,
+        title: "Bender Bending - Rodriguez",
+        id: "cG9zsdDeeoxMTY="
+    }
+]
+
+export default {
+    title: "@austinblanchard / GridWork"
+}
+
+export const GridWorkDefault = () => ({
+    components: { GridWork },
+    data() {
+        return {
+            api: API,
+            pageItems: pageItems
+        }
+    },
+    template: `<grid-work :items="pageItems" />`
+})

src/components/GridWork/GridWork.vue

@@ -0,0 +1,125 @@
+<template>
+    <div class="grid-work">
+        <block-work
+            v-for="(item, i) in items"
+            :key="item.id"
+            :to="item.uri"
+            :title="item.title"
+            :credit="item.credit"
+            :image="item.featuredImage"
+        />
+    </div>
+</template>
+
+<script>
+// Components
+import BlockWork from "@/components/BlockWork/BlockWork"
+
+export default {
+    components: {
+        BlockWork
+    },
+    props: {
+        items: {
+            type: Array,
+            default: () => []
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.grid-work {
+    width: 100%;
+    max-width: var(--unit-max-width);
+    margin: 120px auto;
+    padding: 0 var(--unit-gutter);
+    box-sizing: border-box;
+
+    .block-work {
+        margin: -50px auto;
+
+        // Reverse every other block-work
+        &: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: 38%;
+            }
+        }
+        // Set size of every 3rd out of 3 pattern
+        &:nth-child(3n + 3) {
+            .block-image {
+                width: 47%;
+            }
+        }
+    }
+
+    // Hovers
+    @media #{$has-hover} {
+        .block-work {
+            &:nth-child(2n + 2):hover {
+                .block-text {
+                    transform: translate(-100px, -50%);
+                }
+            }
+            &:nth-child(3n + 2):hover {
+                .block-image {
+                    transform: scale(1.4);
+                }
+            }
+            &:nth-child(3n + 3):hover {
+                .block-image {
+                    transform: scale(1.1);
+                }
+            }
+        }
+    }
+    // Breakpoints
+    @media #{$lt-tablet} {
+        .block-work {
+            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-work {
+            &:nth-child(3n + 2) {
+                .block-image {
+                    width: 100%;
+                }
+            }
+            &:nth-child(3n + 3) {
+                .block-image {
+                    width: 100%;
+                }
+            }
+        }
+    }
+}
+</style>

src/components/global/SplitText.vue

@@ -0,0 +1,51 @@
+<template>
+    <component :is="element">
+        <span
+            v-for="(line, i) in lines"
+            :key="i"
+            :class="['line', `line-${i + 1}`]"
+            v-html="line"
+        />
+    </component>
+</template>
+
+<script>
+export default {
+    props: {
+        text: {
+            type: String,
+            default: ""
+        },
+        separator: {
+            type: String,
+            default: " &#8211; "
+        },
+        element: {
+            type: String,
+            default: "span"
+        },
+        keepSeparator: {
+            type: Boolean,
+            default: false
+        }
+    },
+    computed: {
+        lines() {
+            let output = this.text.split(this.separator)
+
+            // Add separator back into array
+            // This is useful if separating by an opening quote
+            if (this.keepSeparator) {
+                output = output.map((element, index) => {
+                    if (index > 0) {
+                        return this.separator + element
+                    }
+                    return element
+                });
+            }
+
+            return output
+        }
+    }
+}
+</script>