Add main header descriptive (#373)

* add main header descriptive * change search anything to search on BCD because search anything might be confusing on pages because people might think that it might be related to search anything on specific page * pl-8 on the header * update top navigation * use class="white--text" * move things in the header * change sizings * add send feedback button * send feedback after search * add footer as well * add dark theme checker and appropriate styles add * make a very top header * fix light theme * add rel nooppener * send feedback -> feedback * Fix header background * Feedback margin Co-authored-by: Michael Zaikin <[email protected]>
baking-bad · Apr 27, 2022 · fb8a97a · fb8a97a
1 parent 726b4c0
commit fb8a97a
Show file tree

Hide file tree

Showing 26 changed files with 346 additions and 486 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,7 @@
 <template>
   <v-app>
-    <v-content>
+    <v-content class="v-content-class">
+      <MainHeaderDescriptive :no-search="isNoSearchInHeader" />
       <ErrorSnackbar v-if="!!$store.state.error" />
       <SuccessSnackbar v-if="!!$store.state.success" />
       <WarningSnackbar v-if="!!$store.state.warning" />
@@ -18,14 +19,22 @@
 import WarningSnackbar from "@/components/Snackbar/WarningSnackbar";
 import ErrorSnackbar from "@/components/Snackbar/ErrorSnackbar.vue";
 import SuccessSnackbar from "@/components/Snackbar/SuccessSnackbar.vue";
+import MainHeaderDescriptive from "./components/MainHeaderDescriptive";
 
 export default {
   name: "App",
   components: {
+    MainHeaderDescriptive,
     WarningSnackbar,
     ErrorSnackbar,
     SuccessSnackbar,
   },
+  computed: {
+    isNoSearchInHeader() {
+      const pathsNoSearchInHeader = ['/', '/search'];
+      return pathsNoSearchInHeader.includes(this.$route.path);
+    },
+  },
   data: () => ({
     showToTop: false
   }),
@@ -177,4 +186,8 @@ input:-webkit-autofill:active  {
 .vjs-tree:not(.is-root) > div:first-child:hover {
   background-color: var(--v-postHeader-darken1) !important;
 }
+
+.v-content-class {
+  margin-top: var(--main-header-weight);
+}
 </style>
diff --git a/src/components/MainHeaderDescriptive.vue b/src/components/MainHeaderDescriptive.vue
@@ -0,0 +1,117 @@
+<template>
+  <header class="header-class pl-4 pr-4" :class="headerAdditionalClass">
+    <div class="d-flex align-center">
+      <RouterLink to="/" class="no-decoration d-flex align-center">
+        <h2 class="script-casual primary--text">BCD</h2>
+        <span class="ml-3 text-small overline text--secondary">Tezos Contract Explorer</span>
+      </RouterLink>
+    </div>
+    <div>
+      <v-btn text small :to="{ name: 'search' }" class="text--secondary" active-class="bg-before-transparent">
+        Search
+      </v-btn>
+      <v-btn text small :to="{ path: `/stats/${config.networks[0]}/general` }" class="text--secondary" active-class="bg-before-transparent">
+        Stats
+      </v-btn>
+      <v-btn text small :to="{ name: 'dapps' }" class="text--secondary" active-class="bg-before-transparent">
+        Dapps
+      </v-btn>
+      <v-btn
+        text
+        active-class="bg-before-transparent"
+        class="text--secondary"
+        to="/docs"
+        small
+      >
+        API
+      </v-btn>
+    </div>
+    <div class="searchbox-wrapper">
+      <SearchBox v-if="!noSearch" :inplace="true"></SearchBox>
+      <v-btn text small @click="openFeedback" class="text--secondary ml-5" outlined rounded active-class="bg-before-transparent">
+        Feedback
+      </v-btn>
+      <SocialsList class="socials-list ml-3"/>
+      <ThemeSwitcher />
+    </div>
+  </header>
+</template>
+
+<script>
+import SocialsList from "./SocialsList";
+import SearchBox from "./SearchBox";
+import ThemeSwitcher from "./ThemeSwitcher";
+
+export default {
+  name: "MainHeaderDescriptive",
+  components: { ThemeSwitcher, SearchBox, SocialsList},
+  props: {
+    noSearch: Boolean,
+  },
+  computed: {
+    headerAdditionalClass() {
+      if (this.isHome) {
+        return this.isDarkTheme ? '' : 'bg-canvas-base';
+      } else {
+        return 'bg-sidenav-base';
+      }
+    },
+    isHome() {
+      return this.$route.path === '/';
+    },
+    isDarkTheme() {
+      return this.$vuetify.theme.dark;
+    }
+  },
+  methods: {
+    openFeedback() {
+      window.open('https://docs.google.com/forms/d/e/1FAIpQLSdTkewJ9UJHZByjpFndubp6kwEOENRBtvGIg9FisIdUJHB1mA/viewform', '_blank');
+      if (this.$gtag) {
+        this.$gtag.event('Social Click', {
+          'event_category': 'Feedback',
+          'event_label': this.$router.currentRoute.fullPath
+        });
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.header-class {
+  position: fixed;
+  height: var(--main-header-weight);
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: var(--z-index-main-header);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.searchbox-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 2.5rem;
+  gap: 0.75rem;
+  & > * {
+    height: 2.5rem;
+  }
+}
+.list-class {
+  padding: 0;
+  background: transparent;
+}
+.socials-list {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+.list-item-group-class {
+  display: flex;
+  & > a {
+    height: 2.5rem !important;
+  }
+}
+</style>