mouse scroll is done

MyEtherWallet · Aug 9, 2018 · a596d6d · a596d6d · mew-bot · Aug 9, 2018
1 parent dda2661
commit a596d6d
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 3 deletions.
diff --git a/src/layouts/CreateWalletWarningLayout/CreateWalletWarningLayout.scss b/src/layouts/CreateWalletWarningLayout/CreateWalletWarningLayout.scss
@@ -1,5 +1,39 @@
 @import '~@/scss/GlobalVariables';
 
+.create-wallet-warnings {
+  position: relative;
+}
+
+.nav-dots {
+  position: absolute;
+  z-index: 9999;
+  right: 10vw;
+  top: calc(50vh - 125px);
+  text-align: center;
+  p {
+    font-size: 17px;
+  }
+  ul {
+    margin: -7px 0;
+
+    li {
+      border-radius: 100px;
+      width: 6px;
+      height: 6px;
+      background-color: $dark-blue-9;
+      margin: 10px;
+      padding: 0;
+      transition: all 0.2s ease;
+
+      &.active {
+        background-color: $white;
+      }
+    }
+  }
+
+}
+
+
 .wrap {
   background-color: $about-mew-spaceman-background-color;
   background-image: url('~@/assets/images/background/404bg.jpg');
@@ -13,11 +47,10 @@
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-  //overflow-y: auto;
 
   .cww {
     position: absolute;
-    transition: all 0.3s ease;
+    transition: all 0.5s ease;
     bottom: 0;
     opacity: 1;
   }

diff --git a/src/layouts/CreateWalletWarningLayout/CreateWalletWarningLayout.vue b/src/layouts/CreateWalletWarningLayout/CreateWalletWarningLayout.vue
@@ -2,6 +2,19 @@
   <div class="create-wallet-warnings">
 
     <div class="wrap">
+
+      <div class="nav-dots">
+        <p><i class="fa fa-angle-up" aria-hidden="true"></i></p>
+        <ul>
+          <li :class="cwwCurrent == 0 ? 'active' : ''"></li>
+          <li :class="cwwCurrent == 1 ? 'active' : ''"></li>
+          <li :class="cwwCurrent == 2 ? 'active' : ''"></li>
+          <li :class="cwwCurrent == 3 ? 'active' : ''"></li>
+          <li :class="cwwCurrent == 4 ? 'active' : ''"></li>
+        </ul>
+        <p><i class="fa fa-angle-down" aria-hidden="true"></i></p>
+      </div>
+
       <what-is-mew            :progressBarValue="'__20percent'"   class="cww cww1"                        ref="cww1" />
       <where-my-funds-stored  :progressBarValue="'__40percent'"   class="cww cww2 positionBottom"         ref="cww2" />
       <what-if-i-lose-key     :progressBarValue="'__60percent'"   class="cww cww3 positionBottom"         ref="cww3" />
@@ -47,7 +60,6 @@ export default {
   },
   data () {
     return {
-      cwwCount: this.$refs.length,
       cwwCurrent: 0,
       cwwRefs: [
         'cww1',
@@ -76,10 +88,13 @@ export default {
   },
   mounted: function () {
     var _this = this
+    var navDots = document.querySelectorAll('.nav-dots')
 
     window.addEventListener('wheel', function (e) {
       if (e.deltaY < 0) {
         _this.mouseScrollUp()
+
+        console.log(navDots[0])
       }
       if (e.deltaY > 0) {
         _this.mouseScrollDown()