diff options
| -rw-r--r-- | src/app/browser.js | 21 | ||||
| -rw-r--r-- | src/app/icons/no-image.png | bin | 0 -> 1959 bytes | |||
| -rw-r--r-- | src/app/index.html | 5 | ||||
| -rw-r--r-- | src/app/main.css | 47 |
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 Binary files differnew file mode 100644 index 0000000..43265d1 --- /dev/null +++ b/src/app/icons/no-image.png 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; } |
