Add QR code for tempalinks (#97)

* Add QR code of tempalink

* add padding to the bottom of the QR code

to ensure that there's space to scroll down far enough so the footer 
isn't covering the QR code

* Fix spinner css

Use a rotating css background image instead of a separate element placed 
behind

This allows flexbox to function correctly

lib/components/Spinner.js

@@ -10,9 +10,6 @@ export default class Spinner extends React.Component {
     })
 
     return <div className={classes}>
-
-      <div className="spinner-content">
-
       <img
         alt={this.props.name || this.props.dir}
         src={`/images/${this.props.dir}.png`}
@@ -22,11 +19,6 @@ export default class Spinner extends React.Component {
         : <div className="spinner-name">{this.props.name}</div>}
       {this.props.size === null ? null
         : <div className="spinner-size">{formatSize(this.props.size)}</div>}
-
-      </div>
-
-      <img src="/images/pizza.png" className="spinner-background" />
-
     </div>
   }
 

lib/components/Tempalink.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import QRCode from 'react-qr'
 
 export default class Tempalink extends React.Component {
   constructor() {
@@ -12,13 +13,16 @@ export default class Tempalink extends React.Component {
 
   render() {
     var url = window.location.origin + '/' + this.props.token
-    return <input
-      className="tempalink"
+    return <div className="tempalink">
+      <input
         onClick={this.onClick}
         readOnly
         ref="input"
         type="text"
         value={url} />
+
+        <QRCode text={url} />
+    </div>
   }
 
 }

lib/index.styl

@@ -82,10 +82,6 @@ p {
     }
 }
 
-.container {
-    height: 100vh
-}
-
 .page {
     display: flex
     flex-direction: column;
@@ -121,35 +117,32 @@ p {
 }
 
 .spinner {
-    position: relative
-    z-index: -1
     width: 300px
-    height: 300px
+    min-height: 300px
     margin: 0 auto 20px
 
     display: flex
+    flex-direction: column
     align-items: center
+    align-content: center
     justify-content: center
 
-    .spinner-background {
-        display: block
+    &:before {
+        background: url(/images/pizza.png) center center / 300px 300px no-repeat
+        content: ""
+        position: absolute
         width: 300px
         height: 300px
-        position: absolute
-        top: 0
-        left: 0
         transition: transform 1s
         z-index: -1
     }
 
-    &.spinner-animated .spinner-background {
+    &.spinner-animated:before {
         animation: rotate 5s infinite linear
     }
 
     .spinner-image {
-        display: block
-        width: 150px
-        margin: 0 auto
+        width: 50%
     }
 
     .spinner-name {
@@ -160,8 +153,6 @@ p {
         text-overflow: ellipsis
         white-space: nowrap
         margin-top: 10px
-        margin: 0 auto
-        width: 220px
     }
 
     .spinner-size {
@@ -175,6 +166,10 @@ p {
 }
 
 .tempalink {
+    display: flex
+    flex-direction: column
+
+    input {
         background: beige
         color: dark-gray
         border: 0
@@ -186,6 +181,12 @@ p {
         width: 100%
     }
 
+    img {
+        margin: auto
+        padding-bottom: 60px
+    }
+}
+
 .data {
     color: gray
     font: 14px/20px "Quicksand", sans-serif

package.json

@@ -58,6 +58,7 @@
     "react": "^0.13.0",
     "react-frozenhead": "^0.3.0",
     "react-google-analytics": "^0.2.0",
+    "react-qr": "0.0.2",
     "react-router": "^0.13.1",
     "socket.io": "^1.3.5",
     "socket.io-client": "^1.3.5",