From 20bf62f42f41638733e0b02affe90c04b1cb2938 Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Thu, 20 Jan 2022 00:37:52 +0100
Subject: initial commit on thunderstore support

Only frontend stuff, nothing that queries Thunderstore.
---
 src/app/main.css | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

(limited to 'src/app/main.css')

diff --git a/src/app/main.css b/src/app/main.css
index de0db46..a2c144c 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -30,6 +30,52 @@
 	cursor: pointer;
 }
 
+#browser {
+	--spacing: calc(var(--padding) * 3);
+
+	z-index: 1;
+	opacity: 0.0;
+	position: fixed;
+	overflow-y: scroll;
+	top: var(--spacing);
+	pointer-events: none;
+	left: var(--spacing);
+	background: var(--bg);
+	right: var(--spacing);
+	bottom: var(--spacing);
+	backdrop-filter: blur(15px);
+	transition: opacity 0.15s ease-in-out;
+	border-radius: calc(var(--padding) / 2);
+}
+
+#browser.shown {
+	opacity: 1.0;
+	pointer-events: all;
+}
+
+#browser .el {
+	--spacing: calc(var(--padding) / 2);
+	--height: calc(var(--padding) * 2.5);
+
+	color: white;
+	display: flex;
+	align-items: center;
+	height: var(--height);
+	margin: var(--spacing);
+	padding: var(--spacing);
+	background: var(--selbg);
+	border-radius: var(--spacing);
+	width: calc(100% - var(--spacing) * 4);
+}
+
+#browser .el .image, #browser .el .image img {
+	width: var(--height);
+	height: var(--height);
+	margin-right: var(--spacing);
+}
+#browser .el .title {font-size: 1.2em}
+#browser .el .description {font-size: 0.8em}
+
 #winbtns {
 	z-index: 1;
 	display: flex;
-- 
cgit v1.2.3


From fd967f570985339905c52238ead049555c5efcdc Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Thu, 20 Jan 2022 13:45:57 +0100
Subject: added fallback icon, and ways to close the browser

You can either click "Escape" or simply click on the darkened background
and it'll then close it. Ideally the fallback icon should never be
shown, and it is more for testing.

I also added a search bar that does nothing currently.
---
 src/app/browser.js         |  21 ++++++++++++++++++--
 src/app/icons/no-image.png | Bin 0 -> 1959 bytes
 src/app/index.html         |   5 ++++-
 src/app/main.css           |  47 ++++++++++++++++++++++++++++++++++++---------
 4 files changed, 61 insertions(+), 12 deletions(-)
 create mode 100644 src/app/icons/no-image.png

(limited to 'src/app/main.css')

diff --git a/src/app/browser.js b/src/app/browser.js
index 1fe6930..ae3e453 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -1,11 +1,28 @@
-function Browser() {
+function Browser(state) {
+	if (state) {
+		overlay.classList.add("shown")
+		browser.classList.add("shown")
+		return
+	} else if (! state) {
+		if (state != undefined) {
+			overlay.classList.remove("shown")
+			browser.classList.remove("shown")
+			return
+		}
+	}
+
+	overlay.classList.toggle("shown")
 	browser.classList.toggle("shown")
 };Browser()
 
+document.body.addEventListener("keyup", (e) => {
+	if (e.key == "Escape") {Browser(false)}
+})
+
 function BrowserEl(properties) {
 	properties = {
 		title: "No name",
-		image: "",
+		image: "icons/no-image.png",
 		author: "Unnamed Pilot",
 		description: "No description",
 		...properties
diff --git a/src/app/icons/no-image.png b/src/app/icons/no-image.png
new file mode 100644
index 0000000..43265d1
Binary files /dev/null and b/src/app/icons/no-image.png differ
diff --git a/src/app/index.html b/src/app/index.html
index 424265e..0866816 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -13,7 +13,10 @@
 			<div id="close" onclick="ipcRenderer.send('exit')"></div>
 		</div>
 
-		<div id="browser"></div>
+		<div id="overlay" onclick="Browser()"></div>
+		<div id="browser">
+			<input id="search" placeholder="Search...">
+		</div>
 		
 		<nav class="gamesContainer">
 			<button id="vpBtn" onclick="page(0)"></button>
diff --git a/src/app/main.css b/src/app/main.css
index a2c144c..d3d3b72 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -33,7 +33,7 @@
 #browser {
 	--spacing: calc(var(--padding) * 3);
 
-	z-index: 1;
+	z-index: 2;
 	opacity: 0.0;
 	position: fixed;
 	overflow-y: scroll;
@@ -43,17 +43,37 @@
 	background: var(--bg);
 	right: var(--spacing);
 	bottom: var(--spacing);
+	transform: scale(0.98);
 	backdrop-filter: blur(15px);
-	transition: opacity 0.15s ease-in-out;
 	border-radius: calc(var(--padding) / 2);
+	transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
 }
 
 #browser.shown {
 	opacity: 1.0;
 	pointer-events: all;
+	transform: scale(1.0);
+}
+
+#overlay {
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 1;
+	opacity: 0.0;
+	position: fixed;
+	background: var(--bg);
+	pointer-events: none;
+	transition: opacity 0.15s ease-in-out;
+}
+
+#overlay.shown {
+	opacity: 0.8;
+	pointer-events: all;
 }
 
-#browser .el {
+#browser .el, #browser #search {
 	--spacing: calc(var(--padding) / 2);
 	--height: calc(var(--padding) * 2.5);
 
@@ -68,16 +88,25 @@
 	width: calc(100% - var(--spacing) * 4);
 }
 
+#browser #search {
+	--height: calc(var(--padding) * 1.5);
+
+	border: none;
+	outline: none;
+	width: calc(100% - var(--spacing) * 2);
+}
+
 #browser .el .image, #browser .el .image img {
 	width: var(--height);
 	height: var(--height);
 	margin-right: var(--spacing);
 }
+
 #browser .el .title {font-size: 1.2em}
 #browser .el .description {font-size: 0.8em}
 
 #winbtns {
-	z-index: 1;
+	z-index: 2;
 	display: flex;
 	position: fixed;
 	top: var(--padding);
@@ -104,9 +133,10 @@ body {
 	margin: 0;
 	overflow: hidden;
 	user-select: none;
-	font-family: "Roboto", sans-serif;
 }
 
+body, button, input {font-family: "Roboto", sans-serif}
+
 button {outline: none}
 b, strong {font-weight: 700}
 body, input, button {font-weight: 500}
@@ -131,9 +161,8 @@ img {pointer-events: none}
 	left: 0;
 	right: 0;
 	bottom: 0;
-	pointer-events: none;
-	position: fixed;
-	transform: scale(1.1);
+	z-index: -1;
+	position: absolute;
 	background-size: cover;
 	background-position: center;
 	background-repeat: no-repeat;
@@ -441,6 +470,6 @@ code {
   	-webkit-app-region: drag;
 }
 
-a, button, .contentMenu, #close, #nsRelease, #vpReleaseNotes, .mod {
+a, button, .contentMenu, #close, #nsRelease, #vpReleaseNotes, .mod, #overlay {
 	-webkit-app-region: no-drag;
 }
-- 
cgit v1.2.3


From 8747588222f1bd434af802262b1479ef5b606097 Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Fri, 21 Jan 2022 01:23:50 +0100
Subject: actually loads thunderstore now

---
 src/app/browser.js | 47 +++++++++++++++++++++++++++++++++--------------
 src/app/index.html |  2 +-
 src/app/main.css   |  7 ++++++-
 3 files changed, 40 insertions(+), 16 deletions(-)

(limited to 'src/app/main.css')

diff --git a/src/app/browser.js b/src/app/browser.js
index ae3e453..50cabfe 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -1,22 +1,39 @@
-function Browser(state) {
-	if (state) {
-		overlay.classList.add("shown")
-		browser.classList.add("shown")
-		return
-	} else if (! state) {
-		if (state != undefined) {
-			overlay.classList.remove("shown")
-			browser.classList.remove("shown")
+var Browser = {
+	toggle: (state) => {
+		if (state) {
+			overlay.classList.add("shown")
+			browser.classList.add("shown")
 			return
+		} else if (! state) {
+			if (state != undefined) {
+				overlay.classList.remove("shown")
+				browser.classList.remove("shown")
+				return
+			}
 		}
-	}
 
-	overlay.classList.toggle("shown")
-	browser.classList.toggle("shown")
-};Browser()
+		overlay.classList.toggle("shown")
+		browser.classList.toggle("shown")
+	},
+	loadfront: async () => {
+		let packages = await (await fetch("https://northstar.thunderstore.io/api/v1/package/")).json();
+		
+		for (let i in packages) {
+			let pkg = {...packages[i], ...packages[i].versions[0]};
+
+			new BrowserEl({
+				title: pkg.name,
+				image: pkg.icon,
+				author: pkg.owner,
+				description: pkg.description
+			})
+		}
+	}
+}; Browser.toggle()
+Browser.loadfront()
 
 document.body.addEventListener("keyup", (e) => {
-	if (e.key == "Escape") {Browser(false)}
+	if (e.key == "Escape") {Browser.toggle(false)}
 })
 
 function BrowserEl(properties) {
@@ -36,6 +53,8 @@ function BrowserEl(properties) {
 			<div class="text">
 				<div class="title">${properties.title}</div>
 				<div class="description">${properties.description} - by ${properties.author}</div>
+				<button>Install</button>
+				<button>Info</button>
 			</div>
 		</div>
 	`
diff --git a/src/app/index.html b/src/app/index.html
index 0866816..131ec38 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -13,7 +13,7 @@
 			<div id="close" onclick="ipcRenderer.send('exit')"></div>
 		</div>
 
-		<div id="overlay" onclick="Browser()"></div>
+		<div id="overlay" onclick="Browser.toggle(false)"></div>
 		<div id="browser">
 			<input id="search" placeholder="Search...">
 		</div>
diff --git a/src/app/main.css b/src/app/main.css
index d3d3b72..3c406ee 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -75,7 +75,7 @@
 
 #browser .el, #browser #search {
 	--spacing: calc(var(--padding) / 2);
-	--height: calc(var(--padding) * 2.5);
+	--height: calc(var(--padding) * 3);
 
 	color: white;
 	display: flex;
@@ -100,10 +100,15 @@
 	width: var(--height);
 	height: var(--height);
 	margin-right: var(--spacing);
+	border-radius: var(--spacing);
 }
 
 #browser .el .title {font-size: 1.2em}
 #browser .el .description {font-size: 0.8em}
+#browser .el button {
+	background: var(--blue);
+	margin-top: var(--spacing);
+}
 
 #winbtns {
 	z-index: 2;
-- 
cgit v1.2.3


From f474005ea330198caa066a50c5f71ff087d4158f Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Sun, 23 Jan 2022 21:58:56 +0100
Subject: added loading, close button, element fadein etc

To show the loading simply do Browser.loading(), when a BrowserEl() is
made it auto removes it. The loading and BrowserEl's will fade into
view instead of popping in instantly.

And then now there's a tiny close button, as it may not be obvious you
can click the dark overlay or click Escape.
---
 src/app/browser.js | 15 ++++++++++-----
 src/app/index.html | 10 +++++++++-
 src/app/main.css   | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 src/lang/en.json   |  2 ++
 4 files changed, 72 insertions(+), 9 deletions(-)

(limited to 'src/app/main.css')

diff --git a/src/app/browser.js b/src/app/browser.js
index 50cabfe..8af6afe 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -28,6 +28,11 @@ var Browser = {
 				description: pkg.description
 			})
 		}
+	},
+	loading: () => {
+		if (! browserEntries.querySelector(".loading")) {
+			browserEntries.innerHTML = `<div class="loading">${lang("gui.browser.loading")}</div>`;
+		}
 	}
 }; Browser.toggle()
 Browser.loadfront()
@@ -45,7 +50,11 @@ function BrowserEl(properties) {
 		...properties
 	}
 
-	browser.innerHTML += `
+	if (browserEntries.querySelector(".loading")) {
+		browserEntries.innerHTML = "";
+	}
+
+	browserEntries.innerHTML += `
 		<div class="el">
 			<div class="image">
 				<img src="${properties.image}">
@@ -59,7 +68,3 @@ function BrowserEl(properties) {
 		</div>
 	`
 }
-
-new BrowserEl()
-new BrowserEl()
-new BrowserEl()
diff --git a/src/app/index.html b/src/app/index.html
index 131ec38..e03936d 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -15,7 +15,15 @@
 
 		<div id="overlay" onclick="Browser.toggle(false)"></div>
 		<div id="browser">
-			<input id="search" placeholder="Search...">
+			<div id="misc">
+				<input id="search" placeholder="Search...">
+				<button id="close" onclick="Browser.toggle(false)">
+					<img src="icons/close.png">
+				</button>
+			</div>
+			<div id="browserEntries">
+				<div class="loading">%%gui.browser.loading%%</div>
+			</div>
 		</div>
 		
 		<nav class="gamesContainer">
diff --git a/src/app/main.css b/src/app/main.css
index 3c406ee..e13979a 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -73,10 +73,27 @@
 	pointer-events: all;
 }
 
-#browser .el, #browser #search {
+@keyframes fadein {
+	0% {opacity: 0.0}
+	100% {opacity: 1.0}
+}
+
+#browser .el, #browser #misc, #browser .loading {
 	--spacing: calc(var(--padding) / 2);
 	--height: calc(var(--padding) * 3);
+	--mischeight: calc(var(--padding) * 1.5);
+
+	animation-duration: 0.15s;
+	animation-iteration-count: 1;
+	animation-name: fadein;
+	animation-fill-mode: forwards;
+	animation-timing-function: ease-in-out;
+
+	opacity: 0.0;
+	transition: 0.15s ease-in-out;
+}
 
+#browser .el, #browser #search, #browser #close {
 	color: white;
 	display: flex;
 	align-items: center;
@@ -88,14 +105,45 @@
 	width: calc(100% - var(--spacing) * 4);
 }
 
-#browser #search {
-	--height: calc(var(--padding) * 1.5);
+#browser #misc, #browser #search {
+	--height: var(--mischeight);
+}
+
+#browser #misc {
+	display: flex;
+}
 
+#browser #search {
 	border: none;
 	outline: none;
 	width: calc(100% - var(--spacing) * 2);
 }
 
+#browser #close {
+	--height: calc(var(--padding) * 1.5);
+
+	padding: 0px;
+	margin-left: 0px;
+	width: var(--height);
+}
+
+#browser #close img {
+	opacity: 0.6;
+	width: var(--height);
+	height: var(--height);
+	transform: scale(0.6);
+}
+
+#browser .loading {
+	width: 100%;
+	color: white;
+	display: flex;
+	text-align: center;
+	align-items: center;
+	justify-content: center;
+	height: calc(100% - var(--mischeight) - var(--height));
+}
+
 #browser .el .image, #browser .el .image img {
 	width: var(--height);
 	height: var(--height);
diff --git a/src/lang/en.json b/src/lang/en.json
index c2b6f98..ecc2cc5 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -62,6 +62,8 @@
 	"gui.mods.installing": "Installing mod...",
 	"gui.mods.installedmod": "Installed mod!",
 
+	"gui.browser.loading": "Loading mods...",
+
 	"gui.update.downloading": "Downloading...",
 	"gui.update.extracting": "Extracting update...",
 	"gui.update.finished": "Done! Ready to play!",
-- 
cgit v1.2.3


From 89bd545b938fb05980393a3f2ae3f0aa2cbee220 Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Sun, 23 Jan 2022 22:17:59 +0100
Subject: added "Find Mods" button

---
 src/app/index.html | 1 +
 src/app/main.css   | 5 ++++-
 src/lang/en.json   | 1 +
 3 files changed, 6 insertions(+), 1 deletion(-)

(limited to 'src/app/main.css')

diff --git a/src/app/index.html b/src/app/index.html
index e03936d..c2978bd 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -92,6 +92,7 @@
 								<button id="togglemod" onclick="selected().toggle()">%%gui.mods.toggle%%</button>
 								<button id="toggleall" onclick="selected(true).toggle(true)">%%gui.mods.toggleall%%</button>
 								<button id="installmod" onclick="installmod()">%%gui.mods.install%%</button>
+								<button id="installmod" onclick="Browser.toggle(true)">%%gui.mods.find%%</button>
 							</div>
 						</div>
 					</div>
diff --git a/src/app/main.css b/src/app/main.css
index e13979a..acec007 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -513,7 +513,10 @@ code {
 }
 
 .modbtns button {
-	margin-left: calc(var(--padding) / 3);
+	--spacing: calc(var(--padding) / 3);
+	margin-left: var(--spacing);
+	margin-top: calc(var(--spacing) / 2);
+	margin-bottom: calc(var(--spacing) / 2);
 }
 
 /* drag control */
diff --git a/src/lang/en.json b/src/lang/en.json
index ecc2cc5..5377ca2 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -49,6 +49,7 @@
 	"gui.mods.count": "Mods Installed:",
 	"gui.mods.disabledtag": "Disabled",
 	"gui.mods.install": "Install Mod",
+	"gui.mods.find": "Find Mods",
 	"gui.mods.toggle": "Toggle Mod",
 	"gui.mods.toggleall": "Toggle All",
 	"gui.mods.remove": "Remove Mod",
-- 
cgit v1.2.3


From 396c1f3c9499a2bb50b2b5f3760cc58acfe9b87f Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Sun, 23 Jan 2022 23:18:45 +0100
Subject: minor aesthetic changes

---
 src/app/browser.js |  2 +-
 src/app/main.css   | 59 ++++++++++++++++++++++++++++++++----------------------
 src/lang/en.json   |  1 +
 3 files changed, 37 insertions(+), 25 deletions(-)

(limited to 'src/app/main.css')

diff --git a/src/app/browser.js b/src/app/browser.js
index 8af6afe..eb18fe5 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -61,7 +61,7 @@ function BrowserEl(properties) {
 			</div>
 			<div class="text">
 				<div class="title">${properties.title}</div>
-				<div class="description">${properties.description} - by ${properties.author}</div>
+				<div class="description">${properties.description} - ${lang("gui.browser.madeby")} ${properties.author}</div>
 				<button>Install</button>
 				<button>Info</button>
 			</div>
diff --git a/src/app/main.css b/src/app/main.css
index acec007..67174b8 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -26,12 +26,40 @@
 	background: var(--red);
 }
 
+::selection {
+	color: black;
+	background: var(--red);
+}
+
+body {
+	margin: 0;
+	overflow: hidden;
+	user-select: none;
+}
+
+body, button, input {font-family: "Roboto", sans-serif}
+
+button {outline: none}
+b, strong {font-weight: 700}
+body, input, button {font-weight: 500}
+
+button {
+	border: none;
+	color: white;
+	outline: none;
+	cursor: pointer;
+	font-weight: 700;
+	padding: 5px 10px;
+	border-radius: 5px;
+	transition: 0.2s ease-in-out;
+}
+
 .playBtn, .gamesContainer button, #winbtns div {
 	cursor: pointer;
 }
 
 #browser {
-	--spacing: calc(var(--padding) * 3);
+	--spacing: var(--padding);
 
 	z-index: 2;
 	opacity: 0.0;
@@ -116,9 +144,14 @@
 #browser #search {
 	border: none;
 	outline: none;
+	transition: filter 0.15s ease-in-out;
 	width: calc(100% - var(--spacing) * 2);
 }
 
+#browser #search:focus {
+	filter: brightness(1.5);
+}
+
 #browser #close {
 	--height: calc(var(--padding) * 1.5);
 
@@ -182,28 +215,6 @@
 #winbtns div:hover {opacity: 1.0}
 #winbtns div:active {transform: scale(0.98)}
 
-body {
-	margin: 0;
-	overflow: hidden;
-	user-select: none;
-}
-
-body, button, input {font-family: "Roboto", sans-serif}
-
-button {outline: none}
-b, strong {font-weight: 700}
-body, input, button {font-weight: 500}
-
-button {
-	border: none;
-	color: white;
-	outline: none;
-	font-weight: 700;
-	padding: 5px 10px;
-	border-radius: 5px;
-	transition: 0.2s ease-in-out;
-}
-
 button:hover {filter: brightness(110%)}
 button:active {filter: brightness(90%)}
 
@@ -513,8 +524,8 @@ code {
 }
 
 .modbtns button {
-	--spacing: calc(var(--padding) / 3);
 	margin-left: var(--spacing);
+	--spacing: calc(var(--padding) / 3);
 	margin-top: calc(var(--spacing) / 2);
 	margin-bottom: calc(var(--spacing) / 2);
 }
diff --git a/src/lang/en.json b/src/lang/en.json
index 5377ca2..0d29115 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -64,6 +64,7 @@
 	"gui.mods.installedmod": "Installed mod!",
 
 	"gui.browser.loading": "Loading mods...",
+	"gui.browser.madeby": "by",
 
 	"gui.update.downloading": "Downloading...",
 	"gui.update.extracting": "Extracting update...",
-- 
cgit v1.2.3


From 4c9d8e1b3fc80fa0c23ed78015ab6238bf88dd06 Mon Sep 17 00:00:00 2001
From: GitExample <git@example.com>
Date: Thu, 3 Feb 2022 01:43:09 +0100
Subject: version numbers

These should've been here from the start, and I don't know why I didn't
add them in the start, I'm very dumb.
---
 src/app/browser.js | 7 +++++++
 src/app/main.css   | 6 ++++++
 2 files changed, 13 insertions(+)

(limited to 'src/app/main.css')

diff --git a/src/app/browser.js b/src/app/browser.js
index f152a6a..357a076 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -26,6 +26,7 @@ var Browser = {
 				image: pkg.icon,
 				author: pkg.owner,
 				download: pkg.download_url,
+				version: pkg.version_number,
 				description: pkg.description
 			})
 		}
@@ -45,12 +46,17 @@ document.body.addEventListener("keyup", (e) => {
 function BrowserEl(properties) {
 	properties = {
 		title: "No name",
+		version: "1.0.0",
 		image: "icons/no-image.png",
 		author: "Unnamed Pilot",
 		description: "No description",
 		...properties
 	}
 
+	if (properties.version[0] != "v") {
+		properties.version = "v" + properties.version;
+	}
+
 	if (browserEntries.querySelector(".loading")) {
 		browserEntries.innerHTML = "";
 	}
@@ -69,6 +75,7 @@ function BrowserEl(properties) {
 				<div class="title">${properties.title}</div>
 				<div class="description">${properties.description} - ${lang("gui.browser.madeby")} ${properties.author}</div>
 				<button onclick="installFromURL('${properties.download}')">${installstring}</button>
+				<button class="visual">${properties.version}</button>
 			</div>
 		</div>
 	`
diff --git a/src/app/main.css b/src/app/main.css
index 67174b8..8bac0ea 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -485,6 +485,12 @@ button:disabled {
 	pointer-events: none;
 }
 
+button.visual {
+	opacity: 1.0;
+	pointer-events: none;
+	background: transparent !important;
+}
+
 code {
     font-size: 16px;
     padding: 2px 5px;
-- 
cgit v1.2.3


From 7573f80030d9536d97b6a60dd1f9bce3c4093209 Mon Sep 17 00:00:00 2001
From: GitExample <git@example.com>
Date: Sat, 5 Feb 2022 00:35:12 +0100
Subject: fixed #bgHolder not covering entire background

-1px should be enough, however to make sure I made it -5px instead.
---
 src/app/main.css | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

(limited to 'src/app/main.css')

diff --git a/src/app/main.css b/src/app/main.css
index 8bac0ea..e48625b 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -221,11 +221,11 @@ button:active {filter: brightness(90%)}
 img {pointer-events: none}
 
 #bgHolder {
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	z-index: -1;
+	top: -5px;
+	left: -5px;
+	right: -5px;
+	bottom: -5px;
+	z-index:  -1;
 	position: absolute;
 	background-size: cover;
 	background-position: center;
-- 
cgit v1.2.3


From 392a46168971eb3a4d578cec2b8ebea533e02747 Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Sat, 5 Feb 2022 18:47:46 +0100
Subject: implemented limit to loading packages

I have no clue if 50 packages is too small or too, big, we'll adjust
this the more mods that arrive. I also made the browser auto scroll to
the top when closed, it looks far better.
---
 src/app/browser.js | 8 ++++++++
 src/app/main.css   | 7 +++++++
 src/lang/en.json   | 1 +
 3 files changed, 16 insertions(+)

(limited to 'src/app/main.css')

diff --git a/src/app/browser.js b/src/app/browser.js
index 6d10bfb..c23f217 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -3,8 +3,10 @@ var fuse;
 var packages = [];
 
 var Browser = {
+	maxentries: 50,
 	toggle: (state) => {
 		if (state) {
+			browser.scrollTo(0, 0);
 			overlay.classList.add("shown")
 			browser.classList.add("shown")
 			return
@@ -16,6 +18,7 @@ var Browser = {
 			}
 		}
 
+		browser.scrollTo(0, 0);
 		overlay.classList.toggle("shown")
 		browser.classList.toggle("shown")
 	},
@@ -31,6 +34,7 @@ var Browser = {
 		}
 		
 		for (let i in packages) {
+			if (i == Browser.maxentries) {Browser.endoflist();break}
 			new BrowserElFromObj(packages[i]);
 		}
 	},
@@ -43,6 +47,9 @@ var Browser = {
 			browserEntries.innerHTML = `<div class="loading">${lang('gui.browser.loading')}</div>`;
 		}
 	},
+	endoflist: () => {
+		browserEntries.innerHTML += `<div class="message">${lang('gui.browser.endoflist')}</div>`
+	},
 	search: (string) => {
 		Browser.loading();
 		let res = fuse.search(string);
@@ -53,6 +60,7 @@ var Browser = {
 		}
 
 		for (let i = 0; i < res.length; i++) {
+			if (i == Browser.maxentries) {Browser.endoflist();break}
 			new BrowserElFromObj(res[i].item);
 		}
 	},
diff --git a/src/app/main.css b/src/app/main.css
index e48625b..b6a07eb 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -177,6 +177,13 @@ button {
 	height: calc(100% - var(--mischeight) - var(--height));
 }
 
+#browser .message {
+	color: white;
+	text-align: center;
+	margin: var(--padding);
+	width: calc(100% - var(--padding));
+}
+
 #browser .el .image, #browser .el .image img {
 	width: var(--height);
 	height: var(--height);
diff --git a/src/lang/en.json b/src/lang/en.json
index 59af04b..6bef99f 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -65,6 +65,7 @@
 
 	"gui.browser.madeby": "by",
 	"gui.browser.update": "Update",
+	"gui.browser.endoflist": "Maximum packages has been loaded.<br>Use the search for finding other packages!",
 	"gui.browser.install": "Install",
 	"gui.browser.reinstall": "Re-Install",
 	"gui.browser.loading": "Loading mods...",
-- 
cgit v1.2.3


From b69e72aa7df4df5770e3a305eac507ab1f20e96b Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Sat, 5 Feb 2022 19:04:11 +0100
Subject: moved author position, and fixed text overflowing

---
 src/app/browser.js |  3 ++-
 src/app/main.css   | 11 +++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

(limited to 'src/app/main.css')

diff --git a/src/app/browser.js b/src/app/browser.js
index c23f217..5695661 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -145,9 +145,10 @@ function BrowserEl(properties) {
 			</div>
 			<div class="text">
 				<div class="title">${properties.title}</div>
-				<div class="description">${properties.description} - ${lang("gui.browser.madeby")} ${properties.author}</div>
+				<div class="description">${properties.description}</div>
 				<button onclick="installFromURL('${properties.download}')">${installstr}</button>
 				<button class="visual">${properties.version}</button>
+				<button class="visual">${lang("gui.browser.madeby")} ${properties.author}</button>
 			</div>
 		</div>
 	`
diff --git a/src/app/main.css b/src/app/main.css
index b6a07eb..4f1ddc2 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -191,6 +191,17 @@ button {
 	border-radius: var(--spacing);
 }
 
+#browser .el .text {
+	overflow: hidden;
+}
+
+#browser .el .title, #browser .el .description {
+	height: 1.2em;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
 #browser .el .title {font-size: 1.2em}
 #browser .el .description {font-size: 0.8em}
 #browser .el button {
-- 
cgit v1.2.3


From 8b97390a9e35117bd4bc2f9ceb26f090d6a67ee9 Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Sat, 5 Feb 2022 19:51:20 +0100
Subject: various changes, aesthetic and functionality

This should fix the window drag not working, however I cannot test that.
As my WM doesn't support it, a Windows contributor will have to test it.

I also added an info button that opens the mod's page in your web
browser, this button is of course localized, along with that I localized
the placeholder in the search input.

There's also a few general aesthetic changes, like adding a tiny border
around #modsdiv and #browser.
---
 src/app/browser.js |  2 ++
 src/app/index.html |  2 +-
 src/app/main.css   | 10 ++++++++--
 src/lang/en.json   |  4 +++-
 4 files changed, 14 insertions(+), 4 deletions(-)

(limited to 'src/app/main.css')

diff --git a/src/app/browser.js b/src/app/browser.js
index 5695661..7b67822 100644
--- a/src/app/browser.js
+++ b/src/app/browser.js
@@ -100,6 +100,7 @@ function BrowserElFromObj(obj) {
 		title: pkg.name,
 		image: pkg.icon,
 		author: pkg.owner,
+		url: pkg.package_url,
 		download: pkg.download_url,
 		version: pkg.version_number,
 		description: pkg.description
@@ -147,6 +148,7 @@ function BrowserEl(properties) {
 				<div class="title">${properties.title}</div>
 				<div class="description">${properties.description}</div>
 				<button onclick="installFromURL('${properties.download}')">${installstr}</button>
+				<button onclick="require('electron').shell.openExternal('${properties.url}')">${lang('gui.browser.info')}</button>
 				<button class="visual">${properties.version}</button>
 				<button class="visual">${lang("gui.browser.madeby")} ${properties.author}</button>
 			</div>
diff --git a/src/app/index.html b/src/app/index.html
index c2978bd..b861736 100644
--- a/src/app/index.html
+++ b/src/app/index.html
@@ -16,7 +16,7 @@
 		<div id="overlay" onclick="Browser.toggle(false)"></div>
 		<div id="browser">
 			<div id="misc">
-				<input id="search" placeholder="Search...">
+				<input id="search" placeholder="%%gui.browser.search%%">
 				<button id="close" onclick="Browser.toggle(false)">
 					<img src="icons/close.png">
 				</button>
diff --git a/src/app/main.css b/src/app/main.css
index 4f1ddc2..2791488 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -9,7 +9,11 @@
 	--selbg: rgba(80, 80, 80, 0.5);
 	--redbg: linear-gradient(45deg, var(--red), #FA4343);
 	--bluebg: linear-gradient(45deg, var(--blue), #7380ED);
+}
 
+#browser, #modsdiv {
+	outline: 1px solid #444444;
+	border: 3px solid var(--bg);
 }
 
 ::-webkit-scrollbar {
@@ -73,7 +77,7 @@ button {
 	bottom: var(--spacing);
 	transform: scale(0.98);
 	backdrop-filter: blur(15px);
-	border-radius: calc(var(--padding) / 2);
+	border-radius: calc(var(--padding) / 3);
 	transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
 }
 
@@ -556,7 +560,9 @@ code {
 
 /* drag control */
 
-#bgHolder {
+#bgHolder, 
+#overlay.shown + .mainContainer, 
+#overlay.shown + .gamesContainer {
 	user-select: none;
   	-webkit-app-region: drag;
 }
diff --git a/src/lang/en.json b/src/lang/en.json
index 6bef99f..c51c843 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -63,12 +63,14 @@
 	"gui.mods.installing": "Installing mod...",
 	"gui.mods.installedmod": "Installed mod!",
 
+	"gui.browser.info": "Info",
 	"gui.browser.madeby": "by",
+	"gui.browser.search": "Search...",
 	"gui.browser.update": "Update",
-	"gui.browser.endoflist": "Maximum packages has been loaded.<br>Use the search for finding other packages!",
 	"gui.browser.install": "Install",
 	"gui.browser.reinstall": "Re-Install",
 	"gui.browser.loading": "Loading mods...",
+	"gui.browser.endoflist": "Maximum packages has been loaded.<br>Use the search for finding other packages!",
 
 	"gui.update.downloading": "Downloading...",
 	"gui.update.extracting": "Extracting update...",
-- 
cgit v1.2.3


From 7c2fe789d759bcbf69bdc5ca4f2ff0fede4d4883 Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Mon, 7 Feb 2022 21:26:32 +0100
Subject: fixed drag control

I think? I don't know how it was originally, currently now you can drag
on the top most of the window and in the left most, unfortunately not
inside the various pages.

It would probably be possible to do that, but I've not made it do as
such, and if it needs to be changed it won't be me doing it.
---
 src/app/main.css | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

(limited to 'src/app/main.css')

diff --git a/src/app/main.css b/src/app/main.css
index 2791488..de9a50e 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -560,13 +560,19 @@ code {
 
 /* drag control */
 
-#bgHolder, 
-#overlay.shown + .mainContainer, 
-#overlay.shown + .gamesContainer {
+#bgHolder,
+.mainContainer, 
+.gamesContainer {
 	user-select: none;
   	-webkit-app-region: drag;
 }
 
-a, button, .contentMenu, #close, #nsRelease, #vpReleaseNotes, .mod, #overlay {
+#overlay.shown ~ #bgHolder,
+#overlay.shown ~ .mainContainer, 
+#overlay.shown ~ .gamesContainer {
+  	-webkit-app-region: no-drag;
+}
+
+a, button, .contentMenu li, #close, #nsRelease, #vpReleaseNotes, .mod, #overlay, #modsdiv {
 	-webkit-app-region: no-drag;
 }
-- 
cgit v1.2.3


From d55f84536814238d8ea79acdae47dbdf269953f1 Mon Sep 17 00:00:00 2001
From: 0neGal <mail@0negal.com>
Date: Tue, 8 Feb 2022 17:27:52 +0100
Subject: fixed window buttons not able to be clicked

Also fixes section buttons not being able to be clicked.
---
 src/app/main.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'src/app/main.css')

diff --git a/src/app/main.css b/src/app/main.css
index de9a50e..94ef767 100644
--- a/src/app/main.css
+++ b/src/app/main.css
@@ -323,7 +323,7 @@ img {pointer-events: none}
 }
 
 .contentContainer {
-	width: 90%;
+	width: 85%;
 	color: white;
 	flex-grow: 1;
 	opacity: 1.0;
@@ -561,18 +561,18 @@ code {
 /* drag control */
 
 #bgHolder,
-.mainContainer, 
+.contentContainer, 
 .gamesContainer {
 	user-select: none;
   	-webkit-app-region: drag;
 }
 
 #overlay.shown ~ #bgHolder,
-#overlay.shown ~ .mainContainer, 
+#overlay.shown ~ .contentContainer, 
 #overlay.shown ~ .gamesContainer {
   	-webkit-app-region: no-drag;
 }
 
-a, button, .contentMenu li, #close, #nsRelease, #vpReleaseNotes, .mod, #overlay, #modsdiv {
+a, button, #close, #nsRelease, #vpReleaseNotes, .mod, #overlay, #modsdiv, #winbtns, .contentMenu {
 	-webkit-app-region: no-drag;
 }
-- 
cgit v1.2.3