Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Category pages #65

Closed
wants to merge 8 commits into from
Closed

Category pages #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2a77bb8
Extract routes to minimise category route duplication
Apr 27, 2020
c1e55d1
Load category, featured actions, and regular actions from API
Apr 27, 2020
d04919c
Styling Tailwind doesn't support
May 1, 2020
a1581c1
Swap back to history mode
May 1, 2020
6e1e472
Restructure banner and finalise action styling
May 1, 2020
402d8b8
Check if an image exists first
May 1, 2020
96149d1
Add remaining categories
May 1, 2020
efe787c
Merge branch 'new' into category-pages
imkieransmith May 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions src/assets/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,27 @@ a {
@apply text-pink-500;
}

.written > h1 {
@apply text-2xl mb-4;
}
.written > p:not(:last-child) {
@apply mb-4;
}

.image-left-side:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, rgba(42, 67, 101, 0.85), rgba(42, 67, 101, 0.25));
border-radius: 0.375rem;
}
@media screen and (min-width: 768px) {
.image-left-side:after {
background: linear-gradient(45deg, rgba(42, 67, 101, 0.85), rgba(42, 67, 101, 0));
}
}

@tailwind utilities;
179 changes: 129 additions & 50 deletions src/router.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,80 +3,159 @@ import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
scrollBehavior: () => ({ y: 0 }),
routes: [
// Base routes.
const routes = [
{
path: '/',
name: 'Home',
component: () =>
import(/* webpackChunkName: "Home" */ './views/home/Index'),
},
{
path: '/about',
name: 'About',
component: () =>
import(/* webpackChunkName: "About" */ './views/about/Index'),
},
{
path: '/storybook-alike',
name: 'StorybookAlike',
component: () =>
import(/* webpackChunkName: "StorybookAlike" */ './views/storybookalike/Index'),
},
{
path: '/tags',
name: 'TagIndex',
component: () =>
import(/* webpackChunkName: "TagIndex" */ './views/tags/Index'),
},
{
path: '/tags/:tagSlug',
name: 'TagShow',
component: () =>
import(/* webpackChunkName: "TagShow" */ './views/tags/Show'),
},
{
path: '/categories',
name: 'CategoryIndex',
component: () =>
import(/* webpackChunkName: "CategoryIndex" */ './views/categories/Index'),
},
{
path: '/search',
name: 'SearchIndex',
component: () =>
import(/* webpackChunkName: "SearchIndex" */ './views/search/Index'),
},
{
path: '/search/:searchTerm',
name: 'SearchQuery',
component: () =>
import(/* webpackChunkName: "SearchQuery" */ './views/search/Query'),
},
];


// Array of information for all categories in the API.
let categories = [
{
id: '207559a4-fe66-4c3d-bc6c-4f721f9562a4',
slug: 'carbon-reduction'
},
{
path: '/',
name: 'Home',
component: () =>
import(/* webpackChunkName: "Home" */ './views/home/Index'),
id: 'f92ca585-ad4d-43bc-9430-43c2fad14aa1',
slug: 'clothing'
},
{
path: '/about',
name: 'About',
component: () =>
import(/* webpackChunkName: "About" */ './views/about/Index'),
id: 'a68b7a57-c0a5-4b27-81d2-93a19f2787a1',
slug: 'consumer-products'
},
{
path: '/storybook-alike',
name: 'StorybookAlike',
component: () =>
import(/* webpackChunkName: "StorybookAlike" */ './views/storybookalike/Index'),
id: 'e71796f8-4b3d-4f40-a1a8-527fb0fdf854',
slug: 'cooking'
},
{
path: '/tags',
name: 'TagIndex',
component: () =>
import(/* webpackChunkName: "TagIndex" */ './views/tags/Index'),
id: '49f0ae64-b03a-4d50-bbdc-edd765ef4500',
slug: 'documentaries'
},
{
path: '/tags/:tagSlug',
name: 'TagShow',
component: () =>
import(/* webpackChunkName: "TagShow" */ './views/tags/Show'),
id: '1e06ea25-373d-440c-9abd-408710b475d0',
slug: 'food'
},
{
path: '/actions',
name: 'ActionIndex',
component: () =>
import(/* webpackChunkName: "ActionIndex" */ './views/actions/Index'),
id: '681bffaf-a44c-4449-ae96-bf780506c862',
slug: 'footprint-calculators'
},
{
path: '/actions/:actionSlug',
name: 'ActionShow',
component: () =>
import(/* webpackChunkName: "ActionShow" */ './views/actions/Show'),
id: '6ad9cfc5-eac0-455e-9ad0-f537896373ba',
slug: 'home-improvements'
},
{
path: '/categories',
name: 'CategoryIndex',
component: () =>
import(/* webpackChunkName: "CategoryIndex" */ './views/categories/Index'),
id: '7adab10c-985b-42e2-ab8c-eee35b5a8817',
slug: 'hygiene'
},
{
path: '/categories/:categorySlug',
name: 'CategoryShow',
component: () =>
import(/* webpackChunkName: "CategoryShow" */ './views/categories/Show'),
id: '1fcc2840-32ba-44fb-9b99-efe4d1397ff4',
slug: 'jobs'
},
{
path: '/search',
name: 'SearchIndex',
component: () =>
import(/* webpackChunkName: "SearchIndex" */ './views/search/Index'),
id: '411e32f8-59bc-4fbb-ac7f-3d2a908b039e',
slug: 'land-management'
},
{
path: '/search/:searchTerm',
name: 'SearchQuery',
component: () =>
import(/* webpackChunkName: "SearchQuery" */ './views/search/Query'),
id: '0ec6e5b5-0a80-4c8d-b45f-b78c99492d8d',
slug: 'news'
},
],
{
id: '3d78ba9a-4f85-464b-a330-1cfb5c137328',
slug: 'politics'
},
{
id: '63a7cfb3-7cd5-4282-af9d-e5ed41572d1b',
slug: 'reforestation'
},
{
id: 'f9b2c5ee-8da3-446b-b865-0d716debed30',
slug: 'renewable-energy'
},
{
id: '0a32cb28-6330-4881-8671-824476ed5859',
slug: 'transportation'
},
{
id: '97826809-ed97-424c-9c46-cedba824add8',
slug: 'travel'
},
{
id: 'ee42a632-ac6a-4f89-802a-8111cf674d4c',
slug: 'volunteering'
},
{
id: 'a1a4ac88-627d-4bc7-a5b5-d3dcdc10cc43',
slug: 'waste'
}
];

// Create router objects for each category.
categories = categories.map(function(category) {
return {
path: '/' + category.slug,
name: 'SingleCategoryIndex',
component: () => import(/* webpackChunkName: "SingleCategoryIndex" */ './views/category/Index'),
props: { category: category }
};
});


const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
scrollBehavior: () => ({ y: 0 }),
// Merge base routes and category routes.
routes: routes.concat(categories)
})


// Bootstrap Analytics
// Set in .env
// https://github.com/MatteoGabriele/vue-analytics
Expand Down
154 changes: 154 additions & 0 deletions src/views/category/Index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
<template>
<div class="text-gray-800 antialiased">

<navigation/>

<section class="flex items-center relative pt-32 pb-20" v-hidden v-if="cat">

<div class="absolute top-0 left-0 w-1/2 h-full bg-blue-900"></div>
<div class="absolute top-0 right-0 w-1/2 h-full bg-gray-100"></div>

<div class="relative w-full max-w-screen-lg px-5 mx-auto">

<div class="relative">

<div class="relative z-10 w-full py-20 md:w-3/4 lg:w-3/5">
<h1
class="leading-tight text-white text-4xl font-bold mb-4 md:text-5xl lg:text-6xl"
v-text="cat.title"
></h1>
<p class="text-white text-lg font-light mb-6" v-html="cat.intro"></p>
</div>

<div
class="image-left-side absolute top-0 right-0 w-3/4 h-full bg-cover bg-center background-gray-300 rounded-md shadow-lg"
:style="{backgroundImage: 'url(\'' + (cat.image ? cat.image.permalink : '') + '\')'}"
role="img"
aria-label=""
></div>

</div>

</div>

</section>

<div class="bg-white py-20" v-hidden v-if="cat">
<div class="container relative w-full max-w-screen-md px-5 mx-auto">
<div class="written" v-html="cat.content"></div>
</div>
</div>

<!-- <div class="featured-actions" v-hidden v-show="featured">
<div class="featured-action" v-for="action in featured" :key="action.id">
</div>
</div> -->

<div class="bg-gray-100 py-20" v-hidden v-show="actions">
<div class="container relative w-full max-w-screen-md px-5 mx-auto">
<div class="mb-6" v-for="action in actions" :key="action.id">
<a
:href="action.action_url"
class="text-gray-800"
>
<h3
v-text="action.title"
class="text-xl mb-2 hover:text-pink-600"
></h3>
<p
v-html="action.description"
class="mb-4"
></p>
</a>
<div class="sm:flex items-center justify-between flex-row-reverse pb-4 border-b-2 border-gray-200">
<a
:href="action.action_url"
class="inline-block text-pink-600 px-4 py-2 mb-4 sm:mb-0 border-2 border-pink-600 rounded-full hover:bg-pink-600 hover:text-white"
>Take Action</a>

<div class="flex items-center">
<p class="mr-3">Share</p>
<a
:href="'https://www.facebook.com/sharer/sharer.php?t=' + encodeURIComponent(action.description.replace(/(<([^>]+)>)/ig,'')) + '&u=' + action.action_url"
class="block text-pink-600 mr-4 hover:text-pink-800"
><i class="fab fa-facebook-f"></i></a>
<a
:href="'https://twitter.com/intent/tweet?text=' + encodeURIComponent(action.description.replace(/(<([^>]+)>)/ig,'') + ' via @_ProtectEarth') + '&url=' + action.action_url"
class="block text-pink-600 mr-4 hover:text-pink-800"
><i class="fab fa-twitter"></i></a>
<a
:href="'mailto:?subject=' + encodeURIComponent(action.description.replace(/(<([^>]+)>)/ig,'')) + '&body=' + action.action_url"
class="block text-pink-600 mr-6 hover:text-pink-800"
><i class="fas fa-envelope"></i></a>
</div>
</div>
</div>
</div>
</div>

<div class="bg-white py-20" v-hidden v-if="cat">
<div class="container relative w-full max-w-screen-md px-5 mx-auto">
<div class="written text-center">Green "Want to help? Great!" section here</div>
</div>
</div>

<page-footer/>

</div>
</template>

<script>

import api from './../../services/api.js';

export default {
name: 'SingleCategoryIndex',

props: {
category: {
type: Object,
required: true
}
},

components: {
Navigation: () => import('./../../components/Navigation'),
//Action: () => import('./../../components/listing/Action'),
PageFooter: () => import('./../../components/Footer')
},

data() {
return {
cat: null,
featured: null,
actions: null
};
},

mounted() {
var self = this;

// Load category information.
api.showCategoryWithSlug(this.category.slug)
.then(function(response) {
self.cat = response;
});


// Load all actions for this category.
api.getActionsWithCategory(this.category.id)
.then(function(response) {
// Split actions into featured/regular.
self.featured = response.data.filter(function(action) {
return action.featured;
});
self.actions = response.data.filter(function(action) {
return !action.featured;
});
});
},

methods: {
}
}
</script>