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;
}
button:focus {
outline: none;
}
@media (min-width: 768px) {
// .with-large>.flex-post:nth-child(5n),
.with-large>.flex-post:nth-child(6n + 1) {

87
src/components/Group.vue
View File

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

65
src/templates/People.vue
View File

@@ -2,7 +2,13 @@
<Layout>
<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">
<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>
</Layout>
@@ -50,55 +56,54 @@ query ($private: Int){
<script>
import Pagination from "~/components/Pagination.vue";
import Group from '~/components/Group.vue';
import Group from "~/components/Group.vue";
export default {
metaInfo: {
title: "People"
title: "People",
},
components: {
Group,
Pagination
Pagination,
},
methods: {
filter: function(tag){
if (tag == '')
return this.people
var result = []
for(var i=0; i < this.people.length; i++){
var person = this.people[i];
for (var j=0; j<person.memberships.length; j++){
var membership = person.memberships[j];
if (membership.title == tag){
result.push(person);
break
}
filter: function (tag) {
if (tag == "") return this.people;
var result = [];
for (var i = 0; i < this.people.length; i++) {
var person = this.people[i];
for (var j = 0; j < person.memberships.length; j++) {
var membership = person.memberships[j];
if (membership.title == tag) {
result.push(person);
break;
}
}
}
return result;
},
},
computed: {
people: function(){
var result = []
for (var i=0; i < this.$page.entries.edges.length; i++){
result.push(this.$page.entries.edges[i].node)
people: function () {
var result = [];
for (var i = 0; i < this.$page.entries.edges.length; i++) {
result.push(this.$page.entries.edges[i].node);
}
return result
return result;
},
memberships: function(){
var result = []
for (var i=0; i < this.$page.memberships.edges.length; i++){
result.push(this.$page.memberships.edges[i].node.title)
memberships: function () {
var result = [];
for (var i = 0; i < this.$page.memberships.edges.length; i++) {
result.push(this.$page.memberships.edges[i].node.title);
}
return result
return result;
},
baseurl: function() {
return "/people/"
}
baseurl: function () {
return "/people/";
},
},
};
</script>