Add dashboard to the top

dvw16101 · Dec 6, 2020 · 134398b · 134398b
1 parent 8b6ba86
commit 134398b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/css/styles.css b/css/styles.css
@@ -10355,16 +10355,15 @@ body {
 
 /* The sidebar menu */
 .sidebar {
-  height: 100%; /* 100% Full-height */
-  width: 0; /* 0 width - change this with JavaScript */
+  height: 0; /* 100% Full-height */
+  width: 100%; /* 0 width - change this with JavaScript */
   position: fixed; /* Stay in place */
   z-index: 1; /* Stay on top */
   top: 0;
   left: 0;
   background-color: #111; /* Black*/
   opacity:0.5;
   overflow-x: hidden; /* Disable horizontal scroll */
-  padding-top: 60px; /* Place content 60px from the top */
   transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
 }
 

diff --git a/index.html b/index.html
@@ -76,7 +76,7 @@ <h2 class="text-white mb-4">DDD Filter applications in the Network</h2>
                   <!--THIS IS THE SIDEBAR. I ALSO ADDED THE BUTTONS TO IT AS WELL-->
                   <div id="mySidebar" class="sidebar">
                     <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
-                <form>
+                <form style="float:left; padding-top: 30px;"">
                       <label>Number of Packets:</label><br>
                       <input type="number" id="npackets" name="npackets" value=3><br>
 
@@ -85,32 +85,35 @@ <h2 class="text-white mb-4">DDD Filter applications in the Network</h2>
 
                       <label>Number of Ports</label><br>
                       <input type="number" id="nports" name="nports" value=3><br>
-                  </form>
-
-                  <div class="slidecontainer">
+<div class="slidecontainer">
                     <span>Fastest</span>
                     <input type="range" min="1" max="5" value="1" class="slider" id="myRange">
                     <span>Slowest</span>
                   </div>
-                  <p><button onclick="startSimulation()">Start Simulation</button></p>
+                  </form>
+
+
+                  <div style="float:left; padding-top: 40px; padding-left: 20px;">
+                  <p ><button onclick="startSimulation()">Start Simulation</button></p>
                   <p><button onclick="pauseSimulation()">Pause Simulation</button></p>
                   <p><button onclick="resumeSimulation()">Resume Simulation</button></p>
                   <p><button onclick="stopSimulation()">Stop Simulation</button></p>
                   </div>
+                  </div>
 
                   <div id="main">
                     <button class="openbtn" onclick="openNav()">☰</button>
                   </div>
 
                   <script>
                     function openNav() {
-                      document.getElementById("mySidebar").style.width = "450px";
-                      document.getElementById("main").style.marginLeft = "250px";
+                      document.getElementById("mySidebar").style.height = "250px";
+                      document.getElementById("main").style.marginTop = "150px";
                     }
 
                     function closeNav() {
-                      document.getElementById("mySidebar").style.width = "0";
-                      document.getElementById("main").style.marginLeft= "0";
+                      document.getElementById("mySidebar").style.height = "0";
+                      document.getElementById("main").style.marginTop= "0";
                     }
                     </script>