update people saving

dashboard-ui/css/card.css

@@ -123,6 +123,8 @@
     bottom: 0;
     left: 0;
     right: 0;
+    /* Needed to keep the cardOverlayTarget from showing outside the bounds while it animates */
+    overflow: hidden;
 }
 
     .cardContent:not(.noHoverEffect):hover .cardImage {

dashboard-ui/playlistedit.html

@@ -16,7 +16,7 @@
                 <div class="listTopPaging"></div>
                 <paper-button raised class="secondary btnPlay hide"><iron-icon icon="play-arrow"></iron-icon><span>${ButtonPlay}</span></paper-button>
             </div>
-            <div id="items" class="itemsContainer"></div>
+            <div id="items" class="itemsContainer" style="max-width:1000px;margin: 0 auto;"></div>
             <div class="noItemsMessage" style="display: none; text-align: center;">
                 <p>${MessageNoPlaylistItemsAvailable}</p>
             </div>

dashboard-ui/scripts/librarylist.js

@@ -9,23 +9,19 @@
             showOverlayTimeout = null;
         }
 
-        $('.cardOverlayTarget:visible', this).each(function () {
+        var elem = this.querySelector('.cardOverlayTarget');
 
-            var elem = this;
-
-            $(this).animate({ "height": "0" }, "fast", function () {
-
-                $(elem).hide();
+        if ($(elem).is(':visible')) {
+            require(["jquery", "velocity"], function ($, Velocity) {
 
+                Velocity.animate(elem, { "height": "0" },
+                {
+                    complete: function () {
+                        $(elem).hide();
+                    }
+                });
             });
-
-        });
-
-        $('.cardOverlayTarget:visible', this).stop().animate({ "height": "0" }, function () {
-
-            $(this).hide();
-
-        });
+        }
     }
 
     function getOverlayHtml(item, currentUser, card, commands) {
@@ -820,11 +816,13 @@
                 $('.btnMoreCommands', innerElem).on('click', onMoreButtonClick);
             });
 
-            $(innerElem).show().each(function () {
+            $(innerElem).show();
+            innerElem.style.height = '0';
 
-                this.style.height = 0;
+            require(["jquery", "velocity"], function ($, Velocity) {
 
-            }).animate({ "height": "100%" }, "fast");
+                Velocity.animate(innerElem, { "height": "100%" }, "fast");
+            });
         }
 
         function onHoverIn() {

dashboard-ui/scripts/playlistedit.js

@@ -114,6 +114,7 @@
 
             var elem = page.querySelector('.itemsContainer');
             elem.innerHTML = html;
+            $(elem).trigger('create');
             ImageLoader.lazyChildren(elem);
 
             $('.btnNextPage', page).on('click', function () {