diff options
| -rw-r--r-- | src/app/css/grid.css | 4 | ||||
| -rw-r--r-- | src/app/js/browser.js | 4 | ||||
| -rw-r--r-- | src/app/js/mods.js | 27 |
3 files changed, 27 insertions, 8 deletions
diff --git a/src/app/css/grid.css b/src/app/css/grid.css index c4c7c74..2533fea 100644 --- a/src/app/css/grid.css +++ b/src/app/css/grid.css @@ -132,6 +132,10 @@ padding: var(--padding) 0px; } +.grid .el.has-icon .text { + width: calc(100% - var(--height)); +} + .grid .el .title, .grid .el .description { height: 1.2em; overflow: hidden; diff --git a/src/app/js/browser.js b/src/app/js/browser.js index 4f8b68a..c35d31a 100644 --- a/src/app/js/browser.js +++ b/src/app/js/browser.js @@ -150,7 +150,9 @@ var Browser = { mod_versions[normalized] = { install: install, has_update: has_update, - local_version: local_version + local_version: local_version, + + package: packages[i] } } } diff --git a/src/app/js/mods.js b/src/app/js/mods.js index fd900a2..19c5bda 100644 --- a/src/app/js/mods.js +++ b/src/app/js/mods.js @@ -6,7 +6,6 @@ mods.load = (mods_obj) => { let normalized_names = []; let set_mod = (mod) => { - let image_url = ""; let normalized_name = "mod-list-" + normalize(mod.Name); normalized_names.push(normalized_name); @@ -28,8 +27,8 @@ mods.load = (mods_obj) => { div.innerHTML += ` <div class="image"> - <img src="${image_url}"> - <img class="blur" src="${image_url}"> + <img src=""> + <img class="blur" src=""> </div> <div class="text"> <div class="title">${mod.Name}</div> @@ -42,7 +41,7 @@ mods.load = (mods_obj) => { ${lang("gui.mods.remove")} </button> - <button class="visual">${mod.Version}</button> + <button class="visual">${version.format(mod.Version)}</button> <button class="visual"> ${lang("gui.browser.madeby")} ${mod.Author || lang("gui.mods.unknown_author")} @@ -58,9 +57,7 @@ mods.load = (mods_obj) => { mods.toggle(mod.Name); }) - if (! image_url) { - div.querySelector(".image").remove(); - } + div.querySelector(".image").style.display = "none"; modsdiv.append(div); } @@ -90,6 +87,22 @@ mods.load = (mods_obj) => { return; } + if (mod_versions[mod]) { + let image_url = mod_versions[mod].package.versions[0].icon; + + let image_container = mod_els[i].querySelector(".image"); + let image_el = image_container.querySelector("img") + let image_blur_el = image_container.querySelector("img.blur") + + if (image_url && ! image_el.getAttribute("src")) { + image_container.style.display = null; + image_el.src = image_url; + image_blur_el.src = image_url; + + image_container.parentElement.classList.add("has-icon"); + } + } + if (mod_versions[mod] && mod_versions[mod].has_update) { |