From 96ce74ee6f11d8802b9e3581e9a16131d9494de3 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Sun, 29 Nov 2020 16:12:45 +0200
Subject: [PATCH] Redo..People, Project pages

---
 src/assets/scss/main.scss  | 55 +++++++++++++-------------------------
 src/pages/Blog.vue         | 10 ++++++-
 src/templates/People.vue   | 20 +++++---------
 src/templates/Projects.vue | 25 +++++------------
 4 files changed, 40 insertions(+), 70 deletions(-)

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index b8f022f6d..81e6feee3 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -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"] {
diff --git a/src/pages/Blog.vue b/src/pages/Blog.vue
index cb91237d1..4c524675a 100644
--- a/src/pages/Blog.vue
+++ b/src/pages/Blog.vue
@@ -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>
diff --git a/src/templates/People.vue b/src/templates/People.vue
index f21de1433..2478d83e8 100644
--- a/src/templates/People.vue
+++ b/src/templates/People.vue
@@ -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: {
diff --git a/src/templates/Projects.vue b/src/templates/Projects.vue
index cfe7dcb2c..bd6170bba 100644
--- a/src/templates/Projects.vue
+++ b/src/templates/Projects.vue
@@ -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: {