Archive/opengoal-launcher
1
0
Fork 0
mirror of https://github.com/open-goal/launcher.git synced 2024-10-20 04:57:38 -04:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

offscreen sidebar

Browse source
This commit is contained in:
trippjoe 2022-03-27 17:26:57 -04:00
parent e53b004d2a
commit 10c3d5178c
4 changed files with 91 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
package-lock.json generated
View file

@ -9,6 +9,7 @@
"version": "0.0.1",
"license": "MIT",
"dependencies": {
"bootstrap": "^5.1.3",
"electron-squirrel-startup": "^1.0.0"
},
"devDependencies": {
@ -699,6 +700,16 @@
"node": ">=10"
}
},
"node_modules/@popperjs/core": {
"version": "2.11.4",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.4.tgz",
"integrity": "sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg==",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@sindresorhus/is": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
@ -1120,6 +1131,18 @@
"dev": true,
"optional": true
},
"node_modules/bootstrap": {
"version": "5.1.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
"integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
},
"peerDependencies": {
"@popperjs/core": "^2.10.2"
}
},
"node_modules/brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -7243,6 +7266,12 @@
"rimraf": "^3.0.2"
}
},
"@popperjs/core": {
"version": "2.11.4",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.4.tgz",
"integrity": "sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg==",
"peer": true
},
"@sindresorhus/is": {
"version": "0.14.0",
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
@ -7577,6 +7606,12 @@
"dev": true,
"optional": true
},
"bootstrap": {
"version": "5.1.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
"integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
"requires": {}
},
"brace-expansion": {
"version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

1
package.json
View file

@ -44,6 +44,7 @@
}
},
"dependencies": {
"bootstrap": "^5.1.3",
"electron-squirrel-startup": "^1.0.0"
},
"devDependencies": {

31
src/css/index.css
View file

@ -23,7 +23,8 @@ header{
}
.logo {
width: 20%;
width: 25vw;
margin: 0 35vw;
-webkit-user-drag: none;
}
@ -37,6 +38,19 @@ nav {
gap: 3rem;
}
.offcanvas-body {
display: flex;
flex-direction: column;
min-height: 100vh;
background: var(--bg-blue);
border-right: 1px solid darkgray;
padding: 1rem;
gap: 3rem;
align-items: center;
justify-content: center;
overflow: hidden;
}
.nav-link {
display: flex;
justify-content: center;
@ -45,14 +59,10 @@ nav {
}
.nav-img {
width: 80%;
width: 100%;
-webkit-user-drag: none;
}
nav > .settings {
margin-top: 340px;
}
.game-bg{
position:fixed;
width: 110%;
@ -71,14 +81,14 @@ nav > .settings {
.game-logo {
position: fixed;
width: 40%;
padding: 10px;
padding: 10px 15px;
z-index: -1;
}
.game-box {
z-index: 1;
padding-left: 2em;
padding-top: 53%;
padding-top: 45%;
min-height: 100%;
}
@ -89,3 +99,8 @@ nav > .settings {
font-size: xxx-large;
letter-spacing: 3px;
}
.offcanvas-start {
width: 100px;
background-color: var(--bg-blue);
}

38
src/html/index.html
View file

@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8" />
<title>OpenGOAL Launcher</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
<link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="../css/index.css" />
<script defer src="../js/render.js"></script>
@ -17,17 +17,32 @@
</header>
<div class="row">
<nav class="col-1">
<div class="p-0">
<img class="game-bg" src="../assets/images/jak1-bg.png" alt="Rock Village">
<img class="model" src="../assets/images/jak1-model.png" alt="Jak">
<img class="game-logo" src="../assets/images/jak1-logo.png" alt="Jak & Daxter: The Precursor Legacy">
<div class="game-box">
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#sidebar" role="button"
aria-controls="offcanvasExample">
>
</a>
<button type="button" class="btn btn-success btn-play">PLAY</button>
</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">
<img src="../assets/images/jak-tpl.png" class="nav-img">
</a>
<a class="nav-link" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
title="Jak 2">
<a class="nav-link" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Jak 2">
<img src="../assets/images/jak-2.png" class="nav-img">
</a>
<a class="nav-link" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
title="Jak 3">
<a class="nav-link" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Jak 3">
<img src="../assets/images/jak-3.png" class="nav-img">
</a>
<a class="nav-link settings" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
@ -38,17 +53,10 @@
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>
</nav>
<div class="col-11 p-0">
<img class="game-bg" src="../assets/images/jak1-bg.png" alt="Rock Village">
<img class="model" src="../assets/images/jak1-model.png" alt="Jak">
<img class="game-logo" src="../assets/images/jak1-logo.png" alt="Jak & Daxter: The Precursor Legacy">
<div class="game-box">
<button type="button" class="btn btn-success btn-play">PLAY</button>
</div>
</div>
</div>
</div>
<script src=" https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>