Version bump to 0.3.0

Change Log: - Update bower dependencies - Update box-sizing to border-box - Update element styles to use flex-box - Move url and computeUrl to the Private API - Add baseUrl property - Add reflectToAttribute prop to q, year, type, page, and apiVersion - Add on-error event listener; should an error occurs when loading an image, it will set the default img instead - Set the li tag id property to the imdbID value - Set the anchor tag href property to the hash imdbID value - Remove bootstrap dependency from demo - Update demo styles - Add github license badge - Add bower version badge
gorlandor · Feb 28, 2017 · 82ff203 · 82ff203
1 parent 59c1ca6
commit 82ff203
Show file tree

Hide file tree

Showing 4 changed files with 217 additions and 176 deletions.
diff --git a/README.md b/README.md
@@ -1,17 +1,29 @@
 # omdb-search
 
 A Polymer custom element that fetches movie, series, episode data from the
-<a href="https://www.omdbapi.com/">Open Movie Database (OMDb) api</a>.
+[Open Movie Database (OMDb) api](https://www.omdbapi.com/).
 
-# Change Log
+[![license](https://img.shields.io/github/license/giovanni0918/omdb-search.svg)](https://img.shields.io/github/license/giovanni0918/omdb-search.svg) [![Bower](https://img.shields.io/bower/v/omdb-search.svg)](https://img.shields.io/bower/v/omdb-search.svg)
 
-Version: 0.2.4
-- Removed 'Lato' font from element definition, changed it Arial, Helvetica
-- Changed the li element display property to inline-block, to safely remove overflow-y prop
+# Change Log
 
+Version: 0.3.0
+- Update bower dependencies
+- Update box-sizing to border-box
+- Update element styles to use flex-box
+- Move url and computeUrl to the Private API
+- Add baseUrl property
+- Add reflectToAttribute prop to q, year, type, page, and apiVersion
+- Add on-error event listener; should an error occurs when loading an image, it will set the default img instead
+- Set the li tag id property to the imdbID value
+- Set the anchor tag href property to the hash imdbID value
+- Remove bootstrap dependency from demo
+- Update demo styles
+- Add github license badge
+- Add bower version badge
 
 # Demo it
-<a href="https://giovanni0918.github.io/omdb-search/">https://giovanni0918.github.io/omdb-search/</a>
+<https://giovanni-orlando.com/omdb-search/>
 
 # Getting Started
 
@@ -22,10 +34,10 @@ Create an index.html
 <pre>$ touch index.html</pre>
 
 # Install or Download
-Install the component using <a href="https://bower.io/">bower</a>
+Install the component using [bower](https://bower.io/).
 <pre>$ bower install omdb-search --save</pre>
 
-Or download the <a href="https://github.com/giovanni0918/omdb-search/archive/master.zip">.zip file</a>
+Or download the [.zip file](https://github.com/giovanni0918/omdb-search/archive/master.zip)
 
 # Usage
 
@@ -38,7 +50,7 @@ In that index.html add the following code:
     <meta charset="utf-8">
     <title>OMDb Search demo</title>
     <!-- Load the WebComponents polyfill: -->
-    <script async src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.22/webcomponents-lite.js"></script>
+    <script async src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.js"></script>
 
     <!-- Import the omdb-search web component: -->
     <link rel="import" href="bower_components/omdb-search/omdb-search.html">
@@ -54,11 +66,11 @@ In that index.html add the following code:
 </html>
 ```
 
-# Available on <a href="https://customelements.io/giovanni0918/omdb-search/">customelements.io</a>
+# Available on [customelements.io](https://customelements.io/giovanni0918/omdb-search/)
 
 # License
-Mit: <a href="https://mit-license.org/">https://mit-license.org/</a>
+Mit: <https://mit-license.org/>
 
-Copyright 2016: <a href="https://github.com/giovanni0918">Giovanni Orlado Rivera</a>
+Copyright 2017: [Giovanni Orlado Rivera](https://github.com/giovanni0918)
 
-Website: <a href="http://giovanni-orlando.com">http://giovanni-orlando.com</a>
+Website: <https://giovanni-orlando.com/>
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "omdb-search",
-  "version": "0.2.4",
+  "version": "0.3.0",
   "authors": [
     "Giovanni Orlando Rivera <gorlandor@gmail.com>"
   ],
@@ -29,13 +29,13 @@
     "/bower_components"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#^1.6.1",
+    "polymer": "Polymer/polymer#^1.8.0",
     "iron-ajax": "PolymerElements/iron-ajax#^1.4.3"
   },
   "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#^1.1.7",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.2.0",
-    "web-component-tester": "^4.3.0",
-    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.22"
+    "iron-component-page": "PolymerElements/iron-component-page#^1.1.8",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.2.5",
+    "web-component-tester": "^5.0.0",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.24"
   }
 }
diff --git a/demo/index.html b/demo/index.html
@@ -9,82 +9,70 @@
 
 THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 -->
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="author" content="Giovanni Orlando">
-        <meta name="description" content="Demo showcasing how to use omdb-search web component to fetch movie, series, episode data from the Open Movie Database (OMDb) api.">
-        <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
-        <title>omdb-search Demo</title>
-        <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
-        <!-- Latest compiled and minified CSS -->
-        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
-
-        <link rel="import" href="../omdb-search.html">
-        <link rel="import" href="../omdb-search-theme.html">
-
-        <style>
-            html,
-            body {
-                margin: 0;
-                padding: 0;
-                background-color: inherit;
-            }
-            form {
-                overflow-y: auto;
-                padding: 8px 0;
-                color:crimson;
-                font-family: 'Lato', sans-serif;
-            }
-
-        </style>
-    </head>
-    <body unresolved>
-
-        <div class="container">
-            <p>An example of
-                <code>&lt;omdb-search&gt;</code>:</p>
-            <template is="dom-bind">
-                <form>
-                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
-                        <label for="q">Search:</label>
-                        <input type="search" class="form-control" id="q" value="{{q::change}}" placeholder="e.g. Transformers">
-                        <br>
-                    </div>
-
-                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
-                        <label for="type">Type: (optional)</label>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="author" content="Giovanni Orlando">
+    <meta name="description" content="Demo showcasing how to use omdb-search web component to fetch movie, series, episode data from the Open Movie Database (OMDb) api.">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+    <title>omdb-search Demo</title>
+    <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
+
+    <link rel="import" href="../omdb-search.html">
+    <link rel="import" href="../omdb-search-theme.html">
+
+    <style>
+        *{box-sizing:border-box}html,body{width:100%;min-height:100vh;margin:0;padding:0;border:none;background-color:inherit}.container{max-width:992px;margin:0 auto}.form-control{width:100%;padding:.5rem;border:1px solid #ccc;border-radius:4px}form{padding:8px 0;color:crimson;font-family:Arial,Helvetica,sans-serif}.flex--horizontally{display:flex;flex-direction:row;align-items:center;justify-content:center}.flex--1{flex:1;margin:1rem}omdb-search a:link,a:visited{text-decoration:none}h1.Title{margin:1em;font-family:Arial,Helvetica,sans-serif;font-size:1.5em;font-weight:500}.footer{margin:1em .5em;font-family:Arial,Helvetica,sans-serif;font-size:1.5em;font-weight:500}code.ElementName,.footer a{color:crimson}
+    </style>
+</head>
+
+<body unresolved>
+
+    <div class="container">
+        <h1 class="Title">An example of
+            <code class="ElementName">&lt;omdb-search&gt;</code>:</h1>
+        <template is="dom-bind">
+            <form>
+                <div class="flex--horizontally">
+                    <label class="flex--1" for="q">Search:
+                        <input type="search" class="form-control" id="q" value="{{q::change}}" placeholder="e.g. Transformers"/>
+                    </label>
+
+                    <label class="flex--1" for="type">Type: (optional)
                         <select class="form-control" id="type" value="{{type::change}}">
                             <option value="">any</option>
                             <option value="movie">movie</option>
                             <option value="series">series</option>
                             <option value="episode">episode</option>
                         </select>
-                        <br>
-                    </div>
-
-                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
-                        <label for="year">Year: (optional)</label>
-                        <input type="number" class="form-control" id="year" value="{{year::change}}" placeholder="e.g. 2015">
-                        <br>
-                    </div>
-
-                    <div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
-                        <label for="page">Page: (optional)</label>
-                        <input type="number" class="form-control" id="page" value="{{page::change}}" placeholder="e.g. 1">
-                        <br>
-                    </div>
-
-                </form>
-
-                <omdb-search q="{{q}}" type="{{type}}" year="{{year}}" page="{{page}}" loading="{{isLoading}}"></omdb-search>
-            </template>
-        </div>
-
-        <script>
-            var seedElement = document.querySelector('omdb-search');
-            console.log('omdb-search element attached');
-        </script>
-
-    </body>
-</html>
+                    </label>
+                </div>
+
+                <div class="flex--horizontally">
+                    <label class="flex--1" for="year">Year: (optional)
+                        <input type="number" class="form-control" id="year" value="{{year::change}}" placeholder="e.g. 2015"/>
+                    </label>
+
+                    <label class="flex--1" for="page">Page: (optional)
+                        <input type="number" class="form-control" id="page" value="{{page::change}}" placeholder="e.g. 1" min="1"/>
+                    </label>
+                </div>
+            </form>
+
+            <omdb-search q="{{q}}" type="{{type}}" year="{{year}}" page="{{page}}" loading="{{isLoading}}"></omdb-search>
+        </template>
+
+        <footer class="footer">
+            Built by <a href="https://github.com/giovanni0918">Giovanni Orlando</a>
+        </footer>
+    </div>
+
+    <script>
+        var seedElement = document.querySelector('omdb-search');
+        console.log('omdb-search element attached');
+    </script>
+
+</body>
+
+</html>