mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update card layouts
This commit is contained in:
parent
614e07a81d
commit
cee7db2ce0
29 changed files with 194 additions and 71 deletions
|
@ -14,12 +14,12 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {},
|
"devDependencies": {},
|
||||||
"ignore": [],
|
"ignore": [],
|
||||||
"version": "1.4.165",
|
"version": "1.4.166",
|
||||||
"_release": "1.4.165",
|
"_release": "1.4.166",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "1.4.165",
|
"tag": "1.4.166",
|
||||||
"commit": "ebe71bd8b4505ceb207efb226686eb6c3e842b4c"
|
"commit": "869fe388b2e0bd01bee868001f9e1d456a2c7ca1"
|
||||||
},
|
},
|
||||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||||
"_target": "^1.2.1",
|
"_target": "^1.2.1",
|
||||||
|
|
|
@ -48,19 +48,19 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.backdropCard .cardPadder, .smallBackdropCard .cardPadder, .overflowBackdropCard .cardPadder {
|
.cardPadder-backdrop, .cardPadder-smallBackdrop, .cardPadder-overflowBackdrop {
|
||||||
padding-bottom: 56.25%;
|
padding-bottom: 56.25%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.squareCard .cardPadder, .overflowSquareCard .cardPadder {
|
.cardPadder-square, .cardPadder-overflowSquare {
|
||||||
padding-bottom: 100%;
|
padding-bottom: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.portraitCard .cardPadder, .overflowPortraitCard .cardPadder {
|
.cardPadder-portrait, .cardPadder-overflowPortrait {
|
||||||
padding-bottom: 150%;
|
padding-bottom: 150%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bannerCard .cardPadder {
|
.cardPadder-banner {
|
||||||
padding-bottom: 18.5%;
|
padding-bottom: 18.5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1073,7 +1073,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
|
||||||
cardContentClose = '</button>';
|
cardContentClose = '</button>';
|
||||||
}
|
}
|
||||||
cardImageContainerOpen = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
|
cardImageContainerOpen = imgUrl ? ('<div class="' + cardImageContainerClass + ' lazy" data-src="' + imgUrl + '">') : ('<div class="' + cardImageContainerClass + '">');
|
||||||
cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="cardScalable"><div class="cardPadder"></div>' + cardContentOpen + cardImageContainerOpen;
|
cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="cardScalable"><div class="cardPadder-' + options.shape + '"></div>' + cardContentOpen + cardImageContainerOpen;
|
||||||
cardBoxClose = '</div>';
|
cardBoxClose = '</div>';
|
||||||
cardScalableClose = '</div>';
|
cardScalableClose = '</div>';
|
||||||
cardImageContainerClose = '</div>';
|
cardImageContainerClose = '</div>';
|
||||||
|
|
|
@ -9,16 +9,16 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemShortcuts'], functi
|
||||||
return i.Type == 'Video';
|
return i.Type == 'Video';
|
||||||
})[0] || {};
|
})[0] || {};
|
||||||
|
|
||||||
var shape = (options.backdropShape || 'backdrop') + 'Card';
|
var shape = (options.backdropShape || 'backdrop');
|
||||||
|
|
||||||
if (videoStream.Width && videoStream.Height) {
|
if (videoStream.Width && videoStream.Height) {
|
||||||
|
|
||||||
if ((videoStream.Width / videoStream.Height) <= 1.34) {
|
if ((videoStream.Width / videoStream.Height) <= 1.34) {
|
||||||
shape = (options.squareShape || 'square') + 'Card';
|
shape = (options.squareShape || 'square');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
className += ' ' + shape;
|
className += ' ' + shape + 'Card';
|
||||||
|
|
||||||
if (options.block || options.rows) {
|
if (options.block || options.rows) {
|
||||||
className += ' block';
|
className += ' block';
|
||||||
|
@ -37,7 +37,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemShortcuts'], functi
|
||||||
|
|
||||||
var chapter = chapters[i];
|
var chapter = chapters[i];
|
||||||
|
|
||||||
html += buildChapterCard(item, apiClient, chapter, i, options, className);
|
html += buildChapterCard(item, apiClient, chapter, i, options, className, shape);
|
||||||
itemsInRow++;
|
itemsInRow++;
|
||||||
|
|
||||||
if (options.rows && itemsInRow >= options.rows) {
|
if (options.rows && itemsInRow >= options.rows) {
|
||||||
|
@ -65,7 +65,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemShortcuts'], functi
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
function buildChapterCard(item, apiClient, chapter, index, options, className) {
|
function buildChapterCard(item, apiClient, chapter, index, options, className, shape) {
|
||||||
|
|
||||||
var imgUrl = getImgUrl(item, chapter, index, options.width || 400, apiClient);
|
var imgUrl = getImgUrl(item, chapter, index, options.width || 400, apiClient);
|
||||||
|
|
||||||
|
@ -88,7 +88,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemShortcuts'], functi
|
||||||
<button type="button" class="' + className + '"' + dataAttributes + '> \
|
<button type="button" class="' + className + '"' + dataAttributes + '> \
|
||||||
<div class="cardBox">\
|
<div class="cardBox">\
|
||||||
<div class="cardScalable">\
|
<div class="cardScalable">\
|
||||||
<div class="cardPadder"></div>\
|
<div class="cardPadder-'+ shape + '"></div>\
|
||||||
<div class="cardContent">\
|
<div class="cardContent">\
|
||||||
' + cardImageContainer + '\
|
' + cardImageContainer + '\
|
||||||
</div>\
|
</div>\
|
||||||
|
|
|
@ -81,7 +81,7 @@ define(['imageLoader', 'itemShortcuts', 'connectionManager'], function (imageLoa
|
||||||
<button type="button" data-isfolder="' + person.IsFolder + '" data-type="' + person.Type + '" data-action="link" data-id="' + person.Id + '" data-serverid="' + serverId + '" raised class="' + className + '"> \
|
<button type="button" data-isfolder="' + person.IsFolder + '" data-type="' + person.Type + '" data-action="link" data-id="' + person.Id + '" data-serverid="' + serverId + '" raised class="' + className + '"> \
|
||||||
<div class="visualCardBox cardBox">\
|
<div class="visualCardBox cardBox">\
|
||||||
<div class="cardScalable">\
|
<div class="cardScalable">\
|
||||||
<div class="cardPadder"></div>\
|
<div class="cardPadder-portrait"></div>\
|
||||||
<div class="cardContent">\
|
<div class="cardContent">\
|
||||||
' + cardImageContainer + '\
|
' + cardImageContainer + '\
|
||||||
</div>\
|
</div>\
|
||||||
|
|
|
@ -8,7 +8,8 @@ define(['layoutManager', 'globalize', 'css!./dialog'], function (layoutManager,
|
||||||
actionSheet.show({
|
actionSheet.show({
|
||||||
|
|
||||||
title: options.text,
|
title: options.text,
|
||||||
items: options.buttons
|
items: options.buttons,
|
||||||
|
timeout: options.timeout
|
||||||
|
|
||||||
}).then(resolve, reject);
|
}).then(resolve, reject);
|
||||||
});
|
});
|
||||||
|
@ -45,7 +46,7 @@ define(['layoutManager', 'globalize', 'css!./dialog'], function (layoutManager,
|
||||||
|
|
||||||
if (options.title) {
|
if (options.title) {
|
||||||
html += '<h2>' + options.title + '</h2>';
|
html += '<h2>' + options.title + '</h2>';
|
||||||
}
|
}
|
||||||
|
|
||||||
var text = options.html || options.text;
|
var text = options.html || options.text;
|
||||||
|
|
||||||
|
|
|
@ -105,14 +105,14 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'embyRouter',
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (options.open !== false) {
|
//if (options.open !== false) {
|
||||||
if (item.Type != 'Timer' && item.Type != 'Audio') {
|
// if (item.Type != 'Timer' && item.Type != 'Audio') {
|
||||||
commands.push({
|
// commands.push({
|
||||||
name: globalize.translate('sharedcomponents#Open'),
|
// name: globalize.translate('sharedcomponents#Open'),
|
||||||
id: 'open'
|
// id: 'open'
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
}
|
//}
|
||||||
|
|
||||||
if (canPlay) {
|
if (canPlay) {
|
||||||
if (options.play !== false) {
|
if (options.play !== false) {
|
||||||
|
|
|
@ -188,7 +188,7 @@
|
||||||
html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">';
|
html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">';
|
||||||
html += '<div class="cardBox visualCardBox">';
|
html += '<div class="cardBox visualCardBox">';
|
||||||
html += '<div class="cardScalable">';
|
html += '<div class="cardScalable">';
|
||||||
html += '<div class="cardPadder"></div>';
|
html += '<div class="cardPadder-portrait"></div>';
|
||||||
|
|
||||||
html += '<div class="cardContent searchImage">';
|
html += '<div class="cardContent searchImage">';
|
||||||
|
|
||||||
|
|
|
@ -40,14 +40,11 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
|
||||||
|
|
||||||
resetRegistration();
|
resetRegistration();
|
||||||
|
|
||||||
function show(title, options, timeoutMs) {
|
function showPersistentNotification(title, options, timeoutMs) {
|
||||||
|
serviceWorkerRegistration.showNotification(title, options);
|
||||||
|
}
|
||||||
|
|
||||||
resetRegistration();
|
function showNonPersistentNotification(title, options, timeoutMs) {
|
||||||
|
|
||||||
if (serviceWorkerRegistration && !timeoutMs) {
|
|
||||||
serviceWorkerRegistration.showNotification(title, options);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
var notif = new Notification(title, options);
|
var notif = new Notification(title, options);
|
||||||
|
@ -69,6 +66,18 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function show(title, options, timeoutMs) {
|
||||||
|
|
||||||
|
resetRegistration();
|
||||||
|
|
||||||
|
if (serviceWorkerRegistration) {
|
||||||
|
showPersistentNotification(title, options, timeoutMs);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
showNonPersistentNotification(title, options, timeoutMs);
|
||||||
|
}
|
||||||
|
|
||||||
function showNewItemNotification(item, apiClient) {
|
function showNewItemNotification(item, apiClient) {
|
||||||
|
|
||||||
var notification = {
|
var notification = {
|
||||||
|
@ -162,10 +171,10 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
|
||||||
else if (status == 'progress') {
|
else if (status == 'progress') {
|
||||||
notification.title = globalize.translate('sharedcomponents#InstallingPackage').replace('{0}', installation.Name + ' ' + installation.Version);
|
notification.title = globalize.translate('sharedcomponents#InstallingPackage').replace('{0}', installation.Name + ' ' + installation.Version);
|
||||||
|
|
||||||
//notification.actions =
|
notification.actions =
|
||||||
//[
|
[
|
||||||
// { action: 'cancel', title: globalize.translate('sharedcomponents#ButtonCancel')/*, icon: 'https://example/like.png'*/ }
|
{ action: 'cancel-install-' + installation.Id, title: globalize.translate('sharedcomponents#ButtonCancel')/*, icon: 'https://example/like.png'*/ }
|
||||||
//];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
if (status == 'progress') {
|
if (status == 'progress') {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iron-demo-helpers",
|
"name": "iron-demo-helpers",
|
||||||
"version": "1.2.4",
|
"version": "1.2.5",
|
||||||
"description": "Utility classes to make building demo pages easier",
|
"description": "Utility classes to make building demo pages easier",
|
||||||
"authors": [
|
"authors": [
|
||||||
"The Polymer Authors"
|
"The Polymer Authors"
|
||||||
|
@ -28,7 +28,7 @@
|
||||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
|
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
|
||||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||||
"marked-element": "polymerelements/marked-element#^1.0.0",
|
"marked-element": "polymerelements/marked-element#^1.0.0",
|
||||||
"prism-element": "PolymerElements/prism-element#^1.0.0",
|
"prism-element": "PolymerElements/prism-element#^1.1.0",
|
||||||
"iron-location": "PolymerElements/iron-location#^0.8.0",
|
"iron-location": "PolymerElements/iron-location#^0.8.0",
|
||||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0"
|
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0"
|
||||||
},
|
},
|
||||||
|
@ -41,11 +41,11 @@
|
||||||
"paper-styles": "PolymerElements/paper-styles#^1.1.0",
|
"paper-styles": "PolymerElements/paper-styles#^1.1.0",
|
||||||
"paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0"
|
"paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0"
|
||||||
},
|
},
|
||||||
"_release": "1.2.4",
|
"_release": "1.2.5",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.2.4",
|
"tag": "v1.2.5",
|
||||||
"commit": "98e06f4c526146e9e7231138d91f8c65ffb25cd6"
|
"commit": "a376e52de29be389fa22e175b64c9813163023fb"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/polymerelements/iron-demo-helpers.git",
|
"_source": "git://github.com/polymerelements/iron-demo-helpers.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "iron-demo-helpers",
|
"name": "iron-demo-helpers",
|
||||||
"version": "1.2.4",
|
"version": "1.2.5",
|
||||||
"description": "Utility classes to make building demo pages easier",
|
"description": "Utility classes to make building demo pages easier",
|
||||||
"authors": [
|
"authors": [
|
||||||
"The Polymer Authors"
|
"The Polymer Authors"
|
||||||
|
@ -28,7 +28,7 @@
|
||||||
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
|
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
|
||||||
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
"paper-styles": "PolymerElements/paper-styles#^1.0.0",
|
||||||
"marked-element": "polymerelements/marked-element#^1.0.0",
|
"marked-element": "polymerelements/marked-element#^1.0.0",
|
||||||
"prism-element": "PolymerElements/prism-element#^1.0.0",
|
"prism-element": "PolymerElements/prism-element#^1.1.0",
|
||||||
"iron-location": "PolymerElements/iron-location#^0.8.0",
|
"iron-location": "PolymerElements/iron-location#^0.8.0",
|
||||||
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0"
|
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0"
|
||||||
},
|
},
|
||||||
|
|
|
@ -15,6 +15,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
|
||||||
<link rel="import" href="../paper-styles/color.html">
|
<link rel="import" href="../paper-styles/color.html">
|
||||||
<link rel="import" href="../paper-styles/shadow.html">
|
<link rel="import" href="../paper-styles/shadow.html">
|
||||||
<link rel="import" href="../prism-element/prism-highlighter.html">
|
<link rel="import" href="../prism-element/prism-highlighter.html">
|
||||||
|
<link rel="import" href="../prism-element/prism-theme-default.html">
|
||||||
|
|
||||||
<!--
|
<!--
|
||||||
`demo-snippet` is a helper element that displays the source of a code snippet and
|
`demo-snippet` is a helper element that displays the source of a code snippet and
|
||||||
|
@ -54,6 +55,7 @@ Custom property | Description | Default
|
||||||
|
|
||||||
<dom-module id="demo-snippet">
|
<dom-module id="demo-snippet">
|
||||||
<template>
|
<template>
|
||||||
|
<style is="custom-style" include="prism-theme-default"></style>
|
||||||
<style>
|
<style>
|
||||||
:host {
|
:host {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "iron-icon",
|
"name": "iron-icon",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "1.0.9",
|
"version": "1.0.10",
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
"license": "http://polymer.github.io/LICENSE.txt",
|
||||||
"description": "An element that supports displaying an icon",
|
"description": "An element that supports displaying an icon",
|
||||||
"main": "iron-icon.html",
|
"main": "iron-icon.html",
|
||||||
|
@ -32,14 +32,14 @@
|
||||||
"web-component-tester": "^4.0.0",
|
"web-component-tester": "^4.0.0",
|
||||||
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
|
||||||
},
|
},
|
||||||
"homepage": "https://github.com/polymerelements/iron-icon",
|
"homepage": "https://github.com/PolymerElements/iron-icon",
|
||||||
"_release": "1.0.9",
|
"_release": "1.0.10",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.0.9",
|
"tag": "v1.0.10",
|
||||||
"commit": "f6fb241901377e30e2c9c6cd47e3e8e8beb6574d"
|
"commit": "f4e146da4982ff96bb25db85290c09e8de4ec734"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/polymerelements/iron-icon.git",
|
"_source": "git://github.com/PolymerElements/iron-icon.git",
|
||||||
"_target": "^1.0.0",
|
"_target": "^1.0.0",
|
||||||
"_originalSource": "polymerelements/iron-icon"
|
"_originalSource": "PolymerElements/iron-icon"
|
||||||
}
|
}
|
|
@ -1,7 +1,7 @@
|
||||||
{
|
{
|
||||||
"name": "iron-icon",
|
"name": "iron-icon",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "1.0.9",
|
"version": "1.0.10",
|
||||||
"license": "http://polymer.github.io/LICENSE.txt",
|
"license": "http://polymer.github.io/LICENSE.txt",
|
||||||
"description": "An element that supports displaying an icon",
|
"description": "An element that supports displaying an icon",
|
||||||
"main": "iron-icon.html",
|
"main": "iron-icon.html",
|
||||||
|
|
|
@ -69,6 +69,7 @@ The following custom properties are available for styling:
|
||||||
|
|
||||||
Custom property | Description | Default
|
Custom property | Description | Default
|
||||||
----------------|-------------|----------
|
----------------|-------------|----------
|
||||||
|
`--iron-icon` | Mixin applied to the icon | {}
|
||||||
`--iron-icon-width` | Width of the icon | `24px`
|
`--iron-icon-width` | Width of the icon | `24px`
|
||||||
`--iron-icon-height` | Height of the icon | `24px`
|
`--iron-icon-height` | Height of the icon | `24px`
|
||||||
`--iron-icon-fill-color` | Fill color of the svg icon | `currentcolor`
|
`--iron-icon-fill-color` | Fill color of the svg icon | `currentcolor`
|
||||||
|
@ -96,6 +97,7 @@ Custom property | Description | Default
|
||||||
|
|
||||||
width: var(--iron-icon-width, 24px);
|
width: var(--iron-icon-width, 24px);
|
||||||
height: var(--iron-icon-height, 24px);
|
height: var(--iron-icon-height, 24px);
|
||||||
|
@apply(--iron-icon);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -32,14 +32,14 @@
|
||||||
"iron-component-page": "polymerElements/iron-component-page#^1.1.6"
|
"iron-component-page": "polymerElements/iron-component-page#^1.1.6"
|
||||||
},
|
},
|
||||||
"private": true,
|
"private": true,
|
||||||
"homepage": "https://github.com/polymer/polymer",
|
"homepage": "https://github.com/Polymer/polymer",
|
||||||
"_release": "1.6.1",
|
"_release": "1.6.1",
|
||||||
"_resolution": {
|
"_resolution": {
|
||||||
"type": "version",
|
"type": "version",
|
||||||
"tag": "v1.6.1",
|
"tag": "v1.6.1",
|
||||||
"commit": "1f197d9d7874b1e5808b2a5c26f34446a7d912fc"
|
"commit": "1f197d9d7874b1e5808b2a5c26f34446a7d912fc"
|
||||||
},
|
},
|
||||||
"_source": "git://github.com/polymer/polymer.git",
|
"_source": "git://github.com/Polymer/polymer.git",
|
||||||
"_target": "^1.1.0",
|
"_target": "^1.1.0",
|
||||||
"_originalSource": "polymer/polymer"
|
"_originalSource": "Polymer/polymer"
|
||||||
}
|
}
|
|
@ -125,6 +125,8 @@
|
||||||
onPanEnd(ev);
|
onPanEnd(ev);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
self.edgeHammer = edgeHammer;
|
||||||
}
|
}
|
||||||
|
|
||||||
function disableEvent(e) {
|
function disableEvent(e) {
|
||||||
|
|
|
@ -697,10 +697,6 @@ a[data-role='button'], .type-interior button:not([data-role='none']):not(.clearB
|
||||||
border: 0 !important;
|
border: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.activeSession .cardPadder {
|
|
||||||
padding-bottom: 56.25%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.sessionNowPlayingContent {
|
.sessionNowPlayingContent {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
|
|
|
@ -320,7 +320,7 @@
|
||||||
html += '<div class="cardBox visualCardBox">';
|
html += '<div class="cardBox visualCardBox">';
|
||||||
html += '<div class="cardScalable">';
|
html += '<div class="cardScalable">';
|
||||||
|
|
||||||
html += '<div class="cardPadder"></div>';
|
html += '<div class="cardPadder cardPadder-backdrop"></div>';
|
||||||
html += '<div class="cardContent">';
|
html += '<div class="cardContent">';
|
||||||
|
|
||||||
html += '<div class="sessionNowPlayingContent"';
|
html += '<div class="sessionNowPlayingContent"';
|
||||||
|
|
|
@ -1828,7 +1828,7 @@
|
||||||
imgUrl = "css/images/items/detail/video.png";
|
imgUrl = "css/images/items/detail/video.png";
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '<div class="cardPadder"></div>';
|
html += '<div class="cardPadder cardPadder-backdrop"></div>';
|
||||||
|
|
||||||
html += '<div class="cardContent">';
|
html += '<div class="cardContent">';
|
||||||
html += '<div class="cardImage lazy" data-src="' + imgUrl + '"></div>';
|
html += '<div class="cardImage lazy" data-src="' + imgUrl + '"></div>';
|
||||||
|
|
|
@ -133,7 +133,7 @@
|
||||||
|
|
||||||
html += '<div class="cardScalable">';
|
html += '<div class="cardScalable">';
|
||||||
|
|
||||||
html += '<div class="cardPadder"></div>';
|
html += '<div class="cardPadder cardPadder-square"></div>';
|
||||||
html += '<a class="cardContent" href="#" data-ajax="false" data-haspw="' + user.HasPassword + '" data-username="' + user.Name + '" data-userid="' + user.Id + '">';
|
html += '<a class="cardContent" href="#" data-ajax="false" data-haspw="' + user.HasPassword + '" data-username="' + user.Name + '" data-userid="' + user.Id + '">';
|
||||||
|
|
||||||
var imgUrl;
|
var imgUrl;
|
||||||
|
|
|
@ -300,7 +300,7 @@
|
||||||
html += '<div class="cardBox visualCardBox">';
|
html += '<div class="cardBox visualCardBox">';
|
||||||
html += '<div class="cardScalable">';
|
html += '<div class="cardScalable">';
|
||||||
|
|
||||||
html += '<div class="cardPadder"></div>';
|
html += '<div class="cardPadder cardPadder-backdrop"></div>';
|
||||||
|
|
||||||
html += '<div class="cardContent">';
|
html += '<div class="cardContent">';
|
||||||
var imgUrl = '';
|
var imgUrl = '';
|
||||||
|
|
|
@ -500,7 +500,7 @@
|
||||||
var chapterHtml = '<a class="card backdropCard chapterCard" href="#" style="margin-right:1em;width:' + width + 'px;" data-position="' + c.StartPositionTicks + '">';
|
var chapterHtml = '<a class="card backdropCard chapterCard" href="#" style="margin-right:1em;width:' + width + 'px;" data-position="' + c.StartPositionTicks + '">';
|
||||||
chapterHtml += '<div class="cardBox">';
|
chapterHtml += '<div class="cardBox">';
|
||||||
chapterHtml += '<div class="cardScalable">';
|
chapterHtml += '<div class="cardScalable">';
|
||||||
chapterHtml += '<div class="cardPadder"></div>';
|
chapterHtml += '<div class="cardPadder cardPadder-backdrop"></div>';
|
||||||
|
|
||||||
chapterHtml += '<div class="cardContent">';
|
chapterHtml += '<div class="cardContent">';
|
||||||
|
|
||||||
|
|
|
@ -191,7 +191,7 @@
|
||||||
html += '<div class="cardBox visualCardBox">';
|
html += '<div class="cardBox visualCardBox">';
|
||||||
html += '<div class="cardScalable">';
|
html += '<div class="cardScalable">';
|
||||||
|
|
||||||
html += '<div class="cardPadder"></div>';
|
html += '<div class="cardPadder cardPadder-backdrop"></div>';
|
||||||
|
|
||||||
html += '<a class="cardContent" href="' + href + '"' + target + '>';
|
html += '<a class="cardContent" href="' + href + '"' + target + '>';
|
||||||
if (plugin.thumbImage) {
|
if (plugin.thumbImage) {
|
||||||
|
|
|
@ -48,7 +48,7 @@
|
||||||
html += '<div class="cardBox visualCardBox">';
|
html += '<div class="cardBox visualCardBox">';
|
||||||
html += '<div class="cardScalable">';
|
html += '<div class="cardScalable">';
|
||||||
|
|
||||||
html += '<div class="cardPadder"></div>';
|
html += '<div class="cardPadder cardPadder-backdrop"></div>';
|
||||||
|
|
||||||
if (href) {
|
if (href) {
|
||||||
html += '<a class="cardContent" href="' + href + '">';
|
html += '<a class="cardContent" href="' + href + '">';
|
||||||
|
|
|
@ -192,7 +192,7 @@
|
||||||
function getCard(img, target, shape) {
|
function getCard(img, target, shape) {
|
||||||
|
|
||||||
shape = shape || 'backdropCard';
|
shape = shape || 'backdropCard';
|
||||||
var html = '<div class="card scalableCard ' + shape + '"><div class="cardBox"><div class="cardScalable"><div class="cardPadder"></div>';
|
var html = '<div class="card scalableCard ' + shape + '"><div class="cardBox"><div class="cardScalable"><div class="cardPadder cardPadder-backdrop"></div>';
|
||||||
|
|
||||||
if (target) {
|
if (target) {
|
||||||
html += '<a class="cardContent" href="' + target + '" target="_blank">';
|
html += '<a class="cardContent" href="' + target + '" target="_blank">';
|
||||||
|
|
|
@ -65,7 +65,7 @@
|
||||||
html += '<div class="' + cardBoxCssClass + '">';
|
html += '<div class="' + cardBoxCssClass + '">';
|
||||||
html += '<div class="cardScalable">';
|
html += '<div class="cardScalable">';
|
||||||
|
|
||||||
html += '<div class="cardPadder"></div>';
|
html += '<div class="cardPadder cardPadder-square"></div>';
|
||||||
|
|
||||||
syncJobPage += '?id=' + job.Id;
|
syncJobPage += '?id=' + job.Id;
|
||||||
|
|
||||||
|
|
|
@ -96,7 +96,7 @@
|
||||||
html += '<div class="cardBox visualCardBox">';
|
html += '<div class="cardBox visualCardBox">';
|
||||||
html += '<div class="cardScalable">';
|
html += '<div class="cardScalable">';
|
||||||
|
|
||||||
html += '<div class="cardPadder"></div>';
|
html += '<div class="cardPadder cardPadder-square"></div>';
|
||||||
|
|
||||||
var href = "useredit.html?userId=" + user.Id + "";
|
var href = "useredit.html?userId=" + user.Id + "";
|
||||||
html += '<a class="cardContent" href="' + href + '">';
|
html += '<a class="cardContent" href="' + href + '">';
|
||||||
|
@ -237,7 +237,7 @@
|
||||||
html += '<div class="cardBox visualCardBox">';
|
html += '<div class="cardBox visualCardBox">';
|
||||||
html += '<div class="cardScalable">';
|
html += '<div class="cardScalable">';
|
||||||
|
|
||||||
html += '<div class="cardPadder"></div>';
|
html += '<div class="cardPadder cardPadder-square"></div>';
|
||||||
|
|
||||||
var href = "#";
|
var href = "#";
|
||||||
html += '<a class="cardContent" href="' + href + '">';
|
html += '<a class="cardContent" href="' + href + '">';
|
||||||
|
|
|
@ -0,0 +1,111 @@
|
||||||
|
var staticFileCacheName = 'staticfiles';
|
||||||
|
var staticFileList;
|
||||||
|
|
||||||
|
var baseUrl = self.location.toString().substring(0, self.location.toString().lastIndexOf('/'));
|
||||||
|
var staticFileBaseUrl = baseUrl + '/staticfiles';
|
||||||
|
|
||||||
|
console.log('service worker location: ' + self.location);
|
||||||
|
console.log('service worker base url: ' + baseUrl);
|
||||||
|
|
||||||
|
function getStaticFileList() {
|
||||||
|
|
||||||
|
if (staticFileList) {
|
||||||
|
return Promise.resolve(staticFileList);
|
||||||
|
}
|
||||||
|
|
||||||
|
return fetch('staticfiles').then(function (response) {
|
||||||
|
return response.json().then(function (list) {
|
||||||
|
staticFileList = list;
|
||||||
|
return list;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
self.addEventListener('install', function (event) {
|
||||||
|
event.waitUntil(
|
||||||
|
caches.open(staticFileCacheName).then(function (cache) {
|
||||||
|
return getStaticFileList().then(function (files) {
|
||||||
|
return cache.addAll(files);
|
||||||
|
});
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
function isCacheable(request) {
|
||||||
|
|
||||||
|
if ((request.method || '').toUpperCase() !== 'GET') {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
var url = request.url || '';
|
||||||
|
|
||||||
|
if (url.indexOf(baseUrl) != 0) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (url.indexOf(staticFileBaseUrl) == 0) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
//self.addEventListener('fetch', function (event) {
|
||||||
|
|
||||||
|
// if (!isCacheable(event.request)) {
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// event.respondWith(
|
||||||
|
// caches.open(staticFileCacheName).then(function (cache) {
|
||||||
|
// return cache.match(event.request).then(function (response) {
|
||||||
|
// return response || fetch(event.request).then(function (response) {
|
||||||
|
// cache.put(event.request, response.clone());
|
||||||
|
// return response;
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
// })
|
||||||
|
// );
|
||||||
|
//});
|
||||||
|
|
||||||
|
self.addEventListener('activate', function (event) {
|
||||||
|
|
||||||
|
event.waitUntil(
|
||||||
|
caches.open(staticFileCacheName).then(function (cache) {
|
||||||
|
return getStaticFileList().then(function (staticFiles) {
|
||||||
|
|
||||||
|
var setOfExpectedUrls = new Set(staticFiles);
|
||||||
|
|
||||||
|
return cache.keys().then(function (existingRequests) {
|
||||||
|
|
||||||
|
var existingBaseUrl = baseUrl + '/';
|
||||||
|
|
||||||
|
return Promise.all(
|
||||||
|
existingRequests.map(function (existingRequest) {
|
||||||
|
if (!setOfExpectedUrls.has(existingRequest.url.replace(existingBaseUrl, ''))) {
|
||||||
|
|
||||||
|
console.log('deleting cached file: ' + existingRequest.url);
|
||||||
|
return cache.delete(existingRequest);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}).then(function () {
|
||||||
|
return self.clients.claim();
|
||||||
|
})
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
self.addEventListener('notificationclick', function (event) {
|
||||||
|
event.notification.close();
|
||||||
|
|
||||||
|
var action = event.action;
|
||||||
|
|
||||||
|
if (action.indexOf('cancel-install') == 0) {
|
||||||
|
var id = action.split('-')[2];
|
||||||
|
console.log('cancel: ' + id);
|
||||||
|
} else {
|
||||||
|
clients.openWindow("/index.html");
|
||||||
|
}
|
||||||
|
}, false);
|
Loading…
Add table
Add a link
Reference in a new issue