From 4617e9037447462687c8522466db7e31b9d6f7f5 Mon Sep 17 00:00:00 2001
From: Michael Czechowski <mail@dailysh.it>
Date: Thu, 10 May 2018 17:13:29 +0200
Subject: [PATCH] capsulated to directive

---
 src/app/app.component.html              |  2 +-
 src/app/app.component.scss              | 17 +++++++++++++++++
 src/app/app.module.ts                   |  4 +++-
 src/app/canvas/canvas.directive.spec.ts |  8 ++++++++
 src/app/canvas/canvas.directive.ts      | 10 ++++++++++
 5 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 src/app/canvas/canvas.directive.spec.ts
 create mode 100644 src/app/canvas/canvas.directive.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index f8c0f5d..e226809 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,4 +1,4 @@
-<canvas></canvas>
+<canvas appCanvas></canvas>
 
 <ul>
   <li>https://github.com/d3/d3-interpolate</li>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 7675907..7f88b02 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -1,4 +1,21 @@
 canvas {
+  position: absolute;
   width: 100%;
   height: 100%;
+  top: 0;
+  left: 0;
+}
+
+ul {
+  display: flex;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  justify-content: center;
+  margin: 0;
+  padding: 3rem;
+  background: rgba(0,0,0,0.1);
+
+  list-style-type: none;
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f657163..921becd 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -2,10 +2,12 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { CanvasDirective } from './canvas/canvas.directive';
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    CanvasDirective
   ],
   imports: [
     BrowserModule
diff --git a/src/app/canvas/canvas.directive.spec.ts b/src/app/canvas/canvas.directive.spec.ts
new file mode 100644
index 0000000..d5fe8a5
--- /dev/null
+++ b/src/app/canvas/canvas.directive.spec.ts
@@ -0,0 +1,8 @@
+import { CanvasDirective } from './canvas.directive';
+
+describe('CanvasDirective', () => {
+  it('should create an instance', () => {
+    const directive = new CanvasDirective();
+    expect(directive).toBeTruthy();
+  });
+});
diff --git a/src/app/canvas/canvas.directive.ts b/src/app/canvas/canvas.directive.ts
new file mode 100644
index 0000000..faee0c3
--- /dev/null
+++ b/src/app/canvas/canvas.directive.ts
@@ -0,0 +1,10 @@
+import { Directive } from '@angular/core';
+
+@Directive({
+  selector: '[appCanvas]'
+})
+export class CanvasDirective {
+
+  constructor() { }
+
+}