Split product version and commit revision hash on footer.

app/controllers/application.js

@@ -11,6 +11,18 @@ export default Ember.Controller.extend(BaseControllerMixin, {
 
     apiURL: Ember.computed.oneWay('restClient.apiURL'),
 
+    productVersion: Ember.computed('application.version', function() {
+      return this.get('application.version').split('+')[0];
+    }),
+
+    productRevisionHash: Ember.computed('application.version', function() {
+      var parts = this.get('application.version').split('+');
+      if (parts.length === 2) {
+        return parts[1];
+      }
+      return undefined;
+    }),
+
     actions: {
         search: function () {
             var query = this.get('searchBox');

app/styles/_kl-text.scss

@@ -0,0 +1,4 @@
+.kl-span--low-importance {
+    color: $text-low-importance-color;
+    font-size: $text-low-importance-font-size;
+}

app/styles/_variables.scss

@@ -13,3 +13,6 @@ $link-color: $blue;
 $button-font-weight: normal;
 
 $pre-background-color: $silver;
+
+$text-low-importance-color: #aaa;
+$text-low-importance-font-size: smaller;

app/styles/app.scss

@@ -12,6 +12,7 @@
 @import 'kl-dropdown';
 @import 'kl-progress';
 @import 'kl-table';
+@import 'kl-text';
 
 // Additional Utilities
 @import 'kl-white-space';

app/templates/application.hbs

@@ -49,7 +49,11 @@
           </li>
         {{/with}}
         <li class="inline-block h5">
-          <strong>Klondike:</strong> {{application.version}}
+          <strong>Klondike:</strong>
+          {{productVersion}}
+          {{#if productRevisionHash}}
+            <span class="kl-span--low-importance">({{productRevisionHash}})</span>
+          {{/if}}
         </li>
       </ul>
     </div>