diff --git a/app/src/renderer/components/common/NiPage.vue b/app/src/renderer/components/common/NiPage.vue index 12139c16a7..c46dfcab94 100644 --- a/app/src/renderer/components/common/NiPage.vue +++ b/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 diff --git a/app/src/renderer/components/staking/LiDelegate.vue b/app/src/renderer/components/staking/LiDelegate.vue index 6857dbff22..ff7d5b383b 100644 --- a/app/src/renderer/components/staking/LiDelegate.vue +++ b/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,7 +86,7 @@ export default { height 3rem .li-delegate__value - flex 3 + flex 1 display flex align-items center min-width 0 @@ -97,17 +94,9 @@ export default { &: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 diff --git a/app/src/renderer/components/staking/PageDelegates.vue b/app/src/renderer/components/staking/PageDelegates.vue index 7dace68c16..4b9575991a 100644 --- a/app/src/renderer/components/staking/PageDelegates.vue +++ b/app/src/renderer/components/staking/PageDelegates.vue @@ -1,5 +1,5 @@ -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 {{ shoppingCart.length }} 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") @@ -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 { diff --git a/app/src/renderer/components/staking/PanelSort.vue b/app/src/renderer/components/staking/PanelSort.vue index 3386684c1b..bd566d4643 100644 --- a/app/src/renderer/components/staking/PanelSort.vue +++ b/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 diff --git a/app/src/renderer/styles/app.styl b/app/src/renderer/styles/app.styl index 03b7a73f78..5693291f94 100644 --- a/app/src/renderer/styles/app.styl +++ b/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 diff --git a/test/unit/specs/PageDelegates.spec.js b/test/unit/specs/PageDelegates.spec.js index a7f0f42d6f..aac1497f82 100644 --- a/test/unit/specs/PageDelegates.spec.js +++ b/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('2 selected') + expect(wrapper.find('.fixed-button-bar strong').text().trim()).toContain('2') }) it('should show an error if there are no delegates', () => { diff --git a/test/unit/specs/__snapshots__/LiDelegate.spec.js.snap b/test/unit/specs/__snapshots__/LiDelegate.spec.js.snap index ad452f6b9c..feb6e08a6b 100644 --- a/test/unit/specs/__snapshots__/LiDelegate.spec.js.snap +++ b/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 -