added icons to modlist

0neGal · Feb 7, 2023 · 416679e · 416679e
1 parent 26175fe
commit 416679e
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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) {