From 48b57df732507e08fabc7567b8e7ad00d1993c53 Mon Sep 17 00:00:00 2001 From: Matei Copot Date: Wed, 24 Jan 2018 22:56:01 +0100 Subject: [PATCH 1/3] whole crypto address box acts as a link, and address doesn't wrap, but shrinks according to screen size --- src/assets/css/main.sass | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/assets/css/main.sass b/src/assets/css/main.sass index d3a4858..8311907 100644 --- a/src/assets/css/main.sass +++ b/src/assets/css/main.sass @@ -314,5 +314,12 @@ input[type="number"] width: 110px height: 150px +.support__crypto__box + &,:hover + color: #333; + .address - work-break: break-all + font-size: 16px + color: #aad; + @media screen and (max-width: 455px) + font-size: 3vw From 19e7282f5c2ca13e3321b425762d701146eb2575 Mon Sep 17 00:00:00 2001 From: Matei Copot Date: Wed, 24 Jan 2018 23:06:43 +0100 Subject: [PATCH 2/3] tsk tsk, index.html is not in src/ --- index.html | 30 ++++++++++++++++++------------ 1 file changed, 18 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index 9f31b05..663f6b4 100644 --- a/index.html +++ b/index.html @@ -113,24 +113,30 @@

~ Vyberte hodnotu:

~ Scan one of QR codes:

~ Oskenujte jeden z QR kódov:

-
+

BTC

-

Address →

1pbarBA4zP1bbCRydBUxweQxVfsaAHqDo

-

Adresa →

1pbarBA4zP1bbCRydBUxweQxVfsaAHqDo

-
-
+

Address →
+

1pbarBA4zP1bbCRydBUxweQxVfsaAHqDo

+

Adresa →
+

1pbarBA4zP1bbCRydBUxweQxVfsaAHqDo

+ +

LTC

-

Address →

LSDNJopkWAgEuhrD1ucKiFD6ybhoEeTRWH

-

Adresa →

LSDNJopkWAgEuhrD1ucKiFD6ybhoEeTRWH

-
-
+

Address →
+

LSDNJopkWAgEuhrD1ucKiFD6ybhoEeTRWH

+

Adresa →
+

LSDNJopkWAgEuhrD1ucKiFD6ybhoEeTRWH

+ +

ETH

-

Address →

0x363A4300D6800E1a45673255928d00c8b2DC7845

-

Adresa →

0x363A4300D6800E1a45673255928d00c8b2DC7845

-
+

Address →
+

0x363A4300D6800E1a45673255928d00c8b2DC7845

+

Adresa →
+

0x363a4300d6800e1a45673255928d00c8b2dc7845

+
From c844e1f036ffa41d89c0a9da995cb2648bcd4dbd Mon Sep 17 00:00:00 2001 From: Matei Copot Date: Thu, 25 Jan 2018 13:38:43 +0100 Subject: [PATCH 3/3] change crypto buttons to divs, so input works on firefox --- index.html | 24 ++++++++++++------------ src/assets/css/main.sass | 4 +++- src/assets/js/qr-code-generator.js | 24 +++++++++++++++++------- src/main.js | 2 +- 4 files changed, 33 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index 663f6b4..0c7d100 100644 --- a/index.html +++ b/index.html @@ -82,32 +82,32 @@

~ Choose an amount:

~ Vyberte hodnotu:

- +
5€
- +
5€
- +
10€
- +
10€
- +
20€
- +
20€
- +
+ Other: € +
- +
+ Iné: € +

~ Scan one of QR codes:

diff --git a/src/assets/css/main.sass b/src/assets/css/main.sass index 8311907..0561bb3 100644 --- a/src/assets/css/main.sass +++ b/src/assets/css/main.sass @@ -268,6 +268,7 @@ button:focus font-family: 'Raleway Regular' &__btn height: 50px + line-height: 50px padding: 0px 40px margin: 10px -5px 0 0 font-size: 18px @@ -279,7 +280,7 @@ button:focus @media screen and (max-width: 635px) padding: 0px 15px font-size: 16px !important - &:hover + &:hover,&:focus box-shadow: 0 3px 13px rgba(0, 0, 0, 0.22) .donation-desc @@ -291,6 +292,7 @@ input[type="number"] width: 60px font-family: 'Raleway Regular' text-align: right + line-height: initial @media screen and (max-width: 375px) width: 30px &__icons diff --git a/src/assets/js/qr-code-generator.js b/src/assets/js/qr-code-generator.js index 47dbb8d..eb56245 100644 --- a/src/assets/js/qr-code-generator.js +++ b/src/assets/js/qr-code-generator.js @@ -68,15 +68,25 @@ $(document).ready(function(){ if (inputValue) { setNewQrs(inputValue); } - $('.donate-amount').on('input', function() { - const amountInEur = $(this).val(); - delay(function(){ - setNewQrs(amountInEur); - }, 500 ); - }) } else { - const amountInEur = $(this).val(); + const amountInEur = this.dataset.amount; setNewQrs(amountInEur); } }); + $('.donate-amount').on('input', function() { + this.dataset.amount = $(this).val(); + const amountInEur = this.dataset.amount; + delay(function(){ + setNewQrs(amountInEur); + }, 500); + }) + + // make divs accessible + window.addEventListener('keydown', function(e) { + // if focused element is a crypto box and space/return are pressed + if(document.activeElement.classList.contains('donation-things__buttons__btn') && [32, 13].indexOf(e.keyCode) > -1) { + document.activeElement.click(); + e.preventDefault(); + } + }) }); diff --git a/src/main.js b/src/main.js index 9e84175..85c5506 100644 --- a/src/main.js +++ b/src/main.js @@ -5,7 +5,7 @@ import animations from './assets/css/animations.sass'; import bootstrapJS from 'bootstrap-js'; import animate from 'animate.css'; import writeAnimation from './assets/js/write-animation.js'; -import qrCodeGererator from './assets/js/qr-code-generator.js'; +import qrCodeGenerator from './assets/js/qr-code-generator.js'; import navbarAnimaton from './assets/js/navbar-animation.js'; import donationScrolling from './assets/js/scrolling.js'; import langSwitching from './assets/js/lang-switching.js';