Merge pull request #367 from cosmos/peng/289-improve-page-delegates

Peng/289 improve page delegates

app/src/renderer/components/common/NiPage.vue

@@ -55,6 +55,8 @@ export default {
 .ni-page-main
   flex 1
   position relative
+  display flex
+  flex-flow column nowrap
 
 .ni-page-title
   color bright

app/src/renderer/components/staking/LiDelegate.vue

@@ -5,11 +5,8 @@
     i.fa.fa-square-o(v-else @click='add(delegate)')
   .li-delegate__value.name
     span
-      router-link(v-if="config.devMode" :to="{ name: 'delegate', params: { delegate: delegate.id }}")
-        | {{ ' ' + delegate.moniker }}
+      router-link(v-if="config.devMode" :to="{ name: 'delegate', params: { delegate: delegate.id }}")  {{ ' ' + delegate.moniker }}
       a(v-else) {{ ' ' + delegate.moniker }}
-  .li-delegate__value.id
-    span {{ delegate.id }}
   .li-delegate__value.percent_of_vote
     span {{ num.percentInt(bondedPercent) }}
   .li-delegate__value.number_of_votes.num.bar
@@ -89,25 +86,17 @@ export default {
   height 3rem
 
 .li-delegate__value
-  flex 3
+  flex 1
   display flex
   align-items center
   min-width 0
 
   &:first-child
     flex 0.5
 
-  &.name
+  &.number_of_votes
     flex 2
 
-  &.id
-    flex 2
-
-  &.percent_of_vote,
-  &.number_of_votes,
-  &.bonded_by_you
-    flex 1
-
   &.id span
     i.fa
       margin-right 0.25rem

app/src/renderer/components/staking/PageDelegates.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-page(title='Delegates')
+page#page-delegates(title='Delegates')
   div(slot="menu"): tool-bar
     a(@click='setSearch(true)')
       i.material-icons search
@@ -10,14 +10,15 @@ page(title='Delegates')
 
   modal-search(type="delegates")
 
-  data-error(v-if="delegates.length === 0")
-  data-empty-search(v-else-if="filteredDelegates.length === 0")
-  div.delegate-container(v-else)
-    panel-sort(:sort='sort')
-    li-delegate(v-for='i in filteredDelegates' :key='i.id' :delegate='i')
+  .delegates-container
+    data-error(v-if="delegates.length === 0")
+    data-empty-search(v-else-if="filteredDelegates.length === 0")
+    template(v-else)
+      panel-sort(:sort='sort')
+      li-delegate(v-for='i in filteredDelegates' :key='i.id' :delegate='i')
 
-  div.fixed-button-bar
-    h3 <b>{{ shoppingCart.length }}</b> selected
+  .fixed-button-bar
+    .label #[strong {{ shoppingCart.length }}] delegates selected
     btn.btn__primary(type="link" to="/staking/bond" :disabled="shoppingCart.length < 1" icon="chevron_right" icon-pos="right" value="Next")
 </template>
 
@@ -77,10 +78,9 @@ export default {
       properties: [
         { id: 0, title: '', value: '' },
         { id: 1, title: 'Name', value: 'description.moniker', class: 'name' },
-        { id: 2, title: 'Public Key', value: 'id', class: 'id' },
-        { id: 3, title: '% of Vote', value: 'shares', class: 'percent_of_vote' },
-        { id: 4, title: '# of Votes', value: 'voting_power', class: 'number_of_votes' },
-        { id: 5, title: 'Bonded by You', value: 'bonded', class: 'bonded_by_you' }
+        { id: 2, title: '% of Vote', value: 'shares', class: 'percent_of_vote' },
+        { id: 3, title: '# of Votes', value: 'voting_power', class: 'number_of_votes' },
+        { id: 4, title: 'Bonded by You', value: 'bonded', class: 'bonded_by_you' }
       ]
     }
   }),
@@ -106,27 +106,18 @@ export default {
 <style lang="stylus">
 @require '~variables'
 
-.action-container
-  padding 1rem 0 1rem 1rem
-  min-height 5rem
+.delegates-container
+  flex 1
 
 .fixed-button-bar
-  position absolute
   width 100%
-  background app-bg
-  bottom calc(3rem + 1px)
-  left 0
-  bottom 0
   padding 1rem
+  background app-fg
   display flex
   justify-content space-between
-  border-top 1px solid bc
-
-@media screen and (max-width: 768px)
-  .delegate-container
-    padding 0.5rem
-
-  .li-delegate__value
-    &.id
-      display none
+  .label
+    color bright
+    line-height 2rem
+    strong
+      font-weight bold
 </style>

app/src/renderer/components/staking/PanelSort.vue

@@ -45,7 +45,7 @@ export default {
   border-bottom px solid bc
 
 .sort-by
-  flex 3
+  flex 1
   cursor pointer
   user-select none
   display flex
@@ -54,7 +54,7 @@ export default {
   min-width 0
 
   &:first-child
-    flex 0.5 1 0%;
+    flex 0.5
 
   .label
     font-size sm
@@ -86,17 +86,9 @@ export default {
     &:after
       color txt
 
-  &.name
+  &.number_of_votes
     flex 2
 
-  &.id
-    flex 2
-
-  &.percent_of_vote,
-  &.number_of_votes,
-  &.bonded_by_you
-    flex 1
-
 @media screen and (max-width: 768px)
   .sort-by
     &.id

app/src/renderer/styles/app.styl

@@ -47,6 +47,11 @@ a
 .ni-field
   border-radius 2px!important
 
+#app-content
+  flex 1
+  display flex
+  flex-flow column no-wrap
+
 @media screen and (min-width: 1024px)
   #app
     padding-top 0
@@ -73,10 +78,5 @@ a
       img
         height 1.25rem
 
-  #app-content
-    flex 1
-    display flex
-    flex-flow column no-wrap
-
  .desktop-only
     display block

test/unit/specs/PageDelegates.spec.js

@@ -42,7 +42,7 @@ describe('PageDelegates', () => {
   })
 
   it('has the expected html structure', () => {
-    expect(wrapper.vm.$el).toMatchSnapshot()
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
   })
 
   it('should show the search on click', () => {
@@ -77,7 +77,7 @@ describe('PageDelegates', () => {
     store.commit('addToCart', store.state.delegates[0])
     store.commit('addToCart', store.state.delegates[1])
     wrapper.update()
-    expect(htmlBeautify(wrapper.html())).toContain('<b>2</b> selected')
+    expect(wrapper.find('.fixed-button-bar strong').text().trim()).toContain('2')
   })
 
   it('should show an error if there are no delegates', () => {

test/unit/specs/__snapshots__/LiDelegate.spec.js.snap

@@ -22,17 +22,10 @@ exports[`LiDelegate has the expected html structure 1`] = `
           class=""
           href="#/staking/delegates/pubkeyX"
         >
-           candidateX
+            candidateX
         </a>
       </span>
     </div>
-    <div
-      class="li-delegate__value id"
-    >
-      <span>
-        pubkeyX
-      </span>
-    </div>
     <div
       class="li-delegate__value percent_of_vote"
     >