aboutsummaryrefslogtreecommitdiff
path: root/src/app
diff options
context:
space:
mode:
Diffstat (limited to 'src/app')
-rw-r--r--src/app/browser.js15
-rw-r--r--src/app/index.html10
-rw-r--r--src/app/main.css54
3 files changed, 70 insertions, 9 deletions
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);