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')

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