Merge pull request #14 from Granze/v2.0

V2.0
Granze · Jul 27, 2017 · 8cf6228 · 8cf6228
2 parents 1cc1fbf + d378831
commit 8cf6228
Show file tree

Hide file tree

Showing 8 changed files with 240 additions and 360 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,12 +1,16 @@
 language: node_js
-node_js:
-  - '4.0.0'
-  - '5.0.0'
+node_js: stable
+dist: trusty
+sudo: required
 addons:
   firefox: latest
-before_install:
-  - 'npm install -g bower web-component-tester'
-  - 'bower install'
-  - 'export DISPLAY=:99.0'
-  - 'sh -e /etc/init.d/xvfb start'
-script: 'wct'
+  apt:
+    sources:
+    - google-chrome
+    packages:
+    - google-chrome-stable
+before_script:
+- npm install -g bower polylint web-component-tester
+- bower install
+- polylint
+script: xvfb-run wct
diff --git a/bower.json b/bower.json
@@ -1,19 +1,22 @@
 {
   "name": "flip-clock",
-  "version": "1.2.5",
+  "version": "2.0.0",
   "keywords": [
     "polymer",
     "web-components"
   ],
   "main": "flip-clock.html",
   "dependencies": {
-    "moment": "~2.13.0",
-    "polymer": "Polymer/polymer#^1.4.0"
+    "polymer": "Polymer/polymer#^2.0.0",
+    "moment": "^2.18.1"
   },
   "devDependencies": {
-    "test-fixture": "polymerelements/test-fixture#^1.1.0",
-    "iron-test-helpers": "polymerelements/iron-test-helpers#~1.2.3",
-    "iron-component-page": "polymerelements/iron-component-page#~1.1.2"
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2.0.0",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0"
+  },
+  "resolutions": {
+    "polymer": "^2.0.0"
   },
   "homepage": "https://github.com/Granze/flip-clock",
   "authors": [

diff --git a/demo/index.html b/demo/index.html
@@ -1,68 +1,53 @@
 <!doctype html>
-<html>
+<html lang="en">
 <head>
-  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-  <title>flip-clock Demo</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+  <title>flip-clock demo</title>
+
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+  <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
   <link rel="import" href="../flip-clock.html">
+
+  <custom-style>
+    <style is="custom-style" include="demo-pages-shared-styles">
+    </style>
+  </custom-style>
   <style>
-    body {
-      margin: 0;
-      padding: 0;
-      color: #333;
-      background: #fff;
-    }
-    a {
-      color: #fff;
-    }
-    a:hover {
-      text-decoration: none;
-    }
-    h1 {
-      margin: 0 auto;
-      font-weight: normal;
-    }
-    h1 span {
-      font-size: 14px;
-    }
-    h2 {
-      font-size: 34px;
-      margin: 30px 0 10px;
-    }
-    .wrapper {
-      max-width: 960px;
-      margin: 20px auto 0 auto;
-      text-align: center;
-    }
-    code {
-      display: inline-block;
-      margin: 0 0 20px 0;
-      font-family: monospace , serif;
-      border: 1px solid #ddd;
-      background-color: #f8f8f8;
-      border-radius: 3px;
-      padding: 2px 4px;
-      color: #333;
+    .centered {
+      max-width: 620px;
     }
   </style>
 </head>
 <body>
-  <div class="wrapper">
-    <h2>Clock</h2>
-    <code>&lt;flip-clock&gt;&lt;/flip-clock&gt;</code>
-    <flip-clock></flip-clock>
-
-    <h2>Timer </h2>
-    <code>&lt;flip-clock display-mode=&quot;timer&quot; show-buttons&gt;&lt;/flip-clock&gt;</code>
-    <flip-clock display-mode="timer" show-buttons></flip-clock>
-
-    <h2>Countdown </h2>
-    <code>&lt;flip-clock display-mode=&quot;countdown&quot; start-from=&quot;20&quot; show-buttons&gt;&lt;/flip-clock&gt;</code>
-    <flip-clock display-mode="countdown" start-from="20" show-buttons></flip-clock>
-
-    <h2>Countdown without hours</h2>
-    <code>&lt;flip-clock display-mode=&quot;countdown&quot; start-from=&quot;20&quot; show-buttons hide-hours&gt;&lt;/flip-clock&gt;</code>
-    <flip-clock display-mode="countdown" start-from="20" show-buttons hide-hours></flip-clock>
-  </div>
+<div class="vertical-section-container centered">
+  <h3>Basic flip-clock</h3>
+  <demo-snippet>
+    <template>
+      <flip-clock></flip-clock>
+    </template>
+  </demo-snippet>
+  <h3>Timer flip-clock</h3>
+  <demo-snippet>
+    <template>
+      <flip-clock display-mode="timer" show-buttons></flip-clock>
+    </template>
+  </demo-snippet>
+  <h3>Countdown flip-clock</h3>
+  <demo-snippet>
+    <template>
+      <flip-clock display-mode="countdown" start-from="20" show-buttons></flip-clock>
+    </template>
+  </demo-snippet>
+  <h3>Countdown without hours flip-clock</h3>
+  <demo-snippet>
+    <template>
+      <flip-clock display-mode="countdown" start-from="20" show-buttons hide-hours></flip-clock>
+    </template>
+  </demo-snippet>
+</div>
 </body>
 </html>