thanks modal tweaks

_config.yml

@@ -21,6 +21,7 @@ author:
     facebook:           matthiaskretschmann
     googleplus:         +MatthiasKretschmann
     bitcoin:            171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V
+    ether:              "0x339dbC44d39bf1961E385ed0Ae88FC6069b87Ea1"
 
 
 # Urls

_src/_assets/img/bitcoin.svg

@@ -1,4 +1,4 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="10" height="20" viewBox="0 0 10 20">
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="20" viewBox="0 0 10 20">
   <title>bitcoin</title>
   <path d="M8.16,10A3.67,3.67,0,0,0,10,6.76c0-1-.37-3.19-3.42-3.84V0.81A0.82,0.82,0,0,0,5.79,0,0.82,0.82,0,0,0,5,.81V2.7H3.95V0.81A0.82,0.82,0,0,0,3.16,0a0.82,0.82,0,0,0-.79.81V2.7H0.79a0.81,0.81,0,0,0,0,1.62H1.05V15.68H0.79a0.81,0.81,0,0,0,0,1.62H2.37v1.89a0.82,0.82,0,0,0,.79.81,0.82,0.82,0,0,0,.79-0.81V17.3H5v1.89a0.82,0.82,0,0,0,.79.81,0.82,0.82,0,0,0,.79-0.81V17.08C9.63,16.43,10,14.27,10,13.24A3.67,3.67,0,0,0,8.16,10ZM4.53,4.32c2.58,0,3.89.81,3.89,2.43S7.11,9.19,4.53,9.19H2.63V4.32H4.53Zm0,11.35H2.63V10.81H4.53c2.58,0,3.89.81,3.89,2.43S7.11,15.68,4.53,15.68Z"/>
 </svg>

_src/_assets/img/clipboard.svg

@@ -0,0 +1,3 @@
+<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>

_src/_assets/js/_modals.js

@@ -2,11 +2,12 @@
 // Vex modals
 //
 
-/* global vex, fetch */
+/* global vex, fetch, Clipboard */
 /* exported krlcModals */
 
 /* eslint-disable spaced-comment */
 //=require vex-js/dist/js/vex.combined.js
+//=require clipboard/dist/clipboard.js
 /* eslint-enable spaced-comment */
 
 const krlcModals = (() => { // eslint-disable-line no-unused-vars
@@ -15,6 +16,7 @@ const krlcModals = (() => { // eslint-disable-line no-unused-vars
     }
 
     let btcAddress
+    let ethAddress
 
     const _private = {
         getBtcAddress() {
@@ -24,10 +26,11 @@ const krlcModals = (() => { // eslint-disable-line no-unused-vars
                 .then(res => res.json())
                 .then(data_ => {
                     btcAddress = data_[0].author.bitcoin
+                    ethAddress = data_[0].author.ether
                 })
                 .catch(err => console.error(err))
 
-            return btcAddress
+            return {btcAddress, ethAddress}
         },
 
         vexBtc() {
@@ -37,7 +40,38 @@ const krlcModals = (() => { // eslint-disable-line no-unused-vars
 
                     vex.defaultOptions.className = 'vex-theme-kremalicious vex-bitcoin'
                     vex.dialog.buttons.YES.text = 'Close'
-                    vex.open({unsafeContent: '<h3 class="vex__title">My Bitcoin Address</h3>\n <img src="/assets/img/btc-qr.png" />\n <pre class="highlight"><a href="bitcoin:' + btcAddress + '"><code class="btcAddress nt">' + btcAddress + '</code></a></pre>'})
+                    vex.open({unsafeContent: `
+                        <h3 class="vex__title">Say thanks</h3>
+                        <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>
+                            </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>
+                            </div>
+                        </div>
+                        `
+                    })
+
+                    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()
+                    })
                 })
             })
         }

_src/_assets/styl/_kremalicious/actions.styl

@@ -6,8 +6,14 @@
     .grid
         margin-bottom: 0
 
+        @media $screen-sm
+            .grid__col:last-child
+                display: flex
+                justify-content: flex-end
+
 .action
     padding-left: 32px
+    display: inline-block
 
     .icon
         margin-right: 8px
@@ -38,10 +44,52 @@
 .vex-bitcoin
     @extend .textcenter
 
-    img
+    .vex-content
+        max-width: 45em
+
+    h4
+        margin-top: 0
+        margin-bottom: ($spacer / 2)
+
+    .qr
         margin-bottom: $spacer
-        width: 156px
+        width: 120px
 
     pre
         @extend .small
-        display: inline-block
+        margin: 0
+        position: relative
+        padding-right: 2.4rem
+
+        code
+            padding: ($spacer / 2)
+            padding-right: 0
+            font-size: .65rem
+
+    .btn
+        position: absolute
+        right: 0
+        top: 0
+        bottom: 0
+        border: 0
+        box-shadow: none
+        border-top-left-radius: 0
+        border-bottom-left-radius: 0
+        background: alpha($brand-grey, 30%)
+
+        svg
+            width: 1rem
+            height: 1rem
+            fill: $brand-grey
+            transition: .15s ease-out
+
+        &:hover
+            background: alpha($brand-grey, 30%)
+            svg
+                fill: $brand-grey-dimmed
+
+        &.success
+            background: darken($alert-success, 50%)
+
+            svg
+                fill: $brand-dark

_src/_assets/styl/_kremalicious/vex.styl

@@ -50,7 +50,7 @@ body.vex-open
     display: flex
     align-items: center
     justify-content: center
-    background: alpha($body-bg, .8)
+    background: alpha($body-bg, .9)
     backdrop-filter: blur(5px)
     animation: vex-fadein .3s
 
@@ -66,10 +66,13 @@ body.vex-open
         border-radius: $border-radius-base
         border: 1px solid alpha($brand-grey-light, .4)
         box-shadow: 0 5px 30px alpha($brand-grey-light, .2)
+        padding: 0 $spacer
 
     .vex__title
         @extend .h4
         margin-top: ($spacer/2)
+        margin-left: -($spacer)
+        margin-right: -($spacer)
         border-bottom: 1px solid alpha($brand-grey-light, .4)
         padding-bottom: ($spacer/2)
 

_src/_includes/actions.html

@@ -16,7 +16,7 @@
                     <use xlink:href="/assets/img/sprite.svg#bitcoin"></use>
                 </svg>
                 <h1 class="action__title">Found something useful?</h1>
-                <p class="action__text">Say thanks <a href="#" class="js-vex-btc">with Bitcoins.</a></p>
+                <p class="action__text">Say thanks <a href="#" class="js-vex-btc">with Bitcoins or Ether.</a></p>
             </article>
         </div>
     </div>

package.json

@@ -38,6 +38,7 @@
     ]
   },
   "dependencies": {
+    "clipboard": "^1.7.1",
     "normalize-css": "^2.3.1",
     "normalize-opentype.css": "^0.2.4",
     "simple-jekyll-search": "^1.4.1",