-
Notifications
You must be signed in to change notification settings - Fork 0
/
grid.html
102 lines (94 loc) · 4.02 KB
/
grid.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Grid Gantt Chart</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/css/tooltipster.bundle.min.css" integrity="sha512-RwhQzi0EhwZ9hHs18SqM7ICqW/MH/B17PouhdCuzaUQYEdx2S4WPgkhLeZPvGr2Kb1FIm4gaIbMJGwZtxDCLQA==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/css/plugins/tooltipster/sideTip/themes/tooltipster-sideTip-shadow.min.css" integrity="sha512-WlhUr4Ws2d58yPFOazaSH+/XQXYHOwX0j5ppo6yWaymU6w5Nfk68tGyIVfUw0/RA/tlmfFTcr0AO8hWwKu5KJA==" crossorigin="anonymous" />
<link rel="stylesheet" href="./assets/css/grid.css" />
</head>
<body translate="no" >
<div class="wrapper">
<div class="gantt">
<div class="gantt__row gantt__row--months">
<div class="gantt__row-first"></div>
<span>Jan</span><span>Feb</span><span>Mar</span>
<span>Apr</span><span>May</span><span>Jun</span>
<span>Jul</span><span>Aug</span><span>Sep</span>
<span>Oct</span><span>Nov</span><span>Dec</span>
</div>
<div class="gantt__row gantt__row--lines" data-month="5">
<span></span><span></span><span></span>
<span></span><span></span><span></span>
<span></span><span class="marker"></span><span></span>
<span></span><span></span><span></span>
</div>
<div class="gantt__row">
<div class="gantt__row-first">
Barnard Posselt
</div>
<ul class="gantt__row-bars">
<li style="grid-column: 4/11; background-color: #2ecaac;" class="tooltip" title="This is my span's <br/>Rtooltip message!">
Even longer project
</li>
</ul>
</div>
<div class="gantt__row">
<div class="gantt__row-first">
Ryley Huggons
</div>
<ul class="gantt__row-bars"></ul>
</div>
<div class="gantt__row">
<div class="gantt__row-first">
Lanie Erwin
</div>
<ul class="gantt__row-bars">
<li style="grid-column: 2/5; background-color: #2ecaac;">Start Februar 🙌</li>
</ul>
</div>
<div class="gantt__row">
<div class="gantt__row-first">
Krishnah Pauleit
</div>
<ul class="gantt__row-bars"></ul>
</div>
<div class="gantt__row">
<div class="gantt__row-first">
Hobard Lampitt
</div>
<ul class="gantt__row-bars"></ul>
</div>
<div class="gantt__row">
<div class="gantt__row-first">
Virgilio Jeanes
</div>
<ul class="gantt__row-bars">
<li style="grid-column: 2/5; background-color: #2ecaac;"></li>
</ul>
</div>
<div class="gantt__row">
<div class="gantt__row-first">
Ky Verick
</div>
<ul class="gantt__row-bars">
<li style="grid-column: 3/8; background-color: #54c6f9;">Long project</li>
</ul>
</div>
<div class="gantt__row">
<div class="gantt__row-first">
Ketti Waterworth
</div>
<ul class="gantt__row-bars">
<li style="grid-column: 4/9; background-color: #ff6252;" class="tooltip" title="This is my span's <br/>Rtooltip message!">A title</li>
</ul>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tooltipster/4.2.8/js/tooltipster.bundle.min.js" integrity="sha512-ZKNW/Nk1v5trnyKMNuZ6kjL5aCM0kUATbpnWJLPSHFk/5FxnvF9XmpmjGbag6BEgmXiz7rL6o6uJF6InthyTSg==" crossorigin="anonymous"></script>
<script src="./assets/js/grid.js"></script>
</body>
</html>