Merge pull request #184 from xuhcc/mobile-ui

Mobile UI

vue-app/src/App.vue

@@ -1,7 +1,21 @@
 <template>
   <div id="app">
-    <div id="nav-bar">
-      <img class="logo" alt="clr.fund" src="@/assets/clr.svg" />
+    <div id="nav-bar" :class="{'collapsed': navBarCollapsed}">
+      <div id="nav-header">
+        <img
+          class="menu-btn"
+          alt="nav"
+          src="@/assets/menu.svg"
+          @click="toggleNavBar()"
+        >
+        <img class="logo" alt="clr.fund" src="@/assets/clr.svg" />
+        <img
+          class="cart-btn"
+          alt="cart"
+          src="@/assets/cart.svg"
+          @click="toggleUserBar()"
+        >
+      </div>
       <div id="nav-menu">
         <router-link to="/">Projects</router-link>
         <router-link to="/about">About</router-link>
@@ -12,7 +26,7 @@
     <div id="content">
       <router-view />
     </div>
-    <div id="user-bar">
+    <div id="user-bar" :class="{'collapsed': userBarCollapsed}">
       <Profile />
       <Cart />
     </div>
@@ -22,10 +36,11 @@
 <script lang="ts">
 import Vue from 'vue'
 import Component from 'vue-class-component'
+import { Watch } from 'vue-property-decorator'
 
 import Cart from '@/components/Cart.vue'
 import Profile from '@/components/Profile.vue'
-import { LOAD_ROUND_INFO } from '@/store/action-types'
+import { LOAD_USER_INFO, LOAD_ROUND_INFO } from '@/store/action-types'
 
 @Component({
   name: 'clr.fund',
@@ -40,13 +55,35 @@ import { LOAD_ROUND_INFO } from '@/store/action-types'
 })
 export default class App extends Vue {
 
+  // Only for small screens
+  navBarCollapsed = true
+  userBarCollapsed = true
+
   created() {
     this.$store.dispatch(LOAD_ROUND_INFO)
     setInterval(() => {
       this.$store.dispatch(LOAD_ROUND_INFO)
     }, 60 * 1000)
+    setInterval(() => {
+      this.$store.dispatch(LOAD_USER_INFO)
+    }, 60 * 1000)
+  }
+
+  toggleNavBar() {
+    this.userBarCollapsed = true
+    this.navBarCollapsed = !this.navBarCollapsed
+  }
+
+  toggleUserBar() {
+    this.navBarCollapsed = true
+    this.userBarCollapsed = !this.userBarCollapsed
   }
 
+  @Watch('$route', { immediate: true, deep: true })
+  onNavigation() {
+    this.navBarCollapsed = true
+    this.userBarCollapsed = true
+  }
 }
 </script>
 
@@ -137,13 +174,22 @@ a {
   border-right: $border;
   box-sizing: border-box;
   flex-shrink: 0;
+  min-width: 150px;
+  max-width: 350px;
   padding: $content-space;
-  width: 300px;
+  width: 25%;
 
   .logo {
+    display: block;
     margin-left: 15%;
+    min-width: 150px - 2 * $content-space;
     max-width: 50%;
   }
+
+  .menu-btn,
+  .cart-btn {
+    display: none;
+  }
 }
 
 #nav-menu {
@@ -203,8 +249,9 @@ a {
 #user-bar {
   background-color: $bg-light-color;
   flex-shrink: 0;
-  min-width: 300px;
-  width: 20%;
+  min-width: 250px;
+  max-width: 350px;
+  width: 25%;
 }
 
 .vm--modal {
@@ -244,4 +291,80 @@ a {
     transform: rotate(360deg);
   }
 }
+
+@media (max-width: 900px) {
+  #app {
+    flex-direction: column;
+  }
+
+  #nav-bar {
+    bottom: $profile-image-size + $content-space * 2; /* offset for profile block */
+    border-right: none;
+    max-width: 100%;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 2;
+
+    .logo {
+      height: $nav-header-height-sm;
+      margin: 0 auto;
+    }
+
+    .menu-btn,
+    .cart-btn {
+      display: block;
+      min-width: 25px;
+      max-width: 20%;
+      width: 25px;
+    }
+
+    .menu-btn {
+      margin-right: 5%;
+    }
+
+    .cart-btn {
+      margin-left: 5%;
+    }
+
+    &.collapsed {
+      bottom: auto;
+
+      #nav-menu {
+        display: none;
+      }
+    }
+  }
+
+  #nav-header {
+    display: flex;
+  }
+
+  #content {
+    margin-bottom: $profile-image-size + $content-space * 2; /* offset for profile block */
+    margin-top: $nav-header-height-sm + $content-space * 2; /* offset for nav header */
+  }
+
+  #user-bar {
+    bottom: 0;
+    max-width: none;
+    overflow-y: scroll;
+    position: fixed;
+    top: $nav-header-height-sm + $content-space * 2; /* offset for nav header */
+    width: 100%;
+    z-index: 1;
+
+    .cart {
+      min-height: auto;
+    }
+
+    &.collapsed {
+      top: auto;
+
+      .cart {
+        display: none;
+      }
+    }
+  }
+}
 </style>

vue-app/src/components/Cart.vue

@@ -143,10 +143,13 @@ export default class Cart extends Vue {
     )
     this.refreshContributor()
 
-    // Check verification and token balance every minute
-    setInterval(() => {
-      this.$store.dispatch(LOAD_USER_INFO)
-    }, 60 * 1000)
+    // Reload user info when round info loads or changes
+    this.$store.watch(
+      (state) => state.currentRound?.fundingRoundAddress,
+      () => {
+        this.$store.dispatch(LOAD_USER_INFO)
+      },
+    )
   }
 
   private refreshCart() {
@@ -376,7 +379,7 @@ export default class Cart extends Vue {
 .cart {
   display: flex;
   flex-direction: column;
-  min-height: calc(100vh - 110px);
+  min-height: calc(100vh - #{$profile-image-size + 2 * $content-space});
 }
 
 .cart-item {

vue-app/src/components/Profile.vue

@@ -140,7 +140,11 @@ export default class Profile extends Vue {
 @import '../styles/vars';
 
 .profile {
+  align-items: center;
   background-color: #23212f;
+  display: flex;
+  height: $profile-image-size;
+  justify-content: center;
   padding: $content-space;
 }
 
@@ -158,6 +162,7 @@ export default class Profile extends Vue {
   align-items: center;
   display: flex;
   flex-direction: row;
+  width: 100%;
 
   .profile-name {
     flex: 1;
@@ -169,10 +174,10 @@ export default class Profile extends Vue {
     border: 4px solid $button-color;
     border-radius: 25px;
     box-sizing: border-box;
-    height: 50px;
+    height: $profile-image-size;
     margin-left: 20px;
     overflow: hidden;
-    width: 50px;
+    width: $profile-image-size;
 
     img {
       height: 100%;

vue-app/src/main.ts

@@ -8,7 +8,9 @@ import Meta from 'vue-meta'
 import VModal from 'vue-js-modal'
 
 Vue.use(Meta)
-Vue.use(VModal)
+Vue.use(VModal, {
+  dynamicDefaults: { adaptive: true },
+})
 
 Vue.config.productionTip = false
 

vue-app/src/styles/_vars.scss

@@ -11,3 +11,6 @@ $error-color: #BD6B5E;
 
 $border: 2px solid $border-color;
 $content-space: 30px;
+
+$nav-header-height-sm: 40px;
+$profile-image-size: 50px;

vue-app/src/views/ProjectList.vue

@@ -103,37 +103,51 @@ export default class ProjectList extends Vue {
   flex-wrap: wrap;
   font-size: 12px;
   margin-bottom: $content-space;
+}
 
-  .round-info-item {
-    border-right: $border;
-    border-top: $border;
-    box-sizing: border-box;
-    flex: 0 0 25%;
-    overflow: hidden;
-    padding: 10px $content-space;
-
-    &:nth-child(4n + 1) {
-      padding-left: 0;
-    }
+.round-info-item {
+  border-right: $border;
+  border-top: $border;
+  box-sizing: border-box;
+  flex: 0 0 25%;
+  overflow: hidden;
+  padding: 10px $content-space;
 
-    &:nth-child(4n + 0) {
-      border-right: none;
-    }
+  &:nth-child(4n + 1) {
+    padding-left: 0;
   }
 
-  .round-info-title {
-    margin-bottom: 5px;
+  &:nth-child(4n + 0) {
+    border-right: none;
   }
+}
 
-  .round-info-value {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+.round-info-title {
+  margin-bottom: 5px;
+}
+
+.round-info-value {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .project-list {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
   gap: $content-space;
 }
+
+@media (max-width: 1150px) {
+  .round-info-item {
+    flex: 0 0 50%;
+
+    &:nth-child(2n+1) {
+      padding-left: 0;
+    }
+
+    &:nth-child(2n) {
+      border-right: none;
+    }
+  }
+}
 </style>