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 @@ @@ -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 -
- - pubkeyX - -
diff --git a/test/unit/specs/__snapshots__/PageDelegates.spec.js.snap b/test/unit/specs/__snapshots__/PageDelegates.spec.js.snap index c377231b96..4b26796b07 100644 --- a/test/unit/specs/__snapshots__/PageDelegates.spec.js.snap +++ b/test/unit/specs/__snapshots__/PageDelegates.spec.js.snap @@ -1,314 +1,128 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`PageDelegates has the expected html structure 1`] = ` -
-
-
-
-
-

- Delegates -

-
-
-

- -

-
+"
+
+
+
+
+

+ Delegates +

+
+
+

+
+
+ +
-
- -
-
-
-
-
- -
-
-
-
- Name -
-
-
-
- Public Key -
-
-
-
- % of Vote -
-
-
-
- # of Votes -
-
-
-
- Bonded by You -
-
-
+ +
+ help_outline +
+
+
+
+ +
+ +
+ +
+
+
+
+
+
+
+
+ Name
-
-
-
- -
-
- - - candidateY - - -
-
- - pubkeyY - -
-
- - 75% - -
-
- - 30,000 - -
-
-
- - 0 - -
-
+
+
+
+ % of Vote
-
-
-
- -
-
- - - candidateX - - -
-
- - pubkeyX - -
-
- - 25% - -
-
- - 10,000 - -
-
-
- - 0 - -
-
+
+
+
+ # of Votes
-
-
-

- - 0 - - selected -

- - - - - Next - - - -
-
+
+
+ Bonded by You +
+
+ + +
+
+
+ +
+
+ candidateY +
+
+ 75% +
+
+ 30,000 +
+
+
+ 0 +
+
+
+
+
+
+ +
+
+ candidateX +
+
+ 25% +
+
+ 10,000 +
+
+
+ 0 +
+
+
+ +
+
+ 0 delegates selected +
+ chevron_rightNext +
+ +" `; exports[`PageDelegates should filter the delegates 1`] = `
-
-
- Public Key -
-
@@ -506,17 +311,10 @@ exports[`PageDelegates should filter the delegates 1`] = ` class="" href="#/staking/delegates/pubkeyX" > - candidateX + candidateX
-
- - pubkeyX - -
@@ -548,12 +346,14 @@ exports[`PageDelegates should filter the delegates 1`] = `
-

- +
+ 0 - - selected -

+ + delegates selected +