Peng/282 fix mobile

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

@@ -1,53 +1,25 @@
 <template lang='pug'>
 footer.app-footer
-  .app-footer-container(v-if='connected')
-    .afi.afi-success
-      i.material-icons.success done
-      span {{ lastHeader.chain_id }} (\#{{ lastHeader.height }})
-    .afi
-      i.material-icons settings_ethernet
-      span {{ nodeIP }}
-  .app-footer-container(v-else)
-    .afi
-      i.material-icons.fa-spin rotate_right
-      span Connecting&hellip;
+  connectivity
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import Connectivity from 'common/NiConnectivity'
 export default {
   name: 'app-footer',
-  computed: {
-    ...mapGetters(['lastHeader', 'nodeIP', 'connected'])
+  components: {
+    Connectivity
   }
 }
 </script>
 
 <style lang="stylus">
 @require '~variables'
 
-.app-footer-container
-  border-top px solid bc
-  height 3rem + px
-  display flex
-  align-items center
-  justify-content space-between
-  background app-bg
+.app-footer
+  display none
 
-  color dim
-
-  .afi
-    display flex
-    align-items center
-    padding 0 1rem
-
-    i
-      margin-right 0.5rem
-
-    .success
-      color success
-
-@media screen and (max-width: 567px)
-  .app-footer-container
-    display none
+@media screen and (min-width: 1024px)
+  .app-footer
+    display block
 </style>

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

@@ -13,6 +13,8 @@ menu.app-menu
       list-item(to="/blockchain" exact @click.native="close" title="Blockchain")
       list-item(to="/validators" exact @click.native="close" title="Validators"
         v-bind:class="{ 'active': isValidatorPage }")
+    part(title='Connectivity')
+      connectivity
   user-pane
 </template>
 
@@ -21,13 +23,15 @@ import PerfectScrollbar from 'perfect-scrollbar'
 import { mapGetters } from 'vuex'
 import Btn from '@nylira/vue-button'
 import noScroll from 'no-scroll'
+import Connectivity from 'common/NiConnectivity'
 import ListItem from 'common/NiListItem'
 import UserPane from 'common/NiUserPane'
 import Part from 'common/NiPart'
 export default {
   name: 'app-menu',
   components: {
     Btn,
+    Connectivity,
     ListItem,
     Part,
     UserPane
@@ -117,4 +121,6 @@ export default {
 @media screen and (min-width:1024px)
   .app-menu
     flex 1
+    .ni-connectivity
+      display none
 </style>

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

@@ -0,0 +1,43 @@
+<template lang='pug'>
+.ni-connectivity(v-if='connected')
+  list-item(icon="done" :title="blockString")
+  list-item(icon="settings_ethernet" :title="nodeIP")
+.ni-connectivity(v-else)
+  list-item(icon="rotate_right" title="Connecting...")
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import ListItem from 'common/NiListItem'
+import num from 'scripts/num'
+export default {
+  name: 'ni-connectivity',
+  components: {
+    ListItem
+  },
+  computed: {
+    ...mapGetters(['lastHeader', 'nodeIP', 'connected']),
+    blockString () {
+      return `${this.lastHeader.chain_id} (#${num.prettyInt(this.lastHeader.height)})`
+    }
+  },
+  data: () => ({
+    num: num
+  })
+}
+</script>
+
+<style lang="stylus">
+@require '~variables'
+
+.ni-connectivity
+  background app-bg
+
+@media screen and (min-width: 1024px)
+  .ni-connectivity
+    border-top px solid bc
+    height 3rem + px
+    display flex
+    align-items center
+    justify-content space-between
+</style>

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

@@ -22,10 +22,25 @@ export default {
   computed: {
     ...mapGetters(['config'])
   },
+  data: () => ({
+    ps: ''
+  }),
+  methods: {
+    handleResize () {
+      if (this.config.desktop) {
+        const container = this.$el.querySelector('.ni-page-main')
+        this.ps = new PerfectScrollbar(container)
+        // console.log('its desktop', this.ps)
+      } else if (this.ps.destroy) {
+        this.ps.destroy()
+        this.ps = null
+        // console.log('its not desktop', this.ps)
+      }
+    }
+  },
   mounted () {
-    const container = this.$el.querySelector('.ni-page-main')
-    // eslint-disable-next-line no-new
-    new PerfectScrollbar(container)
+    this.handleResize()
+    window.addEventListener('resize', this.handleResize)
   }
 }
 </script>

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

@@ -96,9 +96,9 @@ export default {
       i
         color dim
 
-@media screen and (max-width: 567px)
+@media screen and (max-width: 1023px)
   .ni-tool-bar
-    z-index z(toolbar)
+    z-index z(toolBar)
     position fixed
     bottom 0
     left 0
@@ -112,13 +112,10 @@ export default {
   .ni-page
     padding-bottom 3rem
 
-@media screen and (min-width: 568px)
+@media screen and (min-width: 1024px)
   .ni-tool-bar-container
     .main
       justify-content flex-end
-
-@media screen and (min-width: 1024px)
-  .ni-tool-bar-container
     a
       margin-top 0.7rem
 </style>

test/unit/specs/NiConnectivity.spec.js

@@ -0,0 +1,50 @@
+import Vuex from 'vuex'
+import { mount, createLocalVue } from 'vue-test-utils'
+import htmlBeautify from 'html-beautify'
+import NiConnectivity from 'common/NiConnectivity'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+
+describe('NiConnectivity', () => {
+  let wrapper
+  let store = new Vuex.Store({
+    getters: {
+      connected: () => true,
+      lastHeader: () => ({ chain_id: 'gaia-home', height: '31337' }),
+      nodeIP: () => '127.0.0.1'
+    }
+  })
+  store.commit = jest.fn()
+
+  beforeEach(() => {
+    wrapper = mount(NiConnectivity, {
+      localVue,
+      store
+    })
+  })
+
+  it('has the expected html structure', () => {
+    expect(htmlBeautify(wrapper.html())).toMatchSnapshot()
+  })
+
+  it('has a network icon', () => {
+    expect(wrapper.find('.ni-li:nth-child(1) i.material-icons').text().trim())
+      .toBe('done')
+  })
+
+  it('has a network string', () => {
+    expect(wrapper.find('.ni-li:nth-child(1) .ni-li-title').text().trim())
+      .toBe('gaia-home (#31,337)')
+  })
+
+  it('has an IP icon', () => {
+    expect(wrapper.find('.ni-li:nth-child(2) i.material-icons').text().trim())
+      .toBe('settings_ethernet')
+  })
+
+  it('has an IP string', () => {
+    expect(wrapper.find('.ni-li:nth-child(2) .ni-li-title').text().trim())
+      .toBe('127.0.0.1')
+  })
+})

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

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NiConnectivity has the expected html structure 1`] = `
+"<div class=\\"ni-connectivity\\">
+   <div class=\\"ni-li\\">
+      <div class=\\"ni-li-container\\">
+         <div class=\\"ni-li-thumb\\">
+            <i class=\\"material-icons\\">done</i>
+         </div>
+<div class=\\"ni-li-label\\">
+   <div class=\\"ni-li-title\\">
+      gaia-home (#31,337)
+   </div>
+<div class=\\"ni-li-subtitle\\"></div>
+</div>
+</div>
+</div>
+<div class=\\"ni-li\\">
+   <div class=\\"ni-li-container\\">
+      <div class=\\"ni-li-thumb\\">
+         <i class=\\"material-icons\\">settings_ethernet</i>
+      </div>
+<div class=\\"ni-li-label\\">
+   <div class=\\"ni-li-title\\">
+      127.0.0.1
+   </div>
+<div class=\\"ni-li-subtitle\\"></div>
+</div>
+</div>
+</div>
+</div>"
+`;

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

@@ -37,28 +37,7 @@ exports[`NiPage has the expected html structure 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main ps"
-  >
-    <div
-      class="ps__rail-x"
-      style="left: 0px; top: 0px;"
-    >
-      <div
-        class="ps__thumb-x"
-        style="left: 0px; width: 0px;"
-        tabindex="0"
-      />
-    </div>
-    <div
-      class="ps__rail-y"
-      style="top: 0px; left: 0px;"
-    >
-      <div
-        class="ps__thumb-y"
-        style="top: 0px; height: 0px;"
-        tabindex="0"
-      />
-    </div>
-  </main>
+    class="ni-page-main"
+  />
 </div>
 `;

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

@@ -36,7 +36,7 @@ exports[`Page404 has the expected html structure 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main ps"
+    class="ni-page-main"
   >
     <section
       class="ni-part"
@@ -150,26 +150,6 @@ exports[`Page404 has the expected html structure 1`] = `
         </main>
       </div>
     </section>
-    <div
-      class="ps__rail-x"
-      style="left: 0px; top: 0px;"
-    >
-      <div
-        class="ps__thumb-x"
-        style="left: 0px; width: 0px;"
-        tabindex="0"
-      />
-    </div>
-    <div
-      class="ps__rail-y"
-      style="top: 0px; left: 0px;"
-    >
-      <div
-        class="ps__thumb-y"
-        style="top: 0px; height: 0px;"
-        tabindex="0"
-      />
-    </div>
   </main>
 </div>
 `;