Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
96 lines (92 sloc) 3.82 KB
<template>
<Layout>
<main class="main overflow-hidden">
<div class="mb-10 md:px-20 md:pt-10 content">
<div class="md:w-3/5">
<h1 class="title">My Themes</h1>
<p class="lead">Below are a few examples of my work that should give you a feel for my overall design style and the types of projects I've worked on.</p>
</div>
</div>
<div class="slides work horizontal -mt-10">
<theme-item v-for="edge in $page.posts.edges" :key="edge.node.id" :post="edge.node" />
</div>
<div class="w-full pull-out-both mt-40 mb-6 hidden">
<div class="flex justify-between">
<div class="flex content-left">
<button class="focus:outline-none uppercase text-xs mx-2" v-on:click="demoUrl = 'https://wordpress.smokeyfro.co/jenkins/'" v-bind:class="{ 'font-bold': demoUrl == 'https://wordpress.smokeyfro.co/jenkins/'}" title="Jenkins">Jenkins</button>
<button class="focus:outline-none uppercase text-xs mx-2" v-on:click="demoUrl = 'https://wordpress.smokeyfro.co/banks/'" v-bind:class="{ 'font-bold': demoUrl == 'https://wordpress.smokeyfro.co/banks/'}" title="Banks">Banks</button>
<button class="focus:outline-none uppercase text-xs mx-2" v-on:click="demoUrl = 'https://wordpress.smokeyfro.co/totem/'" v-bind:class="{ 'font-bold': demoUrl == 'https://wordpress.smokeyfro.co/totem/'}" title="Totem">Totem</button>
</div>
<h2 class="text-4xl font-sans font-bold mb-1">Take them for a spin</h2>
<div class="flex content-right">
<button class="focus:outline-none uppercase text-xs mx-2" v-on:click="preview = 'desktop'" v-bind:class="{ 'font-bold': preview == 'desktop'}" title="Desktop">Desktop</button>
<button class="focus:outline-none uppercase text-xs mx-2" v-on:click="preview = 'tablet'" v-bind:class="{ 'font-bold': preview == 'tablet'}" title="Tablet">Tablet</button>
<button class="focus:outline-none uppercase text-xs mx-2" v-on:click="preview = 'mobile'" v-bind:class="{ 'font-bold': preview == 'mobile'}" title="Mobile">Mobile</button>
</div>
</div>
</div>
<div class="pull-out-both demo hidden">
<iframe v-if="preview === 'mobile'" :src="demoUrl" width="320" height="600" class="bg-white overflow-hidden rounded shadow-2xl mx-auto" />
<iframe v-if="preview === 'tablet'" :src="demoUrl" width="768" height="600" class="bg-white overflow-hidden rounded shadow-2xl mx-auto" />
<iframe v-if="preview === 'desktop'" :src="demoUrl" width="1000" height="600" class="bg-white overflow-hidden rounded shadow-2xl mx-auto" />
</div>
<template slot="source_link">
<a href="https://github.com/smokeyfro/smokeyfro/blob/master/src/pages/Themes.vue" class="border-b border-transparent hover:border-gray-400 transition-border-color">Source</a>
</template>
</main>
</Layout>
</template>
<script>
import config from '~/.temp/config.js'
import ThemeItem from '@/components/themes/ThemeItem'
export default {
components: {
ThemeItem
},
metaInfo () {
return {
title: this.config.siteName,
// bodyAttrs: {
// class: 'themes'
// }
}
},
stored: {
preview: {
type: String,
key: 'preview',
default: 'desktop'
},
demoUrl: {
type: String,
key: 'demoUrl',
default: 'https://wordpress.smokeyfro.co/jenkins/'
}
},
computed: {
config () {
return config
}
}
}
</script>
<page-query>
query Themes ($page: Int) {
posts: allTheme (page: $page, perPage: 6) @paginate {
totalCount
edges {
node {
id
title
content
excerpt
platform
demo_url
type
image
path
}
}
}
}
</page-query>
You can’t perform that action at this time.