made entire wallet clickable if he has one os

Overtorment · May 29, 2018 · 9bfc089 · 9bfc089
1 parent cf165f0
commit 9bfc089
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 2 deletions.
diff --git a/_includes/layout/base/wallets-filter.html b/_includes/layout/base/wallets-filter.html
@@ -156,7 +156,6 @@
       subItem.addEventListener('click', function() {
 
         this.classList.add('active');
-        console.log(this);
 
         for (var a = 0; a < accSub.length; a++) {
           if (accSub[a] != this) {
@@ -191,7 +190,46 @@
     }    
   }
   showRelevantWallets();
+
+  function makeWalletClickable() {
+    var walletsList = document.querySelectorAll('.allwallets-list-item');
+
+    for (var i = 0; i < walletsList.length; i++) {
+      var wallet = walletsList[i];
+
+      wallet.addEventListener("mouseenter", function () {
+        var walletOsList = this.querySelectorAll('.wallet-list-os-link:not(.is-hidden)');
+
+        if (walletOsList.length === 1) {
+          this.classList.add('mouseenter')
+        }
+      });
+
+      wallet.addEventListener("mouseleave", function () {
+        var walletOsList = this.querySelectorAll('.wallet-list-os-link:not(.is-hidden)');
 
+        if (walletOsList.length === 1) {
+          this.classList.remove('mouseenter')
+        }
+      });
+
+    }
+
+     walletsList.forEach(function (wallet) {
+      return wallet.addEventListener("click", function () {
+        var walletOsList = this.querySelectorAll('.wallet-list-os-link:not(.is-hidden)');
+
+        if (walletOsList.length === 1) {
+          var walletHref = walletOsList[0].href;
+          window.location = walletHref;
+        }
+      });
+    });
+
+
+  }
+  makeWalletClickable();
+
   function hideNotRelevantWallets() {
     var selectorsList = document.querySelectorAll("a[data-selector]");
     var platformSelectorList = document.querySelectorAll("a[data-platform-selector]");

diff --git a/_includes/layout/base/wallets-menu.html b/_includes/layout/base/wallets-menu.html
@@ -169,4 +169,42 @@
   }
   accordionDesktop();
 
+  function makeWalletClickable() {
+    document.addEventListener('DOMContentLoaded', function () {
+      var walletsList = document.querySelectorAll('.allwallets-list-item');
+
+      for (var i = 0; i < walletsList.length; i++) {
+        var wallet = walletsList[i];
+
+        wallet.addEventListener("mouseenter", function () {
+          var walletOsList = this.querySelectorAll('.wallet-list-os-link:not(.is-hidden)');
+
+          if (walletOsList.length === 1) {
+            this.classList.add('mouseenter');
+          }
+        });
+
+        wallet.addEventListener("mouseleave", function () {
+          var walletOsList = this.querySelectorAll('.wallet-list-os-link:not(.is-hidden)');
+
+          if (walletOsList.length === 1) {
+            this.classList.remove('mouseenter');          }
+        });
+
+      }
+
+      walletsList.forEach(function (wallet) {
+        return wallet.addEventListener("click", function () {
+          var walletOsList = this.querySelectorAll('.wallet-list-os-link:not(.is-hidden)');
+
+          if (walletOsList.length === 1) {
+            var walletHref = walletOsList[0].href;
+            window.location = walletHref;
+          }
+        });
+      });
+    });
+  }
+  makeWalletClickable();
+
 </script>
diff --git a/_sass/_wallets.scss b/_sass/_wallets.scss
@@ -36,6 +36,11 @@ $black: #13161F;
             margin: 20px auto -12px;
         }
     }
+    .allwallets-list-item.mouseenter {
+        .wallet-list-item-link img {
+            margin: 20px auto 5px;
+        }
+    }
     .wallet-list-item {
         display: inline-block;
         width: 14.2%;
@@ -86,6 +91,13 @@ $black: #13161F;
                 background-position: center;
             }
         }
+        &.mouseenter {
+            cursor: pointer;
+
+            .wallet-list-os {
+                margin-top: 0;
+            }
+        }
         .wallet-list-os-link:hover {
             background: #f8f8f8;
 
@@ -632,6 +644,9 @@ $scores:
 .allwallets-list-item:hover .wallet-hint {
     color: #898f8f;
 }
+.allwallets-list-item.mouseenter .wallet-hint {
+    color: transparent;
+}
 @media handheld, only screen and ( min-width: 769px ) {
     .wallet-list div[data-category].is-hidden {
         display: none;

diff --git a/_sass/screen.scss b/_sass/screen.scss
@@ -376,7 +376,7 @@ hr {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
 }
-.is-expand:hover::after{
+.menusimple > li:hover .is-expand::after{
    -webkit-transform: translateY(-50%) rotate(180deg);
            transform: translateY(-50%) rotate(180deg);
 }