Merge pull request #162 from xuhcc/ui-fixes

Various UI improvements
clrfund · Oct 24, 2020 · 8b4911c · 8b4911c
2 parents 0980cd0 + 05edf03
commit 8b4911c
Show file tree

Hide file tree

Showing 14 changed files with 104 additions and 34 deletions.
diff --git a/vue-app/package.json b/vue-app/package.json
@@ -20,6 +20,7 @@
     "vue": "^2.6.11",
     "vue-class-component": "^7.2.2",
     "vue-js-modal": "^2.0.0-rc.6",
+    "vue-meta": "^2.4.0",
     "vue-property-decorator": "^8.3.0",
     "vue-router": "^3.1.5",
     "vuex": "^3.1.2"

diff --git a/vue-app/public/index.html b/vue-app/public/index.html
@@ -2,11 +2,11 @@
 <html lang="en">
   <head>
     <title>clr.fund</title>
+    <meta name="description" content="Permissionless quadtratic funding for public goods">
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>
     <noscript>

diff --git a/vue-app/src/App.vue b/vue-app/src/App.vue
@@ -3,7 +3,7 @@
     <div id="nav-bar">
       <img class="logo" alt="clr.fund" src="@/assets/clr.svg" />
       <div id="nav-menu">
-        <router-link to="/">Home</router-link>
+        <router-link to="/">Projects</router-link>
         <router-link to="/about">About</router-link>
         <a href="https://blog.clr.fund" target=_blank>Blog</a>
         <a href="https://forum.clr.fund" target=_blank>Forum</a>
@@ -29,6 +29,10 @@ import { LOAD_ROUND_INFO } from '@/store/action-types'
 
 @Component({
   name: 'clr.fund',
+  metaInfo: {
+    title: 'clr.fund',
+    titleTemplate: 'clr.fund - %s',
+  },
   components: {
     Cart,
     Profile,
@@ -93,7 +97,7 @@ a {
 
   img {
     height: 1em;
-    margin: 0 10px;
+    margin: 0 10px 0 0;
     vertical-align: middle;
   }
 

diff --git a/vue-app/src/api/projects.ts b/vue-app/src/api/projects.ts
@@ -32,7 +32,13 @@ export async function getProjects(atBlock?: number): Promise<Project[]> {
   const recipientRemovedEvents = await factory.queryFilter(recipientRemovedFilter, 0)
   const projects: Project[] = []
   for (const event of recipientAddedEvents) {
-    const project = decodeRecipientAdded(event)
+    let project
+    try {
+      project = decodeRecipientAdded(event)
+    } catch {
+      // Invalid metadata
+      continue
+    }
     const removed = recipientRemovedEvents.find((event) => {
       return (event.args as any)._recipient === project.address
     })
@@ -59,7 +65,12 @@ export async function getProject(address: string): Promise<Project | null> {
   if (recipientAddedEvents.length !== 1) {
     return null
   }
-  const project = decodeRecipientAdded(recipientAddedEvents[0])
+  let project
+  try {
+    project = decodeRecipientAdded(recipientAddedEvents[0])
+  } catch {
+    return null
+  }
   const recipientRemovedFilter = factory.filters.RecipientRemoved(address)
   const recipientRemovedEvents = await factory.queryFilter(recipientRemovedFilter, 0)
   if (recipientRemovedEvents.length !== 0) {

diff --git a/vue-app/src/components/Cart.vue b/vue-app/src/components/Cart.vue
@@ -355,7 +355,7 @@ export default class Cart extends Vue {
 .cart {
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 110px);
+  min-height: calc(100vh - 110px);
 }
 
 .cart-item {
@@ -381,11 +381,12 @@ $project-image-size: 50px;
   }
 
   .project-name {
+    align-self: center;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     flex-grow: 1;
-    height: $project-image-size;
+    max-height: $project-image-size;
     overflow: hidden;
     text-overflow: ellipsis;
   }

diff --git a/vue-app/src/components/ClaimModal.vue b/vue-app/src/components/ClaimModal.vue
@@ -8,7 +8,7 @@
     </div>
     <div v-if="step === 2">
       <h3>Step 2 of 2: Success</h3>
-      <div>{{ amount | formatAmount }} {{ currentRound.nativeTokenSymbol }} has been sent to {{ project.address }}</div>
+      <div>{{ amount | formatAmount }} {{ currentRound.nativeTokenSymbol }} has been sent to <code>{{ project.address }}</code></div>
       <button class="btn close-btn" @click="$emit('close')">OK</button>
     </div>
   </div>

diff --git a/vue-app/src/components/Profile.vue b/vue-app/src/components/Profile.vue
@@ -5,7 +5,7 @@
       v-else-if="walletProvider && !isCorrectNetwork()"
       class="provider-error"
     >
-      Please change network to {{ jsonRpcNetwork.name }}
+      Please change network to {{ networkName }}
     </div>
     <button
       v-else-if="walletProvider && !currentUser"
@@ -40,7 +40,7 @@ const LOGIN_MESSAGE = 'Sign this message to access clr.fund'
 @Component
 export default class Profile extends Vue {
 
-  jsonRpcNetwork: Network | null = null
+  private jsonRpcNetwork: Network | null = null
   private walletChainId = '0xNaN'
   profileImageUrl: string | null = null
 
@@ -89,6 +89,16 @@ export default class Profile extends Vue {
     return this.jsonRpcNetwork.chainId === parseInt(this.walletChainId, 16)
   }
 
+  get networkName(): string {
+    if (this.jsonRpcNetwork === null) {
+      return ''
+    } else if (this.jsonRpcNetwork.name === 'unknown' && this.jsonRpcNetwork.chainId === 100) {
+      return 'xdai'
+    } else {
+      return this.jsonRpcNetwork.name
+    }
+  }
+
   async connect(): Promise<void> {
     if (!this.walletProvider || !this.walletProvider.request) {
       return
@@ -134,6 +144,10 @@ export default class Profile extends Vue {
   padding: $content-space;
 }
 
+.provider-error {
+  text-align: center;
+}
+
 .connect-btn {
   display: block;
   margin: 0 auto;

diff --git a/vue-app/src/components/ProjectListItem.vue b/vue-app/src/components/ProjectListItem.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="project-item">
-    <img class="project-image" v-bind:src="project.imageUrl" v-bind:alt="project.name">
+    <router-link
+      class="project-image"
+      :to="{ name: 'project', params: { address: project.address }}"
+    >
+      <img :src="project.imageUrl" :alt="project.name">
+    </router-link>
     <div class="project-info">
       <router-link
         class="project-name"
@@ -74,9 +79,6 @@ export default class ProjectListItem extends Vue {
   border: $border;
   border-radius: 20px;
   box-sizing: border-box;
-  flex: 1 0 20%;
-  margin: 0 ($content-space / 2) $content-space;
-  min-width: 200px;
 
   &:hover {
     .project-image {
@@ -91,14 +93,17 @@ export default class ProjectListItem extends Vue {
 }
 
 .project-image {
-  border: none;
-  border-radius: 20px 20px 0 0;
   display: block;
-  height: 150px;
-  margin: 0 auto;
-  object-fit: cover;
-  text-align: center;
-  width: 100%;
+
+  img {
+    border: none;
+    border-radius: 20px 20px 0 0;
+    display: block;
+    height: 150px;
+    object-fit: cover;
+    text-align: center;
+    width: 100%;
+  }
 }
 
 .project-info {

diff --git a/vue-app/src/main.ts b/vue-app/src/main.ts
@@ -4,8 +4,10 @@ import router from './router'
 import store from './store'
 import './filters'
 
+import Meta from 'vue-meta'
 import VModal from 'vue-js-modal'
 
+Vue.use(Meta)
 Vue.use(VModal)
 
 Vue.config.productionTip = false

diff --git a/vue-app/src/router/index.ts b/vue-app/src/router/index.ts
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Home from '../views/Home.vue'
+import ProjectList from '../views/ProjectList.vue'
 import About from '../views/About.vue'
 import ProjectView from '../views/Project.vue'
 
@@ -9,8 +9,8 @@ Vue.use(VueRouter)
 const routes = [
   {
     path: '/',
-    name: 'home',
-    component: Home,
+    name: 'projects',
+    component: ProjectList,
   },
   {
     path: '/about',

diff --git a/vue-app/src/views/About.vue b/vue-app/src/views/About.vue
@@ -25,6 +25,17 @@
   </div>
 </template>
 
+<script lang="ts">
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+@Component({
+  name: 'about',
+  metaInfo: { title: 'About' },
+})
+export default class About extends Vue { }
+</script>
+
 <style scoped lang="scss">
 @import '../styles/vars';
 

diff --git a/vue-app/src/views/Project.vue b/vue-app/src/views/Project.vue
@@ -26,10 +26,10 @@
         @click="claim()"
       >
         <template v-if="claimed">
-          Received {{ allocatedAmount | formatAmount }} {{ tokenSymbol }}
+          Received {{ formatAmount(allocatedAmount) }} {{ tokenSymbol }}
         </template>
         <template v-else>
-          Claim {{ allocatedAmount | formatAmount }} {{ tokenSymbol }}
+          Claim {{ formatAmount(allocatedAmount)  }} {{ tokenSymbol }}
         </template>
       </button>
       <div class="project-description">{{ project.description }}</div>
@@ -52,6 +52,9 @@ import { ADD_CART_ITEM } from '@/store/mutation-types'
 
 @Component({
   name: 'ProjectView',
+  metaInfo() {
+    return { title: (this as any).project?.name || '' }
+  },
 })
 export default class ProjectView extends Vue {
 
@@ -136,6 +139,11 @@ export default class ProjectView extends Vue {
     )
   }
 
+  formatAmount(value: FixedNumber | null): string {
+    const decimals = 6
+    return value ? value.toUnsafeFloat().toFixed(decimals) : ''
+  }
+
   claim() {
     this.$modal.show(
       ClaimModal,

diff --git a/vue-app/src/views/Home.vue → vue-app/src/views/ProjectList.vue b/vue-app/src/views/Home.vue → vue-app/src/views/ProjectList.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="home">
-    <h1 class="content-heading">Home</h1>
+  <div class="projects">
+    <h1 class="content-heading">Projects</h1>
     <div v-if="currentRound" class="round-info">
       <div class="round-info-item">
         <div class="round-info-title">Current Round:</div>
@@ -57,12 +57,13 @@ import { Project, getProjects } from '@/api/projects'
 import ProjectListItem from '@/components/ProjectListItem.vue'
 
 @Component({
-  name: 'Home',
+  name: 'project-list',
+  metaInfo: { title: 'Projects' },
   components: {
     ProjectListItem,
   },
 })
-export default class Home extends Vue {
+export default class ProjectList extends Vue {
 
   projects: Project[] = []
 
@@ -101,6 +102,7 @@ export default class Home extends Vue {
   display: flex;
   flex-wrap: wrap;
   font-size: 12px;
+  margin-bottom: $content-space;
 
   .round-info-item {
     border-right: $border;
@@ -130,9 +132,8 @@ export default class Home extends Vue {
 }
 
 .project-list {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  margin: $content-space (-$content-space / 2) 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  gap: $content-space;
 }
 </style>
diff --git a/yarn.lock b/yarn.lock
@@ -5355,6 +5355,11 @@ deepmerge@^2.1.0:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
   integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
 
+deepmerge@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
+  integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+
 default-gateway@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -17791,6 +17796,13 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-meta@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/vue-meta/-/vue-meta-2.4.0.tgz#a419fb4b4135ce965dab32ec641d1989c2ee4845"
+  integrity sha512-XEeZUmlVeODclAjCNpWDnjgw+t3WA6gdzs6ENoIAgwO1J1d5p1tezDhtteLUFwcaQaTtayRrsx7GL6oXp/m2Jw==
+  dependencies:
+    deepmerge "^4.2.2"
+
 vue-property-decorator@^8.3.0:
   version "8.4.1"
   resolved "https://registry.yarnpkg.com/vue-property-decorator/-/vue-property-decorator-8.4.1.tgz#fd8045b8678e1348fed57f9149279e00e404ed38"