From dab766f3c9509567aa52a10a3f21b6e051c21e24 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 27 Jun 2017 16:16:51 +0200
Subject: [PATCH] transaction tool simplification

---
 _src/_assets/javascripts/page-getstarted.js |  5 ++-
 _src/_assets/styles/_page-getstarted.scss   | 30 ++++++++++++++++--
 _src/getstarted.html                        | 35 +++++++++------------
 3 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/_src/_assets/javascripts/page-getstarted.js b/_src/_assets/javascripts/page-getstarted.js
index f91bbf6..c6f699c 100644
--- a/_src/_assets/javascripts/page-getstarted.js
+++ b/_src/_assets/javascripts/page-getstarted.js
@@ -96,11 +96,14 @@ window.addEventListener('DOMContentLoaded', function domload(event) {
 
             console.log(response)
 
-            const outputContent = JSON.stringify(response, null, 4) // indented with 4 spaces
+            const outputContent = JSON.stringify(response, null, 2) // indented with 2 spaces
             output.textContent = outputContent
 
             transactionLink.href = 'https://test.ipdb.io/api/v1/transactions/' + response.id
 
+            postButton.classList.add('disabled')
+            postButton.style.opacity = 0
+
         }, reason => { // Error!
             console.log(reason)
 
diff --git a/_src/_assets/styles/_page-getstarted.scss b/_src/_assets/styles/_page-getstarted.scss
index b6023d9..d013af0 100644
--- a/_src/_assets/styles/_page-getstarted.scss
+++ b/_src/_assets/styles/_page-getstarted.scss
@@ -4,12 +4,21 @@
 // bigchaindb.com
 //
 
+.section--firsttransaction {
+    .grid__col {
+
+    }
+}
+
 .waiting {
+    width: 100%;
+
     pre {
-        min-height: 254px;
+        min-height: 340px;
         display: flex;
         align-items: center;
         justify-content: center;
+        text-align: center;
         font-style: italic;
         border: 1px solid $gray-dark;
         background: none;
@@ -18,15 +27,32 @@
 
 .response {
     pre {
-        min-height: 254px;
+        min-height: 340px;
         border: 1px solid $gray-dark;
         background: none;
+        line-height: 1.3;
+    }
+
+    code {
+        font-size: $font-size-xs;
     }
 }
 
+.message {
+    color: #fff;
+}
+
 .form--transaction {
+    min-height: 340px;
     padding-left: $spacer * 1.5;
     padding-right: $spacer * 1.5;
+    display: flex;
+    align-items: center;
+}
+
+.form--transaction__content {
+    border: none;
+    padding: 0;
 }
 
 .section-title--numbered {
diff --git a/_src/getstarted.html b/_src/getstarted.html
index 6b04aaf..46ca141 100644
--- a/_src/getstarted.html
+++ b/_src/getstarted.html
@@ -14,29 +14,27 @@ redirect_from:
 {% assign content =  site.data.getstarted %}
 
 <section class="section section--firsttransaction">
-    <div class="row">
-        <header class="section-header">
-            <h1 class="section-title">Get your first transaction into BigchainDB</h1>
-            <p class="section-description">Never wrote something into a blockchain? Now’s your chance: add your message and send off your first transaction to BigchainDB running within IPDB.</p>
-        </header>
-    </div>
+
     <div class="row row--wide">
         <div class="grid grid--full grid-small--half grid--gutters">
             <div class="grid__col">
-                <h4>Request</h4>
+                <h4>Get your first transaction into BigchainDB</h4>
                 <form id="form-transaction" class="form form--transaction js-parsley">
-                    <p class="form-group">
-                        <input id="message" class="form-control" type="text" name="message" required>
-                        <label class="form-label" for="message">Message</label>
-                    </p>
-                    <p class="form-group message">
-                        A transaction can contain a digital asset along with a message. Type something to be sent along the asset.
-                    </p>
-                    <button class="btn btn-primary" id="post" disabled>Off you go</button>
+                    <fieldset class="form--transaction__content">
+                        <p class="form-group">
+                            <input id="message" class="form-control" type="text" name="message" required>
+                            <label class="form-label" for="message">Message</label>
+                        </p>
+                        <p class="form-group message">
+                            A transaction can contain a digital asset along with a message. Type something to be sent along the asset.
+                        </p>
+                        <button class="btn btn-primary" id="post" disabled>Off you go</button>
+                    </fieldset>
+
                 </form>
             </div>
             <div class="grid__col">
-                <h4>Response</h4>
+                <h4>&nbsp;</h4>
                 <div class="waiting">
                     <pre>
 <code class="waiting">Beep, boop, waiting for your input...</code>
@@ -66,11 +64,6 @@ redirect_from:
             </div>
         </div>
     </div>
-    <div class="row">
-        <header class="section-header">
-            <p class="section-description">Simple, eh?</p>
-        </header>
-    </div>
 </section>
 
 <nav class="menu--sub" data-gumshoe-header>