added css changes for support to 1366 resolution

css/app.css

@@ -14,7 +14,9 @@ nav {
   padding: 0px;
   margin: 0px;
   height: 20px;
-  width: 1600px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   border: 0px;
   text-align: center;
 }
@@ -43,15 +45,13 @@ nav {
   border-bottom: 2px solid black;
 }
 #grid-container {
-  margin-left: 50px;
   margin-top: 10px;
 }
 .path-grid {
-  width: 1600px;
-  margin-left: 30px;
   margin-top: 5px;
-  margin-right: 5px;
-  float: left;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 #col_0 {
@@ -79,12 +79,13 @@ nav {
 }
 
 #setting-buttons {
-  margin-right: 50px;
-  float: left;
+  margin: 10px;
+  align-self: left;
 }
 
 #legend {
   display: inline;
+  margin: 5px;
 }
 .legend-elem {
   height: 20px !important;
@@ -104,8 +105,9 @@ nav {
 
 #top-elem {
   margin-top: 10px;
-  margin-left: 30px;
-  float: left;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 #visited-legend {
   background-color: skyblue;
@@ -125,10 +127,12 @@ nav {
 }
 
 .modal-content {
-  width: 800px;
+  width: 50vw;
   height: 800px;
   position: absolute;
-  top: 10vh;
+  top: 0px !important;
+  margin: 0px !important;
+  opacity: 0.9;
 }
 #modal-header-content {
   margin-right: 400px;

index.html

@@ -42,19 +42,18 @@
       </nav>
       <div id = 'grid-container' class='container'></div>
         <div id = 'top-elem' class='container-fluid'>
-          <p id='setting-buttons'>
+          <div id='setting-buttons'>
             <button id = 'wall' class='btn btn-dark'>Build Wall</button>
             <button id = 'maze' class='btn btn-dark'>Draw Maze</button>
             <button id = 'start' class='btn btn-dark'>Start</button>
-          </p>
-          <p id="legend">
+          </div>
+          <div id="legend">
             <img id='src-legend' class = 'legend-elem' src="images/source.png"><h6 class = 'legend-text'>:Source</h6>
             <img id='dest-legend'class = 'legend-elem' src="images/destination.png"><h6 class = 'legend-text'>:Destination</h6>
             <div id='grid-legend' class='grid-element legend-elem'></div><h6 class = 'legend-text'>:Empty Node</h6>
             <div id='visited-legend' class='grid-element legend-elem'></div><h6 class = 'legend-text'>:Visited Node</h6>
             <div id='wall-legend' class='grid-element legend-elem'></div><h6 class = 'legend-text'>:Wall Node</h6>
             <div id='path-legend' class='grid-element legend-elem'></div><h6 class = 'legend-text'>:Path Taken</h6>
-          </p>
         </div>
         <div class="container-fluid path-grid">
 

js/constants.js

@@ -1,10 +1,10 @@
-const numRows = 40;
-const numCols = 80;
+const numRows = 25;
+const numCols = 70;
 var allNodes = new Array(numRows);
 
 // when document ready we need to track the source and destination
 // current selection is for the button that is currently active
-var currentSelection = '';
+var currentSelection = "";
 var currentSource = 0;
 var currentDestination = 0;
-var currentRun = 0;
+var currentRun = 0;