Fix btns

src/components/Team.vue

@@ -24,7 +24,7 @@
       >
         <a
           :href="`#${tag.node.title}`"
-          @click="setSelected(tag.node.title, index)"
+          @click.stop="setSelected(tag.node.title, index)"
           class="pb-2 hover:text-indigo-600 capitalize"
           :class="{ 'border-b-4 border-indigo-600': activeIndex == index + 1 }"
         >
@@ -62,7 +62,7 @@ export default {
 
     for (var i = 0; i < this.tags.length; i++) {
       if (this.tags[i].node.title == selected) {
-        activeIndex = i;
+        activeIndex = i + 1;
       }
     }
     return {
@@ -78,11 +78,6 @@ export default {
     tags: {},
     tagsField: String,
   },
-  computed: {
-    url: function () {
-      return window.location.href + "#" + this.selected;
-    },
-  },
   methods: {
     setSelected: function (tag, index) {
       this.selected = tag;

src/templates/People.vue

@@ -1,8 +1,17 @@
 <template>
   <Layout>
-    <div class="container sm:pxi-0 mx-auto overflow-x-hidden">
+    <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">
-        <Team title="THREEFOLD TEAM" description="The heartbeat behind the ThreeFold Movement." :objects="$page.entries.edges" :tags="$page.memberships.edges" tagsField="memberships" />
+        <Team
+          title="THREEFOLD TEAM"
+          description="The heartbeat behind the ThreeFold Movement."
+          :objects="$page.entries.edges"
+          :tags="$page.memberships.edges"
+          tagsField="memberships"
+        />
       </div>
     </div>
   </Layout>
@@ -50,20 +59,25 @@ query ($private: Int){
 
 <script>
 import Pagination from "~/components/Pagination.vue";
-import Team from '~/components/Team.vue';
+import Team from "~/components/Team.vue";
 
 export default {
   metaInfo: {
-    title: "People"
+    title: "People",
   },
   components: {
     Team,
-    Pagination
+    Pagination,
   },
   computed: {
-    baseurl: function() {
-     return "/people/"
-    }
+    baseurl: function () {
+      return "/people/";
+    },
+    contentHeight() {
+      if (process.isClient) {
+        return window.innerHeight - 100;
+      }
+    },
   },
 };
 </script>

src/templates/Projects.vue

@@ -1,8 +1,17 @@
 <template>
   <Layout>
-    <div class="container sm:pxi-0 mx-auto overflow-x-hidden">
+    <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">
-        <Team title="THREEFOLD PROJECTS" description="The heartbeat behind the ThreeFold Movement." :objects="$page.entries.edges" :tags="$page.memberships.edges" tagsField="tags" />
+        <Team
+          title="THREEFOLD PROJECTS"
+          description="The heartbeat behind the ThreeFold Movement."
+          :objects="$page.entries.edges"
+          :tags="$page.memberships.edges"
+          tagsField="tags"
+        />
       </div>
     </div>
   </Layout>
@@ -57,21 +66,26 @@ query ($private: Int){
 </page-query>
 
 <script>
-import Team from '~/components/Team.vue';
+import Team from "~/components/Team.vue";
 import Pagination from "~/components/Pagination.vue";
 
 export default {
   metaInfo: {
-    title: "Projects"
+    title: "Projects",
   },
   components: {
     Team,
-    Pagination
+    Pagination,
   },
   computed: {
-    baseurl: function() {
-     return "/projects/"
-    }
+    baseurl: function () {
+      return "/projects/";
+    },
+    contentHeight() {
+      if (process.isClient) {
+        return window.innerHeight - 100;
+      }
+    },
   },
 };
 </script>