mirror of
https://github.com/seigler/dash-docs
synced 2025-07-27 01:36:13 +00:00
Adds button and click handler to display a specifi distro
This commit is contained in:
parent
eca2d54ddb
commit
d02f388309
4 changed files with 53 additions and 2 deletions
|
@ -8,7 +8,7 @@ http://opensource.org/licenses/MIT.
|
|||
<div class="wallets" id="wallets" onclick="walletListener(event);" ontouchstart="walletListener(event);">
|
||||
{% for wallet in site.wallets %}
|
||||
<div>
|
||||
<a>
|
||||
<a href="/en/wallets/{{ wallet.id }}/#!platform={{ page.platform }}&os={{ page.os }}">
|
||||
<img src="/img/wallet/{{ wallet.id }}.png" alt="{{ wallet.title }}" />
|
||||
{{ wallet.titleshort }}
|
||||
</a>
|
||||
|
|
|
@ -22,7 +22,7 @@ layout: wallet-platform-container
|
|||
<div class="wallet-platforms-menu">
|
||||
{% for platform in page.platform %}
|
||||
{% for os in platform.os %}
|
||||
<button>
|
||||
<button class="wallet-os-btn" id="{{ os.name }}-btn" onclick="walletDistributionListener('{{ os.name }}', '{{ platform.name }}');">
|
||||
<img src="/img/os/{{ os.name }}.png"
|
||||
alt="{% translate platform{{os.name}} choose-your-wallet %}"
|
||||
title="{% translate platform{{os.name}} choose-your-wallet %}" />
|
||||
|
|
|
@ -281,6 +281,20 @@ $scores:
|
|||
border-radius: 4px;
|
||||
text-align: center;
|
||||
|
||||
&.active {
|
||||
background-color: #2c6fad;
|
||||
background-image: -o-linear-gradient(bottom, #255f96 14%, #2c6fad 70%);
|
||||
background-image: -moz-linear-gradient(bottom, #255f96 14%, #2c6fad 70%);
|
||||
background-image: -webkit-linear-gradient(bottom, #255f96 14%, #2c6fad 70%);
|
||||
background-image: -ms-linear-gradient(bottom, #255f96 14%, #2c6fad 70%);
|
||||
background-image: linear-gradient(bottom, #255f96 14%, #2c6fad 70%);
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background-image: none;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
vertical-align: text-top;
|
||||
}
|
||||
|
@ -295,6 +309,10 @@ $scores:
|
|||
margin-bottom: 20px;
|
||||
display: flex;
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.wallet-os-screenshot {
|
||||
img {
|
||||
border: 1px solid $grey;
|
||||
|
|
33
js/main.js
33
js/main.js
|
@ -423,6 +423,39 @@ function walletScoreListener(e) {
|
|||
onTouchClick(e, init);
|
||||
}
|
||||
|
||||
function walletScoreListener(e) {
|
||||
// Listen for events on wallet scores and display them on tap.
|
||||
var init = function(e) {
|
||||
var t = getEvent(e, 'target');
|
||||
while (!t.parentNode.parentNode.parentNode.id) t = t.parentNode;
|
||||
(t.className.indexOf('hover') === -1) ? addClass(t, 'hover'): removeClass(t, 'hover');
|
||||
};
|
||||
onTouchClick(e, init);
|
||||
}
|
||||
|
||||
function walletDistributionListener(os, platform) {
|
||||
window.location.hash = "!platform=" + platform + "&os=" + os;
|
||||
var osContainers = document.querySelectorAll('.wallet-os-container');
|
||||
var osButtons = document.querySelectorAll('.wallet-os-btn');
|
||||
var selected = document.getElementById(os);
|
||||
var button = document.getElementById(os + '-btn');
|
||||
osContainers.forEach(function(el) { addClass(el, 'hidden'); });
|
||||
osButtons.forEach(function(el) { removeClass(el, 'active'); });
|
||||
removeClass(selected, 'hidden');
|
||||
addClass(button, 'active');
|
||||
}
|
||||
|
||||
(function() {
|
||||
var hash = window.location.hash;
|
||||
if (hash.indexOf('!') > -1 && hash.indexOf('platform') > -1 && hash.indexOf('os') > -1) {
|
||||
var platform = hash.split('&')[0].split('=')[1];
|
||||
var os = hash.split('&')[1].split('=')[1];
|
||||
setTimeout(function() {
|
||||
walletDistributionListener(os, platform);
|
||||
}, 0);
|
||||
}
|
||||
})();
|
||||
|
||||
function walletShowPlatform(platform) {
|
||||
// Show wallets for given platform in the menu.
|
||||
var t = null,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue