Skip to content

Commit 73cf6d6

Browse files
NithishRajaNithishRaja
authored
Merge pull request #3 from virtual-labs/dev
update styles
2 parents dab945a + 4c701d3 commit 73cf6d6

File tree

3 files changed

+232
-5
lines changed

3 files changed

+232
-5
lines changed

‎experiment/simulation/css/main.css‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,168 @@
11
/* You CSS goes in here */
2+
3+
@media (min-width:402px) {
4+
#toggle-button-menu {
5+
display: none;
6+
}
7+
8+
.body-padding {
9+
padding: 100px;
10+
}
11+
}
12+
13+
@media (max-width: 401px) {
14+
15+
.body-padding {
16+
padding-top: 100px;
17+
padding-left: 0px;
18+
padding-right: 0px;
19+
}
20+
21+
.control-container-hide {
22+
display: none;
23+
position: fixed;
24+
top: 80px;
25+
left: 0;
26+
z-index: 1050;
27+
width: 100%;
28+
height: 100%;
29+
overflow: hidden;
30+
outline: 0;
31+
}
32+
33+
.control-container-show {
34+
position: fixed;
35+
top: 80px;
36+
left: 0;
37+
z-index: 1050;
38+
width: 100%;
39+
height: 100%;
40+
overflow: hidden;
41+
outline: 0;
42+
}
43+
44+
.instruction-container-background {
45+
background-color: #f1f1f1;
46+
}
47+
48+
.instruction-container-hide {
49+
display: none;
50+
position: fixed;
51+
top: 80px;
52+
left: 0;
53+
z-index: 1050;
54+
width: 100%;
55+
height: 100%;
56+
overflow: hidden;
57+
outline: 0;
58+
}
59+
60+
.instruction-container-show {
61+
position: fixed;
62+
top: 80px;
63+
left: 0;
64+
z-index: 1050;
65+
width: 100%;
66+
height: 100%;
67+
overflow: hidden;
68+
outline: 0;
69+
}
70+
71+
.trace-container-hide {
72+
display: none;
73+
position: fixed;
74+
top: 80px;
75+
left: 0;
76+
z-index: 1050;
77+
width: 100%;
78+
height: 100%;
79+
overflow: hidden;
80+
outline: 0;
81+
}
82+
83+
.trace-container-show {
84+
position: fixed;
85+
top: 80px;
86+
left: 0;
87+
z-index: 1050;
88+
width: 100%;
89+
height: 100%;
90+
overflow: hidden;
91+
outline: 0;
92+
}
93+
94+
#toggle-button-menu {
95+
position: fixed;
96+
top: 0px;
97+
left: 0px;
98+
display: flex;
99+
padding: 10px;
100+
flex-direction: row;
101+
justify-content: space-between;
102+
z-index: 1;
103+
width: 100%;
104+
/* background-color: darkred;*/
105+
}
106+
107+
.toggle-control-menu {
108+
/* position: fixed;*/
109+
/*top: 20px;
110+
left: 20px;*/
111+
z-index: 1;
112+
padding: 0.8em 1em;
113+
transform: scale(0.9);
114+
115+
border: none;
116+
color: #fff;
117+
background-color: #288ec8;
118+
text-align: center;
119+
font-size: 1.05rem;
120+
border-radius: 1em;
121+
padding: 0.6em 1.2em;
122+
cursor: pointer;
123+
}
124+
125+
.toggle-stack-trace-menu {
126+
/* position: fixed;*/
127+
/*top: 20px;
128+
right: 20px;*/
129+
z-index: 1;
130+
padding: 0.8em 1em;
131+
transform: scale(0.9);
132+
133+
border: none;
134+
color: #fff;
135+
background-color: #288ec8;
136+
text-align: center;
137+
font-size: 1.05rem;
138+
border-radius: 1em;
139+
padding: 0.6em 1.2em;
140+
cursor: pointer;
141+
}
142+
143+
.toggle-instruction-menu {
144+
/* position: fixed;*/
145+
/*top: 20px;
146+
right: 20px;*/
147+
z-index: 1;
148+
padding: 0.8em 1em;
149+
transform: scale(0.9);
150+
151+
border: none;
152+
color: #fff;
153+
background-color: #288ec8;
154+
text-align: center;
155+
font-size: 1.05rem;
156+
border-radius: 1em;
157+
padding: 0.6em 1.2em;
158+
cursor: pointer;
159+
}
160+
161+
}
162+
163+
164+
165+
2166
.v-button { margin-bottom: 5px; width: inherit;}
3167

4168
.window { z-index:20; }

‎experiment/simulation/index.html‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width">
46
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/virtual-labs/virtual-style@0.0.8-b/css/style.min.css">
57
<link rel="stylesheet" href="./css/main.css">
68
</head>
7-
<body style="padding:100px;">
9+
<body class="body-padding">
810
<div class="container">
911
<div class="columns is-centered">
10-
<div class="column">
11-
<div class="v-collapsible-instruction-container v-instruction-container">
12+
<div id="instruction-container" class="column instruction-container-hide">
13+
<div class="v-collapsible-instruction-container v-instruction-container instruction-container-background">
1214
<div id="instruction-title" class="v-collapsible is-size-5">Instructions<br>Conversion of REGEX to NFA</div>
1315
<div class="v-content" style="text-align: left; padding-left: 10%; padding-right: 10%;">
1416
<ul style="list-style: disc;">
@@ -24,7 +26,7 @@
2426
</div>
2527

2628
<div class="columns is-centered is-flex-direction-row is-flex-wrap-wrap is-align-content-start">
27-
<div class="column is-2-desktop is-12-tablet is-12-mobile">
29+
<div id="control-container" class="column is-2-desktop is-12-tablet is-12-mobile control-container-hide">
2830
<div class="v-datalist-container" style="height:400px;">
2931
<div class="v-datalist-title">Controls</div>
3032
<div class="v-datalist-row" id="toolbar"
@@ -59,7 +61,7 @@
5961
</div>
6062
</div>
6163
</div>
62-
<div class="column is-3-desktop is-12-tablet is-12-mobile">
64+
<div id="trace-container" class="column is-3-desktop is-12-tablet is-12-mobile trace-container-hide">
6365
<div class="v-datalist-container" style="height:400px;" id="stack_container">
6466
<ul id="stack_list" style="height:400px;overflow-y:auto;">
6567

@@ -68,6 +70,12 @@
6870
</div>
6971
</div>
7072

73+
<div id="toggle-button-menu">
74+
<button id="regex-controls-toggle" class="toggle-control-menu">Controls</button>
75+
<button id="regex-instructions-toggle" class="toggle-instruction-menu">Instructions</button>
76+
<button id="regex-stack-trace-toggle" class="toggle-stack-trace-menu">Trace</button>
77+
</div>
78+
7179
<script src="https://cdn.jsdelivr.net/gh/virtual-labs/virtual-style@0.0.8-b/js/script.js"></script>
7280
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
7381
<script src="./js/helper.js"></script>

‎experiment/simulation/js/main.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,4 +126,59 @@ window.addEventListener('load', function(e){
126126
}
127127
});
128128

129+
controlContainerDisplay = 0;
130+
instructionContainerDisplay = 0;
131+
traceContainerDisplay = 0;
132+
133+
controlsToggle = document.getElementById("regex-controls-toggle");
134+
controlsToggle.addEventListener("click", function(e){
135+
136+
controlContainer = document.getElementById("control-container");
137+
138+
if(controlContainerDisplay == 0){
139+
controlContainer.classList.remove("control-container-hide");
140+
controlContainer.classList.add("control-container-show");
141+
controlContainerDisplay = 1;
142+
}else{
143+
controlContainer.classList.remove("control-container-show");
144+
controlContainer.classList.add("control-container-hide");
145+
controlContainerDisplay = 0;
146+
}
147+
148+
});
149+
150+
instructionToggle = document.getElementById("regex-instructions-toggle");
151+
instructionToggle.addEventListener("click", function(e){
152+
153+
instructionContainer = document.getElementById("instruction-container");
154+
155+
if(instructionContainerDisplay == 0){
156+
instructionContainer.classList.remove("instruction-container-hide");
157+
instructionContainer.classList.add("instruction-container-show");
158+
instructionContainerDisplay = 1;
159+
}else{
160+
instructionContainer.classList.remove("instruction-container-show");
161+
instructionContainer.classList.add("instruction-container-hide");
162+
instructionContainerDisplay = 0;
163+
}
164+
165+
});
166+
167+
traceToggle = document.getElementById("regex-stack-trace-toggle");
168+
traceToggle.addEventListener("click", function(e){
169+
170+
traceContainer = document.getElementById("trace-container");
171+
172+
if(traceContainerDisplay == 0){
173+
traceContainer.classList.remove("trace-container-hide");
174+
traceContainer.classList.add("trace-container-show");
175+
traceContainerDisplay = 1;
176+
}else{
177+
traceContainer.classList.remove("trace-container-show");
178+
traceContainer.classList.add("trace-container-hide");
179+
traceContainerDisplay = 0;
180+
}
181+
182+
});
183+
129184
});

0 commit comments

Comments
 (0)