From 20bf62f42f41638733e0b02affe90c04b1cb2938 Mon Sep 17 00:00:00 2001 From: 0neGal 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 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 @@
-
+
+
+ +