Merge pull request #505 from cosmos/peng/359-scrollbars

peng/359 update scrollbars, max-width
luniehq · Feb 27, 2018 · dba5a33 · dba5a33
2 parents fb3d809 + 2314964
commit dba5a33
Show file tree

Hide file tree

Showing 15 changed files with 202 additions and 31 deletions.
diff --git a/app/src/renderer/components/common/NiPage.vue b/app/src/renderer/components/common/NiPage.vue
@@ -25,20 +25,10 @@ export default {
   data: () => ({
     ps: ''
   }),
-  methods: {
-    handleResize () {
-      if (this.config.desktop) {
-        const container = this.$el.querySelector('.ni-page-main')
-        this.ps = new PerfectScrollbar(container)
-      } else if (this.ps) {
-        this.ps.destroy()
-        this.ps = null
-      }
-    }
-  },
-  mounted () {
-    this.handleResize()
-    window.addEventListener('resize', this.handleResize)
+  async mounted () {
+    await this.$nextTick()
+    const container = this.$el.querySelector('.ni-page-main')
+    this.ps = new PerfectScrollbar(container)
   }
 }
 </script>
@@ -55,7 +45,6 @@ export default {
 .ni-page-main
   flex 1
   position relative
-  max-width width-main-max
 
 .ni-page-title
   color bright

diff --git a/app/src/renderer/components/common/NiPart.vue b/app/src/renderer/components/common/NiPart.vue
@@ -23,7 +23,7 @@ export default {
 
 .ni-part
   position relative
-  max-width width-main
+  max-width width-main-max
 
 .ni-part-container
 .ni-part-header

diff --git a/app/src/renderer/styles/app.styl b/app/src/renderer/styles/app.styl
@@ -12,6 +12,9 @@ reset-html5()
 html, body, #app
   background app-bg
 
+html
+  overflow hidden
+
 a
   color link
   text-decoration none
@@ -28,7 +31,7 @@ a
   padding-top 3rem
   height 100vh
   width 100vw
-  max-width 100%
+  max-width 100% // fixes bug where horizontal scrollbar appears
   font-weight 300
 
   display flex

diff --git a/app/src/renderer/styles/variables.styl b/app/src/renderer/styles/variables.styl
@@ -50,7 +50,7 @@ danger = hsl(0,100%,55%)
 // sizes
 aw = 64rem
 width-main = 100%
-width-main-max = 64rem
+width-main-max = 48rem
 width-side = 16rem
 bw = 3*px
 

diff --git a/test/e2e/wallet.js b/test/e2e/wallet.js
@@ -111,7 +111,7 @@ test('wallet', async function (t) {
       await client.$('.material-icons=refresh').click()
 
       let mycoinEl = () => balanceEl('fermion')
-      await waitForText(mycoinEl, '9007199254740892')
+      await waitForText(mycoinEl, '9007199254740892', 10000)
       t.pass('balance is reduced by 100')
       t.end()
     })

diff --git a/test/unit/specs/components/common/__snapshots__/NiPage.spec.js.snap b/test/unit/specs/components/common/__snapshots__/NiPage.spec.js.snap
@@ -37,7 +37,28 @@ exports[`NiPage has the expected html structure 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-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>
 </div>
 `;
diff --git a/test/unit/specs/components/common/__snapshots__/Page404.spec.js.snap b/test/unit/specs/components/common/__snapshots__/Page404.spec.js.snap
@@ -36,7 +36,7 @@ exports[`Page404 has the expected html structure 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main"
+    class="ni-page-main ps"
   >
     <section
       class="ni-part"
@@ -150,6 +150,26 @@ 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>
 `;
diff --git a/test/unit/specs/components/monitor/__snapshots__/PageBlock.spec.js.snap b/test/unit/specs/components/monitor/__snapshots__/PageBlock.spec.js.snap
@@ -46,7 +46,7 @@ exports[`PageBlock has the expected html structure 1`] = `
 </menu>
 </div>
 </header>
-<main class=\\"ni-page-main\\">
+<main class=\\"ni-page-main ps\\">
    <section class=\\"ni-part\\">
       <div class=\\"ni-part-container\\">
          <!---->
@@ -253,6 +253,12 @@ exports[`PageBlock has the expected html structure 1`] = `
 </main>
 </div>
 </section>
+<div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
+   <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
+</div>
+<div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
+   <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
+</div>
 </main>
 </div>"
 `;

diff --git a/test/unit/specs/components/monitor/__snapshots__/PageBlocks.spec.js.snap b/test/unit/specs/components/monitor/__snapshots__/PageBlocks.spec.js.snap
@@ -42,7 +42,7 @@ exports[`PageBlocks has the expected html structure 1`] = `
 </menu>
 </div>
 </header>
-<main class=\\"ni-page-main\\">
+<main class=\\"ni-page-main ps\\">
    <modal-search type=\\"blocks\\"></modal-search>
       <!---->
    <section class=\\"ni-part\\">
@@ -152,6 +152,12 @@ exports[`PageBlocks has the expected html structure 1`] = `
    </main>
 </div>
 </section>
+<div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
+   <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
+</div>
+<div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
+   <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
+</div>
 </main>
 </div>"
 `;
diff --git a/test/unit/specs/components/staking/__snapshots__/PageBond.spec.js.snap b/test/unit/specs/components/staking/__snapshots__/PageBond.spec.js.snap
@@ -78,7 +78,7 @@ exports[`PageBond has the expected html structure 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main"
+    class="ni-page-main ps"
   >
     <section
       class="ni-part"
@@ -456,6 +456,26 @@ exports[`PageBond 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>
 `;
diff --git a/test/unit/specs/components/staking/__snapshots__/PageDelegate.spec.js.snap b/test/unit/specs/components/staking/__snapshots__/PageDelegate.spec.js.snap
@@ -94,7 +94,7 @@ exports[`PageDelegate has the expected html structure 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main"
+    class="ni-page-main ps"
   >
     <section
       class="ni-part"
@@ -322,6 +322,26 @@ exports[`PageDelegate 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>
 `;
diff --git a/test/unit/specs/components/staking/__snapshots__/PageDelegates.spec.js.snap b/test/unit/specs/components/staking/__snapshots__/PageDelegates.spec.js.snap
@@ -46,7 +46,7 @@ exports[`PageDelegates has the expected html structure 1`] = `
 </menu>
 </div>
 </header>
-<main class=\\"ni-page-main\\">
+<main class=\\"ni-page-main ps\\">
    <!---->
    <div class=\\"delegates-container\\">
       <div class=\\"panel-sort\\">
@@ -133,6 +133,12 @@ exports[`PageDelegates has the expected html structure 1`] = `
          <strong>0</strong> delegates selected
       </div>
    <a href=\\"#/staking/bond\\" class=\\"ni-btn\\" disabled=\\"disabled\\"><span class=\\"ni-btn__container ni-btn__icon-right ni-btn--primary\\"><i aria-hidden=\\"true\\" class=\\"ni-btn__icon material-icons\\">chevron_right</i><span class=\\"ni-btn__value\\">Next</span></span></a>
+</div>
+   <div class=\\"ps__rail-x\\" style=\\"left: 0px; top: 0px;\\">
+      <div class=\\"ps__thumb-x\\" tabindex=\\"0\\" style=\\"left: 0px; width: 0px;\\"></div>
+</div>
+   <div class=\\"ps__rail-y\\" style=\\"top: 0px; left: 0px;\\">
+      <div class=\\"ps__thumb-y\\" tabindex=\\"0\\" style=\\"top: 0px; height: 0px;\\"></div>
 </div>
 </main>
 </div>"

diff --git a/test/unit/specs/components/wallet/__snapshots__/PageBalances.spec.js.snap b/test/unit/specs/components/wallet/__snapshots__/PageBalances.spec.js.snap
@@ -103,7 +103,7 @@ exports[`PageBalances has the expected html structure 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main"
+    class="ni-page-main ps"
   >
     <modal-search
       type="balances"
@@ -319,6 +319,26 @@ exports[`PageBalances has the expected html structure 1`] = `
         />
       </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>
 `;
@@ -426,7 +446,7 @@ exports[`PageBalances should filter the balances 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main"
+    class="ni-page-main ps"
   >
     <modal-search
       type="balances"
@@ -642,6 +662,26 @@ exports[`PageBalances should filter the balances 1`] = `
         />
       </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>
 `;
diff --git a/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap b/test/unit/specs/components/wallet/__snapshots__/PageSend.spec.js.snap
@@ -78,7 +78,7 @@ exports[`PageSend has the expected html structure 1`] = `
     </div>
   </header>
   <main
-    class="ni-page-main"
+    class="ni-page-main ps"
   >
     <form
       class="ni-form"
@@ -535,6 +535,26 @@ exports[`PageSend has the expected html structure 1`] = `
         </footer>
       </div>
     </form>
+    <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>
 `;