diff --git a/src/css/_scorecard.scss b/src/css/_scorecard.scss index 8b45d97..2fdf482 100644 --- a/src/css/_scorecard.scss +++ b/src/css/_scorecard.scss @@ -1,4 +1,6 @@ $teal: #21ccb9; +$opaque-yellow: #fae678e2; +$gray: rgb(60, 60, 60); .popup-fixed { position: fixed; @@ -83,6 +85,12 @@ div.popup-button a:hover { border: 1px solid $teal; } +.community-tag { + font-size: 14px; + background-color: $opaque-yellow; + color: $gray; +} + @media only screen and (max-width: 830px) { .leaflet-popup-content-wrapper { overflow-y: scroll; diff --git a/src/js/fontAwesome.ts b/src/js/fontAwesome.ts index b753cdd..101075e 100644 --- a/src/js/fontAwesome.ts +++ b/src/js/fontAwesome.ts @@ -5,6 +5,7 @@ import { faLink, faUpRightFromSquare, faCheck, + faTriangleExclamation, } from "@fortawesome/free-solid-svg-icons"; import "@fortawesome/fontawesome-svg-core/styles.css"; @@ -14,7 +15,8 @@ const setUpIcons = (): void => { faCircleXmark, faLink, faUpRightFromSquare, - faCheck + faCheck, + faTriangleExclamation ); dom.watch(); }; diff --git a/src/js/setUpSite.ts b/src/js/setUpSite.ts index f7be29a..78d2639 100644 --- a/src/js/setUpSite.ts +++ b/src/js/setUpSite.ts @@ -95,7 +95,6 @@ const generateScorecard = (entry: ScoreCardDetails): string => { -
`; const lines = []; @@ -105,6 +104,13 @@ const generateScorecard = (entry: ScoreCardDetails): string => { ); }; + if ("contribution" in entry) { + lines.push( + `
Community-maintained map.
Email ${entry.contribution} for issues.
` + ); + } + lines.push("
"); + addEntry("Parking", `${entry.percentage} of central city`); if (entry.parkingScore) { addEntry("Parking score", entry.parkingScore); @@ -153,10 +159,7 @@ const snapToCity = (map: Map, layer: ImageOverlay): void => { /** * Sets scorecard to city and alert if city is community made. */ -const setScorecardAndAlert = ( - cityId: CityId, - cityProperties: ScoreCard -): void => { +const setScorecard = (cityId: CityId, cityProperties: ScoreCard): void => { const { layer, details } = cityProperties; const scorecard = generateScorecard(details); setUpShareUrlClickListener(cityId); @@ -166,17 +169,6 @@ const setScorecardAndAlert = ( autoPan: false, }).setContent(scorecard); layer.bindPopup(popup).openPopup(); - - const alertBox = document.getElementById( - "community-map-alert" - ) as HTMLElement; - if ("contribution" in details) { - const email = document.getElementById("email") as HTMLSpanElement; - email.innerText = details.contribution; - alertBox.style.display = "block"; - } else { - alertBox.style.display = "none"; - } }; /** @@ -210,7 +202,7 @@ const setUpAutoScorecard = async ( }); if (centralCity) { DROPDOWN.setChoiceByValue(centralCity); - setScorecardAndAlert(centralCity, cities[centralCity]); + setScorecard(centralCity, cities[centralCity]); } }); }; @@ -270,7 +262,7 @@ const setUpCitiesLayer = async ( const cityId = cityToggleElement.value; setUpAutoScorecard(map, cities, parkingLayer); snapToCity(map, cities[cityId].layer); - setScorecardAndAlert(cityId, cities[cityId]); + setScorecard(cityId, cities[cityId]); } else { throw new Error("#city-choice is not a select element"); }