feat(header): add version

SteveVanOpstal · Nov 29, 2016 · 0cb8e8e · 0cb8e8e
1 parent ca98275
commit 0cb8e8e
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 33 deletions.
diff --git a/config/build/webpack.client.js b/config/build/webpack.client.js
@@ -1,5 +1,6 @@
 var helpers = require('../../helpers');
 var settings = require('../settings');
+var package = require('../../package.json');
 
 /* plugins */
 var webpack = require('webpack');
@@ -64,7 +65,8 @@ module.exports = function(options) {
         baseUrl: '/',
         host: settings.httpServer.host,
         port: settings.httpServer.port,
-        ENV: ENV
+        ENV: ENV,
+        version: package.version
       }),
       new WebpackMd5Hash()
     ]

diff --git a/src/client/base.css b/src/client/base.css
@@ -5,10 +5,10 @@ body {
 }
 
 h1 {
-  font-size: 3em;
+  font-size: 2.8em;
   margin: 2px 8px 0px 16px;
   display: inline-block;
-  min-width: 330px;
+  min-width: 300px;
 }
 
 h2 {
@@ -31,32 +31,36 @@ a:hover {
 /* header */
 
 header {
-  height: 4em;
-  margin: 15px;
+  margin: 10px;
 }
 
 header > .align-center {
   display: flex;
-  max-width: 440px;
+  max-width: 400px;
 }
 
-.alpha,
-.beta {
-  transform: rotate(20deg);
-  margin-left: -25px;
-  margin-right: -15px;
-  margin-top: -4px;
-  padding: 2px 5px;
+header > .align-center > div {
+  display: flex;
+  flex-direction: column;
+}
+
+.version {
   color: white;
+  background-color: #2B6094;
+  background-color: #5f9ea0;
+  transform: rotate(10deg);
+  margin: -60px -20px 0 0;
+  font-size: 0.8em;
+  padding: 2px 5px;
   border-radius: 5px;
-  height: 20px;
+  align-self: flex-end;
 }
 
-.alpha {
+[class*=alpha] {
   background-color: #A11720;
 }
 
-.beta {
+[class*=beta] {
   background-color: #246935;
 }
 
@@ -260,6 +264,34 @@ button:disabled {
   .content {
       margin: 0;
   }
+
+  h1 {
+    font-size: 2em;
+    min-width: 220px;
+    margin-left: 10px;
+  }
+
+  header {
+    height: 2.6em;
+  }
+
+  header .icon-logo {
+    width: 44px;
+    height: 44px;
+  }
+
+  header .logo {
+    height: 44px;
+  }
+
+  header > .align-center {
+    max-width: 300px;
+  }
+
+  .version {
+    margin: -45px -20px 0 0;
+    font-size: 0.7em;
+  }
 }
 
 /* gold */

diff --git a/src/client/build/build.css b/src/client/build/build.css
@@ -4,17 +4,20 @@
 
 .title {
   display: flex;
-  background-color: #DDD;
+  margin-top: -80px;
+  padding-left: 30px;
+  width: 400px;
+  height: 80px;
 }
 
 .title img {
-  width: 90px;
-  height: 90px;
+  width: 80px;
+  height: 80px;
 }
 
 .title h2 {
-  font-size: 2em;
-  padding-left: 30px;
+  font-size: 1.8em;
+  margin: 32px 0 0 12px;
 }
 
 
@@ -171,12 +174,8 @@ lb-graph .line:nth-of-type(17) {
 
 /* lb-graph - lb-legend */
 
-lb-graph lb-legend {
-  margin: 10px;
-}
-
 lb-graph lb-legend ul {
-  margin: 0;
+  margin: 10px;
   padding: 0;
 }
 
@@ -758,11 +757,22 @@ lb-items-from > div:first-of-type:last-of-type > lb-item:before {
   }
 }
 
-/*@media (max-width: 1350px) {
-  lb-shop .items lb-item {
-    width: 48%;
+@media (max-width: 1350px) {
+  .title {
+    margin-top: -60px;
+    height: 60px;
   }
-}*/
+
+  .title img {
+    width: 60px;
+    height: 60px;
+  }
+
+  .title h2 {
+    font-size: 1.4em;
+    margin: 20px 0 0 10px;
+  }
+}
 
 @media (max-width: 800px) {
   lb-shop .left {

diff --git a/src/client/index.html b/src/client/index.html
@@ -21,9 +21,11 @@
 <body>
   <header>
     <div class="align-center">
-      <a href="/"><%= require('./assets/images/logo.svg') %></a>
-      <h1>Legend Builder</h1>
-      <a href="https://github.com/SteveVanOpstal/LegendBuilder/releases" class="alpha">Alpha</a>
+      <a href="/" class="logo"><%= require('./assets/images/logo.svg') %></a>
+      <div>
+        <h1>Legend Builder</h1>
+        <a href="https://github.com/SteveVanOpstal/LegendBuilder/releases" class="version <%= htmlWebpackPlugin.options.version %>"><%= htmlWebpackPlugin.options.version %></a>
+      </div>
     </div>
     <!--<lb-actions></lb-actions>-->
   </header>