diff options
| -rw-r--r-- | web/public/javascripts/map.js | 23 | ||||
| -rw-r--r-- | web/public/stylesheets/style.css | 27 | ||||
| -rw-r--r-- | web/views/map.pug | 6 |
3 files changed, 30 insertions, 26 deletions
diff --git a/web/public/javascripts/map.js b/web/public/javascripts/map.js index e2b4fc1..115e72d 100644 --- a/web/public/javascripts/map.js +++ b/web/public/javascripts/map.js @@ -4,13 +4,6 @@ // }).addTo(map); let currPoint -let orangeIcon = L.icon({ - iconUrl: '../assets/orange-icon.png', - iconSize: [25, 41], - iconAnchor: [12, 41] -}) - - const Races = { "White" : "European or White", "eAsian" : "East Asian", @@ -38,7 +31,6 @@ function plotPointsOnMap(points) { // e is the event info function showDetails(e) { // layer.feature.geometry gives you access to all the fields -<<<<<<< HEAD let layer = e.layer console.log(e) //layer._icon.src = '../assets/blue-icon.png' @@ -49,11 +41,6 @@ function showDetails(e) { console.log(currPoint) let sideBar = document.getElementById('sidebar') -======= - let layer = e.layer; - - let sideBar = document.getElementById('sidebar'); ->>>>>>> master if (getComputedStyle(sideBar).visibility === 'hidden') { sideBar.style.visibility = 'visible'; @@ -101,18 +88,18 @@ function showDetails(e) { let extraText = document.createTextNode(layer.feature.geometry['extra']); extraTextSpan.appendChild(extraText); - // let pendingBtn = document.getElementById('pending-btn') - // pendingBtn.addEventListener('click', markAsPending) + let pendingBtn = document.getElementById('pending-btn') + pendingBtn.addEventListener('click', markAsPending) - // let completedBtn = document.getElementById('completed-btn') - // completedBtn.addEventListener('click', markAsCompleted) + let completedBtn = document.getElementById('completed-btn') + completedBtn.addEventListener('click', markAsCompleted) let closeBtn = document.getElementById('close-btn') closeBtn.addEventListener('click', closeDetails) } function markAsPending(e) { - currPoint.src = '../assets/orange-icon.png' + currPoint._icon.src = '../assets/orange-icon.png' } function markAsCompleted(e) { diff --git a/web/public/stylesheets/style.css b/web/public/stylesheets/style.css index ece8da4..85ebb2d 100644 --- a/web/public/stylesheets/style.css +++ b/web/public/stylesheets/style.css @@ -64,20 +64,35 @@ a { overflow-wrap: break-word; word-wrap: break-word; } -#close-btn-container { +#btn-container { height: 30px; top: 250px; background-color: lightgrey; width: 350px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; + text-align: center; } -#close-btn { - background-color: red; +.details-btn { position: relative; margin-top: 4px; - float: right; - margin-right: 20px; border-radius: 10px; - width: 100px; + width: 95px; +} +#pending-btn { + background-color: orange; + float: left; + margin-left: 10px; +} + +#completed-btn { + background-color: #279427; + float: left; + margin-left: 10px; +} + +#close-btn { + background-color: red; + float: right; + margin-right: 10px; } diff --git a/web/views/map.pug b/web/views/map.pug index 484899c..af97f6c 100644 --- a/web/views/map.pug +++ b/web/views/map.pug @@ -14,8 +14,10 @@ block content span#report-other strong Distinctive Features span#report-distinctive - #close-btn-container - button#close-btn Close + #btn-container + button.details-btn#pending-btn Pending + button.details-btn#completed-btn Completed + button.details-btn#close-btn Close #map |