From b690e02cf870fd7ec14d3efcde9b0ffc5793a88a Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Mon, 8 Apr 2019 22:15:24 -0400 Subject: added very minimal styling --- web/public/stylesheets/home.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 web/public/stylesheets/home.css (limited to 'web/public') 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; +} -- cgit v1.2.3 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/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 +++++++++++++++----------- 11 files changed, 26 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 (limited to 'web/public') 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 From 8f0e47f48bd732eee3a825dd6626fd3a759b1985 Mon Sep 17 00:00:00 2001 From: Kumar Damani Date: Thu, 18 Apr 2019 22:04:44 -0400 Subject: bug fix for initial load without any points --- web/public/javascripts/map.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'web/public') diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index 3f1f040..1f18e09 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -169,6 +169,7 @@ function closeDetails(e) { else if (currPoint.feature.geometry.status === "new") { currPoint._icon.src = '../images/blue-icon.png'; } + map.fitBounds(latlngbounds.pad(0.20)); } // returns a Promise object @@ -201,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'); -- cgit v1.2.3