ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle people page

Browse Source
This commit is contained in:
samaradel
2020-11-26 14:23:01 +02:00
parent 99a19fb63b
commit b4df6c68f5
3 changed files with 92 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/scss/main.scss
View File

@@ -98,6 +98,10 @@ ul {
@apply -ml-3; @apply -ml-3;
} }
button:focus {
outline: none;
}
@media (min-width: 768px) { @media (min-width: 768px) {
// .with-large>.flex-post:nth-child(5n), // .with-large>.flex-post:nth-child(5n),
.with-large>.flex-post:nth-child(6n + 1) { .with-large>.flex-post:nth-child(6n + 1) {

83
src/components/Group.vue
View File

@@ -1,32 +1,50 @@
<template> <template>
<section class="py-12 px-4 text-center"> <section class="py-12 px-4 text-center">
<h2 class="text-4xl mb-2 leading-tight font-semibold font-heading">{{title}}</h2> <h2 class="text-4xl mb-2 leading-tight font-semibold font-heading">
{{ title }}
</h2>
<p class="max-w-xl mx-auto mb-12 text-gray-400">{{description}}</p> <p class="max-w-xl mx-auto mb-12 text-gray-400">{{ description }}</p>
<div class="flex max-w-lg mb-12 mx-auto text-center border-b-2"> <div class="flex max-w-lg mx-auto mb-12 justify-center border-b-2">
<div v-for="(tag, index) in tags" :key="tag" class="w-1/3 mr-5 pb-2">
<div v-for="(tag, index) in tags" :key="tag" class="w-1/3 pb-2"> <button
<button @click="setSelected('')" v-if="index == 0" class="w-1/3 pb-2 border-b-4 border-indigo-600">{{ tag }}</button> @click="setSelected('', index)"
<button @click="setSelected(tag)" v-if="index != 0" class="hover:text-indigo-600">{{ tag }}</button> v-if="index == 0"
class="pb-2 hover:text-indigo-600 capitalize"
:class="{ 'border-b-4 border-indigo-600': activeIndex == index }"
>
All
</button>
<button
@click="setSelected(tag, index)"
v-if="index != 0"
class="pb-2 hover:text-indigo-600 capitalize"
:class="{ 'border-b-4 border-indigo-600': activeIndex == index }"
>
{{ tag.replace("_", " ") }}
</button>
</div>
</div> </div>
<div class="flex flex-wrap -mx-4 transition-all ease-in-out duration-150">
</div> <div
<div class="flex flex-wrap -mx-4"> v-for="obj in filter(selected)"
<div v-for="obj in filter(selected)" :key="obj.id" class="w-1/2 lg:w-1/4 p-4"> :key="obj.id"
<g-link :to="obj.path" class="post-card-image-link"> class="w-1/2 lg:w-1/4 p-4"
<g-image >
:src="obj.image" <g-link :to="obj.path" class="post-card-image-link">
:alt="obj.name" <g-image
class="w-1/2 mx-auto mb-4 rounded-full" :src="obj.image"
></g-image> :alt="obj.name"
</g-link> class="w-1/2 mx-auto mb-4 rounded-full"
<h3 class="text-xl mb-1 font-semibold font-heading font-semibold">{{ obj.name }}</h3> ></g-image>
<!-- <span>{{ edge.node.title }}</span> --> </g-link>
<h3 class="text-xl mb-1 font-semibold font-heading font-semibold">
{{ obj.name }}
</h3>
<!-- <span>{{ edge.node.title }}</span> -->
</div>
</div> </div>
</div> </section>
</section>
</template> </template>
<script> <script>
@@ -34,8 +52,8 @@ export default {
data() { data() {
return { return {
selected: "", selected: "",
activeIndex: 0,
} };
}, },
props: { props: {
@@ -43,12 +61,13 @@ export default {
description: String, description: String,
objects: {}, objects: {},
tags: {}, tags: {},
filter: Function filter: Function,
}, },
methods: { methods: {
setSelected: function(tag){ setSelected: function (tag, index) {
this.selected = tag this.selected = tag;
} this.activeIndex = index;
},
}, },
} };
</script> </script>

63
src/templates/People.vue
View File

@@ -2,7 +2,13 @@
<Layout> <Layout>
<div class="container sm:pxi-0 mx-auto overflow-x-hidden"> <div class="container sm:pxi-0 mx-auto overflow-x-hidden">
<div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4"> <div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
<Group title="THREEFOLD TEAM" description="The heartbeat behind the ThreeFold Movement." :objects="people" :tags="memberships" :filter="filter" /> <Group
title="THREEFOLD TEAM"
description="The heartbeat behind the ThreeFold Movement."
:objects="people"
:tags="memberships"
:filter="filter"
/>
</div> </div>
</div> </div>
</Layout> </Layout>
@@ -50,55 +56,54 @@ query ($private: Int){
<script> <script>
import Pagination from "~/components/Pagination.vue"; import Pagination from "~/components/Pagination.vue";
import Group from '~/components/Group.vue'; import Group from "~/components/Group.vue";
export default { export default {
metaInfo: { metaInfo: {
title: "People" title: "People",
}, },
components: { components: {
Group, Group,
Pagination Pagination,
}, },
methods: { methods: {
filter: function(tag){ filter: function (tag) {
if (tag == '') if (tag == "") return this.people;
return this.people
var result = [] var result = [];
for(var i=0; i < this.people.length; i++){ for (var i = 0; i < this.people.length; i++) {
var person = this.people[i]; var person = this.people[i];
for (var j=0; j<person.memberships.length; j++){ for (var j = 0; j < person.memberships.length; j++) {
var membership = person.memberships[j]; var membership = person.memberships[j];
if (membership.title == tag){ if (membership.title == tag) {
result.push(person); result.push(person);
break break;
}
} }
}
} }
return result; return result;
}, },
}, },
computed: { computed: {
people: function(){ people: function () {
var result = [] var result = [];
for (var i=0; i < this.$page.entries.edges.length; i++){ for (var i = 0; i < this.$page.entries.edges.length; i++) {
result.push(this.$page.entries.edges[i].node) result.push(this.$page.entries.edges[i].node);
} }
return result return result;
}, },
memberships: function(){ memberships: function () {
var result = [] var result = [];
for (var i=0; i < this.$page.memberships.edges.length; i++){ for (var i = 0; i < this.$page.memberships.edges.length; i++) {
result.push(this.$page.memberships.edges[i].node.title) result.push(this.$page.memberships.edges[i].node.title);
} }
return result return result;
}, },
baseurl: function() { baseurl: function () {
return "/people/" return "/people/";
} },
}, },
}; };
</script> </script>