1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update user data queries

This commit is contained in:
Luke Pulverenti 2016-05-08 02:31:08 -04:00
parent 471acf85af
commit 2242c4d5d6
110 changed files with 5729 additions and 119 deletions

View file

@ -0,0 +1,146 @@
<!--
@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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-shared-element-animatable-behavior.html">
<link rel="import" href="../../../paper-styles/typography.html">
<link rel="import" href="../../../paper-styles/color.html">
<link rel="import" href="../shared-styles.html">
<dom-module id="animated-grid">
<template>
<style include="shared-styles"></style>
<style>
:host {
display: block;
background: #000;
}
.tile {
display: inline-block;
float: left;
vertical-align: top;
width: calc(100% / 6);
height: calc(100% / 3);
@apply(--paper-font-title);
@apply(--layout-vertical);
@apply(--layout-center-center);
}
.tile:nth-of-type(1) {
width: calc(100% / 3);
height: calc(100% / 3 * 2);
}
.tile:nth-of-type(4) {
width: calc(100% / 3);
}
.tile:nth-of-type(5) {
width: calc(100% / 3);
height: calc(100% / 3 * 2);
}
.tile:nth-of-type(8) {
width: calc(100% / 3);
height: calc(100% / 3);
}
.tile:nth-of-type(9) {
position: absolute;
top: calc(100% / 3 * 2);
left: 0;
width: calc(100% / 6);
height: calc(100% / 3);
}
.tile:nth-of-type(10) {
position: absolute;
top: calc(100% / 3 * 2);
left: calc(100% / 6);;
width: calc(100% / 6);
height: calc(100% / 3);
}
</style>
<template is="dom-repeat" items="[[config]]">
<div class$="[[_computeTileClass(item.color)]]">
<span>[[item.value]]</span>
</div>
</template>
</template>
</dom-module>
<script>
Polymer({
is: 'animated-grid',
behaviors: [
Polymer.NeonSharedElementAnimatableBehavior
],
properties: {
config: {
type: Array,
value: function() {
return [
{value: 1, color: 'blue'},
{value: 2, color: 'red'},
{value: 3, color: 'blue'},
{value: 4, color: 'green'},
{value: 5, color: 'yellow'},
{value: 6, color: 'blue'},
{value: 7, color: 'red'},
{value: 8, color: 'green'},
{value: 9, color: 'yellow'},
{value: 10, color: 'red'}
]
}
},
animationConfig: {
type: Object,
value: function() {
return {
'entry': [{
name: 'cascaded-animation',
animation: 'transform-animation',
transformFrom: 'translateY(100%)',
transformTo: 'none',
timing: {
delay: 50
}
}]
}
}
}
},
attached: function() {
this.async(function() {
var nodeList = Polymer.dom(this.root).querySelectorAll('.tile');
this.animationConfig['entry'][0].nodes = Array.prototype.slice.call(nodeList);
});
},
_computeTileClass: function(color) {
return 'tile ' + color + '-300';
}
});
</script>

View file

@ -0,0 +1,82 @@
<!--
@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
-->
<link rel="import" href="../../../polymer/polymer.html">
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-animatable-behavior.html">
<link rel="import" href="../../neon-animation-runner-behavior.html">
<link rel="import" href="../../../paper-styles/shadow.html">
<link rel="import" href="animated-grid.html">
<dom-module id="full-page">
<template>
<style>
:host {
background: black;
visibility: hidden;
@apply(--layout-vertical);
}
.toolbar {
background: #9c27b0;
height: 72px;
z-index: 1;
@apply(--shadow-elevation-2dp);
}
animated-grid {
height: calc(100% - 72px);
@apply(--layout-flex);
}
</style>
<div id="toolbar" class="toolbar"></div>
<animated-grid id="grid"></animated-grid>
</template>
</dom-module>
<script>
Polymer({
is: 'full-page',
behaviors: [
Polymer.NeonAnimatableBehavior,
Polymer.NeonAnimationRunnerBehavior
],
properties: {
animationConfig: {
type: Object,
value: function() {
return {
'entry': [{
name: 'slide-from-top-animation',
node: this.$.toolbar
}, {
animatable: this.$.grid,
type: 'entry'
}]
};
}
}
},
show: function() {
this.style.visibility = 'visible';
this.playAnimation('entry');
}
});
</script>

View file

@ -0,0 +1,48 @@
<!doctype html>
<!--
@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
-->
<html>
<head>
<title>neon-animated-pages demo: load</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-lite.js"></script>
<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="../../neon-animated-pages.html">
<link rel="import" href="../../neon-animations.html">
<link rel="import" href="full-page.html">
<style is="custom-style">
body {
overflow: hidden;
@apply(--layout-fullbleed);
}
full-page {
@apply(--layout-fit);
}
</style>
</head>
<body>
<full-page></full-page>
<script>
document.addEventListener('WebComponentsReady', function() {
document.querySelector('full-page').show();
});
</script>
</body>
</html>