milas/jellyfish-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

update components

Browse source
This commit is contained in:
Luke Pulverenti 2016-03-10 12:59:32 -05:00
parent 4f48507a2d
commit 4a87b99666
16 changed files with 428 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

8
dashboard-ui/bower_components/iron-flex-layout/.bower.json vendored
View file

@ -1,6 +1,6 @@
{
"name": "iron-flex-layout",
"version": "1.3.0",
"version": "1.3.1",
"description": "Provide flexbox-based layouts",
"keywords": [
"web-components",
@ -29,11 +29,11 @@
},
"ignore": [],
"homepage": "https://github.com/PolymerElements/iron-flex-layout",
"_release": "1.3.0",
"_release": "1.3.1",
"_resolution": {
"type": "version",
"tag": "v1.3.0",
"commit": "434224c8cf63cb4bb1b66edb0dc58e4484f7c5b2"
"tag": "v1.3.1",
"commit": "6d88f29f3a7181daa2a5c7f678de44f0a0e6a717"
},
"_source": "git://github.com/PolymerElements/iron-flex-layout.git",
"_target": "^1.0.0",

2
dashboard-ui/bower_components/iron-flex-layout/bower.json vendored
View file

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

52
dashboard-ui/bower_components/iron-flex-layout/iron-flex-layout-classes.html vendored
View file

@ -15,7 +15,7 @@ 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">
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<div class="layout horizontal layout-start">
<div>cross axis start alignment</div>
@ -161,6 +161,12 @@ The following imports are available:
align-items: flex-end;
}
.layout.baseline {
-ms-flex-align: baseline;
-webkit-align-items: baseline;
align-items: baseline;
}
/**
* Alignment in main axis.
*/
@ -221,6 +227,50 @@ The following imports are available:
-webkit-align-self: stretch;
align-self: stretch;
}
.self-baseline {
-ms-align-self: baseline;
-webkit-align-self: baseline;
align-self: baseline;
};
/**
* multi-line alignment in main axis.
*/
.layout.start-aligned {
-ms-flex-line-pack: start; /* IE10 */
-ms-align-content: flex-start;
-webkit-align-content: flex-start;
align-content: flex-start;
}
.layout.end-aligned {
-ms-flex-line-pack: end; /* IE10 */
-ms-align-content: flex-end;
-webkit-align-content: flex-end;
align-content: flex-end;
}
.layout.center-aligned {
-ms-flex-line-pack: center; /* IE10 */
-ms-align-content: center;
-webkit-align-content: center;
align-content: center;
}
.layout.between-aligned {
-ms-flex-line-pack: justify; /* IE10 */
-ms-align-content: space-between;
-webkit-align-content: space-between;
align-content: space-between;
}
.layout.around-aligned {
-ms-flex-line-pack: distribute; /* IE10 */
-ms-align-content: space-around;
-webkit-align-content: space-around;
align-content: space-around;
}
</style>
</template>
</dom-module>

61
dashboard-ui/bower_components/iron-flex-layout/iron-flex-layout.html vendored
View file

@ -20,14 +20,14 @@ The layout class stylesheet provides a simple set of class-based flexbox rules,
let you specify layout properties directly in markup. You must include this file
in every element that needs to use them.
Sample use:
Sample use:
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<style is="custom-style" include="iron-flex iron-flex-alignment">
<link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<div class="layout horizontal layout-start">
<div>cross axis start alignment</div>
</div>
<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.
@ -218,6 +218,12 @@ A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `
align-items: flex-end;
};
--layout-baseline: {
-ms-flex-align: baseline;
-webkit-align-items: baseline;
align-items: baseline;
};
/* alignment in main axis */
--layout-start-justified: {
@ -281,6 +287,49 @@ A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `
align-self: stretch;
};
--layout-self-baseline: {
-ms-align-self: baseline;
-webkit-align-self: baseline;
align-self: baseline;
};
/* multi-line alignment in main axis */
--layout-start-aligned: {
-ms-flex-line-pack: start; /* IE10 */
-ms-align-content: flex-start;
-webkit-align-content: flex-start;
align-content: flex-start;
};
--layout-end-aligned: {
-ms-flex-line-pack: end; /* IE10 */
-ms-align-content: flex-end;
-webkit-align-content: flex-end;
align-content: flex-end;
};
--layout-center-aligned: {
-ms-flex-line-pack: center; /* IE10 */
-ms-align-content: center;
-webkit-align-content: center;
align-content: center;
};
--layout-between-aligned: {
-ms-flex-line-pack: justify; /* IE10 */
-ms-align-content: space-between;
-webkit-align-content: space-between;
align-content: space-between;
};
--layout-around-aligned: {
-ms-flex-line-pack: distribute; /* IE10 */
-ms-align-content: space-around;
-webkit-align-content: space-around;
align-content: space-around;
};
/*******************************
Other Layout
*******************************/

93
dashboard-ui/bower_components/iron-flex-layout/test/iron-flex-layout-classes.html vendored
View file

@ -52,6 +52,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
#c1 { background-color: #E91E63; }
#c2 { background-color: #03A9F4; }
#c3 { background-color: #CDDC39; }
#c4 { background-color: #03A9F4; }
#c5 { background-color: #E91E63; }
</style>
</head>
<body>
@ -90,11 +92,23 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</test-fixture>
<test-fixture id="align-content">
<template>
<div class="container layout">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
<div id="c4"></div>
<div id="c5"></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;
return rect.top === top && rect.bottom === bottom &&
rect.left === left && rect.right === right;
}
suite('basic layout', function() {
var container;
@ -304,6 +318,81 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
});
suite('align-content', function() {
var container;
setup(function() {
container = fixture('align-content');
container.classList.add('small');
container.classList.add('tall');
container.classList.add('horizontal');
container.classList.add('flex');
container.classList.add('wrap');
});
test('default is stretch', function() {
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
assert.isTrue(positionEquals(c1, 0, 100, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 100, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 100, 200, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, 100, 200, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 200, 300, 0, 50), "child 5 position ok");
});
test('layout-start-aligned', function() {
container.classList.add('start-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
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");
assert.isTrue(positionEquals(c4, 50, 100, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 100, 150, 0, 50), "child 5 position ok");
});
test('layout-end-aligned', function() {
container.classList.add('end-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
assert.isTrue(positionEquals(c1, 150, 200, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 150, 200, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 200, 250, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, 200, 250, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok");
});
test('layout-center-aligned', function() {
container.classList.add('center-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, center-50, center, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, center-50, center, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, center+50, center+100, 0, 50), "child 5 position ok");
});
test('layout-between-aligned', function() {
container.classList.add('between-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "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, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok");
});
test('layout-around-aligned', function() {
container.classList.add('around-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, 25, 75, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 25, 75, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 225, 275, 0, 50), "child 5 position ok");
});
});
suite('positioning', function() {
var container;

94
dashboard-ui/bower_components/iron-flex-layout/test/iron-flex-layout.html vendored
View file

@ -53,6 +53,8 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
#c1 { background-color: #E91E63; }
#c2 { background-color: #03A9F4; }
#c3 { background-color: #CDDC39; }
#c4 { background-color: #03A9F4; }
#c5 { background-color: #E91E63; }
.horizontal { @apply(--layout-horizontal); }
.horizontal-reverse { @apply(--layout-horizontal-reverse); }
@ -72,6 +74,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
.justified { @apply(--layout-justified); }
.around-justified { @apply(--layout-around-justified); }
.fit { @apply(--layout-fit); }
.start-aligned { @apply(--layout-start-aligned); }
.end-aligned { @apply(--layout-end-aligned); }
.center-aligned { @apply(--layout-center-aligned); }
.between-aligned { @apply(--layout-between-aligned); }
.around-aligned { @apply(--layout-around-aligned); }
</style>
</head>
<body>
@ -110,11 +118,23 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
</div>
</template>
</test-fixture>
<test-fixture id="align-content">
<template>
<div class="container small tall horizontal flex wrap">
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
<div id="c4"></div>
<div id="c5"></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;
return rect.top === top && rect.bottom === bottom &&
rect.left === left && rect.right === right;
}
suite('basic layout', function() {
var container;
@ -324,6 +344,76 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
});
});
suite('align-content', function() {
var container;
setup(function() {
container = fixture('align-content');
});
test('default is stretch', function() {
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
assert.isTrue(positionEquals(c1, 0, 100, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 0, 100, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 100, 200, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, 100, 200, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 200, 300, 0, 50), "child 5 position ok");
});
test('--layout-start-aligned', function() {
container.classList.add('start-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
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");
assert.isTrue(positionEquals(c4, 50, 100, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 100, 150, 0, 50), "child 5 position ok");
});
test('--layout-end-aligned', function() {
container.classList.add('end-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
assert.isTrue(positionEquals(c1, 150, 200, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 150, 200, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, 200, 250, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, 200, 250, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok");
});
test('--layout-center-aligned', function() {
container.classList.add('center-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, center-50, center, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, center-50, center, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, center+50, center+100, 0, 50), "child 5 position ok");
});
test('--layout-between-aligned', function() {
container.classList.add('between-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "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, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 250, 300, 0, 50), "child 5 position ok");
});
test('--layout-around-aligned', function() {
container.classList.add('around-aligned');
assert.isTrue(positionEquals(container, 0, 300, 0, 120), "container position ok");
var center = (300 - 50) / 2;
assert.isTrue(positionEquals(c1, 25, 75, 0, 50), "child 1 position ok");
assert.isTrue(positionEquals(c2, 25, 75, 50, 100), "child 2 position ok");
assert.isTrue(positionEquals(c3, center, center+50, 0, 50), "child 3 position ok");
assert.isTrue(positionEquals(c4, center, center+50, 50, 100), "child 4 position ok");
assert.isTrue(positionEquals(c5, 225, 275, 0, 50), "child 5 position ok");
});
});
suite('positioning', function() {
var container;