mirror of
https://github.com/open-goal/launcher.git
synced 2024-10-20 04:57:38 -04:00
offscreen sidebar
This commit is contained in:
parent
e53b004d2a
commit
10c3d5178c
35
package-lock.json
generated
35
package-lock.json
generated
|
@ -9,6 +9,7 @@
|
||||||
"version": "0.0.1",
|
"version": "0.0.1",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"bootstrap": "^5.1.3",
|
||||||
"electron-squirrel-startup": "^1.0.0"
|
"electron-squirrel-startup": "^1.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
@ -699,6 +700,16 @@
|
||||||
"node": ">=10"
|
"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": {
|
"node_modules/@sindresorhus/is": {
|
||||||
"version": "0.14.0",
|
"version": "0.14.0",
|
||||||
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
|
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
|
||||||
|
@ -1120,6 +1131,18 @@
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": 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": {
|
"node_modules/brace-expansion": {
|
||||||
"version": "1.1.11",
|
"version": "1.1.11",
|
||||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||||
|
@ -7243,6 +7266,12 @@
|
||||||
"rimraf": "^3.0.2"
|
"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": {
|
"@sindresorhus/is": {
|
||||||
"version": "0.14.0",
|
"version": "0.14.0",
|
||||||
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
|
"resolved": "https://registry.npmjs.org/@sindresorhus/is/-/is-0.14.0.tgz",
|
||||||
|
@ -7577,6 +7606,12 @@
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"optional": 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": {
|
"brace-expansion": {
|
||||||
"version": "1.1.11",
|
"version": "1.1.11",
|
||||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||||
|
|
|
@ -44,6 +44,7 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"bootstrap": "^5.1.3",
|
||||||
"electron-squirrel-startup": "^1.0.0"
|
"electron-squirrel-startup": "^1.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
@ -23,7 +23,8 @@ header{
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
width: 20%;
|
width: 25vw;
|
||||||
|
margin: 0 35vw;
|
||||||
-webkit-user-drag: none;
|
-webkit-user-drag: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -37,6 +38,19 @@ nav {
|
||||||
gap: 3rem;
|
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 {
|
.nav-link {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
@ -45,14 +59,10 @@ nav {
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-img {
|
.nav-img {
|
||||||
width: 80%;
|
width: 100%;
|
||||||
-webkit-user-drag: none;
|
-webkit-user-drag: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav > .settings {
|
|
||||||
margin-top: 340px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.game-bg{
|
.game-bg{
|
||||||
position:fixed;
|
position:fixed;
|
||||||
width: 110%;
|
width: 110%;
|
||||||
|
@ -71,14 +81,14 @@ nav > .settings {
|
||||||
.game-logo {
|
.game-logo {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 40%;
|
width: 40%;
|
||||||
padding: 10px;
|
padding: 10px 15px;
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.game-box {
|
.game-box {
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
padding-left: 2em;
|
padding-left: 2em;
|
||||||
padding-top: 53%;
|
padding-top: 45%;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -89,3 +99,8 @@ nav > .settings {
|
||||||
font-size: xxx-large;
|
font-size: xxx-large;
|
||||||
letter-spacing: 3px;
|
letter-spacing: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.offcanvas-start {
|
||||||
|
width: 100px;
|
||||||
|
background-color: var(--bg-blue);
|
||||||
|
}
|
|
@ -4,7 +4,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>OpenGOAL Launcher</title>
|
<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">
|
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
|
||||||
<link rel="stylesheet" href="../css/index.css" />
|
<link rel="stylesheet" href="../css/index.css" />
|
||||||
<script defer src="../js/render.js"></script>
|
<script defer src="../js/render.js"></script>
|
||||||
|
@ -17,17 +17,32 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div class="row">
|
<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"
|
<a class="nav-link active" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
|
||||||
title="Jak & Daxter: The Precursor Legacy">
|
title="Jak & Daxter: The Precursor Legacy">
|
||||||
<img src="../assets/images/jak-tpl.png" class="nav-img">
|
<img src="../assets/images/jak-tpl.png" class="nav-img">
|
||||||
</a>
|
</a>
|
||||||
<a class="nav-link" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
|
<a class="nav-link" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Jak 2">
|
||||||
title="Jak 2">
|
|
||||||
<img src="../assets/images/jak-2.png" class="nav-img">
|
<img src="../assets/images/jak-2.png" class="nav-img">
|
||||||
</a>
|
</a>
|
||||||
<a class="nav-link" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
|
<a class="nav-link" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right" title="Jak 3">
|
||||||
title="Jak 3">
|
|
||||||
<img src="../assets/images/jak-3.png" class="nav-img">
|
<img src="../assets/images/jak-3.png" class="nav-img">
|
||||||
</a>
|
</a>
|
||||||
<a class="nav-link settings" aria-current="page" href="#" data-bs-toggle="tooltip" data-bs-placement="right"
|
<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" />
|
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>
|
</svg>
|
||||||
</a>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<script src=" https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
|
<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">
|
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
|
||||||
</script>
|
</script>
|
||||||
|
|
Loading…
Reference in a new issue