diff options
| -rw-r--r-- | src/app/browser.js | 46 | ||||
| -rw-r--r-- | src/app/icons/no-image.png | bin | 0 -> 1959 bytes | |||
| -rw-r--r-- | src/app/index.html | 6 | ||||
| -rw-r--r-- | src/app/main.css | 87 |
4 files changed, 133 insertions, 6 deletions
diff --git a/src/app/browser.js b/src/app/browser.js new file mode 100644 index 0000000..ae3e453 --- /dev/null +++ b/src/app/browser.js @@ -0,0 +1,46 @@ +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: "icons/no-image.png", + author: "Unnamed Pilot", + description: "No description", + ...properties + } + + browser.innerHTML += ` + <div class="el"> + <div class="image"> + <img src="${properties.image}"> + </div> + <div class="text"> + <div class="title">${properties.title}</div> + <div class="description">${properties.description} - by ${properties.author}</div> + </div> + </div> + ` +} + +new BrowserEl() +new BrowserEl() +new BrowserEl() 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 fe383a0..0866816 100644 --- a/src/app/index.html +++ b/src/app/index.html @@ -12,6 +12,11 @@ <div id="minimize" onclick="ipcRenderer.send('minimize')"></div> <div id="close" onclick="ipcRenderer.send('exit')"></div> </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> @@ -102,6 +107,7 @@ <script src="lang.js"></script> <script src="main.js"></script> + <script src="browser.js"></script> <script src="launcher.js"></script> </body> </html> diff --git a/src/app/main.css b/src/app/main.css index de0db46..d3d3b72 100644 --- a/src/app/main.css +++ b/src/app/main.css @@ -30,8 +30,83 @@ cursor: pointer; } -#winbtns { +#browser { + --spacing: calc(var(--padding) * 3); + + z-index: 2; + 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); + transform: scale(0.98); + backdrop-filter: blur(15px); + 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 #search { + --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 #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: 2; display: flex; position: fixed; top: var(--padding); @@ -58,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} @@ -85,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; @@ -395,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; } |
