diff options
| -rw-r--r-- | src/app/browser.js | 15 | ||||
| -rw-r--r-- | src/app/index.html | 10 | ||||
| -rw-r--r-- | src/app/main.css | 54 | ||||
| -rw-r--r-- | src/lang/en.json | 2 |
4 files changed, 72 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); 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!", |