scrollspying, sticky sub menu

_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)

_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;
+}

_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;

_src/start.html

@@ -70,9 +70,9 @@ redirect_from:
     </div>
 </section>
 
-<nav class="menu--sub">
+<nav class="menu--sub" data-gumshoe-header>
     <div class="row row--wide">
-        <div class="menu-overflow">
+        <div class="menu-overflow" data-gumshoe>
             <a class="menu__link scroll" href="#server">Server</a>
             <a class="menu__link scroll" href="#drivers">Drivers &amp; Tools</a>
             <a class="menu__link scroll" href="#docs">Documentation</a>

package.json

@@ -26,6 +26,7 @@
   ],
   "dependencies": {
     "bigchaindb-driver": "^0.1.1",
+    "gumshoe": "github:cferdinandi/gumshoe",
     "is-in-viewport": "^3.0.0",
     "jquery": "^3.2.1",
     "normalize-css": "^2.3.1",