From cee7db2ce049ddcd8d140c9c0551dc8d8c5f40b5 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Thu, 11 Aug 2016 16:28:49 -0400
Subject: [PATCH] update card layouts

---
 .../emby-webcomponents/.bower.json            |   8 +-
 .../emby-webcomponents/cardbuilder/card.css   |   8 +-
 .../cardbuilder/cardbuilder.js                |   2 +-
 .../cardbuilder/chaptercardbuilder.js         |  12 +-
 .../cardbuilder/peoplecardbuilder.js          |   2 +-
 .../emby-webcomponents/dialog/dialog.js       |   5 +-
 .../emby-webcomponents/itemcontextmenu.js     |  16 +--
 .../itemidentifier/itemidentifier.js          |   2 +-
 .../notifications/notifications.js            |  31 +++--
 .../iron-demo-helpers/.bower.json             |  10 +-
 .../iron-demo-helpers/bower.json              |   4 +-
 .../iron-demo-helpers/demo-snippet.html       |   2 +
 .../bower_components/iron-icon/.bower.json    |  14 +--
 .../bower_components/iron-icon/bower.json     |   2 +-
 .../bower_components/iron-icon/iron-icon.html |   2 +
 .../bower_components/polymer/.bower.json      |   6 +-
 .../components/navdrawer/navdrawer.js         |   2 +
 dashboard-ui/css/dashboard.css                |   4 -
 dashboard-ui/scripts/dashboardpage.js         |   2 +-
 dashboard-ui/scripts/itemdetailpage.js        |   2 +-
 dashboard-ui/scripts/loginpage.js             |   2 +-
 dashboard-ui/scripts/medialibrarypage.js      |   2 +-
 dashboard-ui/scripts/mediaplayer-video.js     |   2 +-
 dashboard-ui/scripts/plugincatalogpage.js     |   2 +-
 dashboard-ui/scripts/pluginspage.js           |   2 +-
 dashboard-ui/scripts/sections.js              |   2 +-
 dashboard-ui/scripts/syncactivity.js          |   2 +-
 dashboard-ui/scripts/userprofilespage.js      |   4 +-
 dashboard-ui/serviceworker.js                 | 111 ++++++++++++++++++
 29 files changed, 194 insertions(+), 71 deletions(-)

diff --git a/dashboard-ui/bower_components/emby-webcomponents/.bower.json b/dashboard-ui/bower_components/emby-webcomponents/.bower.json
index fce1be0321..341c82e685 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/.bower.json
+++ b/dashboard-ui/bower_components/emby-webcomponents/.bower.json
@@ -14,12 +14,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.165",
-  "_release": "1.4.165",
+  "version": "1.4.166",
+  "_release": "1.4.166",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.165",
-    "commit": "ebe71bd8b4505ceb207efb226686eb6c3e842b4c"
+    "tag": "1.4.166",
+    "commit": "869fe388b2e0bd01bee868001f9e1d456a2c7ca1"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.1",
diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
index cc5b82ef31..72a48d6b58 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/card.css
@@ -48,19 +48,19 @@
     position: relative;
 }
 
-.backdropCard .cardPadder, .smallBackdropCard .cardPadder, .overflowBackdropCard .cardPadder {
+.cardPadder-backdrop, .cardPadder-smallBackdrop, .cardPadder-overflowBackdrop {
     padding-bottom: 56.25%;
 }
 
-.squareCard .cardPadder, .overflowSquareCard .cardPadder {
+.cardPadder-square, .cardPadder-overflowSquare {
     padding-bottom: 100%;
 }
 
-.portraitCard .cardPadder, .overflowPortraitCard .cardPadder {
+.cardPadder-portrait, .cardPadder-overflowPortrait {
     padding-bottom: 150%;
 }
 
-.bannerCard .cardPadder {
+.cardPadder-banner {
     padding-bottom: 18.5%;
 }
 
diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
index 09e94e7324..c515146f49 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/cardbuilder.js
@@ -1073,7 +1073,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'mediaInfo
                     cardContentClose = '</button>';
                 }
                 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>';
                 cardScalableClose = '</div>';
                 cardImageContainerClose = '</div>';
diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/chaptercardbuilder.js b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/chaptercardbuilder.js
index 0901e59fe0..34d90561e1 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/chaptercardbuilder.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/chaptercardbuilder.js
@@ -9,16 +9,16 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemShortcuts'], functi
             return i.Type == 'Video';
         })[0] || {};
 
-        var shape = (options.backdropShape || 'backdrop') + 'Card';
+        var shape = (options.backdropShape || 'backdrop');
 
         if (videoStream.Width && videoStream.Height) {
 
             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) {
             className += ' block';
@@ -37,7 +37,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemShortcuts'], functi
 
             var chapter = chapters[i];
 
-            html += buildChapterCard(item, apiClient, chapter, i, options, className);
+            html += buildChapterCard(item, apiClient, chapter, i, options, className, shape);
             itemsInRow++;
 
             if (options.rows && itemsInRow >= options.rows) {
@@ -65,7 +65,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemShortcuts'], functi
         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);
 
@@ -88,7 +88,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemShortcuts'], functi
 <button type="button" class="' + className + '"' + dataAttributes + '> \
 <div class="cardBox">\
 <div class="cardScalable">\
-<div class="cardPadder"></div>\
+<div class="cardPadder-'+ shape + '"></div>\
 <div class="cardContent">\
 ' + cardImageContainer + '\
 </div>\
diff --git a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/peoplecardbuilder.js b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/peoplecardbuilder.js
index 02794c3136..676ba16fa2 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/peoplecardbuilder.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/cardbuilder/peoplecardbuilder.js
@@ -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 + '"> \
 <div class="visualCardBox cardBox">\
 <div class="cardScalable">\
-<div class="cardPadder"></div>\
+<div class="cardPadder-portrait"></div>\
 <div class="cardContent">\
 ' + cardImageContainer + '\
 </div>\
diff --git a/dashboard-ui/bower_components/emby-webcomponents/dialog/dialog.js b/dashboard-ui/bower_components/emby-webcomponents/dialog/dialog.js
index 9ca1fcecfb..0aaa2d34d9 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/dialog/dialog.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/dialog/dialog.js
@@ -8,7 +8,8 @@ define(['layoutManager', 'globalize', 'css!./dialog'], function (layoutManager,
                 actionSheet.show({
 
                     title: options.text,
-                    items: options.buttons
+                    items: options.buttons,
+                    timeout: options.timeout
 
                 }).then(resolve, reject);
             });
@@ -45,7 +46,7 @@ define(['layoutManager', 'globalize', 'css!./dialog'], function (layoutManager,
 
         if (options.title) {
             html += '<h2>' + options.title + '</h2>';
-        } 
+        }
 
         var text = options.html || options.text;
 
diff --git a/dashboard-ui/bower_components/emby-webcomponents/itemcontextmenu.js b/dashboard-ui/bower_components/emby-webcomponents/itemcontextmenu.js
index aef77a7037..e12211edd7 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/itemcontextmenu.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/itemcontextmenu.js
@@ -105,14 +105,14 @@ define(['apphost', 'globalize', 'connectionManager', 'itemHelper', 'embyRouter',
                 }
             }
 
-            if (options.open !== false) {
-                if (item.Type != 'Timer' && item.Type != 'Audio') {
-                    commands.push({
-                        name: globalize.translate('sharedcomponents#Open'),
-                        id: 'open'
-                    });
-                }
-            }
+            //if (options.open !== false) {
+            //    if (item.Type != 'Timer' && item.Type != 'Audio') {
+            //        commands.push({
+            //            name: globalize.translate('sharedcomponents#Open'),
+            //            id: 'open'
+            //        });
+            //    }
+            //}
 
             if (canPlay) {
                 if (options.play !== false) {
diff --git a/dashboard-ui/bower_components/emby-webcomponents/itemidentifier/itemidentifier.js b/dashboard-ui/bower_components/emby-webcomponents/itemidentifier/itemidentifier.js
index 1732014133..5db0d55395 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/itemidentifier/itemidentifier.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/itemidentifier/itemidentifier.js
@@ -188,7 +188,7 @@
         html += '<button type="button" class="' + cssClass + '" data-index="' + index + '">';
         html += '<div class="cardBox visualCardBox">';
         html += '<div class="cardScalable">';
-        html += '<div class="cardPadder"></div>';
+        html += '<div class="cardPadder-portrait"></div>';
 
         html += '<div class="cardContent searchImage">';
 
diff --git a/dashboard-ui/bower_components/emby-webcomponents/notifications/notifications.js b/dashboard-ui/bower_components/emby-webcomponents/notifications/notifications.js
index e9dc2c289d..b2aedee634 100644
--- a/dashboard-ui/bower_components/emby-webcomponents/notifications/notifications.js
+++ b/dashboard-ui/bower_components/emby-webcomponents/notifications/notifications.js
@@ -40,14 +40,11 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
 
     resetRegistration();
 
-    function show(title, options, timeoutMs) {
+    function showPersistentNotification(title, options, timeoutMs) {
+        serviceWorkerRegistration.showNotification(title, options);
+    }
 
-        resetRegistration();
-
-        if (serviceWorkerRegistration && !timeoutMs) {
-            serviceWorkerRegistration.showNotification(title, options);
-            return;
-        }
+    function showNonPersistentNotification(title, options, timeoutMs) {
 
         try {
             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) {
 
         var notification = {
@@ -162,10 +171,10 @@ define(['serverNotifications', 'playbackManager', 'events', 'globalize', 'requir
             else if (status == 'progress') {
                 notification.title = globalize.translate('sharedcomponents#InstallingPackage').replace('{0}', installation.Name + ' ' + installation.Version);
 
-                //notification.actions =
-                //[
-                //    { action: 'cancel', title: globalize.translate('sharedcomponents#ButtonCancel')/*, icon: 'https://example/like.png'*/ }
-                //];
+                notification.actions =
+                [
+                    { action: 'cancel-install-' + installation.Id, title: globalize.translate('sharedcomponents#ButtonCancel')/*, icon: 'https://example/like.png'*/ }
+                ];
             }
 
             if (status == 'progress') {
diff --git a/dashboard-ui/bower_components/iron-demo-helpers/.bower.json b/dashboard-ui/bower_components/iron-demo-helpers/.bower.json
index d095b77163..516645ea84 100644
--- a/dashboard-ui/bower_components/iron-demo-helpers/.bower.json
+++ b/dashboard-ui/bower_components/iron-demo-helpers/.bower.json
@@ -1,6 +1,6 @@
 {
   "name": "iron-demo-helpers",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "Utility classes to make building demo pages easier",
   "authors": [
     "The Polymer Authors"
@@ -28,7 +28,7 @@
     "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
     "paper-styles": "PolymerElements/paper-styles#^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-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0"
   },
@@ -41,11 +41,11 @@
     "paper-styles": "PolymerElements/paper-styles#^1.1.0",
     "paper-checkbox": "PolymerElements/paper-checkbox#^1.0.0"
   },
-  "_release": "1.2.4",
+  "_release": "1.2.5",
   "_resolution": {
     "type": "version",
-    "tag": "v1.2.4",
-    "commit": "98e06f4c526146e9e7231138d91f8c65ffb25cd6"
+    "tag": "v1.2.5",
+    "commit": "a376e52de29be389fa22e175b64c9813163023fb"
   },
   "_source": "git://github.com/polymerelements/iron-demo-helpers.git",
   "_target": "^1.0.0",
diff --git a/dashboard-ui/bower_components/iron-demo-helpers/bower.json b/dashboard-ui/bower_components/iron-demo-helpers/bower.json
index f17608bd5d..6016cdfcff 100644
--- a/dashboard-ui/bower_components/iron-demo-helpers/bower.json
+++ b/dashboard-ui/bower_components/iron-demo-helpers/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "iron-demo-helpers",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "Utility classes to make building demo pages easier",
   "authors": [
     "The Polymer Authors"
@@ -28,7 +28,7 @@
     "paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
     "paper-styles": "PolymerElements/paper-styles#^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-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0"
   },
diff --git a/dashboard-ui/bower_components/iron-demo-helpers/demo-snippet.html b/dashboard-ui/bower_components/iron-demo-helpers/demo-snippet.html
index a209a69484..b0317f4ce0 100644
--- a/dashboard-ui/bower_components/iron-demo-helpers/demo-snippet.html
+++ b/dashboard-ui/bower_components/iron-demo-helpers/demo-snippet.html
@@ -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/shadow.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
@@ -54,6 +55,7 @@ Custom property | Description | Default
 
 <dom-module id="demo-snippet">
   <template>
+    <style is="custom-style" include="prism-theme-default"></style>
     <style>
       :host {
         display: block;
diff --git a/dashboard-ui/bower_components/iron-icon/.bower.json b/dashboard-ui/bower_components/iron-icon/.bower.json
index eeaddfa5df..f76855b27a 100644
--- a/dashboard-ui/bower_components/iron-icon/.bower.json
+++ b/dashboard-ui/bower_components/iron-icon/.bower.json
@@ -1,7 +1,7 @@
 {
   "name": "iron-icon",
   "private": true,
-  "version": "1.0.9",
+  "version": "1.0.10",
   "license": "http://polymer.github.io/LICENSE.txt",
   "description": "An element that supports displaying an icon",
   "main": "iron-icon.html",
@@ -32,14 +32,14 @@
     "web-component-tester": "^4.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0"
   },
-  "homepage": "https://github.com/polymerelements/iron-icon",
-  "_release": "1.0.9",
+  "homepage": "https://github.com/PolymerElements/iron-icon",
+  "_release": "1.0.10",
   "_resolution": {
     "type": "version",
-    "tag": "v1.0.9",
-    "commit": "f6fb241901377e30e2c9c6cd47e3e8e8beb6574d"
+    "tag": "v1.0.10",
+    "commit": "f4e146da4982ff96bb25db85290c09e8de4ec734"
   },
-  "_source": "git://github.com/polymerelements/iron-icon.git",
+  "_source": "git://github.com/PolymerElements/iron-icon.git",
   "_target": "^1.0.0",
-  "_originalSource": "polymerelements/iron-icon"
+  "_originalSource": "PolymerElements/iron-icon"
 }
\ No newline at end of file
diff --git a/dashboard-ui/bower_components/iron-icon/bower.json b/dashboard-ui/bower_components/iron-icon/bower.json
index b5f35315eb..d19a7481aa 100644
--- a/dashboard-ui/bower_components/iron-icon/bower.json
+++ b/dashboard-ui/bower_components/iron-icon/bower.json
@@ -1,7 +1,7 @@
 {
   "name": "iron-icon",
   "private": true,
-  "version": "1.0.9",
+  "version": "1.0.10",
   "license": "http://polymer.github.io/LICENSE.txt",
   "description": "An element that supports displaying an icon",
   "main": "iron-icon.html",
diff --git a/dashboard-ui/bower_components/iron-icon/iron-icon.html b/dashboard-ui/bower_components/iron-icon/iron-icon.html
index 1811f42015..b0afa58564 100644
--- a/dashboard-ui/bower_components/iron-icon/iron-icon.html
+++ b/dashboard-ui/bower_components/iron-icon/iron-icon.html
@@ -69,6 +69,7 @@ The following custom properties are available for styling:
 
 Custom property | Description | Default
 ----------------|-------------|----------
+`--iron-icon` | Mixin applied to the icon | {}
 `--iron-icon-width` | Width of the icon | `24px`
 `--iron-icon-height` | Height of the icon | `24px`
 `--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);
         height: var(--iron-icon-height, 24px);
+        @apply(--iron-icon);
       }
     </style>
   </template>
diff --git a/dashboard-ui/bower_components/polymer/.bower.json b/dashboard-ui/bower_components/polymer/.bower.json
index 25eb84c037..a96f0f050e 100644
--- a/dashboard-ui/bower_components/polymer/.bower.json
+++ b/dashboard-ui/bower_components/polymer/.bower.json
@@ -32,14 +32,14 @@
     "iron-component-page": "polymerElements/iron-component-page#^1.1.6"
   },
   "private": true,
-  "homepage": "https://github.com/polymer/polymer",
+  "homepage": "https://github.com/Polymer/polymer",
   "_release": "1.6.1",
   "_resolution": {
     "type": "version",
     "tag": "v1.6.1",
     "commit": "1f197d9d7874b1e5808b2a5c26f34446a7d912fc"
   },
-  "_source": "git://github.com/polymer/polymer.git",
+  "_source": "git://github.com/Polymer/polymer.git",
   "_target": "^1.1.0",
-  "_originalSource": "polymer/polymer"
+  "_originalSource": "Polymer/polymer"
 }
\ No newline at end of file
diff --git a/dashboard-ui/components/navdrawer/navdrawer.js b/dashboard-ui/components/navdrawer/navdrawer.js
index 6653db4d54..49851a69de 100644
--- a/dashboard-ui/components/navdrawer/navdrawer.js
+++ b/dashboard-ui/components/navdrawer/navdrawer.js
@@ -125,6 +125,8 @@
                     onPanEnd(ev);
                 }
             });
+
+            self.edgeHammer = edgeHammer;
         }
 
         function disableEvent(e) {
diff --git a/dashboard-ui/css/dashboard.css b/dashboard-ui/css/dashboard.css
index ff7a8514fb..1fab04f397 100644
--- a/dashboard-ui/css/dashboard.css
+++ b/dashboard-ui/css/dashboard.css
@@ -697,10 +697,6 @@ a[data-role='button'], .type-interior button:not([data-role='none']):not(.clearB
         border: 0 !important;
     }
 
-    .activeSession .cardPadder {
-        padding-bottom: 56.25%;
-    }
-
 
 .sessionNowPlayingContent {
     background-size: cover;
diff --git a/dashboard-ui/scripts/dashboardpage.js b/dashboard-ui/scripts/dashboardpage.js
index 5c01e2d734..53d2848e82 100644
--- a/dashboard-ui/scripts/dashboardpage.js
+++ b/dashboard-ui/scripts/dashboardpage.js
@@ -320,7 +320,7 @@
                 html += '<div class="cardBox visualCardBox">';
                 html += '<div class="cardScalable">';
 
-                html += '<div class="cardPadder"></div>';
+                html += '<div class="cardPadder cardPadder-backdrop"></div>';
                 html += '<div class="cardContent">';
 
                 html += '<div class="sessionNowPlayingContent"';
diff --git a/dashboard-ui/scripts/itemdetailpage.js b/dashboard-ui/scripts/itemdetailpage.js
index 33a09103b3..76eaab1a56 100644
--- a/dashboard-ui/scripts/itemdetailpage.js
+++ b/dashboard-ui/scripts/itemdetailpage.js
@@ -1828,7 +1828,7 @@
                 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="cardImage lazy" data-src="' + imgUrl + '"></div>';
diff --git a/dashboard-ui/scripts/loginpage.js b/dashboard-ui/scripts/loginpage.js
index ad4c943901..c19ad53f59 100644
--- a/dashboard-ui/scripts/loginpage.js
+++ b/dashboard-ui/scripts/loginpage.js
@@ -133,7 +133,7 @@
 
             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 + '">';
 
             var imgUrl;
diff --git a/dashboard-ui/scripts/medialibrarypage.js b/dashboard-ui/scripts/medialibrarypage.js
index 0c15f60b2a..ddd8e55194 100644
--- a/dashboard-ui/scripts/medialibrarypage.js
+++ b/dashboard-ui/scripts/medialibrarypage.js
@@ -300,7 +300,7 @@
         html += '<div class="cardBox visualCardBox">';
         html += '<div class="cardScalable">';
 
-        html += '<div class="cardPadder"></div>';
+        html += '<div class="cardPadder cardPadder-backdrop"></div>';
 
         html += '<div class="cardContent">';
         var imgUrl = '';
diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js
index 182ccbd015..800a46bc89 100644
--- a/dashboard-ui/scripts/mediaplayer-video.js
+++ b/dashboard-ui/scripts/mediaplayer-video.js
@@ -500,7 +500,7 @@
                     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="cardScalable">';
-                    chapterHtml += '<div class="cardPadder"></div>';
+                    chapterHtml += '<div class="cardPadder cardPadder-backdrop"></div>';
 
                     chapterHtml += '<div class="cardContent">';
 
diff --git a/dashboard-ui/scripts/plugincatalogpage.js b/dashboard-ui/scripts/plugincatalogpage.js
index b7f3ebd420..409b0c1ad3 100644
--- a/dashboard-ui/scripts/plugincatalogpage.js
+++ b/dashboard-ui/scripts/plugincatalogpage.js
@@ -191,7 +191,7 @@
         html += '<div class="cardBox visualCardBox">';
         html += '<div class="cardScalable">';
 
-        html += '<div class="cardPadder"></div>';
+        html += '<div class="cardPadder cardPadder-backdrop"></div>';
 
         html += '<a class="cardContent" href="' + href + '"' + target + '>';
         if (plugin.thumbImage) {
diff --git a/dashboard-ui/scripts/pluginspage.js b/dashboard-ui/scripts/pluginspage.js
index 66eb8304e2..04979990d7 100644
--- a/dashboard-ui/scripts/pluginspage.js
+++ b/dashboard-ui/scripts/pluginspage.js
@@ -48,7 +48,7 @@
         html += '<div class="cardBox visualCardBox">';
         html += '<div class="cardScalable">';
 
-        html += '<div class="cardPadder"></div>';
+        html += '<div class="cardPadder cardPadder-backdrop"></div>';
 
         if (href) {
             html += '<a class="cardContent" href="' + href + '">';
diff --git a/dashboard-ui/scripts/sections.js b/dashboard-ui/scripts/sections.js
index 5dc40e7d76..cd38e5c2e2 100644
--- a/dashboard-ui/scripts/sections.js
+++ b/dashboard-ui/scripts/sections.js
@@ -192,7 +192,7 @@
     function getCard(img, target, shape) {
 
         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) {
             html += '<a class="cardContent" href="' + target + '" target="_blank">';
diff --git a/dashboard-ui/scripts/syncactivity.js b/dashboard-ui/scripts/syncactivity.js
index 4d85e3f253..8d1ea3e983 100644
--- a/dashboard-ui/scripts/syncactivity.js
+++ b/dashboard-ui/scripts/syncactivity.js
@@ -65,7 +65,7 @@
         html += '<div class="' + cardBoxCssClass + '">';
         html += '<div class="cardScalable">';
 
-        html += '<div class="cardPadder"></div>';
+        html += '<div class="cardPadder cardPadder-square"></div>';
 
         syncJobPage += '?id=' + job.Id;
 
diff --git a/dashboard-ui/scripts/userprofilespage.js b/dashboard-ui/scripts/userprofilespage.js
index d24f04d54f..de563fda1e 100644
--- a/dashboard-ui/scripts/userprofilespage.js
+++ b/dashboard-ui/scripts/userprofilespage.js
@@ -96,7 +96,7 @@
         html += '<div class="cardBox visualCardBox">';
         html += '<div class="cardScalable">';
 
-        html += '<div class="cardPadder"></div>';
+        html += '<div class="cardPadder cardPadder-square"></div>';
 
         var href = "useredit.html?userId=" + user.Id + "";
         html += '<a class="cardContent" href="' + href + '">';
@@ -237,7 +237,7 @@
         html += '<div class="cardBox visualCardBox">';
         html += '<div class="cardScalable">';
 
-        html += '<div class="cardPadder"></div>';
+        html += '<div class="cardPadder cardPadder-square"></div>';
 
         var href = "#";
         html += '<a class="cardContent" href="' + href + '">';
diff --git a/dashboard-ui/serviceworker.js b/dashboard-ui/serviceworker.js
index e69de29bb2..299f9b9362 100644
--- a/dashboard-ui/serviceworker.js
+++ b/dashboard-ui/serviceworker.js
@@ -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);
\ No newline at end of file