mirror of
https://github.com/open-goal/launcher.git
synced 2024-10-20 04:57:38 -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;
|
||||
}
|
||||
|
||||
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 {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
@ -74,31 +41,15 @@ nav {
|
|||
width: 100%;
|
||||
height: 100vh;
|
||||
-webkit-user-drag: none;
|
||||
/* z-index: -2; */
|
||||
}
|
||||
|
||||
/* this refers to the game logo, jak: tpl */
|
||||
#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 div */
|
||||
#buttons {
|
||||
margin: 40px 0;
|
||||
gap: 0 10px;
|
||||
}
|
||||
|
||||
/* this is the config and play button */
|
||||
/* config and play button */
|
||||
#buttons > button {
|
||||
background-color: teal;
|
||||
width: 30%;
|
||||
|
@ -108,7 +59,62 @@ nav {
|
|||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
.offcanvas-start {
|
||||
width: 100px;
|
||||
|
||||
/* START of sidenav styling */
|
||||
.sidenav{
|
||||
width: 3rem;
|
||||
height: 100vh;
|
||||
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">
|
||||
<!-- sidebar toggle button, it runs the entire vertical height -->
|
||||
<div class="col-1">
|
||||
<div class="row justify-content-center">
|
||||
<a id="toggle-sidebar" class="btn btn-primary" data-bs-toggle="offcanvas" href="#sidebar" role="button"
|
||||
aria-controls="offcanvasExample" onclick="openNav()">
|
||||
>
|
||||
<div class="sidenav">
|
||||
<ul class="sidenav-nav">
|
||||
<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>
|
||||
</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>
|
||||
|
||||
|
@ -46,24 +61,6 @@
|
|||
</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>
|
||||
</body>
|
||||
|
||||
|
|
|
@ -6,39 +6,11 @@ var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
|||
|
||||
const body = document.querySelector('body');
|
||||
const container = document.querySelector('.container');
|
||||
const offcanvas = document.querySelector(".offcanvas-start");
|
||||
let backdrop = document.querySelector('.offcanvas-backdrop');
|
||||
const background = document.querySelector('#background');
|
||||
const configButton = document.querySelector("#config");
|
||||
|
||||
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) {
|
||||
switch (game) {
|
||||
case "jak1":
|
||||
|
|
Loading…
Reference in a new issue