joshua/dash-docs
1
0
Fork 0
mirror of https://github.com/seigler/dash-docs synced 2025-07-26 17:26:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixes issues with wallet-menu on handheld devices

Browse source
This commit is contained in:
Igor Kuzmenko 2017-07-19 13:02:49 +02:00
parent 9e622be29f
commit d0ada511d0
4 changed files with 33 additions and 156 deletions
Download patch file Download diff file Expand all files Collapse all files

4
_includes/layout/base/wallets-menu.html
View file

@ -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 %}

31
_sass/_wallets-menu.scss
View file

@ -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;
}
}
}
}
}

152
_sass/screen.scss
View file

@ -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;
}

2
js/main.js
View file

@ -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;