moonlight-stream/moonlight-chrome
1
0
Fork 0
mirror of https://github.com/moonlight-stream/moonlight-chrome.git synced 2025-08-17 16:46:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added fade-in for images

Browse Source
This commit is contained in:
Jorys_Paulin 2018-04-26 13:50:30 +02:00
parent fe06f6d8ff
commit 78c32035f8
2 changed files with 10 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
static/css/style.css
View File

@ -205,6 +205,12 @@ main {
#game-grid .mdl-card img { #game-grid .mdl-card img {
height: 100%; height: 100%;
width: 100%; width: 100%;
opacity: 0;
transition: opacity .3s;
z-index: -1;
}
#game-grid .mdl-card img.fade-in {
opacity: 1;
} }
#game-grid .game-title { #game-grid .game-title {
position: absolute; position: absolute;

9
static/js/index.js
View File

@ -537,11 +537,10 @@ function showApps(host) {
} }
host.getBoxArt(app.id).then(function(resolvedPromise) { host.getBoxArt(app.id).then(function(resolvedPromise) {
// put the box art into the image holder // put the box art into the image holder
$(outerDiv).append($("<img \>", { var img = new Image();
src: resolvedPromise, img.src = resolvedPromise;
name: app.title img.onload = e => img.classList.add('fade-in');
})); $(outerDiv).append(img);
}, function(failedPromise) { }, function(failedPromise) {
console.log('%c[index.js, showApps]', 'color: green;', 'Error! Failed to retrieve box art for app ID: ' + app.id + '. Returned value was: ' + failedPromise, '\n Host object:', host, host.toString()); console.log('%c[index.js, showApps]', 'color: green;', 'Error! Failed to retrieve box art for app ID: ' + app.id + '. Returned value was: ' + failedPromise, '\n Host object:', host, host.toString());
$(outerDiv).append($("<img \>", { $(outerDiv).append($("<img \>", {