mirror of
https://github.com/open-goal/launcher.git
synced 2024-10-20 19:07:36 -04:00
cleaned up html, css, & js. updated the navbar style
This commit is contained in:
parent
8a7b8bf7f4
commit
3663592a7d
|
@ -21,39 +21,6 @@ body {
|
||||||
-webkit-user-drag: none;
|
-webkit-user-drag: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
min-height: 100vh;
|
|
||||||
background: var(--bg-blue);
|
|
||||||
padding: 1rem;
|
|
||||||
gap: 3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.offcanvas-body {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
min-height: 100vh;
|
|
||||||
background: var(--bg-blue);
|
|
||||||
padding: 1rem;
|
|
||||||
gap: 3rem;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-link {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
-webkit-user-drag: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-img {
|
|
||||||
width: 100%;
|
|
||||||
-webkit-user-drag: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-container {
|
.video-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
|
@ -74,31 +41,15 @@ nav {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
-webkit-user-drag: none;
|
-webkit-user-drag: none;
|
||||||
/* z-index: -2; */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* this refers to the game logo, jak: tpl */
|
/* buttons div */
|
||||||
#logo {
|
|
||||||
width: 50%;
|
|
||||||
margin: 15px 0;
|
|
||||||
-webkit-user-drag: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#toggle-sidebar {
|
|
||||||
height: 100vh;
|
|
||||||
border-radius: 0;
|
|
||||||
background-color: var(--bg-blue);
|
|
||||||
border-color: var(--bg-blue);
|
|
||||||
padding-top: 50vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* this is the buttons div */
|
|
||||||
#buttons {
|
#buttons {
|
||||||
margin: 40px 0;
|
margin: 40px 0;
|
||||||
gap: 0 10px;
|
gap: 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* this is the config and play button */
|
/* config and play button */
|
||||||
#buttons > button {
|
#buttons > button {
|
||||||
background-color: teal;
|
background-color: teal;
|
||||||
width: 30%;
|
width: 30%;
|
||||||
|
@ -108,7 +59,62 @@ nav {
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.offcanvas-start {
|
|
||||||
width: 100px;
|
/* START of sidenav styling */
|
||||||
|
.sidenav{
|
||||||
|
width: 3rem;
|
||||||
|
height: 100vh;
|
||||||
background-color: var(--bg-blue);
|
background-color: var(--bg-blue);
|
||||||
|
opacity: 50%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
transition: 200ms ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidenav-nav{
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidenav:hover {
|
||||||
|
width: 5rem;
|
||||||
|
opacity: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-user-drag: none;
|
||||||
|
padding: 0;
|
||||||
|
filter: grayscale(100%);
|
||||||
|
transition: 400ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:hover{
|
||||||
|
filter: grayscale(0%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-img {
|
||||||
|
width: 100%;
|
||||||
|
-webkit-user-drag: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item:first-child {
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:last-child {
|
||||||
|
opacity: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link:last-child:hover {
|
||||||
|
opacity: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* END of sidenav styling */
|
|
@ -23,11 +23,26 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<!-- sidebar toggle button, it runs the entire vertical height -->
|
<!-- sidebar toggle button, it runs the entire vertical height -->
|
||||||
<div class="col-1">
|
<div class="col-1">
|
||||||
<div class="row justify-content-center">
|
<div class="sidenav">
|
||||||
<a id="toggle-sidebar" class="btn btn-primary" data-bs-toggle="offcanvas" href="#sidebar" role="button"
|
<ul class="sidenav-nav">
|
||||||
aria-controls="offcanvasExample" onclick="openNav()">
|
<li class="nav-item">
|
||||||
>
|
<a class="nav-link" data-bs-toggle="tooltip" data-bs-placement="right"
|
||||||
|
title="Jak & Daxter: The Precursor Legacy">
|
||||||
|
<img src="../../assets/images/games/jak-tpl.png" class="nav-img">
|
||||||
</a>
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link settings" href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Settings"
|
||||||
|
onclick="send('settings')">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="white" class="bi bi-sliders"
|
||||||
|
viewBox="0 0 16 16">
|
||||||
|
<path fill-rule="evenodd"
|
||||||
|
d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3h9.05zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8h2.05zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1h9.05z" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -46,24 +61,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- OFFCANVAS SIDEBAR MENU -->
|
|
||||||
<div class="offcanvas offcanvas-start" id="sidebar" aria-labelledby="sidebar-label">
|
|
||||||
<div class="offcanvas-body">
|
|
||||||
<a class="nav-link active" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
|
|
||||||
title="Jak & Daxter: The Precursor Legacy" onclick="navBarClick('jak1')">
|
|
||||||
<img src="../../assets/images/games/jak-tpl.png" class="nav-img">
|
|
||||||
</a>
|
|
||||||
<a class="nav-link settings" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
|
|
||||||
title="Settings" onclick="navBarClick('settings')">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="white" class="bi bi-sliders"
|
|
||||||
viewBox="0 0 16 16">
|
|
||||||
<path fill-rule="evenodd"
|
|
||||||
d="M11.5 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM9.05 3a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0V3h9.05zM4.5 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zM2.05 8a2.5 2.5 0 0 1 4.9 0H16v1H6.95a2.5 2.5 0 0 1-4.9 0H0V8h2.05zm9.45 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3zm-2.45 1a2.5 2.5 0 0 1 4.9 0H16v1h-2.05a2.5 2.5 0 0 1-4.9 0H0v-1h9.05z" />
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
|
<script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
|
|
@ -6,39 +6,11 @@ var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||||
|
|
||||||
const body = document.querySelector('body');
|
const body = document.querySelector('body');
|
||||||
const container = document.querySelector('.container');
|
const container = document.querySelector('.container');
|
||||||
const offcanvas = document.querySelector(".offcanvas-start");
|
|
||||||
let backdrop = document.querySelector('.offcanvas-backdrop');
|
|
||||||
const background = document.querySelector('#background');
|
const background = document.querySelector('#background');
|
||||||
const configButton = document.querySelector("#config");
|
const configButton = document.querySelector("#config");
|
||||||
|
|
||||||
const { send, receive, handleStatus, handleConsole } = window.electronAPI;
|
const { send, receive, handleStatus, handleConsole } = window.electronAPI;
|
||||||
|
|
||||||
function openNav() {
|
|
||||||
container.style.marginLeft = "100px";
|
|
||||||
offcanvas.classList.add("show");
|
|
||||||
backdrop = document.querySelector('.offcanvas-backdrop');
|
|
||||||
}
|
|
||||||
|
|
||||||
function closeNav() {
|
|
||||||
container.style.marginLeft = "0";
|
|
||||||
offcanvas.classList.remove("show");
|
|
||||||
offcanvas.style.visibility = "hidden";
|
|
||||||
offcanvas.ariaHidden = "true";
|
|
||||||
offcanvas.ariaModal = "false";
|
|
||||||
backdrop.classList.remove('show');
|
|
||||||
body.style.removeProperty('overflow');
|
|
||||||
body.style.removeProperty('padding');
|
|
||||||
}
|
|
||||||
|
|
||||||
function navBarClick(target) {
|
|
||||||
closeNav();
|
|
||||||
if (target.includes("settings")) {
|
|
||||||
send('settings');
|
|
||||||
} else {
|
|
||||||
changeGame(target);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function changeGame(game) {
|
function changeGame(game) {
|
||||||
switch (game) {
|
switch (game) {
|
||||||
case "jak1":
|
case "jak1":
|
||||||
|
|
Loading…
Reference in a new issue