share links share the page being viewed
This commit is contained in:
alexcherman
parent
ffcf319378
commit
c07adeaf7e
@ -4,10 +4,10 @@ http://opensource.org/licenses/MIT.
|
||||
{% endcomment %}
|
||||
|
||||
<div class="row hero-social">
|
||||
<a href="http://www.facebook.com/sharer.php?u={{site.url}}" class="hero-social-link" target="_blank">
|
||||
<a href="" onclick="window.open('http://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(location.href))" class="hero-social-link" target="_blank">
|
||||
<img src="/img/icons/ico_facebook_bright.svg" alt="facebook">
|
||||
</a>
|
||||
<a href="https://twitter.com/share?url={{site.url}}" class="hero-social-link" target="_blank">
|
||||
<a href="" onclick="window.open('https://twitter.com/share?url=' + encodeURIComponent(location.href))" class="hero-social-link" target="_blank">
|
||||
<img src="/img/icons/ico_twitter_bright.svg" alt="twitter">
|
||||
</a>
|
||||
</div>
|
||||
@ -6,18 +6,7 @@ http://opensource.org/licenses/MIT.
|
||||
|
||||
<div class="walletmenu" id="walletmenu">
|
||||
{% assign platformsByPlatform = site.platforms | group_by: "platform" %}
|
||||
{% if page.url contains "en/choose-your-wallet.html" %}
|
||||
{% assign walletTypeTab = "" | append: "" %}
|
||||
{% else %}
|
||||
{% assign walletTypeTab = "" | append: "is-hidden" %}
|
||||
{% endif %}
|
||||
<p class="wallet-acc-toggle wallet-acc-toggle-1 {{walletTypeTab}}" data-toggle>Select wallet Type</p>
|
||||
{% if page.url contains "en/choose-your-wallet.html" %}
|
||||
{% assign walletTypeList = "" | append: "is-hidden" %}
|
||||
{% else %}
|
||||
{% assign walletTypeList = "" | append: "is-fullwidth" %}
|
||||
{% endif %}
|
||||
<ul class="walletmenu-main-list {{walletTypeList}}">
|
||||
<ul>
|
||||
{% for platform in platformsByPlatform %}
|
||||
|
||||
{% comment %}
|
||||
@ -34,42 +23,27 @@ http://opensource.org/licenses/MIT.
|
||||
{% endcomment %}
|
||||
|
||||
{% assign platformClass = "wallet-" | append: platformName %}
|
||||
{% assign ulClass = "" %}
|
||||
{% if page.id contains platformName %}
|
||||
{% assign platformClass = platformClass | append: " pseudo-acc active" %}
|
||||
{% elsif page.url contains "en/choose-your-wallet.html" %}
|
||||
{% assign platformClass = platformClass | append: "" %}
|
||||
{% else %}
|
||||
{% assign platformClass = platformClass | append: " is-hidden" %}
|
||||
{% assign platformClass = platformClass | append: " active" %}
|
||||
{% assign ulClass = " active" %}
|
||||
{% endif %}
|
||||
<li class="js-acc-item acc-item {{ platformClass }}">
|
||||
<li class="js-acc-item {{ platformClass }}">
|
||||
{% if platformName == 'hardware' or platformName == 'web' %}
|
||||
{% assign platformHref = "/" | append: page.lang | append: "/wallets/" | append: platformName | append: "/" %}
|
||||
<a data-item-target href="{{ platformHref }}">{% translate walletcat{{platformName}} choose-your-wallet %}</a>
|
||||
<a href="{{ platformHref }}">{% translate walletcat{{platformName}} choose-your-wallet %}</a>
|
||||
{% else %}
|
||||
<a data-item-target class="wallet-platform-link">{% translate walletcat{{platformName}} choose-your-wallet %}</a>
|
||||
<a class="wallet-platform-link">{% translate walletcat{{platformName}} choose-your-wallet %}</a>
|
||||
{% endif %}
|
||||
{% if platform.items.size > 1 %}
|
||||
<div class="walletmenu-subaccordion">
|
||||
{% if page.url contains "en/choose-your-wallet.html" %}
|
||||
{% assign walletOsTab = "" | append: "" %}
|
||||
{% else %}
|
||||
{% assign walletOsTab = "" | append: "is-hidden" %}
|
||||
{% endif %}
|
||||
<p class="wallet-acc-toggle wallet-acc-toggle-2 {{walletOsTab}}" data-toggle>Select Operating system</p>
|
||||
{% if page.url contains "en/choose-your-wallet.html" %}
|
||||
{% assign walletOsList = "" | append: "is-hidden" %}
|
||||
{% else %}
|
||||
{% assign walletOsList = "" | append: "is-fullwidth" %}
|
||||
{% endif %}
|
||||
<ul class="walletmenu-os-list {{walletOsList}}">
|
||||
<ul class="walletmenu-os-list {{ulClass}}">
|
||||
{% for item in platform.items %}
|
||||
{% assign osClass = "wallet-" | append: item.os.name %}
|
||||
{% if page.id contains item.id %}
|
||||
{% assign osClass = osClass | append: " pseudo-acc active" %}
|
||||
{% else %}
|
||||
{% assign osClass = osClass | append: " is-hidden" %}
|
||||
{% assign osClass = osClass | append: " active" %}
|
||||
{% endif %}
|
||||
<li class="js-acc-subitem acc-item {{ osClass }}">
|
||||
<li class="js-acc-subitem {{ osClass }}">
|
||||
<a href="/{{ page.lang }}/wallets/{{ platformName }}/{{ item.os.name }}/">
|
||||
{% translate platform{{item.os.name}} choose-your-wallet %}
|
||||
</a>
|
||||
@ -84,11 +58,7 @@ http://opensource.org/licenses/MIT.
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var mainWalletList = document.querySelector(".walletmenu-main-list");
|
||||
var accordionToggleTabs = document.getElementsByClassName("wallet-acc-toggle");
|
||||
var walletMenu = document.querySelector(".walletmenu");
|
||||
var accSub = document.getElementsByClassName("js-acc-subitem");
|
||||
var acc = document.getElementsByClassName("js-acc-item");
|
||||
|
||||
// Add margin-bottom for walletmenu depending on the height of the second accordion
|
||||
function calculateHeight(element) {
|
||||
@ -96,6 +66,8 @@ http://opensource.org/licenses/MIT.
|
||||
}
|
||||
|
||||
function accordionDesktop() {
|
||||
var acc = document.getElementsByClassName("js-acc-item");
|
||||
|
||||
for (var i = 0; i < acc.length; i++) {
|
||||
acc[i].addEventListener("click", function(event) {
|
||||
if (document.documentElement.clientWidth > 768) {
|
||||
@ -120,111 +92,5 @@ http://opensource.org/licenses/MIT.
|
||||
}
|
||||
}
|
||||
accordionDesktop();
|
||||
|
||||
function platformAcc() {
|
||||
for (var i = 0; i < acc.length; i++) {
|
||||
acc[i].addEventListener("click", function (event) {
|
||||
|
||||
if (document.documentElement.clientWidth <= 768) {
|
||||
|
||||
if (event.target.parentNode.classList.contains("pseudo-acc")) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
if (!event.target.hasAttribute('data-item-target')) {
|
||||
return;
|
||||
} else {
|
||||
|
||||
var activeItem = event.target.parentNode;
|
||||
var activeList = activeItem.parentNode;
|
||||
var activeTab = activeList.previousElementSibling;
|
||||
var activeOsAccordion = activeItem.querySelector(".walletmenu-subaccordion");
|
||||
|
||||
// Made selected list item as pseudo accordion tab
|
||||
activeItem.classList.toggle("pseudo-acc");
|
||||
// Made parent of selected list item is fullwidth
|
||||
activeList.classList.toggle("is-fullwidth");
|
||||
// Hide tab
|
||||
activeTab.classList.toggle("is-hidden");
|
||||
|
||||
// Calculate height of absolute positioned sublist and add margin-bottom for walletmenu
|
||||
if (activeOsAccordion.classList.contains("walletmenu-subaccordion")) {
|
||||
calculateHeight(activeOsAccordion);
|
||||
}
|
||||
|
||||
// Hide not selected list items
|
||||
for (var index = 0; index < acc.length; index++) {
|
||||
if (!(activeItem == acc[index])) {
|
||||
acc[index].classList.toggle("is-hidden");
|
||||
acc[index].classList.remove("pseudo-acc");
|
||||
}
|
||||
}
|
||||
|
||||
for (var a = 0; a < accSub.length; a++) {
|
||||
accSub[a].classList.toggle("is-hidden");
|
||||
console.log(accSub[a]);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function osAcc() {
|
||||
for (var i = 0; i < accSub.length; i++) {
|
||||
|
||||
accSub[i].addEventListener("click", function (event) {
|
||||
event.stopPropagation();
|
||||
if (event.target.parentNode.classList.contains("pseudo-acc")) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
var activeItem = event.target.parentNode;
|
||||
var activeList = activeItem.parentNode;
|
||||
var activeTab = activeList.previousElementSibling;
|
||||
var activeOsAccordion = activeList.parentNode;
|
||||
// Made parent of selected list item is fullwidth
|
||||
activeList.classList.toggle("is-fullwidth");
|
||||
// Hide tab
|
||||
activeTab.classList.toggle("is-hidden");
|
||||
|
||||
|
||||
|
||||
for (var a = 0; a < accSub.length; a++) {
|
||||
if (!(activeItem == accSub[a])) {
|
||||
accSub[a].classList.toggle("is-hidden");
|
||||
} else {
|
||||
accSub[a].classList.toggle("pseudo-acc");
|
||||
}
|
||||
}
|
||||
|
||||
// Calculate height of absolute positioned sublist and add margin-bottom for walletmenu
|
||||
calculateHeight(activeOsAccordion);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
platformAcc();
|
||||
osAcc();
|
||||
|
||||
function accordionToggle() {
|
||||
for (var i = 0; i < accordionToggleTabs.length; i++) {
|
||||
accordionToggleTabs[i].addEventListener("click", function (event) {
|
||||
|
||||
if (event.target.hasAttribute('data-toggle')) {
|
||||
// p
|
||||
event.target.classList.toggle("is-expanded");
|
||||
// ul
|
||||
event.target.nextElementSibling.classList.toggle("is-hidden");
|
||||
}
|
||||
|
||||
if (event.target.classList.contains("wallet-acc-toggle-2")) {
|
||||
calculateHeight(event.target.parentNode);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
accordionToggle();
|
||||
|
||||
</script>
|
||||
@ -157,6 +157,7 @@ $oses:
|
||||
@media handheld,
|
||||
only screen and ( max-width: 48em ),
|
||||
only screen and ( max-device-width: 48em ) {
|
||||
margin-bottom: 75px;
|
||||
> ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@ -173,7 +174,7 @@ $oses:
|
||||
.pseudo-acc > a::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
top: 0;
|
||||
left: -40px;
|
||||
transform: translateY(-50%);
|
||||
width: 30px;
|
||||
@ -277,7 +278,7 @@ $oses:
|
||||
background: #f8f8f8;
|
||||
border: none;
|
||||
height: 60px;
|
||||
padding: 16px 0 0 55px;
|
||||
padding: 9px 0 9px 55px;
|
||||
font-size: 18px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
@ -286,6 +287,7 @@ $oses:
|
||||
text-align: left;
|
||||
font-size: 18px;
|
||||
color: #FF7E00;
|
||||
line-height: 20px;
|
||||
}
|
||||
.is-hidden {
|
||||
display: none;
|
||||
@ -293,6 +295,18 @@ $oses:
|
||||
.is-fullwidth {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.wallet-os-label,
|
||||
.wallet-type-label {
|
||||
font-size: 12px;
|
||||
line-height: normal;
|
||||
text-transform: uppercase;
|
||||
text-align: left;
|
||||
}
|
||||
.pseudo-acc > .wallet-os-label,
|
||||
.pseudo-acc > .wallet-type-label {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.wallet-platform-link {
|
||||
|
||||
@ -338,7 +338,7 @@ $scores:
|
||||
}
|
||||
@media handheld, only screen and ( max-width: 60em ), only screen and ( max-device-width: 60em ) {
|
||||
.wallet-list {
|
||||
padding: 80px 0 30px 0;
|
||||
padding: 20px 0 30px 0;
|
||||
}
|
||||
.wallet-list .wallet-list-item {
|
||||
width: 30.5%;
|
||||
@ -408,7 +408,7 @@ $scores:
|
||||
width: 100%;
|
||||
}
|
||||
.wallet-list {
|
||||
padding: 80px 0 50px;
|
||||
padding: 0 0 50px;
|
||||
text-align: center;
|
||||
}
|
||||
.walletsdisclaimer {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user