From c74ff89458b6a88cbb1e473f84f71be8fd43a69c Mon Sep 17 00:00:00 2001
From: Boris Kubiak <kubiakboris@gmail.com>
Date: Tue, 20 Feb 2018 19:05:11 +0100
Subject: [PATCH] Minor improvements, especially in mobile UI

---
 README.md               | 10 ++++++----
 src/App.vue             |  4 ++++
 src/vue/Corner.vue      |  3 ++-
 src/vue/Description.vue |  8 +++++---
 src/vue/Footer.vue      |  4 ++++
 src/vue/Headline.vue    | 15 +--------------
 src/vue/Statistics.vue  |  7 +++++++
 webpack.config.js       | 13 +++++++++----
 8 files changed, 38 insertions(+), 26 deletions(-)

diff --git a/README.md b/README.md
index 392d8dc..f2be68d 100644
--- a/README.md
+++ b/README.md
@@ -39,17 +39,19 @@ The keystore file is encrypted with a AES-128-CTR cipher using the BKDF2-SHA256
 
 ## Performance
 
-For some reason, the performance of Vanity-ETH can vary a lot from a browser to another.
+For some reason, the performance of Vanity-ETH can vary a lot from a browser to another. Right now, Chrome seems to be
+the one providing the best results.
 
-Right now, Chrome seems to be the one providing the best results.
+Using Vanity-ETH on your phone or tablet will work, but don't expect to reach the speed of a good old computer.
 
 
 ## Compatibility
 
-All addresses generated with Vanity-ETH are ERC-20 compatible.
+Any address generated with Vanity-ETH is ERC-20 compatible, which means you can use it for an ICO, an airdrop, or just
+to withdraw your funds from an exchange.
 
 The keystore file is 100% compatible with MyEtherWallet, MetaMask, Mist, and geth.
-        
+
 
 ## Local development
 
diff --git a/src/App.vue b/src/App.vue
index f21e849..4fda322 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -349,4 +349,8 @@
         #content
             margin-top: 5em
             margin-bottom: 4em
+
+    @media screen and (max-width: 480px)
+        .panel
+            padding: 1em
 </style>
diff --git a/src/vue/Corner.vue b/src/vue/Corner.vue
index a10faa4..a9fbd38 100644
--- a/src/vue/Corner.vue
+++ b/src/vue/Corner.vue
@@ -1,6 +1,6 @@
 <template>
     <a href="https://github.com/bokub/vanity-eth" target="_blank" aria-label="View source on Github">
-        <img :src="'https://ssl.google-analytics.com/collect?v=1&t=pageview&tid=UA-20226534-16&&dp=%2F&cid=' + cid + '&dr=' + dr + '&sr=' + sr + '&vp=' + vp + '&z=' + new Date().getTime()">
+        <img :src="'https://ssl.google-analytics.com/collect?v=1&t=pageview&tid=' + tid + '&dp=%2F&cid=' + cid + '&dr=' + dr + '&sr=' + sr + '&vp=' + vp + '&z=' + new Date().getTime()">
         <svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
             <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" fill="#fff"></path>
             <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
@@ -17,6 +17,7 @@
     export default {
         data: function () {
             return {
+                tid: process.env.TID,
                 cid: localStorage.getItem('cid'),
                 dr: encodeURIComponent(document.referrer),
                 vp: document.documentElement.clientHeight + 'x' + document.documentElement.clientWidth,
diff --git a/src/vue/Description.vue b/src/vue/Description.vue
index 3e79f88..19bd409 100644
--- a/src/vue/Description.vue
+++ b/src/vue/Description.vue
@@ -28,12 +28,14 @@
         </p>
         <h2>Performance</h2>
         <p>
-            For some reason, the performance of Vanity-ETH can vary a lot from a browser to another.<br>
-            Right now, Chrome seems to be the one providing the best results.
+            For some reason, the performance of Vanity-ETH can vary a lot from a browser to another. Right now, Chrome
+            seems to be the one providing the best results.<br>
+            Using Vanity-ETH on your phone or tablet will work, but don't expect to reach the speed of a good old computer.
         </p>
         <h2>Compatibility</h2>
         <p>
-            All addresses generated with Vanity-ETH are ERC-20 compatible.<br>
+            Any address generated with Vanity-ETH is ERC-20 compatible, which means you can use it for an ICO, an
+            airdrop, or just to withdraw your funds from an exchange.<br>
             The keystore file is 100% compatible with MyEtherWallet, MetaMask, Mist, and geth.
         </p>
     </div>
diff --git a/src/vue/Footer.vue b/src/vue/Footer.vue
index 9d51c5a..bea09b7 100644
--- a/src/vue/Footer.vue
+++ b/src/vue/Footer.vue
@@ -55,4 +55,8 @@
                 padding-bottom: 2px
                 i
                     font-size: 1.2em
+
+    @media screen and (max-width: 480px)
+        footer
+            padding-bottom: 1em
 </style>
\ No newline at end of file
diff --git a/src/vue/Headline.vue b/src/vue/Headline.vue
index 206fba0..8614009 100644
--- a/src/vue/Headline.vue
+++ b/src/vue/Headline.vue
@@ -24,9 +24,8 @@
             font-size: 3em
             font-weight: 700
             border: 4px solid $white-text
-            width: 33%
+            width: 7.8em
             margin: 0 auto
-            padding: 1px
 
         p
             font-size: 1.5em
@@ -39,7 +38,6 @@
     @media screen and (max-width: 1280px)
         h1
             font-size: 2.8em
-            width: 35%
 
     @media screen and (max-width: 1024px)
         div
@@ -47,40 +45,29 @@
             h1
                 font-size: 2.5em
                 border: 3px solid $white-text
-                width: 34%
             p
                 font-size: 1.4em
                 margin-top: 0.8em
 
-    @media screen and (max-width: 768px)
-        h1
-            width: 43%
-
     @media screen and (max-width: 640px)
         div
             margin-bottom: 4em
             h1
-                width: 46%
                 font-size: 2.2em
-                padding: 8px
             p
                 font-size: 1.3em
                 margin-top: 0.7em
 
     @media screen and (max-width: 480px)
         h1
-            width: 65%
             font-size: 2em
-            padding: 7px
             border: 2px solid $white-text
         p
             font-size: 1.2em
 
     @media screen and (max-width: 320px)
         h1
-            width: 73%
             font-size: 1.6em
-            padding: 6px
         p
             font-size: 1em
 </style>
\ No newline at end of file
diff --git a/src/vue/Statistics.vue b/src/vue/Statistics.vue
index b6ff3fa..4222ff7 100644
--- a/src/vue/Statistics.vue
+++ b/src/vue/Statistics.vue
@@ -117,4 +117,11 @@
         color: $grey-text
         margin-left: 15px
         word-break: break-all
+
+
+    @media screen and (max-width: 480px)
+        .percentage
+            left: -5px
+        .probability
+            width: 80%
 </style>
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index b67210c..e83e02f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -50,15 +50,20 @@ module.exports = {
 	},
 	performance: {
 		hints: false
-	}
+	},
+	plugins: [
+		new webpack.DefinePlugin({
+			'process.env': {
+				NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+				TID: JSON.stringify(process.env.TID)
+			}
+		})
+	]
 };
 
 if (process.env.NODE_ENV === 'production') {
     // http://vue-loader.vuejs.org/en/workflow/production.html
 	module.exports.plugins = (module.exports.plugins || []).concat([
-		new webpack.DefinePlugin({
-			'process.env': {NODE_ENV: '"production"'}
-		}),
 		new webpack.optimize.UglifyJsPlugin({
 			sourceMap: false,
 			compress: {