Skip to content

Commit ee594dc

Browse files
author
cdris
committed
collapsing menu, fixed offset
1 parent 3783c9e commit ee594dc

File tree

4 files changed

+242
-61
lines changed

4 files changed

+242
-61
lines changed

‎css/weave.css

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
html, body {
2+
width: 100%;
3+
height: 100%;
4+
}
5+
6+
body {
7+
background-color: black;
8+
}
9+
10+
svg {
11+
width: 100%;
12+
height: 100%;
13+
}
14+
15+
#controls-container {
16+
position: fixed;
17+
width: 100%;
18+
}
19+
20+
#controls {
21+
background-color: lightgrey;
22+
box-shadow: 0px 0px 10px grey;
23+
}
24+
25+
#color-inputs {
26+
text-align: right;
27+
}
28+
29+
#buttons {
30+
padding: 5px;
31+
float: right;
32+
}
33+
34+
.perm-button {
35+
display: inline-block;
36+
text-align: center;
37+
background-color: lightgrey;
38+
color: white;
39+
width: 40px;
40+
height: 40px;
41+
border-radius: 20px;
42+
box-shadow: 0px 0px 5px grey;
43+
}
44+
45+
.perm-button .fa {
46+
padding: 11px;
47+
}
48+
49+
.perm-button:hover {
50+
background-color: grey;
51+
}

‎index.html

+41-7
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,52 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<link rel="stylesheet" href="css/weave.css">
6+
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
58
</head>
69
<body>
7-
<div style="background-color: lightgrey">
8-
<form onSubmit="weave(); return false;">
9-
Data: <input type="file" id="files" name="files"><br>
10-
Width: <input type="number" id="width" name="width"><br>
11-
Heddles: <input type="number" id="heddles" name="heddles"><br>
12-
<input type="submit">
13-
</form>
10+
<div id="controls-container">
11+
<div id="controls" class="container-fluid p-3">
12+
<form onSubmit="return false;">
13+
<div class="form-group row">
14+
<label for="files" class="col-2 col-form-label">Data</label>
15+
<input type="file" id="files" name="files" class="form-control col-10">
16+
</div>
17+
<div class="form-group row">
18+
<label for="width" class="col-2">Width</label>
19+
<input type="number" id="width" name="width" class="col-10">
20+
</div>
21+
<div class="form-group row">
22+
<label for="heddles" class="col-2">Heddles</label>
23+
<input type="number" id="heddles" name="heddles" class="col-10">
24+
</div>
25+
<div id="color-inputs" class="form-group row">
26+
<label for="background-color" class="col-2">Background Color</label>
27+
<input type="color" id="background-color" name="background-color" class="col-1">
28+
<label for="warp-color" class="col-3">Warp Color</label>
29+
<input type="color" id="warp-color" name="warp-color" class="col-1">
30+
<label for="weft-color" class="col-3">Weft Color</label>
31+
<input type="color" id="weft-color" name="weft-color" class="col-1">
32+
</div>
33+
<button id="weave-btn" type="submit" class="btn btn-primary">Weave!</button>
34+
</form>
35+
</div>
36+
<div id="buttons">
37+
<div id="play-pause" class="perm-button">
38+
<span class="fa fa-play"></span>
39+
</div>
40+
<div id="show-hide" class="perm-button">
41+
<span class="fa fa-chevron-up"></span>
42+
</div>
43+
</div>
1444
</div>
45+
<svg id="svg-view"></svg>
46+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
47+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
1548
<script src="https://d3js.org/d3.v4.min.js"></script>
1649
<script src="js/snap.svg-min.js"></script>
50+
<script src="js/svg-pan-zoom.min.js"></script>
1751
<script src="js/weave.js"></script>
1852
</body>
1953
</html>

0 commit comments

Comments
 (0)