Added functionality so that whenever a point is clicked it opens up a Details sidebar which shows information about that point.

1 files changed, 29 insertions, 5 deletions

diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css
index c3bd05c..0cb3232 100644
--- a/web/public/stylesheets/style.css
+++ b/web/public/stylesheets/style.css
@@ -3,9 +3,10 @@ html, body {
   overflow: hidden;
 }
 #map {
-  width: 65%;
+  width: 100%;
   height: 100%;
-  float: right;
+  position: absolute;
+  z-index: 1;
 }
 body {
   margin:0;
@@ -16,10 +17,33 @@ a {
   color:#00B7FF;
 }
 #sidebar {
-  width: 35%;
-  height: 100%;
+  top: 5px;
+  left: 5px;
+  z-index: 2;
+  width: 350px;
+  height: 250px;
+  max-height: 250px;
+  overflow: auto;
+  position: relative;
   float: left;
-  background-color: #e70000;
+  background-color: lightgrey;
+  border-radius: 10px;
+}
+#point {
+  background-color: #0CC5EA;
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 5px;
+  border-radius: 10px;
+}
+#close-btn {
+  background-color: red;
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+  border-radius: 10px;
+  width: 100px;
 }
 h1 {
   text-align: center;