fix(@component): fixing bronex templateurl and styleurls

Using templateUrl and styleUrls breaks the module rendering while using the npm package inside an external project. closes #2
andreasonny83 · Jan 29, 2017 · 9638e73 · 9638e73
1 parent 83afc6b
commit 9638e73
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 126 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/README.md b/README.md
@@ -2,6 +2,7 @@
 [![Build status](https://ci.appveyor.com/api/projects/status/gy65rk7l0nln23nj?svg=true)](https://ci.appveyor.com/project/andreasonny83/angular2-cookie-law)
 [![Coverage Status](https://coveralls.io/repos/github/andreasonny83/angular2-cookie-law/badge.svg)](https://coveralls.io/github/andreasonny83/angular2-cookie-law)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
+[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
 
 # angular2-cookie-law
 
@@ -201,7 +202,7 @@ with commitizen node package integrated in this repository.
 
 ## Changelog
 
-Changelog available [here](https://github.com/andreasonny83/angular2-cookie-law/blob/master/CHANGELOG.md)
+Changelog available [here](https://github.com/andreasonny83/angular2-cookie-law/releases)
 
 ## License
 

diff --git a/src/cookie-law.component.css b/src/cookie-law.component.css
diff --git a/src/cookie-law.component.html b/src/cookie-law.component.html
diff --git a/src/cookie-law.component.ts b/src/cookie-law.component.ts
@@ -31,8 +31,102 @@ import { closeIcon } from './icons';
       transition('* => *', animate('1000ms ease-in-out'))
     ])
   ],
-  templateUrl: './cookie-law.component.html',
-  styleUrls: ['./cookie-law.component.css']
+  template: `
+  <div class="cookie-law-wrapper"
+       *ngIf="!cookieLawSeen"
+       [@state]="cookieLawSeen">
+
+    <div class="copy">
+      <strong>By continuing to browse the site, you're agreeing to our use of cookies.</strong>
+      <span *ngIf="learnMore">
+        Learn more in our <a [href]="learnMore" [target]="target">privacy policy</a>.
+      </span>
+    </div>
+
+    <a href="#" role="button"
+                class="dismiss"
+                [innerHTML]="closeSvg"
+                (click)="dismiss($event)"></a>
+  </div>
+`,
+  styles: [`
+    a {
+      color: #bbb;
+      -webkit-transition: color .2s;
+      transition: color .2s;
+    }
+    a:hover {
+      color: #fff;
+    }
+    a:hover svg {
+      fill: #fff;
+    }
+    .cookie-law-wrapper {
+      background: #333;
+      color: #bbb;
+      display: block;
+      font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
+      font-size: 15px;
+      font-weight: 200;
+      line-height: 20px;
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      z-index: 999999999;
+      font-smooth: always;
+      -webkit-font-smoothing: antialiased;
+    }
+    .dismiss {
+      display: block;
+      box-sizing: border-box;
+      padding: 10px;
+      position: absolute;
+      top: 0;
+      right: 10px;
+      text-decoration: none;
+      line-height: 20px;
+    }
+    .dismiss svg {
+      display: block;
+      fill: #bbb;
+      width: 20px;
+      height: 20px;
+      -webkit-transition: fill .2s;
+      transition: fill .2s;
+    }
+    .copy {
+      box-sizing: border-box;
+      padding: 10px 60px 10px 10px;
+    }
+    .copy strong {
+      color: #fff;
+      font-weight: 400;
+    }
+    .copy a {
+      text-decoration: underline;
+    }
+    .copy a:active, .copy a:hover {
+        outline: 0;
+    }
+
+    @media (min-width: 600px) {
+      /* For bigger devices: */
+      .copy {
+        padding: 20px 60px 20px 20px;
+        font-size: 18px;
+        line-height: 24px;
+      }
+      .dismiss {
+        top: 10px;
+        right: 15px;
+      }
+      .dismiss svg {
+        width: 24px;
+        height: 24px;
+      }
+    }
+  `]
 })
 export class CookieLawComponent implements OnInit {
   @Input() learnMore: string = null;