css changes related to legend

Ankur19 · Dec 14, 2019 · 8419842 · 8419842
1 parent 82d303d
commit 8419842
Show file tree

Hide file tree

Showing 6 changed files with 549 additions and 487 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}
diff --git a/css/app.css b/css/app.css
@@ -1,69 +1,109 @@
-@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
+@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css");
 
 body {
-    margin:0;
-    padding:0;
-    height:100%;
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  width: 100%;
 }
-nav{
-    border-bottom:1px solid black;
+nav {
+  border-bottom: 1px solid black;
+  background-color: indigo;
 }
-.grid-row{
-    padding:0px;
-    margin:0px;
-    height:20px;
-    width:1600px;
-
+.grid-row {
+  padding: 0px;
+  margin: 0px;
+  height: 20px;
+  width: 1600px;
 }
-.grid-row-div{
-    margin:0;
-    padding:0;
-    height:20px;
+.grid-row-div {
+  margin: 0;
+  padding: 0;
+  height: 20px;
 }
 
-.grid-element{
-    width:20px;
-    height:20px;
-    padding:0px;
-    margin:0px;
-    border:1px solid grey;
-    border-top:0px solid grey;
-    border-left:0px solid grey;
-    display:inline-block;
-}
-.path-grid{
-    width:1600px;
+.grid-element {
+  width: 20px;
+  height: 20px;
+  padding: 0px;
+  margin: 0px;
+  border: 1px solid grey;
+  border-top: 0px solid grey;
+  border-left: 0px solid grey;
+  display: inline-block;
+}
+#grid-container {
+  margin-left: 50px;
+  margin-top: 10px;
+}
+.path-grid {
+  width: 1600px;
+  margin-left: 30px;
+  margin-top: 5px;
+  margin-right: 5px;
+  float: left;
 }
 
-#row_0{
-    border-top:1px solid grey;
+#row_0 {
+  border-top: 1px solid grey;
 }
 
-#col_0{
-    border-left:1px solid grey;
+#col_0 {
+  border-left: 1px solid grey;
 }
-button{
-    float:left;
-    padding:5px;
+
+.pointer-image {
+  height: 19px;
+  width: 19px;
+  margin: 0px;
+  padding: 0px;
+  display: none;
+}
+
+.circle-animation {
+  margin: 0px;
+  padding: 0px;
+  background-color: skyblue;
+  height: 0px;
+  width: 0px;
+  border-radius: 50%;
 }
 
-.pointer-image{
-    height:19px;
-    width:19px;
-    margin:0px;
-    padding:0px;
-    display:none;
+#setting-buttons {
+  margin-right: 50px;
+  float: left;
 }
 
-#legend{
-    margin:20px;
+#legend {
+  display: inline;
+}
+.legend-elem {
+  height: 20px !important;
+  width: 20px !important;
+  margin: 10px;
+  border: 1px solid grey;
+  float: left;
+}
+.legend-text {
+  width: 150px;
+  height: 20px;
+  float: left;
+  margin-top: 10px;
+  margin-left: 0px;
+  margin-right: 10px;
 }
 
-.circle-animation{
-    margin:0px;
-    padding:0px;
-    background-color:skyblue;
-    height:0px;
-    width:0px;
-    border-radius:50%;
+#top-elem {
+  margin-top: 10px;
+  margin-left: 30px;
+  float: left;
+}
+#visited-legend {
+  background-color: skyblue;
+}
+#wall-legend {
+  background-color: black;
+}
+#path-legend {
+  background-color: yellow;
 }
diff --git a/html/index.html b/html/index.html
@@ -8,7 +8,7 @@
     <link rel="stylesheet" href="../css/app.css">
 </head>
 <body>
-    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+    <nav class="navbar navbar-expand-lg navbar-dark">
         <a class="navbar-brand" href="#">Path Finder</a>
         <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
           <span class="navbar-toggler-icon"></span>
@@ -30,21 +30,25 @@
           </ul>
         </div>
       </nav>
-      <div class='container'>
-        <p id='setting-buttons'>
-          <button id = 'wall' class='btn btn-light'>Build Wall</button>
-          <button id = 'maze' class='btn btn-light'>Draw Maze</button>
-          <button id = 'start' class='btn btn-light'>Start</button>
-        </p>
-        <br>
-        <p id='legend'>
-
+      <div id = 'grid-container' class='container'></div>
+        <div id = 'top-elem' class='container-fluid'>
+          <p 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">
+            <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">
 
-        </p>
-      </div>
-      <p></p>
-      <div class="container-fluid path-grid">
-
+        </div>
       </div>
       <input id='current-algo' value='shortest_path' hidden></input>
     <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>