Browse Source

add menu

master
Milan Pässler 11 months ago
parent
commit
6aee7aa177
4 changed files with 176 additions and 13 deletions
  1. +78
    -0
      client/gitea.svg
  2. +20
    -7
      client/index.html
  3. +2
    -0
      client/src/index.js
  4. +76
    -6
      client/style.css

+ 78
- 0
client/gitea.svg View File

@@ -0,0 +1,78 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
clip-rule="evenodd"
fill-rule="evenodd"
viewBox="0 0 16 16"
version="1.1"
id="svg18">
<metadata
id="metadata24">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs22" />
<circle
style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-opacity:1"
id="path4549"
cx="7.9939022"
cy="8.0060978"
r="7.9939022" />
<g
id="g4559"
transform="translate(-0.6032369,1.3391281)">
<path
style="fill:#609926;fill-opacity:1;stroke-width:0.07592409"
id="path2"
d="m 9.7289322,4.6758624 c 0.7892308,-0.00691 1.7098108,-0.048288 3.2626098,-0.1305135 0.938953,0.021411 -0.327688,5.6464741 -2.019125,5.7731151 H 8.1516852 C 7.5078489,10.249298 6.6382144,8.9364184 6.5571274,8.5558114 5.8180064,8.5394874 3.9691789,8.3511954 3.8852069,6.3218966 3.8315285,5.0231392 4.8027495,4.5048814 5.5275968,4.5070072 c 0.2836524,7.593e-4 0.5476405,0.036292 0.7370711,0.038342 1.5135467,0.08382 2.3105978,0.1312727 3.2165999,0.1315764 l 0.00159,1.6325957 0.24607,0.1222378 z M 11.166631,7.2608499 8.7927122,6.1073352 7.6392735,8.4812534 10.013192,9.6346924 Z M 5.7167237,5.2250973 C 4.7720002,5.1998145 4.5183378,5.7886818 4.5905417,6.3513552 4.7258384,7.4055614 5.4613151,7.6879984 6.325483,7.8022644 5.9867098,6.8729537 5.8193731,6.2647258 5.7167237,5.2250973 Z" />
<g
style="stroke:#000000;stroke-opacity:1"
id="g16"
transform="matrix(0.07592409,0,0,0.07592409,3.4237403,1.9545912)">
<g
style="fill:#609926;fill-opacity:1;stroke:#609926;stroke-opacity:1"
id="g10"
transform="rotate(-19.796103)">
<circle
style="fill:#609926;fill-opacity:1;stroke:#609926;stroke-opacity:1"
id="circle4"
r="3.4749999"
cy="90.078003"
cx="49.064999" />
<circle
style="fill:#609926;fill-opacity:1;stroke:#609926;stroke-opacity:1"
id="circle6"
r="3.4749999"
cy="102.105"
cx="36.810001" />
<circle
style="fill:#609926;fill-opacity:1;stroke:#609926;stroke-opacity:1"
id="circle8"
r="3.4749999"
cy="111.439"
cx="46.484001" />
</g>
<path
style="fill:#609926;fill-opacity:1;stroke:none;stroke-opacity:1"
id="path12"
transform="matrix(0.898609,0.43875,-0.447723,0.916987,0.406685,-0.832937)"
d="m 97.333,18.062 h 2.673 v 27.261 h -2.673 z" />
<path
style="fill:none;fill-opacity:1;stroke:#609926;stroke-width:2.68000007;stroke-opacity:1"
id="path14"
d="m 76.558,68.116 c 12.976,6.396 13.013,4.102 4.891,20.908" />
</g>
</g>
</svg>

+ 20
- 7
client/index.html View File

@@ -8,14 +8,27 @@
<link rel="stylesheet" href="style.css">
</head>
<body>
<input type="checkbox" id="checkbox" checked>
<div id="checkbox-bg">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
</div>
<div id="menu">
<form id="inputs">
<select id="backend">
</select>
<input type="text" id="name">
<input type="submit" id="go" value="Go">
<p class="hidden" id="queued">Queued: <span id="queued-count"></span></p>
</form>
<div class="pusher"></div>
<a id="source-link" href="https://git.pbb.lc/petabyteboy/pkgvis/">
<h2>Fork me on Gitea</h2>
<img src="gitea.svg">
</a>
</div>
<canvas id="canvas"></canvas>
<form id="inputs">
<select id="backend">
</select>
<input type="text" id="name">
<input type="submit" id="go" value="Go">
<p class="hidden" id="queued">Queued: <span id="queued-count"></span></p>
</form>
<noscript>JavaScript is required to use package dependency viewer</noscript>
</body>
<script type="module" src="main.min.js"></script>


+ 2
- 0
client/src/index.js View File

@@ -180,6 +180,8 @@ async function init() {

if (window.location.hash.length) {
goLocationHash();
} else {
document.getElementById("name").focus();
}

window.addEventListener("hashchange", goLocationHash);


+ 76
- 6
client/style.css View File

@@ -2,6 +2,7 @@ body {
margin: 0;
overflow: hidden;
background-color: black;
font-family: sans-serif;
}

canvas {
@@ -9,17 +10,86 @@ canvas {
height: 100vh;
}

#inputs {
.hidden {
display: none !important;
}

#source-link {
display: flex;
text-decoration: none;
color: white;
align-self: center;
}

#source-link img {
width: 64px;
height: 64px;
margin-left: 15px;
}

#queued {
color: white;
font-size: 1em;
}

#menu {
display: none;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.2);
height: 100vh;
padding: 15px;
padding-top: 75px;
box-sizing: border-box;
}

.hidden {
display: none !important;
#checkbox:checked ~ #menu {
display: flex;
}

#queued {
color: white;
fontSize: 10em;
.pusher {
flex-basis: 100%;
}

#checkbox {
width: 50px;
height: 50px;
position: fixed;
z-index: 1;
margin: 0;
top: 0;
left: 0;
opacity: 0;
cursor: pointer;
}

.bar {
width: 32px;
height: 3px;
background-color: black;
margin: 8px 8px;
transition: 0.4s;
}

#checkbox-bg {
padding: 4px 0;
box-sizing: border-box;
height: 50px;
width: 50px;
position: fixed;
top: 0;
left: 0;
background: #eee;
}

#checkbox:checked ~ #checkbox-bg .bar1 {
transform: rotate(-45deg) translate(-8px, 6px);
}
#checkbox:checked ~ #checkbox-bg .bar2 {
opacity: 0;
}
#checkbox:checked ~ #checkbox-bg .bar3 {
transform: rotate(45deg) translate(-8px, -8px);
}

Loading…
Cancel
Save