Merge branch 'web-homepage' into 'master'

Web homepage

See merge request kdam0/helpthehomeless!1

8 files changed, 49 insertions, 22 deletions

diff --git a/web/public/assets/blue-icon-focused.png b/web/public/images/blue-icon-focused.png
index 728d06d..728d06d 100644
--- a/web/public/assets/blue-icon-focused.png
+++ b/web/public/images/blue-icon-focused.png
diff --git a/web/public/assets/blue-icon.png b/web/public/images/blue-icon.png
index e4abba3..e4abba3 100644
--- a/web/public/assets/blue-icon.png
+++ b/web/public/images/blue-icon.png
diff --git a/web/public/images/marker-shadow.png b/web/public/images/marker-shadow.png
new file mode 100644
index 0000000..9fd2979
--- /dev/null
+++ b/web/public/images/marker-shadow.png
diff --git a/web/public/assets/orange-icon-focused.png b/web/public/images/orange-icon-focused.png
index 26d8b52..26d8b52 100644
--- a/web/public/assets/orange-icon-focused.png
+++ b/web/public/images/orange-icon-focused.png
diff --git a/web/public/assets/orange-icon.png b/web/public/images/orange-icon.png
index 4b89e0e..4b89e0e 100644
--- a/web/public/assets/orange-icon.png
+++ b/web/public/images/orange-icon.png
diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js
index 5326bb2..1f18e09 100644
--- a/web/public/javascripts/map.js
+++ b/web/public/javascripts/map.js
@@ -15,10 +15,11 @@ const Races = {
 
 const PendingIcon = new L.Icon({
 	iconAnchor: [ 12, 41 ],
-	iconUrl: "../assets/orange-icon.png",
+	iconUrl: "../images/orange-icon.png",
 	iconSize: [ 25, 41 ],
 	popupAnchor: [ 1, -34 ],
 	shadowSize: [ 41, 41 ],
+	shadowUrl: "../images/marker-shadow.png",
 	tooltipAnchor: [ 16, -28 ]
 });
 
@@ -44,22 +45,22 @@ function plotPointsOnMap(points) {
 function showDetails(e) {
 	if(currPoint !== undefined) {
 		if (currPoint.feature.geometry.status === "new") {
-			currPoint._icon.src = '../assets/blue-icon.png';
+			currPoint._icon.src = '../images/blue-icon.png';
 		}
 		else if (currPoint.feature.geometry.status === "pending") {
-			currPoint._icon.src = '../assets/orange-icon.png';
+			currPoint._icon.src = '../images/orange-icon.png';
 		}
 	}
 
 	// layer.feature.geometry gives you access to all the fields
 	let layer = e.layer;
 	currPoint = layer;
-	
+
 	if (currPoint.feature.geometry.status === "new") {
-		currPoint._icon.src = '../assets/blue-icon-focused.png';
+		currPoint._icon.src = '../images/blue-icon-focused.png';
 	}
 	else if (currPoint.feature.geometry.status === "pending") {
-		currPoint._icon.src = '../assets/orange-icon-focused.png';
+		currPoint._icon.src = '../images/orange-icon-focused.png';
 	}
 
 	const pointBounds = [currPoint.getLatLng()];
@@ -128,13 +129,13 @@ function markAsPending(e) {
 	let currPointId = currPointDetails._id;
 	if (currPointDetails.status === "pending") return;
 
-	currPoint._icon.src = '../assets/orange-icon-focused.png';
+	currPoint._icon.src = '../images/orange-icon-focused.png';
 	currPointDetails.status = "pending";
 
 	updatePointStatusInDb(currPointId, "pending")
 		.then(function(responseJson) {
 			alert("Your change has been saved.");
-			currPoint._icon.src = '../assets/orange-icon-focused.png';
+			currPoint._icon.src = '../images/orange-icon-focused.png';
 		})
 		.catch(function(error) {
 			alert(error);
@@ -163,11 +164,12 @@ function closeDetails(e) {
 	details.style.visibility = 'hidden';
 
 	if (currPoint.feature.geometry.status === "pending") {
-		currPoint._icon.src = '../assets/orange-icon.png';
+		currPoint._icon.src = '../images/orange-icon.png';
 	}
 	else if (currPoint.feature.geometry.status === "new") {
-		currPoint._icon.src = '../assets/blue-icon.png';
+		currPoint._icon.src = '../images/blue-icon.png';
 	}
+	map.fitBounds(latlngbounds.pad(0.20));
 }
 
 // returns a Promise object
@@ -200,7 +202,10 @@ L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}{r}
 // map to fit them all
 var latlngbounds = new L.latLngBounds();
 
-plotPointsOnMap(points);
+if (points.length) {
+	plotPointsOnMap(points);
+}
+// setup live updates
 if (window.EventSource) {
 	var source = new EventSource('/stream');
 
diff --git a/web/public/stylesheets/home.css b/web/public/stylesheets/home.css
new file mode 100644
index 0000000..28251ed
--- /dev/null
+++ b/web/public/stylesheets/home.css
@@ -0,0 +1,18 @@
+body {
+  background-color: #faf2e4;
+  margin: 0 15%;
+  font: 18px sans-serif;
+}
+
+h1 {
+  text-align: center;
+  font-family: serif;
+  font-weight: normal;
+  border-bottom: 1px solid #57b1dc;
+  margin-top: 30px;
+}
+
+h2 {
+  color: #d1633c;
+  font-family: serif;
+}
diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css
index 5f39fcf..fd6ed87 100644
--- a/web/public/stylesheets/style.css
+++ b/web/public/stylesheets/style.css
@@ -21,11 +21,14 @@ a {
   left: 5px;
   z-index: 2;
   width: 350px;
+  height: 99vh;
   position: relative;
   float: left;
-  background-color: lightgrey;
+  background-color: #7b7b7b33;
   border-radius: 10px;
   visibility: hidden;
+  display: flex;
+  flex-direction: column;
 }
 #details-header {
   text-align: center;
@@ -34,15 +37,16 @@ a {
 }
 #report-container {
   overflow: auto;
-  max-height: 500px;
+  height: 80vh;
 }
 #report {
-  background-color: #0CC5EA;
+  background-color: #5694AD;
+  box-shadow: 10px 10px 8px -5px #888;
   width: 90%;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 5px;
-  padding: 5px;
+  padding: 0px;
   border-radius: 10px;
   display: flex;
   justify-content: flex-end;
@@ -57,7 +61,6 @@ a {
 #report span {
   background-color: white;
   padding: 15px;
-  border-radius: 10px;
   font-weight: lighter;
   font-size: large;
   text-align: center;
@@ -65,13 +68,14 @@ a {
   word-wrap: break-word;
 }
 #btn-container {
-  height: 30px;
-  top: 250px;
-  background-color: lightgrey;
   width: 350px;
-  border-bottom-left-radius: 10px;
-  border-bottom-right-radius: 10px;
-  text-align: center;
+  position: absolute;
+  bottom: 0;
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+#btn-container button {
+  box-shadow: 5px 5px 8px #888;
 }
 .details-btn {
   position: relative;