Apply category
This commit is contained in:
samaradel
@@ -102,7 +102,7 @@ module.exports = function(api) {
|
||||
|
||||
api.createPages(async({ graphql, createPage }) => {
|
||||
const { data } = await graphql(`{
|
||||
allProjectTag(filter: { title: {in: ["tech", "foundation"]}}) {
|
||||
allProjectTag(filter: { title: {in: ["foundation"]}}) {
|
||||
edges {
|
||||
node {
|
||||
id
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="top-16 left-0 z-50 mb-5 h-16 bg-gray-200 w-full rounded shadow">
|
||||
<div class="left-0 z-50 mb-5 h-16 bg-gray-200 w-full rounded shadow">
|
||||
<header
|
||||
class="flex items-center flex-wrap container mx-auto pt-1 pb-0 sm:px-0 transition-all transition-500"
|
||||
>
|
||||
@@ -9,14 +9,15 @@
|
||||
>filter:</span
|
||||
>
|
||||
</div>
|
||||
<div class="sm:block md:hidden">
|
||||
<!-- <div class="sm:block md:hidden">
|
||||
<ul class="list-none inline-flex justify-center md:justify-end">
|
||||
<li class="py-1 mx-5 cursor-pointer" @click="resetAll()">Reset</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<nav
|
||||
:class="isOpen ? 'block' : 'hidden'"
|
||||
class="inline-flex md:order-2 px-2 pt-2 pb-4 sm:flex sm:p-0 bg-transparent"
|
||||
>
|
||||
<ul
|
||||
@@ -29,13 +30,13 @@
|
||||
@click="setActive(0)"
|
||||
class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
|
||||
>
|
||||
<span class="capitalize">{{ selected }}</span>
|
||||
<span class="capitalize">{{ selected.replace("_", " ") }}</span>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
:class="{
|
||||
'rotate-180': active == 0,
|
||||
'rotate-0': !active == 0,
|
||||
'rotate-0': active == !0,
|
||||
}"
|
||||
class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
|
||||
>
|
||||
@@ -47,7 +48,7 @@
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
v-if="active == 0"
|
||||
v-if="open"
|
||||
x-show="open"
|
||||
x-transition:enter="transition ease-out duration-100"
|
||||
x-transition:enter-start="transform opacity-0 scale-95"
|
||||
@@ -66,8 +67,8 @@
|
||||
:key="tag.path"
|
||||
class="cursor-pointer block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
|
||||
:href="$url(tag.path)"
|
||||
@click.self="open = false"
|
||||
>{{ tag.title }}</a
|
||||
@click="open = false"
|
||||
>{{ tag.title.replace("_", " ") }}</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@@ -75,11 +76,11 @@
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="hidden md:ml-auto md:inline-block md:order-last">
|
||||
<!-- <div class="hidden md:ml-auto md:inline-block md:order-last">
|
||||
<ul class="list-none inline-flex justify-center md:justify-end">
|
||||
<li class="py-1 mx-5 cursor-pointer" @click="resetAll()">Reset</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div> -->
|
||||
</header>
|
||||
</div>
|
||||
</template>
|
||||
@@ -104,21 +105,22 @@ export default {
|
||||
active: null,
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
setActive(index) {
|
||||
this.active = index;
|
||||
this.active = !this.active;
|
||||
this.open = !this.open;
|
||||
},
|
||||
close(e) {
|
||||
if (!this.$el.contains(e.target)) {
|
||||
this.open = false;
|
||||
this.active = !this.active;
|
||||
}
|
||||
},
|
||||
resetAll() {
|
||||
this.$emit("resetAll", true);
|
||||
},
|
||||
},
|
||||
|
||||
mounted() {
|
||||
document.addEventListener("click", this.close);
|
||||
},
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
|
||||
<page-query>
|
||||
query ($private: Int){
|
||||
entries: allProject (sortBy: "rank", order: DESC, filter: { private: { ne: $private }, tags: { id: {in: ["tech", "foundation"]}}}){
|
||||
entries: allProject (sortBy: "rank", order: DESC, filter: { private: { ne: $private }, tags: { id: {in: ["blockchain", "experience", "technology", "farming", "community", "infrastructure", "impact"]}}}){
|
||||
totalCount
|
||||
edges {
|
||||
node {
|
||||
@@ -39,17 +39,16 @@ query ($private: Int){
|
||||
}
|
||||
}
|
||||
|
||||
tags: allProjectTag (filter: { title: {in: ["tech", "foundation"]}}) {
|
||||
tags: allProjectTag (filter: { title: {in: ["foundation"]}}) {
|
||||
edges{
|
||||
node{
|
||||
id
|
||||
title
|
||||
path
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</page-query>
|
||||
|
||||
<script>
|
||||
@@ -70,8 +69,5 @@ export default {
|
||||
return res;
|
||||
},
|
||||
},
|
||||
mounted(){
|
||||
console.log(this.$page)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -1,75 +0,0 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<div
|
||||
class="container sm:pxi-0 mx-auto overflow-x-hidden"
|
||||
:style="{ 'min-height': contentHeight + 'px' }"
|
||||
>
|
||||
<div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<PostListItem
|
||||
v-for="edge in $page.entries.edges"
|
||||
:key="edge.node.id"
|
||||
:record="edge.node"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<page-query>
|
||||
query ($private: Int){
|
||||
entries: allPerson (sortBy: "rank", order: DESC, filter: { private: { ne: $private }}){
|
||||
totalCount
|
||||
edges {
|
||||
node {
|
||||
path
|
||||
content
|
||||
name
|
||||
rank
|
||||
bio
|
||||
linkedin
|
||||
websites
|
||||
countries
|
||||
cities
|
||||
image(width:800)
|
||||
private
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
memberships: allMembership{
|
||||
edges{
|
||||
node{
|
||||
id
|
||||
title
|
||||
path
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</page-query>
|
||||
|
||||
<script>
|
||||
import Pagination from "~/components/Pagination.vue";
|
||||
import PostListItem from "~/components/PostListItem.vue";
|
||||
|
||||
export default {
|
||||
metaInfo: {
|
||||
title: "People",
|
||||
},
|
||||
components: {
|
||||
PostListItem,
|
||||
Pagination,
|
||||
},
|
||||
computed: {
|
||||
baseurl: function () {
|
||||
return "/people/";
|
||||
},
|
||||
contentHeight() {
|
||||
if (process.isClient) {
|
||||
return window.innerHeight - 100;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -1,80 +0,0 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<div
|
||||
class="container sm:pxi-0 mx-auto overflow-x-hidden"
|
||||
:style="{ 'min-height': contentHeight + 'px' }"
|
||||
>
|
||||
<div class="flex flex-wrap with-large projects pt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<PostListItem
|
||||
v-for="edge in $page.entries.edges"
|
||||
:key="edge.node.id"
|
||||
:record="edge.node"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<page-query>
|
||||
|
||||
query ($private: Int){
|
||||
entries: allProject (sortBy: "rank", order: DESC, filter: { private: { ne: $private }}, tags: { id: {in: ["tech", "foundation"]}}){
|
||||
totalCount
|
||||
edges {
|
||||
node {
|
||||
title
|
||||
path
|
||||
members {
|
||||
id
|
||||
name
|
||||
image(width:64, height:64, fit:inside)
|
||||
path
|
||||
},
|
||||
rank
|
||||
linkedin
|
||||
excerpt
|
||||
image(width:800)
|
||||
path
|
||||
timeToRead
|
||||
logo
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
memberships: allProjectTag{
|
||||
edges{
|
||||
node{
|
||||
id
|
||||
title
|
||||
path
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</page-query>
|
||||
|
||||
<script>
|
||||
import PostListItem from "~/components/PostListItem.vue";
|
||||
import Pagination from "~/components/Pagination.vue";
|
||||
|
||||
export default {
|
||||
metaInfo: {
|
||||
title: "Projects",
|
||||
},
|
||||
components: {
|
||||
PostListItem,
|
||||
Pagination,
|
||||
},
|
||||
computed: {
|
||||
baseurl: function () {
|
||||
return "/projects/";
|
||||
},
|
||||
contentHeight() {
|
||||
if (process.isClient) {
|
||||
return window.innerHeight - 100;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user