-
Notifications
You must be signed in to change notification settings - Fork 8
/
template.ejs
137 lines (129 loc) · 2.75 KB
/
template.ejs
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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!doctype html>
<html>
<head>
<title>Domain Model Visualizer</title>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
height: 100%;
margin: 0;
padding-top: 60px;
font-family: 'helvetica neue', helvetica, arial, sans-serif;
}
#mynetwork {
width: 100%;
height: 700px;
border: 1px solid lightgray;
margin: 0 auto;
}
body #header {
background-color: #08592b !important;
position: fixed;
width: 100%;
top: 0;
font-family: 'helvetica neue', helvetica, arial, sans-serif !important;
color: white;
font-size: 1.5em;
font-weight: bold;
height: 60px;
padding-top: 10px;
}
body #header a#logo {
font-size: 1.5em;
font-weight: bold;
text-decoration: none;
color: white;
padding: 20px 0 20px 60px !important;
}
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 30%;
height: 50%;
padding: 20px;
border-radius: 5px;
background-color: white;
font-family: 'helvetica neue', helvetica, arial, sans-serif !important;
z-index:1002;
overflow: auto;
}
.close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.close:hover {
color: #06D85F;
}
</style>
</head>
<body>
<div id='header'>
<div class="swagger-ui-wrap">
<a id="logo">Domain Model Visualizer</a>
</div>
</div>
<div id="mynetwork"></div>
<script type="text/javascript">
// create an array with nodes
var nodes = new vis.DataSet(<%- JSON.stringify(nodes, ["id", "label", "title"]) %>);
// create an array with edges
var edges = new vis.DataSet(<%- JSON.stringify(edges) %>);
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
nodes: {
shape: 'dot',
borderWidth: 1,
scaling: {
label: {
min: 2000
}
},
font: {
color: '#343434',
size: 15, // px
face: 'arial',
background: 'none',
strokeWidth: 0, // px
strokeColor: '#ffffff',
align: 'left'
}
},
layout: {
randomSeed: 2,
improvedLayout: true
}
}
var network = new vis.Network(container, data, options);
</script>
<div id="light" class="white_content">
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>