1
0
mirror of https://github.com/bigchaindb/site.git synced 2024-11-22 09:46:57 +01:00

all the mobile tweaks

* closes #137
This commit is contained in:
Matthias Kretschmann 2017-06-29 15:16:10 +02:00
parent 733b36a45f
commit b88dcf7c80
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 105 additions and 75 deletions

View File

@ -7,10 +7,13 @@
.section--firsttransaction { .section--firsttransaction {
.section-title { .section-title {
font-size: $font-size-h3; font-size: $font-size-h3;
margin-top: -($spacer * 2);
margin-bottom: $spacer * 3; margin-bottom: $spacer * 3;
text-align: left; text-align: left;
@media ($screen-sm) {
margin-top: -($spacer * 2);
}
&:after { &:after {
display: none; display: none;
} }
@ -25,7 +28,10 @@
// mnml frm // mnml frm
background: none; background: none;
padding: 0; padding: 0;
min-height: 340px;
@media ($screen-sm) {
min-height: 340px;
}
.form-group:first-child { .form-group:first-child {
margin-top: 0; margin-top: 0;
@ -42,7 +48,7 @@
width: 100%; width: 100%;
pre { pre {
min-height: 340px; min-height: 200px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -51,14 +57,21 @@
border: 1px solid $gray-dark; border: 1px solid $gray-dark;
background: none; background: none;
overflow-x: hidden; overflow-x: hidden;
@media ($screen-sm) {
min-height: 340px;
}
} }
} }
.response { .response {
pre { pre {
min-height: 340px;
border: 1px solid $gray-dark; border: 1px solid $gray-dark;
line-height: 1.3; line-height: 1.3;
@media ($screen-sm) {
min-height: 340px;
}
} }
code { code {
@ -72,6 +85,12 @@
.code-example { .code-example {
@include transition; @include transition;
margin-top: $spacer * 2;
@media ($screen-sm) {
max-width: 50%;
margin-top: 0;
}
.nav-link, .nav-link,
pre { pre {
@ -205,7 +224,11 @@
// Drivers starbase // Drivers starbase
// All magic numbers, gonna wing it visually // All magic numbers, gonna wing it visually
.starbase--drivers { .starbase--drivers {
min-height: 12rem; min-height: 7rem;
@media ($screen-md) {
min-height: 12rem;
}
.starbase__image { .starbase__image {
// surface layer // surface layer

View File

@ -3,8 +3,13 @@
} }
.header__content { .header__content {
padding: ($spacer * 4) 0; padding: ($spacer * 3) 0;
text-align: center; text-align: center;
@media ($screen-sm) {
padding-top: ($spacer * 4);
padding-bottom: ($spacer * 4);
}
} }
// intro animation // intro animation

View File

@ -37,75 +37,6 @@ redirect_from:
</form> </form>
<aside class="code-example">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#curl" data-toggle="tab" role="tab">cURL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#python" data-toggle="tab" role="tab">Python</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#nodejs" data-toggle="tab" role="tab">Node.js</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="curl" role="tabpanel">
{% capture curl %}
```bash
curl -X "POST" "https://test.ipdb.io/api/v1/transactions/" \
-d $'{ message: "Blockchain all the things!" }'
```
{% endcapture %}{{ curl | markdownify }}
</div>
<div class="tab-pane highlight" id="python" role="tabpanel">
{% capture python %}
```python
from bigchaindb_driver import BigchainDB
from bigchaindb_driver.crypto import generate_keypair
bdb = BigchainDB('https://test.ipdb.io/api/v1/')
alice = generate_keypair()
tx = bdb.transactions.prepare(
metadata={ "message": "Blockchain all the things!" }
)
txSigned = bdb.transactions.fulfill(
tx,
private_keys=alice.private_key
)
bdb.transactions.send(txSigned)
```
{% endcapture %}{{ python | markdownify }}
</div>
<div class="tab-pane highlight" id="nodejs" role="tabpanel">
{% capture nodejs %}
```js
const driver = require('bigchaindb-driver')
const conn = new driver.Connection('https://test.ipdb.io/api/v1/')
const alice = new driver.Ed25519Keypair()
const tx = driver.Transaction.makeCreateTransaction(
{ message: "Blockchain all the things!" }
)
const txSigned = driver.Transaction.signTransaction(tx, alice.privateKey)
conn.postTransaction(txSigned)
```
{% endcapture %}{{ nodejs | markdownify }}
</div>
</div>
</aside>
</div> </div>
<div class="grid__col"> <div class="grid__col">
<div class="waiting"> <div class="waiting">
@ -135,6 +66,77 @@ conn.postTransaction(txSigned)
</div> </div>
</div> </div>
</div> </div>
<div class="row row--wide">
<aside class="code-example">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#curl" data-toggle="tab" role="tab">cURL</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#python" data-toggle="tab" role="tab">Python</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#nodejs" data-toggle="tab" role="tab">Node.js</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="curl" role="tabpanel">
{% capture curl %}
```bash
curl -X "POST" "https://test.ipdb.io/api/v1/transactions/" \
-d $'{ message: "Blockchain all the things!" }'
```
{% endcapture %}{{ curl | markdownify }}
</div>
<div class="tab-pane highlight" id="python" role="tabpanel">
{% capture python %}
```python
from bigchaindb_driver import BigchainDB
from bigchaindb_driver.crypto import generate_keypair
bdb = BigchainDB('https://test.ipdb.io/api/v1/')
alice = generate_keypair()
tx = bdb.transactions.prepare(
metadata={ "message": "Blockchain all the things!" }
)
txSigned = bdb.transactions.fulfill(
tx,
private_keys=alice.private_key
)
bdb.transactions.send(txSigned)
```
{% endcapture %}{{ python | markdownify }}
</div>
<div class="tab-pane highlight" id="nodejs" role="tabpanel">
{% capture nodejs %}
```js
const driver = require('bigchaindb-driver')
const conn = new driver.Connection('https://test.ipdb.io/api/v1/')
const alice = new driver.Ed25519Keypair()
const tx = driver.Transaction.makeCreateTransaction(
{ message: "Blockchain all the things!" }
)
const txSigned = driver.Transaction.signTransaction(tx, alice.privateKey)
conn.postTransaction(txSigned)
```
{% endcapture %}{{ nodejs | markdownify }}
</div>
</div>
</aside>
</div>
</section> </section>
<nav class="menu--sub" data-gumshoe-header> <nav class="menu--sub" data-gumshoe-header>