From d0ada511d07802589461fa3ceeceb3b1e12ca0bf Mon Sep 17 00:00:00 2001
From: Igor Kuzmenko <igor@kuzzmi.com>
Date: Wed, 19 Jul 2017 13:02:49 +0200
Subject: [PATCH] Fixes issues with wallet-menu on handheld devices

---
 _includes/layout/base/wallets-menu.html |   4 +-
 _sass/_wallets-menu.scss                |  31 +++++
 _sass/screen.scss                       | 152 ------------------------
 js/main.js                              |   2 -
 4 files changed, 33 insertions(+), 156 deletions(-)

diff --git a/_includes/layout/base/wallets-menu.html b/_includes/layout/base/wallets-menu.html
index 09faf299..26f13d83 100644
--- a/_includes/layout/base/wallets-menu.html
+++ b/_includes/layout/base/wallets-menu.html
@@ -28,10 +28,10 @@ http://opensource.org/licenses/MIT.
     <li class="{{ platformClass }}">
       {% if platformName == 'hardware' or platformName == 'web' %}
       {% assign platformHref = "/" | append: page.lang | append: "/wallets/" | append: platformName | append: "/" | append: platformName | append: "/" %}
+        <a href="{{ platformHref }}">{% translate walletcat{{platformName}} choose-your-wallet %}</a>
       {% else %}
-      {% assign platformHref = "#" %}
+        <a>{% translate walletcat{{platformName}} choose-your-wallet %}</a>
       {% endif %}
-      <a href="{{ platformHref }}">{% translate walletcat{{platformName}} choose-your-wallet %}</a>
       {% if platform.items.size > 1 %}
         <ul>
         {% for item in platform.items %}
diff --git a/_sass/_wallets-menu.scss b/_sass/_wallets-menu.scss
index ea825b9d..fdb0641b 100644
--- a/_sass/_wallets-menu.scss
+++ b/_sass/_wallets-menu.scss
@@ -154,4 +154,35 @@ $oses:
             background-image: url('/img/os/wallet_menu_#{$os}.svg');
         }
     }
+
+    @media handheld,
+    only screen and ( max-width: 60em ),
+    only screen and ( max-device-width: 60em ) {
+        > ul {
+            display: block;
+            > li {
+                display: block;
+                margin-bottom: 25px;
+                border: 1px solid $dark-blue;
+
+                &:first-child {
+                    margin-left: 10px;
+                }
+                &:last-child {
+                    margin-right: 10px;
+                }
+
+                &.active {
+                    ul {
+                        display: block;
+                    }
+                }
+
+                ul {
+                    min-width: 100%;
+                    position: initial;
+                }
+            }
+        }
+    }
 }
diff --git a/_sass/screen.scss b/_sass/screen.scss
index aa92ebf7..cc104cef 100644
--- a/_sass/screen.scss
+++ b/_sass/screen.scss
@@ -2267,158 +2267,6 @@ h2 .rssicon{
         padding:0;
         border:0;
     }
-    .walletmenu{
-        -webkit-tap-highlight-color:rgba(0,0,0,0);
-        -webkit-tap-highlight-color:transparent;
-    }
-    .walletmenu>ul{
-        display:block;
-    }
-    .walletmenu>ul li{
-        display:block;
-        margin:15px 0;
-    }
-    .walletmenu>ul>li ul{
-        position:relative;
-        min-width:0;
-    }
-    .walletmenu>ul.menutap li:hover{
-        background-color:#fff;
-    }
-    .walletmenu>ul.menutap li:hover>a,
-    .walletmenu>ul.menutap li:hover>a:link,
-    .walletmenu>ul.menutap li:hover>a:active,
-    .walletmenu>ul.menutap li:hover>a:visited{
-        color:#383838;
-    }
-    .walletmenu>ul.menutap>li:hover{
-        background-position:left 6px;
-    }
-    .walletmenu>ul.menutap>li:hover>ul{
-        display:none;
-    }
-    .walletmenu>ul.menutap>li>ul>li:hover{
-        background-position:left 10px;
-    }
-    .walletmenu>ul.menutap li.active{
-        background-color:#0d579b;
-    }
-    .walletmenu>ul.menutap li.active>a,
-    .walletmenu>ul.menutap li.active>a:link,
-    .walletmenu>ul.menutap li.active>a:active,
-    .walletmenu>ul.menutap li.active>a:visited{
-        color:#fff;
-    }
-    .walletmenu>ul.menutap>li.active{
-        background-position:left -62px;
-    }
-    .walletmenu>ul.menutap>li.active>ul{
-        display:block;
-    }
-    .walletmenu>ul.menutap>li>ul>li.active{
-        background-position:left -24px;
-    }
-    .wallets{
-        width:auto;
-        height:auto;
-        -webkit-tap-highlight-color:rgba(0,0,0,0);
-        -webkit-tap-highlight-color:transparent;
-    }
-    .wallets>div:hover>span{
-        display:none;
-    }
-    .wallets>div>div{
-        border:solid 2px #2c6faf;
-        background-color:#f1f8fb;
-        -moz-transition:opacity 400ms ease-out;
-        -webkit-transition:opacity 400ms ease-out;
-        transition:opacity 400ms ease-out;
-        -webkit-border-radius:4px;
-        -moz-border-radius:4px;
-        border-radius:4px;
-    }
-    .wallets>div:hover>div{
-        opacity:0;
-        width:0;
-        height:0;
-        visibility:hidden;
-    }
-    .wallets>div>a,
-    .wallets>div>a:visited,
-    .wallets>div>a:link,
-    .wallets>div>a:active{
-        margin:0 13px 20px 13px;
-    }
-    .wallets>div:hover>a>span{
-        display:none;
-    }
-    .wallets.walletsmobile{
-        display:block;
-        padding:10px 0;
-    }
-    .wallets.walletsmobile>div>a{
-        display:none;
-    }
-    .wallets.walletsmobile>div>div,
-    .wallets.walletsmobile>div:hover>div{
-        display:block;
-        position:relative;
-        top:0;
-        left:0;
-        right:0;
-        padding:10px;
-        opacity:1;
-        width:auto;
-        height:auto;
-        visibility:visible;
-    }
-    .wallets.walletsmobile>div>div>h2:first-child+div+div+div>div{
-        padding:8px 0 8px 22px;
-        background-position:left 7px;
-    }
-    .wallets.walletsmobile>div>div>h2:first-child+div+div+div+p{
-        padding-right:5px;
-        height:auto;
-        width:auto;
-        overflow:visible;
-    }
-    .wallets.walletsmobile>div>div>h2:first-child+div+div+div+p+div{
-        position:static;
-        height:auto;
-        width:auto;
-        margin-top:10px;
-        padding:0;
-    }
-    .wallets.walletsmobile>div>div>h2:first-child+div+div+div>div.hover>div{
-        display:block;
-        background:none;
-        width:auto;
-        height:auto;
-        margin-left:0;
-        margin-top:10px;
-    }
-    .wallets.walletsmobile>div>div>h2:first-child+div+div+div>div>div>p,
-    .wallets.walletsmobile>div>div>h2:first-child+div+div+div>div>div>div,
-    .wallets.walletsmobile>div>div>h2:first-child+div+div+div>div>div>span{
-        display:none;
-        position:relative;
-        width:auto;
-        height:auto;
-        visibility:visible;
-        opacity:1;
-        border:0;
-        background:none;
-        padding:0;
-        top:0;
-        left:-20px;
-    }
-    .wallets.walletsmobile>div>div>h2:first-child+div+div+div>div.hover>div>p,
-    .wallets.walletsmobile>div>div>h2:first-child+div+div+div>div.hover>div>div{
-        display:block;
-    }
-    .wallets.walletsmobile>div>div>h2:first-child+div+div+div>div.hover>div>span{
-        display:none;
-    }
     .download{
         text-align:left;
     }
diff --git a/js/main.js b/js/main.js
index 4ed71b99..431ea59d 100644
--- a/js/main.js
+++ b/js/main.js
@@ -367,8 +367,6 @@ function walletMenuListener(e) {
         if (tt.nodeName === 'LI') addClass(tt, 'active');
         tt = tt.parentNode;
       }
-      walletShowPlatform(t.getAttribute('data-walletcompat'));
-      if (isMobile() && !hasSubItems(t)) scrollToNode(document.getElementById('wallets'));
     },
     hasSubItems = function(t) {
       while (t.nodeName !== 'LI') t = t.parentNode;