update components

2021-02-09 12:34:25 +02:00
parent f6f1873984
commit 383919d734
7 changed files with 182 additions and 255 deletions
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -60,6 +60,10 @@ ul {
  @apply bg-gray-500;
 }

+.footerlink {
+  margin-left: 0rem !important;
+}
+
 // .animated-link:hover:after {
 //     width: 100%;
 // }
--- a/src/components/custom/Cards/PostListItem.vue
+++ b/src/components/custom/Cards/PostListItem.vue
@@ -5,7 +5,7 @@
  >
    <g-link :to="path" class="post-card-image-link">
      <g-image
-        :src="record.image"
+        :src="img(record.image)"
        :alt="record.title"
        class="post-card-image"
      ></g-image>
@@ -13,7 +13,7 @@
    <div>
      <g-link :to="path">
        <h2 class="post-card-title mt-3">{{ record.title || record.name }}</h2>
-        <p class="post-card-excerpt">{{ record.excerpt }}</p>
+        <p class="post-card-excerpt text-gray-700">{{ record.excerpt }}</p>
        <section
          class="flex flex-wrap post-tags container mx-auto relative py-1"
        >
@@ -39,7 +39,7 @@
                >
                  <g-link :to="author.path" v-tooltip="author.name">
                    <g-image
-                      :src="author.image"
+                      :src="img(author.image)"
                      :alt="author.name"
                      class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"
                    />
@@ -66,7 +66,10 @@
              </p>
            </div>
          </div>
-          <section class="post-tags container mx-auto relative py-3" v-if="displaytags()">
+          <section
+            class="post-tags container mx-auto relative py-3"
+            v-if="displaytags()"
+          >
            <g-link
              v-for="tag in record.tags"
              :key="tag.id"
@@ -82,9 +85,7 @@
 </template>

 <script>
-
 export default {
-  
  props: {
    record: {},
    showtags: false,
@@ -96,34 +97,36 @@ export default {
  },

  computed: {
-    path(){
-       if (this.pathPrefix)
-          return this.pathPrefix + "/" + this.record.id
-        return this.record.path
+    path() {
+      if (this.pathPrefix) return this.pathPrefix + "/" + this.record.id;
+      return this.record.path;
    },

-    memberships(){
-      var res = []
-      var memberships = this.record.memberships
-      if (!memberships){
-        return []
+    memberships() {
+      var res = [];
+      var memberships = this.record.memberships;
+      if (!memberships) {
+        return [];
      }
-      memberships.forEach(function(membership){
-        if(["foundation", "tech"].includes(membership.title)){
-          res.push(membership)
+      memberships.forEach(function (membership) {
+        if(["foundation", "tech", "cofounders"].includes(membership.title)){
+          res.push(membership);
        }
      });
-      return res
-    }
-
+      return res;
+    },
  },
-
  methods: {
-    displaytags(){
-      return this.showtags
-    }
-  }
-}
+    displaytags() {
+      return this.showtags;
+    },
+    img(image) {
+      if (!image) return "";
+      if (image.src) return image.src;
+      return image;
+    },
+  },
+};
 </script>

 <style scoped>
@@ -135,6 +138,6 @@ export default {

 .post-card-image {
  max-width: 100%;
-  height: auto;
+  /* height: auto; */
 }
 </style>
--- a/src/components/custom/Navbar/Navbar.vue
+++ b/src/components/custom/Navbar/Navbar.vue
@@ -2,7 +2,7 @@
  <div class="fixed inset-0 h-16 bg-white">
    <header
      class="flex items-center justify-between flex-wrap container mx-auto px-4 sm:px-0 py-4 transition-all transition-500"
-      v-bind:class="{
+      :class="{
        'opacity-100': !disableScroll && scrollPosition > headerHeight,
        'opacity-0': !disableScroll && scrollPosition < headerHeight,
      }"
@@ -61,8 +61,8 @@
              :key="element.name"
              v-for="(element, index) in navigation.social"
              class="hover:text-white sm:block"
-              v-bind:class="{
-                'mr-6': index != Object.keys(navigation.social).length - 1,
+              :class="{
+                'px-2 mr-2': index != Object.keys(navigation.navLinks).length,
              }"
            >
              <span class="telegram_icon">
@@ -81,94 +81,92 @@

      <nav
        :class="isOpen ? 'block' : 'hidden'"
-        class="md:order-2 px-2 pt-2 pb-4 sm:flex sm:p-0 bg-white"
+        class="navbar md:order-2 px-2 pt-2 pb-4 sm:flex sm:p-0 sm:w-100 bg-white"
      >
-        <ul
-          class="list-none sm:flex justify-left uppercase transition-all transition-500"
+        <div
+          :key="index"
+          v-for="(element, index) in navigation.navLinks"
+          class="w-auto"
        >
-          <li
-            class="py-1"
-            :key="element.name"
-            v-for="(element, index) in navigation.navLinks"
-            :class="{
-              'mr-2': index != Object.keys(navigation.navLinks).length - 1,
-            }"
+          <div
+            v-if="element.expandable"
+            class="relative mt-2"
+            x-data="{ open: false }"
          >
-            <div
-              v-if="element.expandable"
-              class="relative"
-              x-data="{ open: false }"
+            <button
+              @click="setActive(index)"
+              class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
            >
-              <button
-                @click="setActive(index)"
-                class="flex flex-row items-center w-full md:w-auto md:inline md:mt-0 md:ml-4 animated-link"
+              <span class="uppercase py-1 pl-2">{{ element.name }}</span>
+              <svg
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                :class="{
+                  'rotate-180': active == index,
+                  'rotate-0': active == !index,
+                }"
+                class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
              >
-                <span class="uppercase">{{ element.name }}</span>
-                <svg
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                  :class="{
-                    'rotate-180': active == index,
-                    'rotate-0': !active == index,
-                  }"
-                  class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-                    clip-rule="evenodd"
-                  ></path>
-                </svg>
-              </button>
+                <path
+                  fill-rule="evenodd"
+                  d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                  clip-rule="evenodd"
+                ></path>
+              </svg>
+            </button>
+            <div
+              v-if="active == index"
+              x-show="open"
+              x-transition:enter="transition ease-out duration-100"
+              x-transition:enter-start="transform opacity-0 scale-95"
+              x-transition:enter-end="transform opacity-100 scale-100"
+              x-transition:leave="transition ease-in duration-75"
+              x-transition:leave-start="transform opacity-100 scale-100"
+              x-transition:leave-end="transform opacity-0 scale-95"
+              class="absolute w-auto mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
+            >
              <div
-                v-if="active == index"
-                x-show="open"
-                x-transition:enter="transition ease-out duration-100"
-                x-transition:enter-start="transform opacity-0 scale-95"
-                x-transition:enter-end="transform opacity-100 scale-100"
-                x-transition:leave="transition ease-in duration-75"
-                x-transition:leave-start="transform opacity-100 scale-100"
-                x-transition:leave-end="transform opacity-0 scale-95"
-                class="absolute w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48 z-30"
+                v-if="open"
+                class="px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
              >
-                <div
-                  v-if="open"
-                  class="px-2 py-2 bg-white rounded-md shadow dark:bg-gray-700"
-                >
-                  <div v-for="link in element.submenu" :key="link.title">
-                    <a
-                      v-if="link.external"
-                      class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-                      @click="open = false"
-                      :href="link.path"
-                      target="_blank"
-                      >{{ link.title }}</a
-                    >
-                    <a
-                      v-else
-                      class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
-                      @click="open = false"
-                      :href="link.path"
-                      >{{ link.title }}</a
-                    >
-                  </div>
+                <div v-for="(link, i) in element.submenu" :key="i">
+                  <a
+                    v-if="link.external"
+                    class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+                    @click="open = false"
+                    :href="link.path"
+                    target="_blank"
+                    >{{ link.title }}</a
+                  >
+                  <a
+                    v-else
+                    class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark:bg-transparent dark:hover:bg-gray-600 dark-:focus:bg-gray-600 dark:focus:text-white dark:hover:text-white dark:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline"
+                    @click="open = false"
+                    :href="link.path"
+                    >{{ link.title }}</a
+                  >
                </div>
              </div>
            </div>
+          </div>

-            <g-link
-              v-else-if="element.external"
-              :to="element.link"
-              target="_blank"
-              class="animated-link"
-              >{{ element.name }}</g-link
-            >
-            <g-link v-else :to="element.link" class="animated-link">{{
-              element.name
-            }}</g-link>
-          </li>
-        </ul>
-        <div
+          <g-link
+            v-else-if="element.external"
+            :to="element.link"
+            @click.native="clicked"
+            target="_blank"
+            class="inline-flex sm:flex uppercase p-2 mr-4 animated-link"
+            >{{ element.name }}</g-link
+          >
+          <g-link
+            v-else
+            :to="element.link"
+            @click.native="clicked"
+            class="inline-flex sm:flex uppercase p-2 mr-4 animated-link"
+            >{{ element.name }}</g-link
+          >
+        </div>
+        <!-- <div
          class="md:hidden inline-flex rounded-full border-2 border-gray-200 w-1/2"
        >
          <span class="w-auto flex justify-end items-center p-2">
@@ -181,10 +179,10 @@
            v-model="search"
            @keyup.enter="result"
          />
-        </div>
+        </div> -->
      </nav>
      <div class="hidden md:ml-auto md:inline-block md:order-last">
-        <div class="inline-flex rounded-full border-2 border-gray-200 w-1/2">
+        <!-- <div class="inline-flex rounded-full border-2 border-gray-200 w-1/2">
          <span class="w-auto flex justify-end items-center p-2">
            <font-awesome :icon="['fas', 'search']" />
          </span>
@@ -195,7 +193,7 @@
            v-model="search"
            @keyup.enter="result"
          />
-        </div>
+        </div> -->
        <ul class="list-none inline-flex justify-center md:justify-end">
          <li class="mr-0 sm:mr-6">
            <ThemeSwitcher v-on="$listeners" :theme="theme" />
@@ -229,9 +227,7 @@
 * Will be used to add/remove the additional
 * css classes to show the sticky navbar
 */
-
 import ThemeSwitcher from "~/components/custom/ThemeSwitcher.vue";
-
 export default {
  components: {
    ThemeSwitcher,
@@ -256,6 +252,7 @@ export default {
      search: "",
      open: false,
      active: null,
+      currentLink: -1,
    };
  },
  methods: {
@@ -275,10 +272,14 @@ export default {
    close(e) {
      if (!this.$el.contains(e.target)) {
        this.open = false;
+        this.active = !this.active;
+        this.isOpen = !this.isOpen;
      }
    },
+    clicked() {
+      this.isOpen = false;
+    },
  },
-
  mounted() {
    if (!this.disableScroll) {
      var height = document.getElementById("header").clientHeight;
@@ -297,8 +298,23 @@ input:focus,
 button:focus {
  outline: 0;
 }
-
 .inset-0 {
  z-index: 999;
 }
+nav li a {
+  padding-right: 10px;
+}
+a.active--exact.active {
+  background-color: rgba(237, 242, 247, 1);
+  border-radius: 0.5rem;
+}
+
+.navbar {
+  width: auto;
+}
+@media (max-width: 768px) {
+  .navbar {
+    width: 100%;
+  }
+}
 </style>
--- a/src/components/marketing/sections/cta-sections/Footer.vue
+++ b/src/components/marketing/sections/cta-sections/Footer.vue
@@ -7,14 +7,14 @@
    <div class="max-w-screen-xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
      <div class="xl:grid xl:grid-cols-3 xl:gap-8">
        <div class="space-y-8 xl:col-span-1">
-          <img
+          <g-image
            class="h-10"
            src="/img/tf_icon_black.svg"
            alt="Company name"
            v-if="theme == 'light'"
          />

-          <img
+          <g-image
            class="h-10"
            src="/img/tf_icon_white.svg"
            alt="Company name"
@@ -136,17 +136,16 @@
              >
                {{ footerLink.title }}
              </h4>
-              <ul class="mt-4 space-y-4">
+              <ul class="mt-4 space-y-4 footerlink">
                <li v-for="item in footerLink.links" :key="item.name">
                  <a
                    v-if="item.link.includes('http')"
-                    target="_blank"
                    :href="item.link"
+                    target="_blank"
                    class="text-base leading-6 text-gray-500 hover:text-gray-900"
                  >
                    {{ item.name }}
                  </a>
-
                  <a
                    v-else
                    :href="item.link"
@@ -155,112 +154,14 @@
                    {{ item.name }}
                  </a>
                </li>
-                <!-- <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Analytics
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Commerce
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Insights
-                </a>
-              </li> -->
              </ul>
            </div>
-            <!-- <div class="mt-12 md:mt-0">
-            <h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
-              Support
-            </h4>
-            <ul class="mt-4 space-y-4">
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Pricing
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Documentation
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Guides
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  API Status
-                </a>
-              </li>
-            </ul>
-          </div> -->
          </div>
-          <!-- <div class="md:grid md:grid-cols-2 md:gap-8">
-          <div>
-            <h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
-              Company
-            </h4>
-            <ul class="mt-4 space-y-4">
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  About
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Blog
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Jobs
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Press
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Partners
-                </a>
-              </li>
-            </ul>
-          </div>
-          <div class="mt-12 md:mt-0">
-            <h4 class="text-sm leading-5 font-semibold text-gray-400 tracking-wider uppercase">
-              Legal
-            </h4>
-            <ul class="mt-4 space-y-4">
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Claim
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Privacy
-                </a>
-              </li>
-              <li>
-                <a href="#" class="text-base leading-6 text-gray-500 hover:text-gray-900">
-                  Terms
-                </a>
-              </li>
-            </ul>
-          </div>
-        </div> -->
        </div>
      </div>
      <div class="mt-12 border-t border-gray-200 pt-8">
        <p class="text-base leading-6 text-gray-400 xl:text-center">
-          &#xA9; 2020 Workflow, Inc. All rights reserved.
+          &#xA9; 2021 ThreeFold, All rights reserved.
        </p>
      </div>
    </div>
@@ -276,5 +177,5 @@ export default {
 <style scoped>
 ul {
  list-style-type: none;
-}
+};
 </style>
--- a/src/templates/BlogPost.vue
+++ b/src/templates/BlogPost.vue
@@ -53,7 +53,7 @@
                  }}</time>
                </g-link>
                <!-- &nbsp;&middot;&nbsp; {{ $page.blog.timeToRead }} min read -->
-                &nbsp;&middot;&nbsp;
+                <!-- &nbsp;&middot;&nbsp; -->
                <g-link :to="$page.blog.path">
                  <time :datetime="$page.blog.datetime">{{
                    $page.blog.startDate
@@ -68,7 +68,7 @@
        <g-image :src="$page.blog.image"></g-image>
      </section>

-      <div class="">
+      <div class="py-12">
        <section
          class="post-content container mx-auto relative font-serif text-gray-700"
        >
@@ -167,6 +167,9 @@
        path
      }
    }
+
+
+    
  }
 </page-query>