Separate logo to a directive

client/app/app.css

@@ -57,6 +57,7 @@
 @import 'designer/roles/roles.css';
 @import 'designer/tasks/tasks.css';
 @import 'directives/complexVar/complexVar.css';
+@import 'logo/logo.css';
 @import 'main/main.css';
 @import 'project/project.css';
 @import 'runs/runs.css';

client/app/app.js

@@ -92,6 +92,7 @@ import json2yaml from './filters/json2yaml/json2yaml.filter';
 
 import complexVar from './directives/complexVar/complexVar.directive';
 import tasks from './designer/tasks/tasks.directive';
+import logo from './logo/logo.directive';
 
 import editor from './services/editor/editor.service';
 
@@ -109,7 +110,7 @@ angular.module('app2App', [ngCookies, ngResource, ngSanitize, uiRouter, uiBootst
   // Filters
   dictToKeyValueArray, dictToKeyValueArraySimple, keyValueArrayToDict, keyValueArrayToArray, addDotInKey, removeDotInKey, json2yaml,
   // Directives
-  complexVar, tasks, treecontrol, 'btford.markdown', 'ngTagsInput', 'angular-loading-bar'
+  complexVar, tasks, treecontrol, 'btford.markdown', 'ngTagsInput', 'angular-loading-bar', logo
 
 ])
   .config(routeConfig)

client/app/logo/logo.css

@@ -0,0 +1,8 @@
+.rotated_a {
+  font-size: 90px;
+  -ms-transform: rotate(90deg); /* IE 9 */
+  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
+  transform: rotate(90deg);
+  display: inline-block;
+  padding-left: 10px;
+}

client/app/logo/logo.directive.js

@@ -0,0 +1,12 @@
+'use strict';
+const angular = require('angular');
+
+export default angular.module('webAppApp.logo', [])
+  .directive('logo', function() {
+    return {
+      template: require('./logo.html'),
+      restrict: 'EA',
+      link: function(scope, element, attrs) {}
+    };
+  })
+  .name;

client/app/logo/logo.directive.spec.js

@@ -0,0 +1,20 @@
+'use strict';
+
+describe('Directive: logo', function() {
+  // load the directive's module and view
+  beforeEach(module('webAppApp.logo'));
+  beforeEach(module('app/logo/logo.html'));
+
+  var element, scope;
+
+  beforeEach(inject(function($rootScope) {
+    scope = $rootScope.$new();
+  }));
+
+  it('should make hidden element visible', inject(function($compile) {
+    element = angular.element('<logo></logo>');
+    element = $compile(element)(scope);
+    scope.$apply();
+    expect(element.text()).to.equal('this is the logo directive');
+  }));
+});

client/app/logo/logo.html

@@ -0,0 +1 @@
+<span style="color:#ffa800;font-size:50px; font-family: 'ExpletusSans-Regular'">play<div class="rotated_a">A</div> ble <span style="color: darkgrey; font-size: small"> {{ appVersion }}</span></span>

client/app/main/main.css

@@ -32,4 +32,3 @@
 body {
   font-family: 'ExpletusSans-Regular';
 }
-

client/app/main/main.html

@@ -1,6 +1,7 @@
 <header class="hero-unit" id="banner">
   <div class="container">
-    <p style="color:#ffa800;font-size:50px; font-family: 'ExpletusSans-Regular'">play<span class="-rotate-90" style="font-size: 70px;">A</span>ble <span style="color: darkgrey; font-size: small"> {{ appVersion }}</span></p>
+    <!--<span style="color:#ffa800;font-size:50px; font-family: 'ExpletusSans-Regular'">play<div class="rotated_a">A</div> ble <span style="color: darkgrey; font-size: small"> {{ appVersion }}</span></span>-->
+    <logo></logo>
     <p class="lead"><a style="color:#d9534f;" href="http://www.ansible.com" target="_blank">Ansible</a> Playbook generator and orchestrator</p>
     <img src="assets/images/Button-1-play-icon.png" alt="I'm Playable">
   </div>