diff --git a/_src/_assets/javascripts/page-getstarted.js b/_src/_assets/javascripts/page-getstarted.js index 5de8891..f91bbf6 100644 --- a/_src/_assets/javascripts/page-getstarted.js +++ b/_src/_assets/javascripts/page-getstarted.js @@ -1,3 +1,5 @@ +//=require gumshoe/dist/js/gumshoe.js + //=include bigchain/smoothscroll.js //=include bigchain/newsletter.js @@ -7,11 +9,41 @@ jQuery(function($) { // init modules // Newsletter.init() + }) + +// +// Sticky nav +// +const menu = document.getElementsByClassName('menu--sub')[0] + +if ( window.innerWidth >= 768 ) { + const offset = menu.offsetTop + + window.addEventListener('scroll', function() { + if (offset < window.pageYOffset) { + menu.classList.add('sticky') + } else { + menu.classList.remove('sticky') + } + }, false) +} + + +// +// Scrollspy +// +gumshoe.init() + + +// +// BigchainDB transaction tool +// + //=include bigchaindb-driver/dist/browser/bigchaindb-driver.window.min.js -window.addEventListener('DOMContentLoaded', function domload(event){ +window.addEventListener('DOMContentLoaded', function domload(event) { window.removeEventListener('DOMContentLoaded', domload, false) const driver = window.BigchainDB @@ -38,14 +70,11 @@ window.addEventListener('DOMContentLoaded', function domload(event){ const message = messageInput.value const alice = new driver.Ed25519Keypair() - const tx = driver.Transaction.makeCreateTransaction( - { assetMessage: message }, - { metaDataMessage: message }, - [ driver.Transaction.makeOutput( - driver.Transaction.makeEd25519Condition(alice.publicKey)) - ], - alice.publicKey - ) + const tx = driver.Transaction.makeCreateTransaction({ + assetMessage: message + }, { + metaDataMessage: message + }, [driver.Transaction.makeOutput(driver.Transaction.makeEd25519Condition(alice.publicKey))], alice.publicKey) const txSigned = driver.Transaction.signTransaction(tx, alice.privateKey) const conn = new driver.Connection(API_PATH, { @@ -60,30 +89,28 @@ window.addEventListener('DOMContentLoaded', function domload(event){ const messageFail = document.getElementsByClassName('message--fail')[0] const transactionLink = document.getElementsByClassName('transaction-link')[0] - conn.postTransaction(txSigned) - .then((response) => { - waiting.classList.add('hide') - responseArea.classList.remove('hide') - messageSuccess.classList.remove('hide') + conn.postTransaction(txSigned).then((response) => { + waiting.classList.add('hide') + responseArea.classList.remove('hide') + messageSuccess.classList.remove('hide') - console.log(response) + console.log(response) - const outputContent = JSON.stringify(response, null, 4) // indented with 4 spaces - output.textContent = outputContent + const outputContent = JSON.stringify(response, null, 4) // indented with 4 spaces + output.textContent = outputContent - transactionLink.href = 'https://test.ipdb.io/api/v1/transactions/' + response.id + transactionLink.href = 'https://test.ipdb.io/api/v1/transactions/' + response.id - }, reason => { // Error! - console.log(reason) + }, reason => { // Error! + console.log(reason) - waiting.classList.add('hide') - responseArea.classList.remove('hide') - messageFail.classList.remove('hide') + waiting.classList.add('hide') + responseArea.classList.remove('hide') + messageFail.classList.remove('hide') - const outputContent = reason.status + ' ' + reason.statusText - output.textContent = outputContent - }) - .then((res) => console.log('Transaction status:', res.status)) + const outputContent = reason.status + ' ' + reason.statusText + output.textContent = outputContent + }).then((res) => console.log('Transaction status:', res.status)) }, false) }, false) diff --git a/_src/_assets/styles/_page-getstarted.scss b/_src/_assets/styles/_page-getstarted.scss index 9c42deb..fddb6aa 100644 --- a/_src/_assets/styles/_page-getstarted.scss +++ b/_src/_assets/styles/_page-getstarted.scss @@ -33,13 +33,12 @@ span { text-align: center; display: block; - margin: auto; - margin-bottom: $spacer / 2; + margin: auto auto $spacer / 2; width: 3rem; height: 3rem; border-radius: 50%; font-size: $font-size-lg; - vertical-align: .4rem; + vertical-align: 0.4rem; background: $headings-color; color: $gray; font-weight: 400; @@ -102,7 +101,7 @@ position: relative; z-index: 1; margin-bottom: -1.45%; - opacity: .7; + opacity: 0.7; } // surface layer @@ -179,8 +178,8 @@ justify-content: space-between; box-shadow: none; - &:hover, - &:focus { + &:focus, + &:hover { background: $brand-primary; box-shadow: 0 1px 4px rgba($brand-main-blue-dark, .4); transform: translateY(-1px); @@ -232,7 +231,7 @@ } .driver__version { - opacity: .75; + opacity: 0.75; } .driver--community { @@ -256,11 +255,20 @@ } } +// +// Section: Docs +// + +// +// Section: Community +// .section--community { text-align: center; .section-header { - .section-description { margin-bottom: ($spacer * 2); } + .section-description { + margin-bottom: ($spacer * 2); + } } .grid h1 { @@ -277,8 +285,8 @@ box-shadow: none; padding: $btn-padding-y-sm $btn-padding-x-sm; - &:hover, - &:focus { + &:focus, + &:hover { background: none; .icon { @@ -343,3 +351,17 @@ stroke-width: 2; } } + +// +// Sticky sub menu +// +body { + position: relative; +} + +.sticky { + position: sticky; + top: 0; + width: 100%; + z-index: 2; +} diff --git a/_src/_assets/styles/bigchain/_menus.scss b/_src/_assets/styles/bigchain/_menus.scss index 3da5c76..d05434f 100644 --- a/_src/_assets/styles/bigchain/_menus.scss +++ b/_src/_assets/styles/bigchain/_menus.scss @@ -289,9 +289,9 @@ display: inline-block; } - .menu--sub { background: $gray-dark; + border-bottom: 1px solid $gray; .menu-overflow { text-align: center; diff --git a/_src/start.html b/_src/start.html index 392c831..6b5a38d 100644 --- a/_src/start.html +++ b/_src/start.html @@ -70,9 +70,9 @@ redirect_from: -