diff --git a/dashboard-ui/css/card.css b/dashboard-ui/css/card.css index e11c390262..f1cbee3d91 100644 --- a/dashboard-ui/css/card.css +++ b/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 { diff --git a/dashboard-ui/playlistedit.html b/dashboard-ui/playlistedit.html index c55ef483b4..06b0b4df1e 100644 --- a/dashboard-ui/playlistedit.html +++ b/dashboard-ui/playlistedit.html @@ -16,7 +16,7 @@
${ButtonPlay} -
+
diff --git a/dashboard-ui/scripts/librarylist.js b/dashboard-ui/scripts/librarylist.js index 2bbedf5fd4..26f5362f82 100644 --- a/dashboard-ui/scripts/librarylist.js +++ b/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() { diff --git a/dashboard-ui/scripts/playlistedit.js b/dashboard-ui/scripts/playlistedit.js index a0d80f57a2..b3d24ce118 100644 --- a/dashboard-ui/scripts/playlistedit.js +++ b/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 () {