bigchaindb/site
1
0
Fork 0
mirror of https://github.com/bigchaindb/site.git synced 2024-11-22 01:36:55 +01:00
Code Releases Activity

add a loader when transaction is sent

Browse Source 
* closes #135
This commit is contained in:
Matthias Kretschmann 2018-05-02 18:52:03 +02:00
parent eaa5e38b20
commit 8c2500c93f
Signed by: m
GPG Key ID: 606EEEF3C479A91F
5 changed files with 46 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
_src/_assets/javascripts/page-getstarted.js
View File

@ -117,11 +117,14 @@ window.addEventListener('DOMContentLoaded', function domload(event) {
} }
}) })
postButton.style.width = `${postButton.offsetWidth}px`
postButton.addEventListener('click', function(e) { postButton.addEventListener('click', function(e) {
e.preventDefault() e.preventDefault()
const message = messageInput.value const message = messageInput.value
postButton.classList.add('disabled') postButton.classList.add('disabled')
postButton.innerHTML = '<span class="loader loader--dark"></span>'
const alice = new driver.Ed25519Keypair() const alice = new driver.Ed25519Keypair()
const tx = driver.Transaction.makeCreateTransaction( const tx = driver.Transaction.makeCreateTransaction(
@ -165,6 +168,9 @@ window.addEventListener('DOMContentLoaded', function domload(event) {
const outputContent = reason.status + ' ' + reason.statusText const outputContent = reason.status + ' ' + reason.statusText
output.textContent = outputContent output.textContent = outputContent
postButton.classList.remove('disabled')
postButton.innerHTML = 'Off you go'
}).then((res) => console.log('Transaction status:', res.status)) }).then((res) => console.log('Transaction status:', res.status))
}, false) }, false)

4
_src/_assets/styles/_page-getstarted.scss
View File

@ -36,6 +36,10 @@
.form-group:first-child { .form-group:first-child {
margin-top: 0; margin-top: 0;
} }
.message {
text-align: left;
}
} }
.form--transaction__content { .form--transaction__content {

1
_src/_assets/styles/bigchain.scss
View File

@ -16,6 +16,7 @@
// Components // Components
@import 'bigchain/typography'; @import 'bigchain/typography';
@import 'bigchain/tables'; @import 'bigchain/tables';
@import 'bigchain/loader';
@import 'bigchain/buttons'; @import 'bigchain/buttons';
@import 'bigchain/forms'; @import 'bigchain/forms';
@import 'bigchain/input-group'; @import 'bigchain/input-group';

4
_src/_assets/styles/bigchain/_buttons.scss
View File

@ -47,6 +47,10 @@
margin-right: .25rem; margin-right: .25rem;
margin-bottom: -1px; margin-bottom: -1px;
} }
.loader {
margin-bottom: -.2rem;
}
} }
// Future-proof disabling of clicks on `<a>` elements // Future-proof disabling of clicks on `<a>` elements

31
_src/_assets/styles/bigchain/_loader.scss Normal file
View File

@ -0,0 +1,31 @@
.loader {
border-radius: 50%;
width: 1rem;
height: 1rem;
font-size: 1rem;
text-indent: -9999rem;
border-top: 2px solid rgba(#fff, .2);
border-right: 2px solid rgba(#fff, .2);
border-bottom: 2px solid rgba(#fff, .2);
border-left: 2px solid #fff;
transform: translateZ(0);
animation: spin 1.1s infinite linear;
display: inline-block;
}
.loader--dark {
border-top-color: rgba($brand-main-blue, .2);
border-right-color: rgba($brand-main-blue, .2);
border-bottom-color: rgba($brand-main-blue, .2);
border-left-color: $brand-main-blue;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}