update components

dashboard-ui/bower_components/iron-flex-layout/.bower.json

@@ -1,6 +1,6 @@
 {
   "name": "iron-flex-layout",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "Provide flexbox-based layouts",
   "keywords": [
     "web-components",
@@ -28,14 +28,14 @@
     "web-component-tester": "^4.0.0"
   },
   "ignore": [],
-  "homepage": "https://github.com/polymerelements/iron-flex-layout",
+  "homepage": "https://github.com/PolymerElements/iron-flex-layout",
-  "_release": "1.2.3",
+  "_release": "1.3.0",
   "_resolution": {
     "type": "version",
-    "tag": "v1.2.3",
+    "tag": "v1.3.0",
-    "commit": "3ae26f4a248ccc7a4c035590473840342182293e"
+    "commit": "434224c8cf63cb4bb1b66edb0dc58e4484f7c5b2"
   },
-  "_source": "git://github.com/polymerelements/iron-flex-layout.git",
+  "_source": "git://github.com/PolymerElements/iron-flex-layout.git",
   "_target": "^1.0.0",
-  "_originalSource": "polymerelements/iron-flex-layout"
+  "_originalSource": "PolymerElements/iron-flex-layout"
 }

dashboard-ui/bower_components/iron-flex-layout/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "iron-flex-layout",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "Provide flexbox-based layouts",
   "keywords": [
     "web-components",

dashboard-ui/bower_components/iron-flex-layout/classes/iron-flex-layout.html

@@ -10,6 +10,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 
 <link rel="import" href="iron-shadow-flex-layout.html">
 
+<script>
+  console.warn('This file is deprecated. Please use `iron-flex-layout/iron-flex-layout-classes.html`, and one of the specific dom-modules instead');
+</script>
+
 <style>
 
   /*******************************

dashboard-ui/bower_components/iron-flex-layout/classes/iron-shadow-flex-layout.html

@@ -7,6 +7,11 @@ The complete set of contributors may be found at http://polymer.github.io/CONTRI
 Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
+
+<script>
+  console.warn('This file is deprecated. Please use `iron-flex-layout/iron-flex-layout-classes.html`, and one of the specific dom-modules instead');
+</script>
+
 <style>
 
   /*******************************

dashboard-ui/bower_components/iron-flex-layout/iron-flex-layout-classes.html

@@ -0,0 +1,381 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<!--
+A set of layout classes that let you specify layout properties directly in markup.
+You must include this file in every element that needs to use them.
+
+Sample use:
+
+    <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
+    <style is="custom-style" include="iron-flex iron-flex-alignment">
+
+    <div class="layout horizontal layout-start">
+      <div>cross axis start alignment</div>
+    </div>
+
+The following imports are available:
+ - iron-flex
+ - iron-flex-reverse
+ - iron-flex-alignment
+ - iron-flex-factors
+ - iron-positioning
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+
+<!-- Most common used flex styles-->
+<dom-module id="iron-flex">
+  <template>
+    <style>
+      .layout.horizontal,
+      .layout.vertical {
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+      }
+
+      .layout.inline {
+        display: -ms-inline-flexbox;
+        display: -webkit-inline-flex;
+        display: inline-flex;
+      }
+
+      .layout.horizontal {
+        -ms-flex-direction: row;
+        -webkit-flex-direction: row;
+        flex-direction: row;
+      }
+
+      .layout.vertical {
+        -ms-flex-direction: column;
+        -webkit-flex-direction: column;
+        flex-direction: column;
+      }
+
+      .layout.wrap {
+        -ms-flex-wrap: wrap;
+        -webkit-flex-wrap: wrap;
+        flex-wrap: wrap;
+      }
+
+      .layout.center,
+      .layout.center-center {
+        -ms-flex-align: center;
+        -webkit-align-items: center;
+        align-items: center;
+      }
+
+      .layout.center-justified,
+      .layout.center-center {
+        -ms-flex-pack: center;
+        -webkit-justify-content: center;
+        justify-content: center;
+      }
+
+      .flex {
+        -ms-flex: 1 1 0.000000001px;
+        -webkit-flex: 1;
+        flex: 1;
+        -webkit-flex-basis: 0.000000001px;
+        flex-basis: 0.000000001px;
+      }
+
+      .flex-auto {
+        -ms-flex: 1 1 auto;
+        -webkit-flex: 1 1 auto;
+        flex: 1 1 auto;
+      }
+
+      .flex-none {
+        -ms-flex: none;
+        -webkit-flex: none;
+        flex: none;
+      }
+    </style>
+  </template>
+</dom-module>
+
+<!-- Basic flexbox reverse styles -->
+<dom-module id="iron-flex-reverse">
+  <template>
+    <style>
+      .layout.horizontal-reverse,
+      .layout.vertical-reverse {
+        display: -ms-flexbox;
+        display: -webkit-flex;
+        display: flex;
+      }
+
+      .layout.horizontal-reverse {
+        -ms-flex-direction: row-reverse;
+        -webkit-flex-direction: row-reverse;
+        flex-direction: row-reverse;
+      }
+
+      .layout.vertical-reverse {
+        -ms-flex-direction: column-reverse;
+        -webkit-flex-direction: column-reverse;
+        flex-direction: column-reverse;
+      }
+
+      .layout.wrap-reverse {
+        -ms-flex-wrap: wrap-reverse;
+        -webkit-flex-wrap: wrap-reverse;
+        flex-wrap: wrap-reverse;
+      }
+    </style>
+  </template>
+</dom-module>
+
+<!-- Flexbox alignment -->
+<dom-module id="iron-flex-alignment">
+  <template>
+    <style>
+      /**
+       * Alignment in cross axis.
+       */
+      .layout.start {
+        -ms-flex-align: start;
+        -webkit-align-items: flex-start;
+        align-items: flex-start;
+      }
+
+      .layout.center,
+      .layout.center-center {
+        -ms-flex-align: center;
+        -webkit-align-items: center;
+        align-items: center;
+      }
+
+      .layout.end {
+        -ms-flex-align: end;
+        -webkit-align-items: flex-end;
+        align-items: flex-end;
+      }
+
+      /**
+       * Alignment in main axis.
+       */
+      .layout.start-justified {
+        -ms-flex-pack: start;
+        -webkit-justify-content: flex-start;
+        justify-content: flex-start;
+      }
+
+      .layout.center-justified,
+      .layout.center-center {
+        -ms-flex-pack: center;
+        -webkit-justify-content: center;
+        justify-content: center;
+      }
+
+      .layout.end-justified {
+        -ms-flex-pack: end;
+        -webkit-justify-content: flex-end;
+        justify-content: flex-end;
+      }
+
+      .layout.around-justified {
+        -ms-flex-pack: distribute;
+        -webkit-justify-content: space-around;
+        justify-content: space-around;
+      }
+
+      .layout.justified {
+        -ms-flex-pack: justify;
+        -webkit-justify-content: space-between;
+        justify-content: space-between;
+      }
+
+      /**
+       * Self alignment.
+       */
+      .self-start {
+        -ms-align-self: flex-start;
+        -webkit-align-self: flex-start;
+        align-self: flex-start;
+      }
+
+      .self-center {
+        -ms-align-self: center;
+        -webkit-align-self: center;
+        align-self: center;
+      }
+
+      .self-end {
+        -ms-align-self: flex-end;
+        -webkit-align-self: flex-end;
+        align-self: flex-end;
+      }
+
+      .self-stretch {
+        -ms-align-self: stretch;
+        -webkit-align-self: stretch;
+        align-self: stretch;
+      }
+    </style>
+  </template>
+</dom-module>
+
+<dom-module id="iron-flex-factors">
+  <template>
+    <style>
+      .flex,
+      .flex-1 {
+        -ms-flex: 1 1 0.000000001px;
+        -webkit-flex: 1;
+        flex: 1;
+        -webkit-flex-basis: 0.000000001px;
+        flex-basis: 0.000000001px;
+      }
+
+      .flex-2 {
+        -ms-flex: 2;
+        -webkit-flex: 2;
+        flex: 2;
+      }
+
+      .flex-3 {
+        -ms-flex: 3;
+        -webkit-flex: 3;
+        flex: 3;
+      }
+
+      .flex-4 {
+        -ms-flex: 4;
+        -webkit-flex: 4;
+        flex: 4;
+      }
+
+      .flex-5 {
+        -ms-flex: 5;
+        -webkit-flex: 5;
+        flex: 5;
+      }
+
+      .flex-6 {
+        -ms-flex: 6;
+        -webkit-flex: 6;
+        flex: 6;
+      }
+
+      .flex-7 {
+        -ms-flex: 7;
+        -webkit-flex: 7;
+        flex: 7;
+      }
+
+      .flex-8 {
+        -ms-flex: 8;
+        -webkit-flex: 8;
+        flex: 8;
+      }
+
+      .flex-9 {
+        -ms-flex: 9;
+        -webkit-flex: 9;
+        flex: 9;
+      }
+
+      .flex-10 {
+        -ms-flex: 10;
+        -webkit-flex: 10;
+        flex: 10;
+      }
+
+      .flex-11 {
+        -ms-flex: 11;
+        -webkit-flex: 11;
+        flex: 11;
+      }
+
+      .flex-12 {
+        -ms-flex: 12;
+        -webkit-flex: 12;
+        flex: 12;
+      }
+    </style>
+  </template>
+</dom-module>
+
+<!-- Non-flexbox positioning helper styles -->
+<dom-module id="iron-positioning">
+  <template>
+    <style>
+      .block {
+        display: block;
+      }
+
+      /* IE 10 support for HTML5 hidden attr */
+      [hidden] {
+        display: none !important;
+      }
+
+      .invisible {
+        visibility: hidden !important;
+      }
+
+      .relative {
+        position: relative;
+      }
+
+      .fit {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+
+      body.fullbleed {
+        margin: 0;
+        height: 100vh;
+      }
+
+      .scroll {
+        -webkit-overflow-scrolling: touch;
+        overflow: auto;
+      }
+
+      /* fixed position */
+      .fixed-bottom,
+      .fixed-left,
+      .fixed-right,
+      .fixed-top {
+        position: fixed;
+      }
+
+      .fixed-top {
+        top: 0;
+        left: 0;
+        right: 0;
+      }
+
+      .fixed-right {
+        top: 0;
+        right: 0;
+        bottom: 0;
+      }
+
+      .fixed-bottom {
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+
+      .fixed-left {
+        top: 0;
+        bottom: 0;
+        left: 0;
+      }
+    </style>
+  </template>
+</dom-module>

dashboard-ui/bower_components/iron-flex-layout/iron-flex-layout.html

@@ -11,11 +11,33 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 <link rel="import" href="../polymer/polymer.html">
 
 <!--
-The `<iron-flex-layout>` component provides simple ways to use [CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes), also known as flexbox. This component provides two different ways to use flexbox:
+The `<iron-flex-layout>` component provides simple ways to use
+[CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes),
+also known as flexbox. This component provides two different ways to use flexbox:
 
-1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes). The layout class stylesheet provides a simple set of class-based flexbox rules. Layout classes let you specify layout properties directly in markup.
+1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
+The layout class stylesheet provides a simple set of class-based flexbox rules, that
+let you specify layout properties directly in markup. You must include this file
+in every element that needs to use them.
 
-2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html). The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
+Sample use:
+
+    <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
+    <style is="custom-style" include="iron-flex iron-flex-alignment">
+
+    <div class="layout horizontal layout-start">
+      <div>cross axis start alignment</div>
+    </div>
+
+2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).
+The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
+
+Please note that the old [/deep/ layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes)
+are deprecated, and should not be used. To continue using layout properties
+directly in markup, please switch to using the new `dom-module`-based
+[layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
+Please note that the new version does not use `/deep/`, and therefore requires you
+to import the `dom-modules` in every element that needs to use them.
 
 A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `<iron-flex-layout>` is available.
 

dashboard-ui/bower_components/iron-flex-layout/test/index.html

@@ -22,7 +22,9 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     <script>
       WCT.loadSuites([
         'iron-flex-layout.html',
-        'iron-flex-layout.html?dom=shadow'
+        'iron-flex-layout.html?dom=shadow',
+        'iron-flex-layout-classes.html',
+        'iron-flex-layout-classes.html?dom=shadow'
       ]);
     </script>
   </body>

dashboard-ui/bower_components/iron-flex-layout/test/iron-flex-layout-classes.html

@@ -0,0 +1,323 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+  <head>
+    <title>iron-flex-layout-classes tests</title>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+    <script src="../../webcomponentsjs/webcomponents.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+    <link rel="import" href="../iron-flex-layout-classes.html">
+
+    <style is="custom-style" include="iron-flex iron-flex-reverse iron-flex-factors iron-flex-alignment iron-positioning">
+      body {
+        margin: 0;
+        padding: 0;
+      }
+      .container {
+        width: 300px;
+        min-height: 50px;
+        background-color: #ccc;
+      }
+      .container > div {
+        width: 50px;
+        min-height: 50px; /* so that it can grow in vertical layouts. */
+      }
+      /* IE11 does not calculate flex proportions correctly in a vertical
+       * layout if the children just have a min-height. For those tests,
+       * use a fixed height instead. */
+      .container > div.fixed-height {
+        min-height: 0;
+        height: 50px;
+      }
+      .container.relative > div {
+        min-width: 50px;
+        min-height: 50px;
+        width: inherit;
+      }
+      .container.small { width: 120px; }
+      .container.tall { height: 300px; }
+
+      #c1 { background-color: #E91E63; }
+      #c2 { background-color: #03A9F4; }
+      #c3 { background-color: #CDDC39; }
+    </style>
+  </head>
+  <body>
+    <test-fixture id="basic">
+      <template>
+        <div class="container layout">
+          <div id="c1"></div>
+          <div id="c2"></div>
+          <div id="c3"></div>
+        </div>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="flex">
+      <template>
+        <div class="container layout">
+          <div id="c1" class="fixed-height"></div>
+          <div id="c2" class="fixed-height"></div>
+          <div id="c3" class="fixed-height"></div>
+        </div>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="single-child">
+      <template>
+        <div class="container layout">
+          <div id="c1"></div>
+        </div>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="positioning">
+      <template>
+        <div class="container layout relative">
+          <div id="c1"></div>
+        </div>
+      </template>
+    </test-fixture>
+    <script>
+      function positionEquals(node, top, bottom, left, right) {
+        var rect = node.getBoundingClientRect();
+        return rect.top === top && rect.bottom === bottom
+            && rect.left === left && rect.right === right;
+      }
+      suite('basic layout', function() {
+        var container;
+
+        setup(function() {
+          container = fixture('basic');
+        });
+
+        test('layout-horizontal', function() {
+          container.classList.add('horizontal');
+          assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
+          // |c1| |c2| |c3|
+          assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
+          assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
+          assert.isTrue(positionEquals(c3, 0, 50, 100, 150), "child 3 position ok");
+        });
+
+        test('layout-horizontal-reverse', function() {
+          container.classList.add('horizontal-reverse');
+          assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
+          //     |c3| |c2| |c1|
+          assert.isTrue(positionEquals(c1, 0, 50, 250, 300), "child 1 position ok");
+          assert.isTrue(positionEquals(c2, 0, 50, 200, 250), "child 2 position ok");
+          assert.isTrue(positionEquals(c3, 0, 50, 150, 200), "child 3 position ok");
+        });
+
+        test('layout-vertical', function() {
+          container.classList.add('vertical');
+          assert.isTrue(positionEquals(container, 0, 150, 0, 300), "container position ok");
+          // vertically, |c1| |c2| |c3|
+          assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
+          assert.isTrue(positionEquals(c2, 50, 100, 0, 50), "child 2 position ok");
+          assert.isTrue(positionEquals(c3, 100, 150, 0, 50), "child 3 position ok");
+        });
+
+        test('layout-vertical-reverse', function() {
+          container.classList.add('vertical-reverse');
+          assert.isTrue(positionEquals(container, 0, 150, 0, 300), "container position ok");
+          // vertically, |c3| |c2| |c1|
+          assert.isTrue(positionEquals(c1, 100, 150, 0, 50), "child 1 position ok");
+          assert.isTrue(positionEquals(c2, 50, 100, 0, 50), "child 2 position ok");
+          assert.isTrue(positionEquals(c3, 0, 50, 0, 50), "child 3 position ok");
+        });
+
+        test('layout-wrap', function() {
+          container.classList.add('horizontal');
+          container.classList.add('wrap');
+          container.classList.add('small');
+          assert.isTrue(positionEquals(container, 0, 100, 0, 120), "container position ok");
+          // |c1| |c2|
+          // |c3|
+          assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
+          assert.isTrue(positionEquals(c2, 0, 50, 50, 100), "child 2 position ok");
+          assert.isTrue(positionEquals(c3, 50, 100, 0, 50), "child 3 position ok");
+        });
+
+        test('layout-wrap-reverse', function() {
+          container.classList.add('horizontal-reverse');
+          container.classList.add('wrap-reverse');
+          container.style.width = '100px';
+          assert.isTrue(positionEquals(container, 0, 100, 0, 100), "container position ok");
+          //      |c3|
+          // |c2| |c1|
+          assert.isTrue(positionEquals(c1, 50, 100, 50, 100), "child 1 position ok");
+          assert.isTrue(positionEquals(c2, 50, 100, 0, 50), "child 2 position ok");
+          assert.isTrue(positionEquals(c3, 0, 50, 50, 100), "child 3 position ok");
+        });
+      });
+
+      suite('flex', function() {
+        var container;
+
+        setup(function() {
+          container = fixture('flex');
+        });
+
+        test('layout-flex child in a horizontal layout', function() {
+          container.classList.add('horizontal');
+          c2.classList.add('flex');
+          assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
+          // |c1| |    c2    | |c3|
+          assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
+          assert.isTrue(positionEquals(c2, 0, 50, 50, 250), "child 2 position ok");
+          assert.isTrue(positionEquals(c3, 0, 50, 250, 300), "child 3 position ok");
+        });
+
+        test('layout-flex child in a vertical layout', function() {
+          container.classList.add('vertical');
+          container.classList.add('tall');
+          c2.classList.add('flex');
+          assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
+          // vertically, |c1| |    c2    | |c3|
+          assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
+          assert.isTrue(positionEquals(c2, 50, 250, 0, 50), "child 2 position ok");
+          assert.isTrue(positionEquals(c3, 250, 300, 0, 50), "child 3 position ok");
+        });
+
+        test('layout-flex, layout-flex-2, layout-flex-3 in a horizontal layout', function() {
+          container.classList.add('horizontal');
+          c1.classList.add('flex');
+          c2.classList.add('flex-2');
+          c3.classList.add('flex-3');
+          assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
+          // |c1| | c2 | |  c3  |
+          assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
+          assert.isTrue(positionEquals(c2, 0, 50, 50, 150), "child 2 position ok");
+          assert.isTrue(positionEquals(c3, 0, 50, 150, 300), "child 3 position ok");
+        });
+
+        test('layout-flex, layout-flex-2, layout-flex-3 in a vertical layout', function() {
+          container.classList.add('vertical');
+          container.classList.add('tall');
+          c1.classList.add('flex');
+          c2.classList.add('flex-2');
+          c3.classList.add('flex-3');
+          assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
+          // vertically, |c1| | c2 | |  c3  |
+          assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
+          assert.isTrue(positionEquals(c2, 50, 150, 0, 50), "child 2 position ok");
+          assert.isTrue(positionEquals(c3, 150, 300, 0, 50), "child 3 position ok");
+        });
+      });
+
+      suite('alignment', function() {
+        var container;
+
+        setup(function() {
+          container = fixture('single-child');
+          container.classList.add('horizontal');
+        });
+
+        test('stretch (default)', function() {
+          container.classList.add('tall');
+          assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
+          assert.isTrue(positionEquals(c1, 0, 300, 0, 50), "child 1 position ok");
+        });
+
+        test('layout-center', function() {
+          container.classList.add('center');
+          container.classList.add('tall');
+          assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
+          var center = (300 - 50) / 2;
+          assert.isTrue(positionEquals(c1, center, center + 50, 0, 50), "child 1 position ok");
+        });
+
+        test('layout-start', function() {
+          container.classList.add('start');
+          container.classList.add('tall');
+          assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
+          assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
+        });
+
+        test('layout-end', function() {
+          container.classList.add('end');
+          container.classList.add('tall');
+          assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
+          assert.isTrue(positionEquals(c1, 250, 300, 0, 50), "child 1 position ok");
+        });
+
+        test('layout-start-justified', function() {
+          container.classList.add('start-justified');
+          assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
+          assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
+        });
+
+        test('layout-end-justified', function() {
+          container.classList.add('end-justified');
+          assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
+          assert.isTrue(positionEquals(c1, 0, 50, 250, 300), "child 1 position ok");
+        });
+
+        test('layout-center-justified', function() {
+          container.classList.add('center-justified');
+          assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
+          var center = (300 - 50) / 2;
+          assert.isTrue(positionEquals(c1, 0, 50, center, center + 50), "child 1 position ok");
+        });
+      });
+
+      suite('justification', function() {
+        var container;
+
+        setup(function() {
+          container = fixture('flex');
+          container.classList.add('horizontal');
+        });
+
+        test('layout-justified', function() {
+          container.classList.add('justified');
+          assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
+          var center = (300 - 50) / 2;
+          assert.isTrue(positionEquals(c1, 0, 50, 0, 50), "child 1 position ok");
+          assert.isTrue(positionEquals(c2, 0, 50, center, center + 50), "child 2 position ok");
+          assert.isTrue(positionEquals(c3, 0, 50, 250, 300), "child 3 position ok");
+        });
+
+        test('layout-around-justified', function() {
+          container.classList.add('around-justified');
+          assert.isTrue(positionEquals(container, 0, 50, 0, 300), "container position ok");
+          var spacing = (300 - 50 * 3) / 6;
+          // Every child gets `spacing` on its left and right side.
+          assert.isTrue(positionEquals(c1, 0, 50, spacing, spacing + 50), "child 1 position ok");
+          var end = spacing + 50 + spacing;
+          assert.isTrue(positionEquals(c2, 0, 50, end + spacing, end + spacing + 50), "child 2 position ok");
+          end = end + spacing + 50 + spacing;
+          assert.isTrue(positionEquals(c3, 0, 50, end + spacing, end + spacing + 50), "child 3 position ok");
+        });
+      });
+
+      suite('positioning', function() {
+        var container;
+
+        setup(function() {
+          container = fixture('positioning');
+          container.classList.add('tall');
+        });
+
+        test('layout-fit', function() {
+          c1.classList.add('fit');
+          assert.isTrue(positionEquals(container, 0, 300, 0, 300), "container position ok");
+          assert.isTrue(positionEquals(container, 0, 300, 0, 300), "child 1 position ok");
+        });
+      });
+    </script>
+  </body>
+</html>

dashboard-ui/bower_components/iron-flex-layout/test/iron-flex-layout.html

@@ -10,7 +10,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 -->
 <html>
   <head>
-    <title>iron-flex-behavior tests</title>
+    <title>iron-flex-layout tests</title>
 
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

dashboard-ui/css/site.css

@@ -1067,7 +1067,7 @@ h1 .imageLink {
     }
 
 .fieldDescription {
-    padding-left: 5px;
+    padding-left: 2px;
     font-weight: normal;
     white-space: normal !important;
 }

dashboard-ui/metadataimages.html

@@ -4,7 +4,7 @@
     <title>${TitleMetadata}</title>
 </head>
 <body>
-    <div id="metadataImagesConfigurationPage" data-role="page" class="page type-interior metadataConfigurationPage" data-require="jqmcollapsible,scripts/metadataimagespage,jqmcheckbox,paper-checkbox">
+    <div id="metadataImagesConfigurationPage" data-role="page" class="page type-interior metadataConfigurationPage" data-require="jqmcollapsible,scripts/metadataimagespage,jqmcheckbox,paper-checkbox,paper-input">
 
         <div data-role="content">
 
@@ -41,25 +41,21 @@
                                 <br />
                                 <div class="backdropFields" style="margin-bottom: 2em; display: none;">
                                     <div>
-                                        <label for="txtMaxBackdrops">${LabelMaxBackdropsPerItem}</label>
+                                        <paper-input type="number" id="txtMaxBackdrops" pattern="[0-9]*" required="required" min="0" label="${LabelMaxBackdropsPerItem}"></paper-input>
-                                        <input type="number" id="txtMaxBackdrops" name="txtMaxBackdrops" pattern="[0-9]*" required="required" min="0" />
                                     </div>
                                     <br />
                                     <div>
-                                        <label for="txtMinBackdropDownloadWidth">${LabelMinBackdropDownloadWidth}</label>
+                                        <paper-input type="number" id="txtMinBackdropDownloadWidth" pattern="[0-9]*" required="required" min="0" label="${LabelMinBackdropDownloadWidth}"></paper-input>
-                                        <input type="number" id="txtMinBackdropDownloadWidth" name="txtMinBackdropDownloadWidth" pattern="[0-9]*" required="required" min="0" />
                                     </div>
                                 </div>
 
                                 <div class="screenshotFields" style="margin-bottom: 2em; display: none;">
                                     <div>
-                                        <label for="txtMaxScreenshots">${LabelMaxScreenshotsPerItem}</label>
+                                        <paper-input type="number" id="txtMaxScreenshots" pattern="[0-9]*" required="required" min="0" label="${LabelMaxScreenshotsPerItem}"></paper-input>
-                                        <input type="number" id="txtMaxScreenshots" name="txtMaxScreenshots" pattern="[0-9]*" required="required" min="0" />
                                     </div>
 
                                     <div>
-                                        <label for="txtMinScreenshotDownloadWidth">${LabelMinScreenshotDownloadWidth}</label>
+                                        <paper-input type="number" id="txtMinScreenshotDownloadWidth" pattern="[0-9]*" required="required" min="0" label="${LabelMinScreenshotDownloadWidth}"></paper-input>
-                                        <input type="number" id="txtMinScreenshotDownloadWidth" name="txtMinScreenshotDownloadWidth" pattern="[0-9]*" required="required" min="0" />
                                     </div>
                                 </div>
 

dashboard-ui/scripts/metadataimagespage.js

@@ -234,25 +234,22 @@
             return;
         }
 
-        html += '<fieldset data-role="controlgroup">';
+        html += '<div class="paperCheckboxListLabel">' + Globalize.translate('LabelMetadataSavers') + '</div>';
-        html += '<legend>' + Globalize.translate('LabelMetadataSavers') + '</legend>';
+        html += '<div class="paperCheckboxList">';
 
         for (var i = 0, length = plugins.length; i < length; i++) {
 
             var plugin = plugins[i];
 
-            var id = 'chkMetadataSaver' + i;
-
             var isChecked = config.DisabledMetadataSavers.indexOf(plugin.Name) == -1 ? ' checked="checked"' : '';
 
-            html += '<input class="chkMetadataSaver" type="checkbox" name="' + id + '" id="' + id + '" data-mini="true"' + isChecked + ' data-pluginname="' + plugin.Name + '">';
+            html += '<paper-checkbox class="chkMetadataSaver"' + isChecked + ' data-pluginname="' + plugin.Name + '">' + plugin.Name + '</paper-checkbox>';
-            html += '<label for="' + id + '">' + plugin.Name + '</label>';
         }
 
-        html += '</fieldset>';
+        html += '</div>';
-        html += '<div class="fieldDescription">' + Globalize.translate('LabelMetadataSaversHelp') + '</div>';
+        html += '<div class="fieldDescription" style="margin-top:.25em;">' + Globalize.translate('LabelMetadataSaversHelp') + '</div>';
 
-        $('.metadataSavers', page).html(html).show().trigger('create');
+        page.querySelector('.metadataSavers').innerHTML = html;
     }
 
     function renderMetadataFetchers(page, type, config, metadataInfo) {
@@ -416,7 +413,11 @@
 
     function saveSettingsIntoConfig(form, config) {
 
-        config.DisabledMetadataSavers = $('.chkMetadataSaver:not(:checked)', form).get().map(function (c) {
+        config.DisabledMetadataSavers = $('.chkMetadataSaver', form).get().filter(function (c) {
+
+            return !c.checked;
+
+        }).map(function (c) {
 
             return c.getAttribute('data-pluginname');