aboutsummaryrefslogtreecommitdiff
path: root/src/app
diff options
context:
space:
mode:
author0neGal <mail@0negal.com>2022-01-20 13:45:57 +0100
committer0neGal <mail@0negal.com>2022-01-20 13:45:57 +0100
commitfd967f570985339905c52238ead049555c5efcdc (patch)
tree9a4d1c0bf1ab7f3e32ecfa4c5416d190933a243f /src/app
parent20bf62f42f41638733e0b02affe90c04b1cb2938 (diff)
downloadViper-fd967f570985339905c52238ead049555c5efcdc.tar.gz
Viper-fd967f570985339905c52238ead049555c5efcdc.zip
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.
Diffstat (limited to 'src/app')
-rw-r--r--src/app/browser.js21
-rw-r--r--src/app/icons/no-image.pngbin0 -> 1959 bytes
-rw-r--r--src/app/index.html5
-rw-r--r--src/app/main.css47
4 files changed, 61 insertions, 12 deletions
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
--- /dev/null
+++ b/src/app/icons/no-image.png
Binary files 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;
}