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

merge from dev

Browse source
This commit is contained in:
Luke Pulverenti 2015-12-14 10:43:03 -05:00
parent 1c8f02ce0f
commit 33b01d778c
911 changed files with 34157 additions and 57125 deletions
Download patch file Download diff file Expand all files Collapse all files

95
dashboard-ui/bower_components/iron-flex-layout/demo/demo-snippet.html vendored Normal file
View file

@ -0,0 +1,95 @@
<!--
@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="../../prism-element/prism-highlighter.html">
<link rel="import" href="../../marked-element/marked-element.html">
<!--
Quick element that can display the source of a code snippet and a rendered demo.
<demo-snippet>
<template>
<style is="custom-style">
#demo6 {
@apply(--layout-horizontal);
@apply(--layout-start);
height: 120px;
}
</style>
<div class="container" id="demo6">
<div>start</div>
</div>
</template>
</demo-snippet>
-->
<dom-module id="demo-snippet">
<template>
<style>
:host {
display:inline-block;
}
.demo {
border-bottom: 1px solid #e5e5e5;
margin: 0;
}
.code {
padding: 0;
margin: 0;
background-color: #fafafa;
font-size: 13px;
word-wrap: break-word;
}
.code > pre {
margin: 0;
padding: 0 0 10px 0;
}
</style>
<prism-highlighter></prism-highlighter>
<div class="demo">
<content id="content"></content>
</div>
<marked-element markdown=[[_markdown]]>
<div class="markdown-html code"></div>
</marked-element>
</template>
<script>
Polymer({
is: 'demo-snippet',
properties: {
_markdown: {
type: String,
value: ''
}
},
attached: function() {
var template = Polymer.dom(this).queryDistributedElements('template')[0];
var snippet = Polymer.domInnerHTML.getInnerHTML(template);
this._markdown = '```\n' + snippet + '\n' + '```';
// Stamp the template.
Polymer.dom(this).appendChild(document.importNode(template.content, true));
}
});
</script>
</dom-module>

416
dashboard-ui/bower_components/iron-flex-layout/demo/index.html vendored
View file

@ -2,41 +2,427 @@
<!--
@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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
<title>iron-flex-layout</title>
<title>iron-flex-layout demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../paper-styles/paper-styles.html">
<link rel="import" href="x-app.html">
<link rel="import" href="../../paper-styles/demo-pages.html">
<link rel="import" href="demo-snippet.html">
<link rel="import" href="../iron-flex-layout.html">
<style>
html, body, x-app {
height: 100%;
}
body {
.container {
background-color: #ccc;
padding: 5px;
margin: 0;
}
.container > div {
padding: 15px;
margin: 5px;
background-color: white;
min-height: 20px;
}
demo-snippet {
width: 100%;
}
.vertical-section {
padding: 0 !important;
}
</style>
</head>
<body class="fullbleed">
<body unresolved class="fullbleed">
<x-app></x-app>
<h4>Horizontal and vertical layout</h4>
<div class="vertical-section">
<demo-snippet>
<template>
<style is="custom-style">
.flex {
@apply(--layout-horizontal);
}
</style>
<div class="container flex">
<div>one</div>
<div>two</div>
<div>three</div>
</div>
</template>
</demo-snippet>
</div>
<h4>Flexible children</h4>
<div class="vertical-section">
<demo-snippet>
<template>
<style is="custom-style">
.flex-horizontal {
@apply(--layout-horizontal);
}
.flexchild {
@apply(--layout-flex);
}
</style>
<div class="container flex-horizontal">
<div>one</div>
<div class="flexchild">two (flex)</div>
<div>three</div>
</div>
</template>
</demo-snippet>
</div>
<h4>Flexible children in vertical layouts</h4>
<div class="vertical-section">
<demo-snippet>
<template>
<style is="custom-style">
.flex-vertical {
@apply(--layout-vertical);
height: 220px;
}
.flexchild-vertical {
@apply(--layout-flex);
}
</style>
<div class="container flex-vertical">
<div>one</div>
<div class="flexchild-vertical">two (flex)</div>
<div>three</div>
</div>
</template>
</demo-snippet>
</div>
<h4>Flex ratios</h4>
<div class="vertical-section">
<demo-snippet>
<template>
<style is="custom-style">
.flex-horizontal-with-ratios {
@apply(--layout-horizontal);
}
.flexchild {
@apply(--layout-flex);
}
.flex2child {
@apply(--layout-flex-2);
}
.flex3child {
@apply(--layout-flex-3);
}
</style>
<div class="container flex-horizontal-with-ratios">
<div class="flex3child">one</div>
<div class="flexchild">two</div>
<div class="flex2child">three</div>
</div>
</template>
</demo-snippet>
</div>
<h4>Cross-axis stretch alignment (default)</h4>
<div class="vertical-section">
<demo-snippet>
<template>
<style is="custom-style">
.flex-stretch-align {
@apply(--layout-horizontal);
height: 120px;
}
</style>
<div class="container flex-stretch-align">
<div>stretch</div>
</div>
</template>
</demo-snippet>
</div>
<h4>Cross-axis center alignment</h4>
<div class="vertical-section">
<demo-snippet>
<template>
<style is="custom-style">
.flex-center-align {
@apply(--layout-horizontal);
@apply(--layout-center);
height: 120px;
}
</style>
<div class="container flex-center-align">
<div>center</div>
</div>
</template>
</demo-snippet>
</div>
<h4>Cross-axis start alignment</h4>
<div class="vertical-section">
<demo-snippet>
<template>
<style is="custom-style">
.flex-start-align {
@apply(--layout-horizontal);
@apply(--layout-start);
height: 120px;
}
</style>
<div class="container flex-start-align">
<div>start</div>
</div>
</template>
</demo-snippet>
</div>
<h4>Cross-axis end alignment</h4>
<div class="vertical-section">
<demo-snippet>
<template>
<style is="custom-style">
.flex-end-align {
@apply(--layout-horizontal);
@apply(--layout-end);
height: 120px;
}
</style>
<div class="container flex-end-align">
<div>end</div>
</div>
</template>
</demo-snippet>
</div>
<h4>Justification, start justified</h4>
<div class="vertical-section">
<demo-snippet>
<template>
<style is="custom-style">
.flex-start-justified {
@apply(--layout-horizontal);
@apply(--layout-start-justified);
}
</style>
<div class="container flex-start-justified">
<div>start-justified</div>
</div>
</template>
</demo-snippet>
</div>
<h4>Justification, start justified</h4>
<div class="vertical-section">
<demo-snippet>
<template>
<style is="custom-style">
.flex-center-justified {
@apply(--layout-horizontal);
@apply(--layout-center-justified);
}
</style>
<div class="container flex-center-justified">
<div>center-justified</div>
</div>
</template>
</demo-snippet>
</div>
<h4>Justification, end justified</h4>
<div class="vertical-section">
<demo-snippet>
<template>
<style is="custom-style">
.flex-end-justified {
@apply(--layout-horizontal);
@apply(--layout-end-justified);
}
</style>
<div class="container flex-end-justified">
<div>end-justified</div>
</div>
</template>
</demo-snippet>
</div>
<h4>Justification, equal space between elements</h4>
<div class="vertical-section">
<demo-snippet>
<template>
<style is="custom-style">
.flex-equal-justified {
@apply(--layout-horizontal);
@apply(--layout-justified);
}
</style>
<div class="container flex-equal-justified">
<div>justified</div>
<div>justified</div>
<div>justified</div>
</div>
</template>
</demo-snippet>
</div>
<h4>Justification, equal space around each element</h4>
<div class="vertical-section">
<demo-snippet>
<template>
<style is="custom-style">
.flex-equal-around-justified {
@apply(--layout-horizontal);
@apply(--layout-around-justified);
}
</style>
<div class="container flex-equal-around-justified">
<div>around-justified</div>
<div>around-justified</div>
</div>
</template>
</demo-snippet>
</div>
<h4>Self alignment</h4>
<div class="vertical-section">
<demo-snippet>
<template>
<style is="custom-style">
.flex-self-align {
@apply(--layout-horizontal);
@apply(--layout-justified);
height: 120px;
}
.flex-self-align div {
@apply(--layout-flex);
}
.child1 {
@apply(--layout-self-start);
}
.child2 {
@apply(--layout-self-center);
}
.child3 {
@apply(--layout-self-end);
}
.child4 {
@apply(--layout-self-stretch);
}
</style>
<div class="container flex-self-align">
<div class="child1">one</div>
<div class="child2">two</div>
<div class="child3">three</div>
<div class="child4">four</div>
</div>
</template>
</demo-snippet>
</div>
<h4>Wrapping</h4>
<div class="vertical-section">
<demo-snippet>
<template>
<style is="custom-style">
.flex-wrap {
@apply(--layout-horizontal);
@apply(--layout-wrap);
width: 200px;
}
</style>
<div class="container flex-wrap">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</div>
</template>
</demo-snippet>
</div>
<h4>Reversed layouts</h4>
<div class="vertical-section">
<demo-snippet>
<template>
<style is="custom-style">
.flex-reversed {
@apply(--layout-horizontal-reverse);
}
</style>
<div class="container flex-reversed">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
</div>
</template>
</demo-snippet>
</div>
<h4>General purpose ruls</h4>
<div class="vertical-section">
<demo-snippet>
<template>
<style is="custom-style">
.general {
width: 100%;
}
.general > div {
background-color: #ccc;
padding: 4px;
margin: 12px;
}
.block {
@apply(--layout-block);
}
.invisible {
@apply(--layout-invisible);
}
.relative {
@apply(--layout-relative);
}
.fit {
@apply(--layout-fit);
}
</style>
<div class="general">
<div>Before <span>[A Span]</span> After</div>
<div>Before <span class="block">[A Block Span]</span> After</div>
<div>Before invisible span <span class="invisible">Not displayed</span> After invisible span</div>
<div class="relative" style="height: 100px;">
<div class="fit" style="background-color: #000;color: white">Fit</div>
</div>
</div>
</template>
</demo-snippet>
</div>
</body>
</html>

118
dashboard-ui/bower_components/iron-flex-layout/demo/x-app.html vendored
View file

@ -1,118 +0,0 @@
<!--
@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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->
<link rel="import" href="../iron-flex-layout.html">
<dom-module id="x-app">
<style>
:host {
@apply(--layout-horizontal);
@apply(--paper-font-body2);
}
[nav] {
@apply(--layout-vertical);
width: 200px;
background-color: var(--paper-grey-300);
}
[item] {
@apply(--layout-horizontal);
@apply(--layout-center);
height: 60px;
padding-left: 16px;
border-bottom: 1px solid var(--paper-grey-400);
}
[main] {
@apply(--layout-flex);
@apply(--layout-vertical);
}
[header] {
@apply(--layout-horizontal);
@apply(--layout-center);
@apply(--paper-font-subhead);
height: 60px;
background-color: var(--google-blue-700);
padding: 0 16px;
color: white;
}
[tool] {
@apply(--layout-inline);
}
[content] {
@apply(--layout-flex);
overflow: auto;
padding: 0 10px;
}
[card] {
@apply(--layout-vertical);
@apply(--layout-center-center);
@apply(--shadow-elevation-2dp);
height: 300px;
max-width: 800px;
margin: 16px auto;
font-weight: bold;
background-color: var(--paper-grey-200);
}
</style>
<template>
<div nav>
<div content>
<div item>ITEM 1</div>
<div item>ITEM 2</div>
<div item>ITEM 3</div>
<div item>ITEM 4</div>
<div item>ITEM 5</div>
</div>
</div>
<div main>
<div header>
<div tool>Foo</div>
<div class="flex"></div>
<div tool>Bar</div>
</div>
<div content>
<div card>CARD 1</div>
<div card>CARD 2</div>
<div card>CARD 3</div>
<div card>CARD 4</div>
<div card>CARD 5</div>
</div>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'x-app'
});
</script>