m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-06-28 00:27:58 +02:00
Code

live generate qr codes

Browse Source
This commit is contained in:
Matthias Kretschmann 2017-09-21 19:22:52 +02:00
parent ce653065fe
commit 6deceecd7c
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 35 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
_src/_assets/img/btc-qr.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 455 B

BIN
_src/_assets/img/eth-qr.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.8 KiB

39
_src/_assets/js/_modals.js
View File

@ -2,12 +2,13 @@
// Vex modals
//
/* global vex, fetch, Clipboard */
/* global vex, fetch, Clipboard, QRious */
/* exported krlcModals */
/* eslint-disable spaced-comment */
//=require vex-js/dist/js/vex.combined.js
//=require clipboard/dist/clipboard.js
//=require qrious/dist/qrious.js
/* eslint-enable spaced-comment */
const krlcModals = (() => { // eslint-disable-line no-unused-vars
@ -45,31 +46,41 @@ const krlcModals = (() => { // eslint-disable-line no-unused-vars
<div class="grid grid--full grid-medium--half grid--gutters">
<div class="grid__col">
<h4>Bitcoin</h4>
<img class="qr" src="/assets/img/btc-qr.png" />
<pre class="highlight"><code id="btcAddress" class="btcAddress nt" value="${btcAddress}">${btcAddress}</code><button class="btn" data-clipboard-target="#btcAddress" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
<path d="M16 8v8H8v4h12V8h-4zm0-2h6v16H6v-6H0V0h16v6zM2 2v12h12V2H2z"></path>
</svg></button></pre>
<canvas class="qr" id="qr-btc"></canvas>
<pre class="highlight"><code id="btcAddress" class="btcAddress nt" value="${btcAddress}">${btcAddress}</code><button class="btn" data-clipboard-target="#btcAddress" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><path d="M16 8v8H8v4h12V8h-4zm0-2h6v16H6v-6H0V0h16v6zM2 2v12h12V2H2z"></path></svg></button></pre>
</div>
<div class="grid__col">
<h4>Ethereum</h4>
<img class="qr" src="/assets/img/eth-qr.png" />
<pre class="highlight"><code id="ethAddress" class="ethAddress nt" value="${ethAddress}">${ethAddress}</code><button class="btn" data-clipboard-target="#ethAddress" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
<path d="M16 8v8H8v4h12V8h-4zm0-2h6v16H6v-6H0V0h16v6zM2 2v12h12V2H2z"></path>
</svg></button></pre>
<canvas class="qr" id="qr-eth"></canvas>
<pre class="highlight"><code id="ethAddress" class="ethAddress nt" value="${ethAddress}">${ethAddress}</code><button class="btn" data-clipboard-target="#ethAddress" title="Copy to clipboard"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><path d="M16 8v8H8v4h12V8h-4zm0-2h6v16H6v-6H0V0h16v6zM2 2v12h12V2H2z"></path></svg></button></pre>
</div>
</div>
`
})
// Generate QR code
const qrBtc = new QRious({
element: document.getElementById('qr-btc'),
value: btcAddress
})
const qrEth = new QRious({
element: document.getElementById('qr-eth'),
value: ethAddress
})
qrBtc.backgroundAlpha = 0
qrEth.backgroundAlpha = 0
qrBtc.foreground = '#6b7f88'
qrEth.foreground = '#6b7f88'
qrBtc.size = 160
qrEth.size = 160
// Clipboard button
const clipboard = new Clipboard('.btn')
clipboard.on('success', e => {
e.trigger.classList.add('success')
console.info('Action:', e.action)
console.info('Text:', e.text)
console.info('Trigger:', e.trigger)
e.clearSelection()
})
})

9
_src/_assets/styl/_kremalicious/actions.styl
View File

@ -45,15 +45,16 @@
@extend .textcenter
.vex-content
max-width: 45em
max-width: 46em
h4
font-size: $font-size-h5
margin-top: 0
margin-bottom: ($spacer / 2)
margin-bottom: ($spacer / 4)
color: $brand-grey
.qr
margin-bottom: $spacer
width: 120px
margin-bottom: ($spacer / 2)
pre
@extend .small

5
_src/_assets/styl/_kremalicious/typography.styl
View File

@ -125,18 +125,17 @@ a,
color: $link-color
text-decoration: none
transition: .2s ease-in-out
box-shadow: 0 1px 0 rgba($link-color, 40%)
&:hover,
&:focus
outline: 0
color: $link-color-hover
box-shadow: 0 1px 0 rgba($link-color-hover, 70%)
box-shadow: inset 0 -1px 0 rgba($link-color-hover, 70%)
&:active
transition: none
color: darken($link-color, 30%)
box-shadow: 0 1px 0 darken($link-color, 30%)
box-shadow: inset 0 -1px 0 darken($link-color, 30%)
h1 &,
h2 &,

3
_src/_assets/styl/_kremalicious/vex.styl
View File

@ -93,11 +93,12 @@ body.vex-open
top: ($spacer/4)
right: ($spacer/2)
&:before
@extend .close
content: "\00D7" // &times;
display: block
color: $brand-grey
font-weight: 500
&:hover,
&:focus

1
package.json
View File

@ -41,6 +41,7 @@
"clipboard": "^1.7.1",
"normalize-css": "^2.3.1",
"normalize-opentype.css": "^0.2.4",
"qrious": "^4.0.2",
"simple-jekyll-search": "^1.4.1",
"time-elements": "^0.6.1",
"vex-js": "^4.0.0",