Merge pull request #3 from JamesRArroyo/simple-banner

Simple banner
hipsterreed · Nov 6, 2017 · 8346185 · 8346185
2 parents 0006feb + 4c06ec0
commit 8346185
Show file tree

Hide file tree

Showing 5 changed files with 105 additions and 47 deletions.
diff --git a/ab-animated-banner.html b/ab-animated-banner.html
@@ -0,0 +1,73 @@
+<link rel="import" href="./bower_components/polymer/polymer-element.html">
+
+<dom-module id="ab-animated-banner">
+  <template>
+    <style>
+
+      :host {
+        display: block;
+      }
+
+      .banner-container{
+          width: 30%;
+      }
+
+      .banner{
+          background: white;
+          height: 70px;
+          font-size: 12px;
+          color: black;
+          text-align: left;
+
+      }
+
+      .banner .innerLeft{
+          height: 100%;
+          width: 20%;
+          float: left;
+          background: rgba(253,202,0,1);
+      }
+
+      .innerLeft h4{
+          font-size: 20px;
+          text-align: center;
+      }
+
+
+
+    </style>
+
+    <div class="banner-container">
+        <div class="banner">
+            <div class="innerLeft">
+                <h4>[[title]]</h4>
+            </div>
+        </div>
+    </div>
+
+  </template>
+
+  <script>
+    /**
+     * @customElement
+     * @polymer
+     */
+    class AbAnimatedBanner extends Polymer.Element {
+      static get is() { return 'ab-animated-banner'; }
+      static get properties() {
+        return {
+          title: {
+            type: String,
+            value: 'Title'
+          },
+          dataSet: {
+            type: Array,
+            value: ['Jimmy Arroyo', 'John Doe', 'Bob Smith']
+          }
+        };
+      }
+    }
+
+    window.customElements.define(AbAnimatedBanner.is, AbAnimatedBanner);
+  </script>
+</dom-module>
diff --git a/bower.json b/bower.json
@@ -17,11 +17,13 @@
     "url": "git://github.com/JamesRArroyo/ab-animated-banner"
   },
   "license": "MIT",
-  "main": "index.html",
+  "main": "ab-animated-banner.html",
   "dependencies": {
     "polymer": "Polymer/polymer#^2.0.0"
   },
   "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#1 - 2",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#1 - 2",
     "web-component-tester": "Polymer/web-component-tester#^6.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
   }

diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>An animated banner</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui">
+  <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../ab-animated-banner.html">
+</head>
+
+<body style="background-color: #efefef">
+  <ab-animated-banner></ab-animated-banner>
+</body>
+
+</html>
diff --git a/index.html b/index.html
@@ -1,20 +1,19 @@
 <!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+<html>
+<head>
 
-    <title>ab-animated-banner</title>
-    <meta name="description" content="ab-animated-banner description">
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
 
-    <!-- See https://goo.gl/OOhYW5 -->
-    <link rel="manifest" href="/manifest.json">
+  <title>ab-animated-banner</title>
 
-    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
+  <script src="./bower_components/webcomponentsjs/webcomponents-lite.js"></script>
 
-    <link rel="import" href="/src/ab-animated-banner-app/ab-animated-banner-app.html">
-  </head>
-  <body>
-    <ab-animated-banner-app></ab-animated-banner-app>
-  </body>
+  <link rel="import" href="./bower_components/polymer/polymer.html">
+  <link rel="import" href="./bower_components/iron-component-page/iron-component-page.html">
+
+</head>
+<body>
+  <iron-component-page></iron-component-page>
+</body>
 </html>
diff --git a/src/ab-animated-banner-app/ab-animated-banner-app.html b/src/ab-animated-banner-app/ab-animated-banner-app.html