mirror of
https://github.com/seigler/dash-docs
synced 2025-07-27 09:46:12 +00:00
Add a mobile version of the "Choose your wallet" page
This commit is contained in:
Saivann
parent
4fbac3a4f5
commit
9627b39db7
3 changed files with 294 additions and 12 deletions
|
|
@ -896,6 +896,9 @@ li p{
|
||||||
.previewrow .walletinfo>div>h2:first-child+span+p+p a:hover{
|
.previewrow .walletinfo>div>h2:first-child+span+p+p a:hover{
|
||||||
background-image:none;
|
background-image:none;
|
||||||
}
|
}
|
||||||
|
.previewmobile{
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
|
||||||
h1 .rssicon{
|
h1 .rssicon{
|
||||||
vertical-align:bottom;
|
vertical-align:bottom;
|
||||||
|
|
@ -1351,6 +1354,57 @@ h2 .rssicon{
|
||||||
padding-left:0;
|
padding-left:0;
|
||||||
margin:auto;
|
margin:auto;
|
||||||
}
|
}
|
||||||
|
.previewrow.previewmobile{
|
||||||
|
display:block;
|
||||||
|
}
|
||||||
|
.previewrow{
|
||||||
|
width:auto;
|
||||||
|
text-align:left;
|
||||||
|
}
|
||||||
|
.previewrow>p{
|
||||||
|
font-size:100%;
|
||||||
|
}
|
||||||
|
.previewrow>div>div{
|
||||||
|
position:fixed;
|
||||||
|
right:10px;
|
||||||
|
left:10px;
|
||||||
|
top:10px;
|
||||||
|
bottom:auto;
|
||||||
|
border:2px solid #2c6faf;
|
||||||
|
background:#f1f8fb;
|
||||||
|
z-index:1000;
|
||||||
|
-webkit-border-radius:5px;
|
||||||
|
-moz-border-radius:5px;
|
||||||
|
border-radius:5px;
|
||||||
|
display:none;
|
||||||
|
}
|
||||||
|
.previewrow>div>div>div{
|
||||||
|
padding:10px;
|
||||||
|
}
|
||||||
|
.previewrow>div>div>div:first-child{
|
||||||
|
background:none;
|
||||||
|
height:auto;
|
||||||
|
}
|
||||||
|
.previewrow>div>div>div>h2:first-child+span+p+p{
|
||||||
|
margin:10px 0;
|
||||||
|
position:static;
|
||||||
|
}
|
||||||
|
.previewrow .walletinfo{
|
||||||
|
border:2px solid #ee9209;
|
||||||
|
background-color:#fff8ea;
|
||||||
|
}
|
||||||
|
.previewrow .walletwarning{
|
||||||
|
border:2px solid #b95357;
|
||||||
|
background-color:#fff6f0;
|
||||||
|
}
|
||||||
|
.previewrow .walletwarning>div:first-child{
|
||||||
|
background:none;
|
||||||
|
height:auto;
|
||||||
|
}
|
||||||
|
.previewrow .walletinfo>div:first-child{
|
||||||
|
background:none;
|
||||||
|
height:auto;
|
||||||
|
}
|
||||||
.press-volunteer>div>div{
|
.press-volunteer>div>div{
|
||||||
width:220px;
|
width:220px;
|
||||||
height:auto;
|
height:auto;
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,203 @@ id: choose-your-wallet
|
||||||
<h2>{% translate bethenetwork %}</h2>
|
<h2>{% translate bethenetwork %}</h2>
|
||||||
<p><img src="/img/icon-be-the-network.svg" alt="Network" class="floatimg"/>{% translate bethenetworktxt %}</p>
|
<p><img src="/img/icon-be-the-network.svg" alt="Network" class="floatimg"/>{% translate bethenetworktxt %}</p>
|
||||||
|
|
||||||
|
<div class="previewrow previewmobile" onclick="mobileWHover(event);">
|
||||||
|
|
||||||
|
<h2><img class="titleicon" src="/img/ico_mobile.svg" alt="mobile wallets" />{% translate walletmobi %}</h2>
|
||||||
|
<p>{% translate walletmobitxt %}</p>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<h2>Bitcoin Wallet</h2>
|
||||||
|
<span><img src="/img/dow-android.png" alt="Android" title="Android" /><img src="/img/dow-blackberry.png" alt="BlackBerry OS" title="BlackBerry OS" /></span>
|
||||||
|
<p>{% translate walletbitcoinwallet %}</p>
|
||||||
|
<p><a href="https://play.google.com/store/apps/details?id=de.schildbach.wallet">{% translate walletvisit %}</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#" onclick="return false;"><img src="/img/clients/lo-bitcoinwallet.png" alt="bitcoin wallet" />Bitcoin<br>Wallet</a>
|
||||||
|
</div>
|
||||||
|
{% case page.lang %}
|
||||||
|
{% when 'ar' or 'es' or 'fa' or 'id' or 'it' or 'nl' or 'pl' or 'ru' or 'tr' or 'zh_CN' or 'zh_TW' %}
|
||||||
|
{% else %}
|
||||||
|
<div data-id="mycelium">
|
||||||
|
<div class="walletinfo">
|
||||||
|
<div>
|
||||||
|
<h2>{% translate wallettrustinfo %}</h2>
|
||||||
|
<span></span>
|
||||||
|
<p>{% translate wallettrustinfotxt %}</p>
|
||||||
|
<p><a href="#" onclick="walletShow(event);">{% translate walletwebwarningok %}</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#" onclick="return false;"><img src="/img/clients/lo-mycelium.png" alt="mycelium wallet" /></a>
|
||||||
|
</div>
|
||||||
|
{% endcase %}
|
||||||
|
{% case page.lang %}
|
||||||
|
{% when 'ar' or 'es' or 'fa' or 'pl' or 'ru' or 'zh_TW' %}
|
||||||
|
<div data-id="blockchainmobile">
|
||||||
|
<div class="walletwarning">
|
||||||
|
<div>
|
||||||
|
<h2>{% translate walletwebwarning %}</h2>
|
||||||
|
<span></span>
|
||||||
|
<p>{% translate walletwebwarningtxt %}</p>
|
||||||
|
<p><a href="#" onclick="walletShow(event);">{% translate walletwebwarningok %}</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#" onclick="return false;"><img src="/img/clients/lo-blockchain.png" alt="blockchain.info" /></a>
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<div data-id="blockchainmobile">
|
||||||
|
<div class="walletinfo">
|
||||||
|
<div>
|
||||||
|
<h2>{% translate wallettrustinfo %}</h2>
|
||||||
|
<span></span>
|
||||||
|
<p>{% translate wallettrustinfotxt %}</p>
|
||||||
|
<p><a href="#" onclick="walletShow(event);">{% translate walletwebwarningok %}</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#" onclick="return false;"><img src="/img/clients/lo-blockchain.png" alt="blockchain.info" /></a>
|
||||||
|
</div>
|
||||||
|
{% endcase %}
|
||||||
|
<div data-id="bips-mobile">
|
||||||
|
<div class="walletwarning">
|
||||||
|
<div>
|
||||||
|
<h2>{% translate walletwebwarning %}</h2>
|
||||||
|
<span></span>
|
||||||
|
<p>{% translate walletwebwarningtxt %}</p>
|
||||||
|
<p><a href="#" onclick="walletShow(event);">{% translate walletwebwarningok %}</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#" onclick="return false;"><img src="/img/clients/lo-bips.png" alt="BIPS" /></a>
|
||||||
|
</div>
|
||||||
|
<div data-id="coinbase-mobile">
|
||||||
|
<div class="walletwarning">
|
||||||
|
<div>
|
||||||
|
<h2>{% translate walletwebwarning %}</h2>
|
||||||
|
<span></span>
|
||||||
|
<p>{% translate walletwebwarningtxt %}</p>
|
||||||
|
<p><a href="#" onclick="walletShow(event);">{% translate walletwebwarningok %}</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#" onclick="return false;"><img src="/img/clients/lo-coinbase.png" alt="coinbase" /></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2><img class="titleicon" src="/img/ico_software.svg" alt="Software wallets" />{% translate walletdesk %}</h2>
|
||||||
|
<p>{% translate walletdesktxt %}</p>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<h2>Bitcoin-Qt</h2>
|
||||||
|
<span><img src="/img/dow-win.png" alt="Windows" title="Windows" /><img src="/img/dow-linux.png" alt="Linux" title="Linux" /><img src="/img/dow-osx-uni.png" alt="Mac OS X" title="Mac OS X" /></span>
|
||||||
|
<p>{% translate walletbitcoinqt %}</p>
|
||||||
|
<p>{% translate walletdownload %}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#" onclick="return false;"><img src="/img/clients/lo-bitcoin.png" alt="bitcoin-qt" />Bitcoin-Qt</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<h2>MultiBit</h2>
|
||||||
|
<span><img src="/img/dow-win.png" alt="Windows" title="Windows" /><img src="/img/dow-linux.png" alt="Linux" title="Linux" /><img src="/img/dow-osx-uni.png" alt="Mac OS X" title="Mac OS X" /></span>
|
||||||
|
<p>{% translate walletmultibit %}</p>
|
||||||
|
<p><a href="https://multibit.org/">{% translate walletvisit %}</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#" onclick="return false;"><img src="/img/clients/lo-multibit.png" alt="multibit" />MultiBit</a>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<h2>Armory</h2>
|
||||||
|
<span><img src="/img/dow-win.png" alt="Windows" title="Windows" /><img src="/img/dow-linux.png" alt="Linux" title="Linux" /></span>
|
||||||
|
<p>{% translate walletarmory %}</p>
|
||||||
|
<p><a href="http://bitcoinarmory.com/">{% translate walletvisit %}</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#" onclick="return false;"><img src="/img/clients/lo-armory.png" alt="armory" />Armory</a>
|
||||||
|
</div>
|
||||||
|
{% case page.lang %}
|
||||||
|
{% when 'ar' or 'es' or 'fa' or 'pl' or 'ru' or 'zh_TW' %}
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<h2>Electrum</h2>
|
||||||
|
<span><img src="/img/dow-win.png" alt="Windows" title="Windows" /><img src="/img/dow-linux.png" alt="Linux" title="Linux" /><img src="/img/dow-osx-uni.png" alt="Mac OS X" title="Mac OS X" /><img src="/img/dow-android.png" alt="Android" title="Android" /></span>
|
||||||
|
<p>{% translate walletelectrum %}</p>
|
||||||
|
<p><a href="http://electrum.org/">{% translate walletvisit %}</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#" onclick="return false;"><img src="/img/clients/lo-electrum.png" alt="electrum" />Electrum</a>
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<div data-id="electrum">
|
||||||
|
<div class="walletinfo">
|
||||||
|
<div>
|
||||||
|
<h2>{% translate wallettrustinfo %}</h2>
|
||||||
|
<span></span>
|
||||||
|
<p>{% translate wallettrustinfotxt %}</p>
|
||||||
|
<p><a href="#" onclick="walletShow(event);">{% translate walletwebwarningok %}</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#" onclick="return false;"><img src="/img/clients/lo-electrum.png" alt="electrum" /></a>
|
||||||
|
</div>
|
||||||
|
{% endcase %}
|
||||||
|
|
||||||
|
<h2><img class="titleicon" src="/img/ico_international.svg" alt="web wallets" />{% translate walletweb %}</h2>
|
||||||
|
<p>{% translate walletwebtxt %}</p>
|
||||||
|
|
||||||
|
{% case page.lang %}
|
||||||
|
{% when 'ar' or 'es' or 'fa' or 'pl' or 'ru' or 'zh_TW' %}
|
||||||
|
<div data-id="blockchaindesktop">
|
||||||
|
<div class="walletwarning">
|
||||||
|
<div>
|
||||||
|
<h2>{% translate walletwebwarning %}</h2>
|
||||||
|
<span></span>
|
||||||
|
<p>{% translate walletwebwarningtxt %}</p>
|
||||||
|
<p><a href="#" onclick="walletShow(event);">{% translate walletwebwarningok %}</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#" onclick="return false;"><img src="/img/clients/lo-blockchain.png" alt="blockchain.info" /></a>
|
||||||
|
</div>
|
||||||
|
{% else %}
|
||||||
|
<div data-id="blockchaindesktop">
|
||||||
|
<div class="walletinfo">
|
||||||
|
<div>
|
||||||
|
<h2>{% translate wallettrustinfo %}</h2>
|
||||||
|
<span></span>
|
||||||
|
<p>{% translate wallettrustinfotxt %}</p>
|
||||||
|
<p><a href="#" onclick="walletShow(event);">{% translate walletwebwarningok %}</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#" onclick="return false;"><img src="/img/clients/lo-blockchain.png" alt="blockchain.info" /></a>
|
||||||
|
</div>
|
||||||
|
{% endcase %}
|
||||||
|
<div data-id="bips">
|
||||||
|
<div class="walletwarning">
|
||||||
|
<div>
|
||||||
|
<h2>{% translate walletwebwarning %}</h2>
|
||||||
|
<span></span>
|
||||||
|
<p>{% translate walletwebwarningtxt %}</p>
|
||||||
|
<p><a href="#" onclick="walletShow(event);">{% translate walletwebwarningok %}</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#" onclick="return false;"><img src="/img/clients/lo-bips.png" alt="bips" /></a>
|
||||||
|
</div>
|
||||||
|
<div data-id="coinbase">
|
||||||
|
<div class="walletwarning">
|
||||||
|
<div>
|
||||||
|
<h2>{% translate walletwebwarning %}</h2>
|
||||||
|
<span></span>
|
||||||
|
<p>{% translate walletwebwarningtxt %}</p>
|
||||||
|
<p><a href="#" onclick="walletShow(event);">{% translate walletwebwarningok %}</a></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="#" onclick="return false;"><img src="/img/clients/lo-coinbase.png" alt="coinbase" /></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="preview">
|
<div class="preview">
|
||||||
|
|
||||||
<div class="previewcol">
|
<div class="previewcol">
|
||||||
|
|
|
||||||
33
js/main.js
33
js/main.js
|
|
@ -87,6 +87,9 @@ var t=getEventTarget(e);
|
||||||
while(t.getAttribute('data-id')===null||t.getAttribute('data-id')=='')t=t.parentNode;
|
while(t.getAttribute('data-id')===null||t.getAttribute('data-id')=='')t=t.parentNode;
|
||||||
var d=t.getElementsByTagName('DIV')[0];
|
var d=t.getElementsByTagName('DIV')[0];
|
||||||
var s=document.getElementById(t.getAttribute('data-id')).getElementsByTagName('DIV')[0];
|
var s=document.getElementById(t.getAttribute('data-id')).getElementsByTagName('DIV')[0];
|
||||||
|
cancelEvent(e);
|
||||||
|
//Add a delay before replacing wallet bubble for mobiles to prevent accidental clicks
|
||||||
|
setTimeout(function(){
|
||||||
d.getElementsByTagName('H2')[0].innerHTML=s.getElementsByTagName('H2')[0].innerHTML;
|
d.getElementsByTagName('H2')[0].innerHTML=s.getElementsByTagName('H2')[0].innerHTML;
|
||||||
d.getElementsByTagName('SPAN')[0].innerHTML=s.getElementsByTagName('SPAN')[0].innerHTML;
|
d.getElementsByTagName('SPAN')[0].innerHTML=s.getElementsByTagName('SPAN')[0].innerHTML;
|
||||||
d.getElementsByTagName('P')[0].innerHTML=s.getElementsByTagName('P')[0].innerHTML;
|
d.getElementsByTagName('P')[0].innerHTML=s.getElementsByTagName('P')[0].innerHTML;
|
||||||
|
|
@ -99,7 +102,7 @@ for(var ii=0,nn=d.childNodes.length;ii<nn;ii++){if(d.childNodes[ii].nodeType==1&
|
||||||
for(var ii=0,as=d.parentNode.getElementsByTagName('A'),nn=as.length;ii<nn;ii++){if(as[ii].parentNode==d.parentNode){var dd=as[ii];break;}}
|
for(var ii=0,as=d.parentNode.getElementsByTagName('A'),nn=as.length;ii<nn;ii++){if(as[ii].parentNode==d.parentNode){var dd=as[ii];break;}}
|
||||||
for(var ii=0,as=s.parentNode.getElementsByTagName('A'),nn=as.length;ii<nn;ii++){if(as[ii].parentNode==s.parentNode){var ss=as[ii];break;}}
|
for(var ii=0,as=s.parentNode.getElementsByTagName('A'),nn=as.length;ii<nn;ii++){if(as[ii].parentNode==s.parentNode){var ss=as[ii];break;}}
|
||||||
dd.innerHTML=ss.innerHTML;
|
dd.innerHTML=ss.innerHTML;
|
||||||
cancelEvent(e);
|
},1);
|
||||||
}
|
}
|
||||||
|
|
||||||
function mobileMenuShow(e){
|
function mobileMenuShow(e){
|
||||||
|
|
@ -216,6 +219,34 @@ document.getElementById('chatbox').innerHTML='<iframe style=width:98%;min-width:
|
||||||
cancelEvent(e);
|
cancelEvent(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function mobileWHover(e){
|
||||||
|
//Display wallet bubbles for mobiles
|
||||||
|
var div=t=getEventTarget(e);
|
||||||
|
while(div.nodeName!='DIV')div=div.parentNode;
|
||||||
|
//Hide bubbles when clicking outside of a bubble
|
||||||
|
if(div.className.indexOf('previewmobile')!==-1)mobileWHide();
|
||||||
|
//Show bubble when clicking on their icon
|
||||||
|
if(div.parentNode.className.indexOf('previewmobile')!==-1){
|
||||||
|
mobileWHide();
|
||||||
|
t=div.getElementsByTagName('DIV')[0];
|
||||||
|
t.style.opacity=0;
|
||||||
|
t.style.display='block';
|
||||||
|
//Add a delay before displaying wallet for mobiles to prevent accidental clicks
|
||||||
|
setTimeout(function(){t.style.opacity=100;},1);
|
||||||
|
//Add event listener to hide bubble on scroll
|
||||||
|
addEvent(window,'scroll',mobileWHide);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function mobileWHide(){
|
||||||
|
//Hide all wallet bubbles on mobiles
|
||||||
|
for(var i=0,nds=document.getElementsByTagName('DIV'),n=nds.length;i<n;i++){
|
||||||
|
if(nds[i].parentNode&&nds[i].parentNode.parentNode&&nds[i].parentNode.parentNode.className.indexOf('previewmobile')!==-1){
|
||||||
|
nds[i].style.opacity=0;nds[i].style.display='none';}
|
||||||
|
}
|
||||||
|
removeEvent(window,'scroll',mobileWHide);
|
||||||
|
}
|
||||||
|
|
||||||
function makeEditable(e){
|
function makeEditable(e){
|
||||||
//An easter egg that makes the page editable when user click on the page and hold their mouse button for one second.
|
//An easter egg that makes the page editable when user click on the page and hold their mouse button for one second.
|
||||||
//This trick allows translators and writers to preview their work.
|
//This trick allows translators and writers to preview their work.
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue