Restyle people page

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) {

src/components/Group.vue

@@ -1,18 +1,36 @@
 <template>
   <section class="py-12 px-4 text-center">
-  <h2 class="text-4xl mb-2 leading-tight font-semibold font-heading">{{title}}</h2>
+    <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>
+    <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 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">
+    <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"
@@ -20,13 +38,13 @@
             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>
+        <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>

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,29 +56,28 @@ 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
+      if (tag == "") return this.people;
 
-      var result = []
+      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
+            break;
           }
         }
       }
@@ -82,23 +87,23 @@ export default {
 
   computed: {
     people: function () {
-      var result = []
+      var result = [];
       for (var i = 0; i < this.$page.entries.edges.length; i++) {
-        result.push(this.$page.entries.edges[i].node)
+        result.push(this.$page.entries.edges[i].node);
       }
-      return result
+      return result;
     },
     memberships: function () {
-      var result = []
+      var result = [];
       for (var i = 0; i < this.$page.memberships.edges.length; i++) {
-        result.push(this.$page.memberships.edges[i].node.title)
+        result.push(this.$page.memberships.edges[i].node.title);
       }
-      return result
+      return result;
     },
 
     baseurl: function () {
-     return "/people/"
-    }
+      return "/people/";
+    },
   },
 };
 </script>