Redo..People, Project pages
This commit is contained in:
samaradel
@@ -103,26 +103,25 @@ button:focus {
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
// .with-large>.flex-post:nth-child(5n),
|
||||
.with-large>.flex-post:nth-child(6n + 1) {
|
||||
@apply flex-100;
|
||||
@apply flex-row;
|
||||
.with-large>.flex-post:nth-child(5n),
|
||||
.with-large>.flex-post:nth-child(5n-1) {
|
||||
// @apply flex-100;
|
||||
flex: 1 1 50%;
|
||||
@apply flex-col;
|
||||
.post-card-image-link {
|
||||
// @apply flex-auto;
|
||||
flex: 1 1 100%;
|
||||
@apply relative;
|
||||
min-height: 380px;
|
||||
@apply mr-6;
|
||||
min-height: 400px;
|
||||
}
|
||||
.post-card-image {
|
||||
@apply absolute;
|
||||
@apply h-auto;
|
||||
@apply h-full;
|
||||
@apply w-full;
|
||||
@apply object-cover;
|
||||
@apply rounded-lg;
|
||||
}
|
||||
.post-card-content {
|
||||
@apply flex-post-large-content;
|
||||
// @apply flex-post-large-content;
|
||||
flex: 0 1 auto;
|
||||
@apply self-center;
|
||||
}
|
||||
.post-card-title {
|
||||
@@ -132,33 +131,15 @@ button:focus {
|
||||
@apply text-xl;
|
||||
}
|
||||
}
|
||||
// .with-large>.flex-overview:nth-child(6n + 1) {
|
||||
// @apply flex-100;
|
||||
// @apply flex-row;
|
||||
// .post-card-image-link {
|
||||
// @apply flex-auto;
|
||||
// @apply relative;
|
||||
// min-height: 380px;
|
||||
// @apply mr-6;
|
||||
// }
|
||||
// .post-card-image {
|
||||
// @apply absolute;
|
||||
// @apply h-full;
|
||||
// @apply w-full;
|
||||
// @apply object-cover;
|
||||
// @apply rounded-lg;
|
||||
// }
|
||||
// .post-card-content {
|
||||
// @apply flex-post-large-content;
|
||||
// @apply self-center;
|
||||
// }
|
||||
// .post-card-title {
|
||||
// @apply text-4xl;
|
||||
// }
|
||||
// .post-card-excerpt {
|
||||
// @apply text-xl;
|
||||
// }
|
||||
// }
|
||||
.projects>.flex-post:nth-child(5n),
|
||||
.projects>.flex-post:nth-child(5n-1) {
|
||||
.post-card-image-link {
|
||||
min-height: 300px;
|
||||
}
|
||||
.post-card-image {
|
||||
@apply h-auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body[data-theme="dark"] {
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<Layout>
|
||||
<div class="container sm:pxi-0 mx-auto">
|
||||
<div
|
||||
class="container sm:pxi-0 mx-auto"
|
||||
: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"
|
||||
@@ -68,6 +71,11 @@ export default {
|
||||
baseurl: function () {
|
||||
return "";
|
||||
},
|
||||
contentHeight() {
|
||||
if (process.isClient) {
|
||||
return window.innerHeight - 100;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -5,12 +5,10 @@
|
||||
:style="{ 'min-height': contentHeight + 'px' }"
|
||||
>
|
||||
<div class="flex flex-wrap with-large pt-8 pb-8 mx-4 sm:-mx-4">
|
||||
<Team
|
||||
title="THREEFOLD PEOPLE"
|
||||
description="The heartbeat behind the ThreeFold Movement"
|
||||
:objects="$page.entries.edges"
|
||||
:tags="$page.memberships.edges"
|
||||
tagsField="memberships"
|
||||
<PostListItem
|
||||
v-for="edge in $page.entries.edges"
|
||||
:key="edge.node.id"
|
||||
:record="edge.node"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -24,15 +22,9 @@ query ($private: Int){
|
||||
edges {
|
||||
node {
|
||||
path
|
||||
excerpt
|
||||
content
|
||||
name
|
||||
rank
|
||||
memberships{
|
||||
id
|
||||
title
|
||||
path
|
||||
}
|
||||
bio
|
||||
linkedin
|
||||
websites
|
||||
@@ -59,14 +51,14 @@ query ($private: Int){
|
||||
|
||||
<script>
|
||||
import Pagination from "~/components/Pagination.vue";
|
||||
import Team from "~/components/Team.vue";
|
||||
import PostListItem from "~/components/PostListItem.vue";
|
||||
|
||||
export default {
|
||||
metaInfo: {
|
||||
title: "People",
|
||||
},
|
||||
components: {
|
||||
Team,
|
||||
PostListItem,
|
||||
Pagination,
|
||||
},
|
||||
computed: {
|
||||
|
||||
@@ -4,13 +4,11 @@
|
||||
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">
|
||||
<Team
|
||||
title="THREEFOLD PARTNERS"
|
||||
description="The heartbeat behind the ThreeFold Movement"
|
||||
:objects="$page.entries.edges"
|
||||
:tags="$page.memberships.edges"
|
||||
tagsField="tags"
|
||||
<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>
|
||||
@@ -32,17 +30,8 @@ query ($private: Int){
|
||||
image(width:64, height:64, fit:inside)
|
||||
path
|
||||
},
|
||||
tags {
|
||||
id
|
||||
title
|
||||
path
|
||||
}
|
||||
rank
|
||||
linkedin
|
||||
startDate : startdate(format:"MM YYYY")
|
||||
humanTime : created(format:"DD MMMM YYYY")
|
||||
datetime : created(format:"ddd MMM DD YYYY hh:mm:ss zZ")
|
||||
status
|
||||
excerpt
|
||||
image(width:800)
|
||||
path
|
||||
@@ -66,7 +55,7 @@ query ($private: Int){
|
||||
</page-query>
|
||||
|
||||
<script>
|
||||
import Team from "~/components/Team.vue";
|
||||
import PostListItem from "~/components/PostListItem.vue";
|
||||
import Pagination from "~/components/Pagination.vue";
|
||||
|
||||
export default {
|
||||
@@ -74,7 +63,7 @@ export default {
|
||||
title: "Projects",
|
||||
},
|
||||
components: {
|
||||
Team,
|
||||
PostListItem,
|
||||
Pagination,
|
||||
},
|
||||
computed: {
|
||||
|
||||
Reference in New Issue
Block a user