From b4df6c68f508bef528cd2d81a2fc306d5fda4f46 Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Thu, 26 Nov 2020 14:23:01 +0200
Subject: [PATCH] Restyle people page

---
 src/assets/scss/main.scss |  4 ++
 src/components/Group.vue  | 87 ++++++++++++++++++++++++---------------
 src/templates/People.vue  | 65 +++++++++++++++--------------
 3 files changed, 92 insertions(+), 64 deletions(-)

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 01821437f..b8f022f6d 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -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) {
diff --git a/src/components/Group.vue b/src/components/Group.vue
index 66e9b7f5e..e2ad64c2b 100644
--- a/src/components/Group.vue
+++ b/src/components/Group.vue
@@ -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>
\ No newline at end of file
diff --git a/src/templates/People.vue b/src/templates/People.vue
index 1fa864dd3..63495a0db 100644
--- a/src/templates/People.vue
+++ b/src/templates/People.vue
@@ -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>