Merge pull request #477 from ethereum/improved-breadcrumbs

Build better breadcrumbs

vue-app/src/App.vue

@@ -17,11 +17,7 @@
           'mr-cart-closed': !isCartToggledOpen && isSideCartShown,
         }"
       >
-        <back-link
-          v-if="showBackLink"
-          :to="backLinkRoute"
-          :text="backLinkText"
-        />
+        <breadcrumbs v-if="showBreadCrumb" />
         <router-view :key="$route.path" />
       </div>
       <div
@@ -49,6 +45,7 @@ import CartWidget from '@/components/CartWidget.vue'
 import Cart from '@/components/Cart.vue'
 import MobileTabs from '@/components/MobileTabs.vue'
 import BackLink from '@/components/BackLink.vue'
+import Breadcrumbs from '@/components/Breadcrumbs.vue'
 
 import {
   LOAD_USER_INFO,
@@ -84,6 +81,7 @@ import { SET_CURRENT_USER } from '@/store/mutation-types'
     MobileTabs,
     CartWidget,
     BackLink,
+    Breadcrumbs,
   },
 })
 export default class App extends Vue {
@@ -183,26 +181,13 @@ export default class App extends Vue {
     return routes.includes(this.$route.name || '')
   }
 
-  get backLinkRoute(): string {
-    const route = this.$route.name || ''
-    return route.includes('about-') ? '/about' : '/projects'
-  }
-
-  get backLinkText(): string {
-    const route = this.$route.name || ''
-    return route.includes('about-') ? '← Back to About' : '← Back to projects'
-  }
-
-  get showBackLink(): boolean {
+  get showBreadCrumb(): boolean {
     const excludedRoutes = [
       'landing',
-      'project-added',
       'join',
-      'join-step',
-      'projects',
       'transaction-success',
       'verify',
-      'verify-step',
+      'project-added',
       'verified',
     ]
     return !excludedRoutes.includes(this.$route.name || '')

vue-app/src/components/Breadcrumbs.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="breadcrumb">
+    <p>
+      <links class="link" to="/"> # /</links>
+    </p>
+    <p v-for="(link, idx) in links" :key="idx">
+      <links class="link" :to="link.url">
+        {{ link.link.toUpperCase() }} /
+      </links>
+    </p>
+  </div>
+</template>
+
+<script lang="ts">
+// Libraries
+import Vue from 'vue'
+import Component from 'vue-class-component'
+import { Prop } from 'vue-property-decorator'
+
+// Components
+import Links from '@/components/Links.vue'
+
+@Component({ components: { Links } })
+export default class Breadcrumbs extends Vue {
+  @Prop() path!: string
+
+  get links(): Array<{ link: string; url: string }> {
+    const url = this.$route.path
+
+    const links = url
+      .split('/')
+      .splice(1)
+      .filter((link) => !link.includes('0x')) // Filter out address hash
+      .map((link) => {
+        return {
+          link: link === 'project' ? 'projects' : link,
+          url: url.split(link)[0] + (link === 'project' ? 'projects' : link), // No way back to projects, and in the case of breadcrumbs makes sense to go back to projects if on a project detail page
+        }
+      })
+
+    return links
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.breadcrumb {
+  position: relative;
+  display: flex;
+  flex: 1 0 auto;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 1rem 0;
+  z-index: 1;
+  p {
+    margin: 0 5px 0 0;
+  }
+}
+
+.link {
+  color: #fff;
+  &:hover {
+    opacity: 0.8;
+  }
+}
+</style>

vue-app/src/views/JoinLanding.vue

@@ -6,13 +6,11 @@
       </div>
     </div>
 
-    <round-status-banner v-if="$store.state.currentRound" />
-    <back-link
-      :alsoShowOnMobile="true"
-      to="/projects"
-      text="← Back to projects"
-    />
+    <round-status-banner />
 
+    <div class="breadcrumbs">
+      <breadcrumbs />
+    </div>
     <div class="content" v-if="loading">
       <h1>Fetching round data...</h1>
       <loader />
@@ -141,7 +139,7 @@ import { BigNumber } from 'ethers'
 import { RegistryInfo } from '@/api/recipient-registry-optimistic'
 import Loader from '@/components/Loader.vue'
 import CriteriaModal from '@/components/CriteriaModal.vue'
-import BackLink from '@/components/BackLink.vue'
+import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import Links from '@/components/Links.vue'
 import RoundStatusBanner from '@/components/RoundStatusBanner.vue'
 import TimeLeft from '@/components/TimeLeft.vue'
@@ -155,17 +153,21 @@ import { formatAmount } from '@/utils/amounts'
     RoundStatusBanner,
     CriteriaModal,
     Loader,
-    BackLink,
     Links,
     TimeLeft,
     ImageResponsive,
+    Breadcrumbs,
   },
 })
 export default class JoinLanding extends Vue {
   currentRound: string | null = null
   loading = true
   showCriteriaPanel = false
 
+  get links(): Array<{ link: string; url: string }> {
+    return [{ link: 'join', url: '/join' }]
+  }
+
   async created() {
     this.currentRound = await getCurrentRound()
     this.loading = false
@@ -290,6 +292,15 @@ h1 {
   }
 }
 
+.breadcrumbs {
+  position: relative;
+  z-index: 1;
+  box-sizing: border-box;
+  padding-left: $content-space;
+  margin-left: 2rem;
+  width: min(100%, 512px);
+}
+
 .content {
   position: relative;
   z-index: 1;

vue-app/src/views/VerifyLanding.vue

@@ -11,6 +11,7 @@
         </div>
       </div>
       <div class="content">
+        <breadcrumbs />
         <div class="flex-title">
           <h1>Prove you’re only using one account</h1>
         </div>
@@ -90,6 +91,7 @@ import { commify, formatUnits } from '@ethersproject/units'
 import { getCurrentRound } from '@/api/round'
 import { User } from '@/api/user'
 
+import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import Links from '@/components/Links.vue'
 import Loader from '@/components/Loader.vue'
 import ProgressBar from '@/components/ProgressBar.vue'
@@ -99,6 +101,7 @@ import ImageResponsive from '@/components/ImageResponsive.vue'
 
 @Component({
   components: {
+    Breadcrumbs,
     Links,
     Loader,
     ProgressBar,