From 14f3642f1ea4d32c17d56ffebf5cfd14fb5f5f2c Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Thu, 18 Apr 2019 21:20:51 -0400 Subject: web ui updates --- web/README.md | 1 + web/public/assets/blue-icon-focused.png | Bin 4220 -> 0 bytes web/public/assets/blue-icon.png | Bin 2586 -> 0 bytes web/public/assets/orange-icon-focused.png | Bin 7428 -> 0 bytes web/public/assets/orange-icon.png | Bin 12341 -> 0 bytes web/public/images/blue-icon-focused.png | Bin 0 -> 4220 bytes web/public/images/blue-icon.png | Bin 0 -> 2586 bytes web/public/images/marker-shadow.png | Bin 0 -> 618 bytes web/public/images/orange-icon-focused.png | Bin 0 -> 7428 bytes web/public/images/orange-icon.png | Bin 0 -> 12341 bytes web/public/javascripts/map.js | 21 +++++++++++---------- web/public/stylesheets/style.css | 26 +++++++++++++++----------- 12 files changed, 27 insertions(+), 21 deletions(-) delete mode 100644 web/public/assets/blue-icon-focused.png delete mode 100644 web/public/assets/blue-icon.png delete mode 100644 web/public/assets/orange-icon-focused.png delete mode 100644 web/public/assets/orange-icon.png create mode 100644 web/public/images/blue-icon-focused.png create mode 100644 web/public/images/blue-icon.png create mode 100644 web/public/images/marker-shadow.png create mode 100644 web/public/images/orange-icon-focused.png create mode 100644 web/public/images/orange-icon.png diff --git a/web/README.md b/web/README.md index 66790a1..622751d 100644 --- a/web/README.md +++ b/web/README.md @@ -8,6 +8,7 @@ 2. npm ### Steps + > Docker steps below might not work on Windows. Refer to Docker docs. 1. Spawn up a docker container with mongodb OR start mongo from your local install diff --git a/web/public/assets/blue-icon-focused.png b/web/public/assets/blue-icon-focused.png deleted file mode 100644 index 728d06d..0000000 Binary files a/web/public/assets/blue-icon-focused.png and /dev/null differ diff --git a/web/public/assets/blue-icon.png b/web/public/assets/blue-icon.png deleted file mode 100644 index e4abba3..0000000 Binary files a/web/public/assets/blue-icon.png and /dev/null differ diff --git a/web/public/assets/orange-icon-focused.png b/web/public/assets/orange-icon-focused.png deleted file mode 100644 index 26d8b52..0000000 Binary files a/web/public/assets/orange-icon-focused.png and /dev/null differ diff --git a/web/public/assets/orange-icon.png b/web/public/assets/orange-icon.png deleted file mode 100644 index 4b89e0e..0000000 Binary files a/web/public/assets/orange-icon.png and /dev/null differ diff --git a/web/public/images/blue-icon-focused.png b/web/public/images/blue-icon-focused.png new file mode 100644 index 0000000..728d06d Binary files /dev/null and b/web/public/images/blue-icon-focused.png differ diff --git a/web/public/images/blue-icon.png b/web/public/images/blue-icon.png new file mode 100644 index 0000000..e4abba3 Binary files /dev/null and b/web/public/images/blue-icon.png differ diff --git a/web/public/images/marker-shadow.png b/web/public/images/marker-shadow.png new file mode 100644 index 0000000..9fd2979 Binary files /dev/null and b/web/public/images/marker-shadow.png differ diff --git a/web/public/images/orange-icon-focused.png b/web/public/images/orange-icon-focused.png new file mode 100644 index 0000000..26d8b52 Binary files /dev/null and b/web/public/images/orange-icon-focused.png differ diff --git a/web/public/images/orange-icon.png b/web/public/images/orange-icon.png new file mode 100644 index 0000000..4b89e0e Binary files /dev/null and b/web/public/images/orange-icon.png differ diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 5326bb2..3f1f040 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,10 +164,10 @@ 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'; } } 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; -- cgit v1.2.3