forked from google/ezgantt
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
100 lines (93 loc) · 3.35 KB
/
index.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
<!DOCTYPE html>
<!--suppress HtmlUnknownAnchorTarget -->
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="data:;base64,iVBORw0KGgo=" rel="shortcut icon">
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="//www.gstatic.com/external_hosted/material_design_lite/mdl_css-blue_grey-light_blue-bundle.css" rel="stylesheet">
<script src="//www.gstatic.com/external_hosted/material_design_lite/mdl_all_js_compiled.js"></script>
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<script src="https://apis.google.com/js/api.js"></script>
<script type="module" src="js/ezgantt.js"></script>
<style>
#chart_div {
height: 8000px;
width: 100%;
background-color: #efe;
}
body {
height: 500vh;
margin: 0;
overflow: auto;
}
#chart_div{
zoom: 0.7;
-moz-transform: scale(0.7);
-moz-transform-origin: 0 0;
}
.cursor {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
pointer-events: none;
}
.vt {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: rgba(0, 0, 0, 0.3);
}
.hl {
position: absolute;
height: 1px;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.3);
}
</style>
<title>Easy Gantt Chart (ezGantt)</title>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title" id="pageTitle">Easy Gantt Chart</span>
<div class="mdl-layout-spacer"></div>
<a class="mdl-navigation__link" href="" id="sheet" target="_blank">Edit</a>
</div>
</header>
<main class="mdl-layout__content">
<div class="page-content">
<div id="chart_div"></div>
<div class="cursor">
<div class="vt"></div>
<div class="hl"></div>
</div>
</div>
</main>
</div>
<dialog id="instructions-dialog">
<p>View <a href="/#1kYfoEFXW-psZ8AMy0Ne7wRMiM3umNKBs3v9U7nvafXA" target="_blank">working demo and starter spreadsheet</a>.</p>
<p>To make your own:</p>
<ol>
<li>Copy the <a href="https://docs.google.com/spreadsheets/d/115LiK3_0uf8FnulnTGtAgAbrd_tWPcTqFiyzngCowkc/edit#gid=0" target="_blank">spreadsheet</a>, be sure NOT to share it
with me!</li>
<li>Edit it, following the rules in the notes - especially the date and dependency rules!
<ol>
<li>Every Task needs <strong>exactly two</strong> of these fields: a 'Start Date', 'End Date', 'Duration', 'Dependencies'</li>
<li>Add a "#" in your TaskName if you want to add rows to your worksheet with "comments" that don't affect the Gantt Chart </li>
<li>You MUST keep the word 'gantt' in the worksheet name! Feel free to add more worksheet tabs, but the 'gantt' tab will be used for the Gantt Chart.</li>
</ol>
</li>
<li>View your Gantt Chart with the "ezGantt" menu in the spreadsheet (or at https://ezgantt.appspot.com/<strong>#</strong>YOUR_SPREADSHEET_KEY <i>(where the key is
https://docs.google.com/spreadsheets/d/<strong>[this part is the key]</strong>/edit -- Don't forget the "#" hash!)</i> </li>
</ol>
</dialog>
</body>
</html>