mirror of
https://github.com/seigler/dash-docs
synced 2025-07-27 09:46:12 +00:00
Fixes issues with wallet-menu on handheld devices
This commit is contained in:
Igor Kuzmenko
parent
9e622be29f
commit
d0ada511d0
4 changed files with 33 additions and 156 deletions
|
|
@ -28,10 +28,10 @@ http://opensource.org/licenses/MIT.
|
||||||
<li class="{{ platformClass }}">
|
<li class="{{ platformClass }}">
|
||||||
{% if platformName == 'hardware' or platformName == 'web' %}
|
{% if platformName == 'hardware' or platformName == 'web' %}
|
||||||
{% assign platformHref = "/" | append: page.lang | append: "/wallets/" | append: platformName | append: "/" | append: platformName | append: "/" %}
|
{% assign platformHref = "/" | append: page.lang | append: "/wallets/" | append: platformName | append: "/" | append: platformName | append: "/" %}
|
||||||
{% else %}
|
|
||||||
{% assign platformHref = "#" %}
|
|
||||||
{% endif %}
|
|
||||||
<a href="{{ platformHref }}">{% translate walletcat{{platformName}} choose-your-wallet %}</a>
|
<a href="{{ platformHref }}">{% translate walletcat{{platformName}} choose-your-wallet %}</a>
|
||||||
|
{% else %}
|
||||||
|
<a>{% translate walletcat{{platformName}} choose-your-wallet %}</a>
|
||||||
|
{% endif %}
|
||||||
{% if platform.items.size > 1 %}
|
{% if platform.items.size > 1 %}
|
||||||
<ul>
|
<ul>
|
||||||
{% for item in platform.items %}
|
{% for item in platform.items %}
|
||||||
|
|
|
||||||
|
|
@ -154,4 +154,35 @@ $oses:
|
||||||
background-image: url('/img/os/wallet_menu_#{$os}.svg');
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2267,158 +2267,6 @@ h2 .rssicon{
|
||||||
padding:0;
|
padding:0;
|
||||||
border: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{
|
.download{
|
||||||
text-align:left;
|
text-align:left;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -367,8 +367,6 @@ function walletMenuListener(e) {
|
||||||
if (tt.nodeName === 'LI') addClass(tt, 'active');
|
if (tt.nodeName === 'LI') addClass(tt, 'active');
|
||||||
tt = tt.parentNode;
|
tt = tt.parentNode;
|
||||||
}
|
}
|
||||||
walletShowPlatform(t.getAttribute('data-walletcompat'));
|
|
||||||
if (isMobile() && !hasSubItems(t)) scrollToNode(document.getElementById('wallets'));
|
|
||||||
},
|
},
|
||||||
hasSubItems = function(t) {
|
hasSubItems = function(t) {
|
||||||
while (t.nodeName !== 'LI') t = t.parentNode;
|
while (t.nodeName !== 'LI') t = t.parentNode;
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue