mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-02-23 01:54:18 -08:00
Merge branch 'vimusds/1694-add-geolocate' into vimusds/release/frontend-narwhal-2
This commit is contained in:
Vim USDS
commit
6ca50c299b
20 changed files with 348 additions and 246 deletions
4
.github/workflows/deploy_fe_staging.yml
vendored
4
.github/workflows/deploy_fe_staging.yml
vendored
|
|
@ -36,7 +36,7 @@ jobs:
|
|||
# https://github.com/usds/justice40-tool/blob/main/client/README.md
|
||||
DATA_SOURCE: cdn
|
||||
SITE_URL: "${{ secrets.STAGE_SITE_URL }}"
|
||||
PATH_PREFIX: "/justice40-tool/${{env.DESTINATION_FOLDER}}"
|
||||
PATH_PREFIX: "/${{env.DESTINATION_FOLDER}}"
|
||||
MAPBOX_STYLES_READ_TOKEN: "${{ secrets.MAPBOX_STYLES_READ_TOKEN }}"
|
||||
- name: Get directory contents
|
||||
run: ls -la public
|
||||
|
|
@ -94,7 +94,7 @@ jobs:
|
|||
# Deploy to S3 for the staging URL
|
||||
message: |
|
||||
**🚢 Here is the frontend staging link: 🚢**
|
||||
Find it here: http://usds-geoplatform-justice40-website.s3-website-us-east-1.amazonaws.com/justice40-tool/${{env.DESTINATION_FOLDER}}/en/ !
|
||||
Find it here: https://screeningtool-staging.geoplatform.gov/${{env.DESTINATION_FOLDER}}/en/ !
|
||||
repo-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
repo-token-user-login: "github-actions[bot]" # The user.login for temporary GitHub tokens
|
||||
allow-repeats: false # This is the default
|
||||
|
|
|
|||
|
|
@ -222,5 +222,5 @@ The following attemps to explain why certain packages versions have been chosen
|
|||
| gatsby | 3.14.6 | 4.14.2 | No | when attempting to update - breaks all unit tests. Compatibility warning come up with all plugins but this doesn't seems to effect functionality. This is the latest version we can release without investigating unit tests. |
|
||||
| gatsby-cli | 3.14.2 | 4.15.2 | No | when attempting to update - breaks all unit tests. Compatibility warning come up with all plugins but this doesn't seems to effect functionality. This is the latest version we can release without investigating unit tests.|
|
||||
| sass | 1.32.12 | 1.52.3 | No | This version is needed to surpress the dart warnings on / as division for each component. See [here](https://github.com/twbs/bootstrap/issues/34051#issuecomment-845884423) for more information |
|
||||
| uswds | 2.11.2 | 3.0.2 | No | Needs to stay at 2.11 for peer dependency on trussworks|
|
||||
| trussworks | 2.9.0 | 3.0.2 | No | Needs to stay at 2.9 as 3.0 is breaking change |
|
||||
| uswds | 2.13.3 | 3.0.2 | No | Needs to stay at 2.13.3 for peer dependency on trussworks|
|
||||
| trussworks | 3.1.0 | 3.1.0 | No | latest! |
|
||||
138
client/package-lock.json
generated
138
client/package-lock.json
generated
|
|
@ -11,7 +11,7 @@
|
|||
"dependencies": {
|
||||
"-": "^0.0.1",
|
||||
"@sentry/gatsby": "^7.7.0",
|
||||
"@trussworks/react-uswds": "^2.9.0",
|
||||
"@trussworks/react-uswds": "^3.1.0",
|
||||
"@turf/bbox": "^6.5.0",
|
||||
"d3-ease": "^3.0.1",
|
||||
"gatsby-plugin-env-variables": "^2.2.0",
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
"react-intl": "^5.24.7",
|
||||
"react-map-gl": "^6.1.19",
|
||||
"react-use": "^17.3.2",
|
||||
"uswds": "^2.11.2"
|
||||
"uswds": "^2.13.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@formatjs/cli": "^4.8.2",
|
||||
|
|
@ -3579,16 +3579,16 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@trussworks/react-uswds": {
|
||||
"version": "2.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@trussworks/react-uswds/-/react-uswds-2.9.0.tgz",
|
||||
"integrity": "sha512-qv5twPgzLJulWsZew3No3W45FTp3WrYGwG/3B+w/mPFuAMHmAX7VAiigmg+k2kHFvrpjyAiKZHREpHyhkZIbig==",
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@trussworks/react-uswds/-/react-uswds-3.1.0.tgz",
|
||||
"integrity": "sha512-4krdLn8LGgr3EwOsizUF6cBLnwDS6x0WgJjjGk59kNBpgH4qiv8YGzic3HYaVr8xWBq36VpEEfGeQZnjYGMegw==",
|
||||
"engines": {
|
||||
"node": "10.x - 16.x"
|
||||
"node": "10.x - 18.x"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.x || ^17.x",
|
||||
"react-dom": "^16.x || ^17.x",
|
||||
"uswds": "2.11.2"
|
||||
"uswds": "2.13.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@trysound/sax": {
|
||||
|
|
@ -6622,9 +6622,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/classlist-polyfill": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
|
||||
"integrity": "sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4="
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.0.3.tgz",
|
||||
"integrity": "sha512-bDLDUsSg5LYFWsc2hphtG6ulyaCFSupdEBU3wxNECKWHnyPVvY8EB9Wbt9DzWkstWclFZhDaZK/VnEK/DmqE/Q=="
|
||||
},
|
||||
"node_modules/clean-stack": {
|
||||
"version": "2.2.0",
|
||||
|
|
@ -8877,11 +8877,6 @@
|
|||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.89.tgz",
|
||||
"integrity": "sha512-z1Axg0Fu54fse8wN4fd+GAINdU5mJmLtcl6bqIcYyzNVGONcfHAeeJi88KYMQVKalhXlYuVPzKkFIU5VD0raUw=="
|
||||
},
|
||||
"node_modules/elem-dataset": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/elem-dataset/-/elem-dataset-2.0.0.tgz",
|
||||
"integrity": "sha512-e7gieGopWw5dMdEgythH3lUS7nMizutPDTtkzfQW/q2gCvFnACyNnK3ytCncAXKxdBXQWcXeKaYTTODiMnp8mw=="
|
||||
},
|
||||
"node_modules/element-closest": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/element-closest/-/element-closest-2.0.2.tgz",
|
||||
|
|
@ -25238,57 +25233,20 @@
|
|||
}
|
||||
},
|
||||
"node_modules/uswds": {
|
||||
"version": "2.11.2",
|
||||
"resolved": "https://registry.npmjs.org/uswds/-/uswds-2.11.2.tgz",
|
||||
"integrity": "sha512-JISTXCjPIlrufbObIifjrMDn5jF9bbLu7UYhGWmEs9iqB6Z2KDCXHVoBUyzMmIrIjW/UWWYHZzPqOOHO6/IMCQ==",
|
||||
"version": "2.13.3",
|
||||
"resolved": "https://registry.npmjs.org/uswds/-/uswds-2.13.3.tgz",
|
||||
"integrity": "sha512-qCblljeaRvS3+PrSxoHqQwmMnp746+Y1YZA34BkTzJknvo2bhhdzGE21yJaInumzIqV3glLD13TFdRwrwikMMQ==",
|
||||
"dependencies": {
|
||||
"classlist-polyfill": "^1.0.3",
|
||||
"del": "^6.0.0",
|
||||
"domready": "^1.0.8",
|
||||
"elem-dataset": "^2.0.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"receptor": "^1.0.0",
|
||||
"resolve-id-refs": "^0.1.0"
|
||||
"classlist-polyfill": "1.0.3",
|
||||
"domready": "1.0.8",
|
||||
"object-assign": "4.1.1",
|
||||
"receptor": "1.0.0",
|
||||
"resolve-id-refs": "0.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 4"
|
||||
}
|
||||
},
|
||||
"node_modules/uswds/node_modules/del": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/del/-/del-6.0.0.tgz",
|
||||
"integrity": "sha512-1shh9DQ23L16oXSZKB2JxpL7iMy2E0S9d517ptA1P8iw0alkPtQcrKH7ru31rYtKwF499HkTu+DRzq3TCKDFRQ==",
|
||||
"dependencies": {
|
||||
"globby": "^11.0.1",
|
||||
"graceful-fs": "^4.2.4",
|
||||
"is-glob": "^4.0.1",
|
||||
"is-path-cwd": "^2.2.0",
|
||||
"is-path-inside": "^3.0.2",
|
||||
"p-map": "^4.0.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"slash": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/uswds/node_modules/p-map": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
|
||||
"integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
|
||||
"dependencies": {
|
||||
"aggregate-error": "^3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/sindresorhus"
|
||||
}
|
||||
},
|
||||
"node_modules/util": {
|
||||
"version": "0.10.4",
|
||||
"resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
|
||||
|
|
@ -29128,9 +29086,9 @@
|
|||
"dev": true
|
||||
},
|
||||
"@trussworks/react-uswds": {
|
||||
"version": "2.9.0",
|
||||
"resolved": "https://registry.npmjs.org/@trussworks/react-uswds/-/react-uswds-2.9.0.tgz",
|
||||
"integrity": "sha512-qv5twPgzLJulWsZew3No3W45FTp3WrYGwG/3B+w/mPFuAMHmAX7VAiigmg+k2kHFvrpjyAiKZHREpHyhkZIbig==",
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@trussworks/react-uswds/-/react-uswds-3.1.0.tgz",
|
||||
"integrity": "sha512-4krdLn8LGgr3EwOsizUF6cBLnwDS6x0WgJjjGk59kNBpgH4qiv8YGzic3HYaVr8xWBq36VpEEfGeQZnjYGMegw==",
|
||||
"requires": {}
|
||||
},
|
||||
"@trysound/sax": {
|
||||
|
|
@ -31616,9 +31574,9 @@
|
|||
}
|
||||
},
|
||||
"classlist-polyfill": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz",
|
||||
"integrity": "sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4="
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/classlist-polyfill/-/classlist-polyfill-1.0.3.tgz",
|
||||
"integrity": "sha512-bDLDUsSg5LYFWsc2hphtG6ulyaCFSupdEBU3wxNECKWHnyPVvY8EB9Wbt9DzWkstWclFZhDaZK/VnEK/DmqE/Q=="
|
||||
},
|
||||
"clean-stack": {
|
||||
"version": "2.2.0",
|
||||
|
|
@ -33405,11 +33363,6 @@
|
|||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.89.tgz",
|
||||
"integrity": "sha512-z1Axg0Fu54fse8wN4fd+GAINdU5mJmLtcl6bqIcYyzNVGONcfHAeeJi88KYMQVKalhXlYuVPzKkFIU5VD0raUw=="
|
||||
},
|
||||
"elem-dataset": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/elem-dataset/-/elem-dataset-2.0.0.tgz",
|
||||
"integrity": "sha512-e7gieGopWw5dMdEgythH3lUS7nMizutPDTtkzfQW/q2gCvFnACyNnK3ytCncAXKxdBXQWcXeKaYTTODiMnp8mw=="
|
||||
},
|
||||
"element-closest": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/element-closest/-/element-closest-2.0.2.tgz",
|
||||
|
|
@ -45704,42 +45657,15 @@
|
|||
"integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
|
||||
},
|
||||
"uswds": {
|
||||
"version": "2.11.2",
|
||||
"resolved": "https://registry.npmjs.org/uswds/-/uswds-2.11.2.tgz",
|
||||
"integrity": "sha512-JISTXCjPIlrufbObIifjrMDn5jF9bbLu7UYhGWmEs9iqB6Z2KDCXHVoBUyzMmIrIjW/UWWYHZzPqOOHO6/IMCQ==",
|
||||
"version": "2.13.3",
|
||||
"resolved": "https://registry.npmjs.org/uswds/-/uswds-2.13.3.tgz",
|
||||
"integrity": "sha512-qCblljeaRvS3+PrSxoHqQwmMnp746+Y1YZA34BkTzJknvo2bhhdzGE21yJaInumzIqV3glLD13TFdRwrwikMMQ==",
|
||||
"requires": {
|
||||
"classlist-polyfill": "^1.0.3",
|
||||
"del": "^6.0.0",
|
||||
"domready": "^1.0.8",
|
||||
"elem-dataset": "^2.0.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"receptor": "^1.0.0",
|
||||
"resolve-id-refs": "^0.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"del": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/del/-/del-6.0.0.tgz",
|
||||
"integrity": "sha512-1shh9DQ23L16oXSZKB2JxpL7iMy2E0S9d517ptA1P8iw0alkPtQcrKH7ru31rYtKwF499HkTu+DRzq3TCKDFRQ==",
|
||||
"requires": {
|
||||
"globby": "^11.0.1",
|
||||
"graceful-fs": "^4.2.4",
|
||||
"is-glob": "^4.0.1",
|
||||
"is-path-cwd": "^2.2.0",
|
||||
"is-path-inside": "^3.0.2",
|
||||
"p-map": "^4.0.0",
|
||||
"rimraf": "^3.0.2",
|
||||
"slash": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"p-map": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/p-map/-/p-map-4.0.0.tgz",
|
||||
"integrity": "sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==",
|
||||
"requires": {
|
||||
"aggregate-error": "^3.0.0"
|
||||
}
|
||||
}
|
||||
"classlist-polyfill": "1.0.3",
|
||||
"domready": "1.0.8",
|
||||
"object-assign": "4.1.1",
|
||||
"receptor": "1.0.0",
|
||||
"resolve-id-refs": "0.1.0"
|
||||
}
|
||||
},
|
||||
"util": {
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@
|
|||
"dependencies": {
|
||||
"-": "^0.0.1",
|
||||
"@sentry/gatsby": "^7.7.0",
|
||||
"@trussworks/react-uswds": "^2.9.0",
|
||||
"@trussworks/react-uswds": "^3.1.0",
|
||||
"@turf/bbox": "^6.5.0",
|
||||
"d3-ease": "^3.0.1",
|
||||
"gatsby-plugin-env-variables": "^2.2.0",
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
"react-intl": "^5.24.7",
|
||||
"react-map-gl": "^6.1.19",
|
||||
"react-use": "^17.3.2",
|
||||
"uswds": "^2.11.2"
|
||||
"uswds": "^2.13.3"
|
||||
},
|
||||
"cypress-cucumber-preprocessor": {
|
||||
"nonGlobalStepDefinitions": false
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ const AboutCard = (props: React.PropsWithChildren<AboutCardProps>) => {
|
|||
internal={props.internal}
|
||||
url={props.url ? props.url : ''}
|
||||
openUrlNewTab={props.openUrlNewTab}
|
||||
className={'j40-aboutcard-link'}
|
||||
// className={'j40-aboutcard-link'}
|
||||
/>
|
||||
</div>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -77,7 +77,6 @@ exports[`rendering of the AboutCard checks if small cards component renders 1`]
|
|||
class="j40-aboutcard-sm-link"
|
||||
>
|
||||
<a
|
||||
class="j40-aboutcard-link"
|
||||
data-cy=""
|
||||
href="#"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -288,7 +288,7 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
|
|||
// description: intl.formatMessage(EXPLORE_COPY.SIDE_PANEL_INDICATOR_DESCRIPTION.MED_HOME_VAL),
|
||||
// value: properties[constants.MEDIAN_HOME_VALUE_PERCENTILE] ?
|
||||
// properties[constants.MEDIAN_HOME_VALUE_PERCENTILE] : null,
|
||||
// isDisadvagtaged: false, // TODO
|
||||
// isDisadvagtaged: false,
|
||||
// };
|
||||
|
||||
const proxHaz: indicatorInfo = {
|
||||
|
|
@ -531,6 +531,15 @@ const AreaDetail = ({properties, hash}: IAreaDetailProps) => {
|
|||
// component to render the actual Indicator
|
||||
const categoryItems = categories.map((category) => ({
|
||||
id: category.id,
|
||||
|
||||
/*
|
||||
As of trussworks 3.0.0, there were some breaking changes. This new prop of headingLevel
|
||||
is required, however, the title prop is already defining the category styling, so this
|
||||
is placed here to satisfy the requirement of the AccordionItems API, however it's not
|
||||
being used.
|
||||
*/
|
||||
headingLevel: 'h4',
|
||||
|
||||
title: <Category name={category.titleText} isDisadvantaged={category.isDisadvagtaged} />,
|
||||
content: (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,57 @@
|
|||
@use '../styles/design-system.scss' as *;
|
||||
@import "./utils.scss";
|
||||
|
||||
.j40Popup {
|
||||
width: 375px;
|
||||
|
||||
.j40Map {
|
||||
// width < 1024
|
||||
@include at-media-max("desktop") {
|
||||
height: 55vh;
|
||||
}
|
||||
|
||||
.mapHeaderRow{
|
||||
@include u-display("flex");
|
||||
@include u-padding-left(1.5);
|
||||
justify-content: flex-start;
|
||||
|
||||
|
||||
.geolocateBox {
|
||||
flex: 1 2 47%;
|
||||
align-self: flex-end;
|
||||
margin-bottom: 30px;
|
||||
margin-left: 1rem;
|
||||
|
||||
.geolocateMessage {
|
||||
visibility: visible;
|
||||
background-color: white;
|
||||
margin-bottom: 3px;
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
.geolocateMessageHide {
|
||||
visibility: hidden;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.geolocateIcon{
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigationControl {
|
||||
left: .75em;
|
||||
top: units(15);
|
||||
// width: 2.5em;
|
||||
}
|
||||
|
||||
//These classes are behind feature flags:
|
||||
.fullscreenControl {
|
||||
right: 1.25em;
|
||||
top: 2.5em;
|
||||
}
|
||||
.j40Popup {
|
||||
width: 375px;
|
||||
}
|
||||
|
||||
.geolocateControl {
|
||||
right: 1.25em;
|
||||
top: 5em;
|
||||
}
|
||||
|
||||
.mapInfoPanel {
|
||||
|
|
@ -26,11 +59,3 @@
|
|||
overflow-y: auto;
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
// This will control the height of the map when the device
|
||||
// width is less than desktop (1024px)
|
||||
.j40Map {
|
||||
@include at-media-max("desktop") {
|
||||
height: 55vh;
|
||||
}
|
||||
}
|
||||
25
client/src/components/J40Map.module.scss.d.ts
vendored
25
client/src/components/J40Map.module.scss.d.ts
vendored
|
|
@ -1,14 +1,23 @@
|
|||
declare namespace J40MapModuleScssNamespace {
|
||||
export interface IJ40MapModuleScss {
|
||||
j40Popup: string;
|
||||
territoryFocusButton: string;
|
||||
territoryFocusContainer: string;
|
||||
navigationControl: string;
|
||||
fullscreenControl: string;
|
||||
geolocateControl: string;
|
||||
detailView: string;
|
||||
mapInfoPanel: string;
|
||||
// main J40 map style
|
||||
j40Map: string;
|
||||
|
||||
// map header row
|
||||
mapHeaderRow: string;
|
||||
geolocateBox: string;
|
||||
geolocateMessage: string;
|
||||
geolocateMessageHide: string;
|
||||
geolocateIcon: string;
|
||||
|
||||
// nav control
|
||||
navigationControl: string;
|
||||
|
||||
// feature flags
|
||||
fullscreenControl: string;
|
||||
j40Popup: string;
|
||||
|
||||
mapInfoPanel: string;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import ReactMapGL, {
|
|||
FlyToInterpolator,
|
||||
FullscreenControl,
|
||||
MapRef, Source, Layer} from 'react-map-gl';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
import bbox from '@turf/bbox';
|
||||
import * as d3 from 'd3-ease';
|
||||
import {isMobile} from 'react-device-detect';
|
||||
|
|
@ -34,6 +35,7 @@ import 'maplibre-gl/dist/maplibre-gl.css';
|
|||
import * as constants from '../data/constants';
|
||||
import * as styles from './J40Map.module.scss';
|
||||
import * as COMMON_COPY from '../data/copy/common';
|
||||
import * as EXPLORE_COPY from '../data/copy/explore';
|
||||
|
||||
|
||||
declare global {
|
||||
|
|
@ -98,7 +100,12 @@ export const featureURLForTilesetName = (tilesetName: string): string => {
|
|||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* This the main map component
|
||||
*
|
||||
* @param {IJ40Interface} location
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
const J40Map = ({location}: IJ40Interface) => {
|
||||
/**
|
||||
* Initializes the zoom, and the map's center point (lat, lng) via the URL hash #{z}/{lat}/{long}
|
||||
|
|
@ -131,6 +138,7 @@ const J40Map = ({location}: IJ40Interface) => {
|
|||
|
||||
const mapRef = useRef<MapRef>(null);
|
||||
const flags = useFlags();
|
||||
const intl = useIntl();
|
||||
|
||||
const selectedFeatureId = (selectedFeature && selectedFeature.id) || '';
|
||||
const filter = useMemo(() => ['in', constants.GEOID_PROPERTY, selectedFeatureId], [selectedFeature]);
|
||||
|
|
@ -329,12 +337,12 @@ const J40Map = ({location}: IJ40Interface) => {
|
|||
return (
|
||||
<>
|
||||
<Grid desktop={{col: 9}} className={styles.j40Map}>
|
||||
|
||||
{/**
|
||||
* // * This will render the MapSearch component
|
||||
*
|
||||
* Note:
|
||||
* The MapSearch component is no longer wrapped in a div in order to allow this feature
|
||||
* The MapSearch component is no longer used in this location. It has been moved inside the
|
||||
* <ReactMapGL> component itself.
|
||||
*
|
||||
* It was originally wrapped in a div in order to allow this feature
|
||||
* to be behind a feature flag. This was causing a bug for MapSearch to render
|
||||
* correctly in a production build. Leaving this comment here in case future flags are
|
||||
* needed in this component.
|
||||
|
|
@ -346,9 +354,9 @@ const J40Map = ({location}: IJ40Interface) => {
|
|||
* - npm run clean && npm run build && npm run serve
|
||||
*
|
||||
* to ensure the production build works and that MapSearch and the map (ReactMapGL) render correctly.
|
||||
*
|
||||
* Any component declarations outside the <ReactMapGL> component may be susceptible to this bug.
|
||||
*/}
|
||||
<MapSearch goToPlace={goToPlace}/>
|
||||
|
||||
|
||||
{/**
|
||||
* The ReactMapGL component's props are grouped by the API's documentation. The component also has
|
||||
|
|
@ -393,7 +401,9 @@ const J40Map = ({location}: IJ40Interface) => {
|
|||
data-cy={'reactMapGL'}
|
||||
>
|
||||
{/**
|
||||
* The low zoom source
|
||||
* Load all data sources and layers
|
||||
*
|
||||
* First the low zoom:
|
||||
*/}
|
||||
<Source
|
||||
id={constants.LOW_ZOOM_SOURCE_NAME}
|
||||
|
|
@ -483,25 +493,41 @@ const J40Map = ({location}: IJ40Interface) => {
|
|||
/>
|
||||
</Source>
|
||||
|
||||
{/* This will add the navigation controls of the zoom in and zoom out buttons */}
|
||||
{/* This is the first overlayed row on the map: Search and Geolocation */}
|
||||
<div className={styles.mapHeaderRow}>
|
||||
<MapSearch goToPlace={goToPlace}/>
|
||||
|
||||
<div className={styles.geolocateBox}>
|
||||
{windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG && <div
|
||||
className={
|
||||
geolocationInProgress ? styles.geolocateMessage : styles.geolocateMessageHide}>
|
||||
{intl.formatMessage(EXPLORE_COPY.MAP.GEOLOC_MSG_LOCATING)}
|
||||
</div>}
|
||||
<div className={styles.geolocateIcon}>
|
||||
<GeolocateControl
|
||||
positionOptions={{enableHighAccuracy: true}}
|
||||
onGeolocate={onGeolocate}
|
||||
onClick={onClickGeolocate}
|
||||
trackUserLocation={windowWidth < constants.USWDS_BREAKPOINTS.MOBILE_LG}
|
||||
showUserHeading={windowWidth < constants.USWDS_BREAKPOINTS.MOBILE_LG}
|
||||
disabledLabel={intl.formatMessage(EXPLORE_COPY.MAP.GEOLOC_MSG_DISABLED)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* This is the second row overlayed on the map, it will add the navigation controls
|
||||
of the zoom in and zoom out buttons */}
|
||||
{ windowWidth > constants.USWDS_BREAKPOINTS.MOBILE_LG && <NavigationControl
|
||||
showCompass={false}
|
||||
className={styles.navigationControl}
|
||||
/> }
|
||||
|
||||
{/* This will show shortcut buttons to pan/zoom to US territories */}
|
||||
{/* This is the third row overlayed on the map, it will show shortcut buttons to
|
||||
pan/zoom to US territories */}
|
||||
<TerritoryFocusControl onClick={onClick}/>
|
||||
|
||||
{/* This places Geolocation behind a feature flag */}
|
||||
{'gl' in flags ? <GeolocateControl
|
||||
className={styles.geolocateControl}
|
||||
positionOptions={{enableHighAccuracy: true}}
|
||||
onGeolocate={onGeolocate}
|
||||
// @ts-ignore
|
||||
onClick={onClickGeolocate}
|
||||
/> : ''}
|
||||
{geolocationInProgress ? <div>Geolocation in progress...</div> : ''}
|
||||
|
||||
{/* Enable fullscreen pop-up behind a feature flag */}
|
||||
{('fs' in flags && detailViewData && !transitionInProgress) && (
|
||||
<Popup
|
||||
|
|
|
|||
|
|
@ -1,20 +1,27 @@
|
|||
@use '../../styles/design-system.scss' as *;
|
||||
|
||||
.mapSearchContainer {
|
||||
/**
|
||||
Various breakpoint are being used to allow a consistent ratio
|
||||
of screen width between the search component and the geolocation
|
||||
component across all device sizes.
|
||||
*/
|
||||
|
||||
// styles for mobile-lg (480px) and greater widths,
|
||||
@include at-media('mobile-lg') {
|
||||
position: absolute;
|
||||
// top: units(4);
|
||||
left: units(1.5);
|
||||
width: 50%;
|
||||
z-index: 1;
|
||||
// width < 660
|
||||
@include at-media-max("tablet") {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
// styles for less than mobile-lg (480px)
|
||||
position: absolute;
|
||||
left: units(1.5);
|
||||
width: 90%;
|
||||
z-index: 1;
|
||||
// 660 < width < 1024
|
||||
@include at-media-max("desktop") {
|
||||
@include at-media("tablet"){
|
||||
flex: 1 1 56%;
|
||||
}
|
||||
}
|
||||
|
||||
// > 1024
|
||||
@include at-media("desktop") {
|
||||
flex: 1 1 72%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,11 +31,11 @@ exports[`rendering of the MapSearch checks if component renders 1`] = `
|
|||
data-testid="button"
|
||||
type="submit"
|
||||
>
|
||||
<span
|
||||
class="usa-sr-only"
|
||||
>
|
||||
Search
|
||||
</span>
|
||||
<img
|
||||
alt="Search"
|
||||
class="usa-search__submit-icon"
|
||||
src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0Ij48cGF0aCBkPSJNMCAwaDI0djI0SDB6IiBmaWxsPSJub25lIi8+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTE1LjUgMTRoLS43OWwtLjI4LS4yN0MxNS40MSAxMi41OSAxNiAxMS4xMSAxNiA5LjUgMTYgNS45MSAxMy4wOSAzIDkuNSAzUzMgNS45MSAzIDkuNSA1LjkxIDE2IDkuNSAxNmMxLjYxIDAgMy4wOS0uNTkgNC4yMy0xLjU3bC4yNy4yOHYuNzlsNSA0Ljk5TDIwLjQ5IDE5bC00Ljk5LTV6bS02IDBDNy4wMSAxNCA1IDExLjk5IDUgOS41UzcuMDEgNSA5LjUgNSAxNCA3LjAxIDE0IDkuNSAxMS45OSAxNCA5LjUgMTR6Ii8+PC9zdmc+"
|
||||
/>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
.showMessage {
|
||||
@include searchMessageLayout;
|
||||
display: block;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.hideMessage {
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ const PublicEvent = ({event}:IPublicEvent) => {
|
|||
}>
|
||||
|
||||
{/* Heading */}
|
||||
<CollectionHeading>
|
||||
<CollectionHeading headingLevel='h3'>
|
||||
{isEventExpired ? eventName : <LinkTypeWrapper
|
||||
linkText={eventName}
|
||||
internal={false}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import {Button, SummaryBox} from '@trussworks/react-uswds';
|
||||
import {Button, SummaryBox, SummaryBoxContent, SummaryBoxHeading} from '@trussworks/react-uswds';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
|
||||
import * as PUBLIC_COPY from '../../data/copy/publicEngage';
|
||||
|
|
@ -15,8 +15,13 @@ const PublicVideoBox = () => {
|
|||
|
||||
return (
|
||||
<SummaryBox
|
||||
className={styles.publicVideoContainer}
|
||||
heading={intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.TITLE)}>
|
||||
className={styles.publicVideoContainer}>
|
||||
|
||||
<SummaryBoxHeading headingLevel='h3'>
|
||||
{intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.TITLE)}
|
||||
</SummaryBoxHeading>
|
||||
|
||||
<SummaryBoxContent>
|
||||
{intl.formatMessage(PUBLIC_COPY.PUBLIC_ENG_VIDEO.BODY)}
|
||||
<a
|
||||
className={styles.publicVideoLink}
|
||||
|
|
@ -61,6 +66,7 @@ const PublicVideoBox = () => {
|
|||
</div>
|
||||
</Button>
|
||||
</a>
|
||||
</SummaryBoxContent>
|
||||
</SummaryBox>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import {SummaryBox} from '@trussworks/react-uswds';
|
||||
import {SummaryBox, SummaryBoxContent, SummaryBoxHeading} from '@trussworks/react-uswds';
|
||||
import {useIntl} from 'gatsby-plugin-intl';
|
||||
|
||||
import * as CONTACT_COPY from '../../data/copy/contact';
|
||||
|
|
@ -9,8 +9,16 @@ const RequestForInfo = () => {
|
|||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<SummaryBox className={styles.rfiBox} heading={intl.formatMessage(CONTACT_COPY.RFI_BOX.TITLE)}>
|
||||
<SummaryBox className={styles.rfiBox}>
|
||||
|
||||
<SummaryBoxHeading headingLevel='h3'>
|
||||
{intl.formatMessage(CONTACT_COPY.RFI_BOX.TITLE)}
|
||||
</SummaryBoxHeading>
|
||||
|
||||
<SummaryBoxContent>
|
||||
<p>{CONTACT_COPY.RFI_BOX_BODY}</p>
|
||||
</SummaryBoxContent>
|
||||
|
||||
</SummaryBox>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,6 +9,12 @@ import * as DOWNLOADS_COPY from './downloads';
|
|||
import * as METHODOLOGY_COPY from './methodology';
|
||||
import {PAGES_ENDPOINTS} from '../constants';
|
||||
|
||||
export const EXPLORE_PAGE_LINKS = {
|
||||
TRIBAL_ACTION_PLAN: `https://www.whitehouse.gov/wp-content/uploads/2022/01/CEQ-Tribal-Consultation-Plan-04.26.2021.pdf`,
|
||||
TRIBAL_WHITEHOUSE: `https://www.whitehouse.gov/briefing-room/presidential-actions/2021/01/26/memorandum-on-tribal-consultation-and-strengthening-nation-to-nation-relationships/`,
|
||||
TRIBAL_FED_REGISTER: `https://www.federalregister.gov/documents/2000/11/09/00-29003/consultation-and-coordination-with-indian-tribal-governments`,
|
||||
};
|
||||
|
||||
export const PAGE_INTRO = defineMessages({
|
||||
PAGE_TILE: {
|
||||
id: 'explore.map.page.title.text',
|
||||
|
|
@ -158,6 +164,26 @@ export const MAP = defineMessages({
|
|||
defaultMessage: 'US Virgin Islands',
|
||||
description: 'On the explore the map page, on the map, the full name indicating the bounds of US Virgin Islands',
|
||||
},
|
||||
GEOLOC_MSG_LOCATING: {
|
||||
id: 'explore.map.page.map.geolocation.locating',
|
||||
defaultMessage: 'Finding location...',
|
||||
description: 'On the explore the map page, on the map, this is the message above the gelocation icon that geolocation is locating.',
|
||||
},
|
||||
GEOLOC_MSG_DISABLED: {
|
||||
id: 'explore.map.page.map.geolocation.disabled',
|
||||
defaultMessage: 'Geolocation disabled',
|
||||
description: 'On the explore the map page, on the map, this is the message above the gelocation icon that geolocation is disabled.',
|
||||
},
|
||||
// GEOLOC_MSG_OFF: {
|
||||
// id: 'explore.map.page.map.geolocation.off',
|
||||
// defaultMessage: 'Geolocation off',
|
||||
// description: 'On the explore the map page, on the map, this is the message above the gelocation icon that geolocation is off.',
|
||||
// },
|
||||
// GEOLOC_MSG_LOCKED: {
|
||||
// id: 'explore.map.page.map.geolocation.locked',
|
||||
// defaultMessage: 'Geolocation locked',
|
||||
// description: 'On the explore the map page, on the map, this is the message above the gelocation icon that geolocation is locked.',
|
||||
// },
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -868,16 +894,16 @@ export const NOTE_ON_TRIBAL_NATIONS = {
|
|||
is engaging in consultation and coordination with Tribal Nations on the beta version of the map
|
||||
to provide Tribal Nations with meaningful opportunities for input, consistent with CEQ’s <link2>
|
||||
Action Plan for Consultation and Coordination with Tribal Nations</link2>,
|
||||
<link3>President Biden’s Memorandum on Tribal Consultation and Strengthening
|
||||
Nation-to-Nation Consultation</link3>, and Executive Order 13175 on <link4>Consultation and
|
||||
President Biden’s <link3>Memorandum on Tribal Consultation and Strengthening
|
||||
Nation-to-Nation Consultation</link3>, and <link4>Executive Order 13175 on Consultation and
|
||||
Coordination With Indian Tribal Governments</link4>.
|
||||
`}
|
||||
description={`Navigate to the explore the map page. Under the map, you will see tribal nations paragraph 1`}
|
||||
values={{
|
||||
link1: COMMON_COPY.linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
|
||||
link2: COMMON_COPY.linkFn(`https://www.whitehouse.gov/wp-content/uploads/2022/01/CEQ-Tribal-Consultation-Plan-04.26.2021.pdf`, false, true),
|
||||
link3: COMMON_COPY.linkFn(`https://www.whitehouse.gov/briefing-room/presidential-actions/2021/01/26/memorandum-on-tribal-consultation-and-strengthening-nation-to-nation-relationships/`, false, true),
|
||||
link4: COMMON_COPY.linkFn(`https://www.federalregister.gov/documents/2000/11/09/00-29003/consultation-and-coordination-with-indian-tribal-governments`, false, true),
|
||||
link2: COMMON_COPY.linkFn(EXPLORE_PAGE_LINKS.TRIBAL_ACTION_PLAN, false, true),
|
||||
link3: COMMON_COPY.linkFn(EXPLORE_PAGE_LINKS.TRIBAL_WHITEHOUSE, false, true),
|
||||
link4: COMMON_COPY.linkFn(EXPLORE_PAGE_LINKS.TRIBAL_FED_REGISTER, false, true),
|
||||
}}
|
||||
/>,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -343,6 +343,14 @@
|
|||
"defaultMessage": "Communities identified as disadvantaged by the map are those that are marginalized, underserved, and overburdened by pollution. These communities are at or above the thresholds in one or more of eight categories of criteria.",
|
||||
"description": "On the explore the map page, the description of the legend"
|
||||
},
|
||||
"explore.map.page.map.geolocation.disabled": {
|
||||
"defaultMessage": "Geolocation disabled",
|
||||
"description": "On the explore the map page, on the map, this is the message above the gelocation icon that geolocation is disabled."
|
||||
},
|
||||
"explore.map.page.map.geolocation.locating": {
|
||||
"defaultMessage": "Finding location...",
|
||||
"description": "On the explore the map page, on the map, this is the message above the gelocation icon that geolocation is locating."
|
||||
},
|
||||
"explore.map.page.map.search.placeholder.mobile.text": {
|
||||
"defaultMessage": "Search locations",
|
||||
"description": "On the explore the map page, on the map, the placeholder text for search"
|
||||
|
|
@ -868,7 +876,7 @@
|
|||
"description": "Navigate to the explore the map page. Under the map, you will see tribal nations intro text"
|
||||
},
|
||||
"explore.map.page.under.map.note.on.tribal.nations.para.1": {
|
||||
"defaultMessage": "The map covers all U.S. census tracts, including those located within Tribal Nations, to the extent that data is available (see our <link1>Methodology & data</link1> page for more information). CEQ is engaging in consultation and coordination with Tribal Nations on the beta version of the map to provide Tribal Nations with meaningful opportunities for input, consistent with CEQ’s <link2> Action Plan for Consultation and Coordination with Tribal Nations</link2>, <link3>President Biden’s Memorandum on Tribal Consultation and Strengthening Nation-to-Nation Consultation</link3>, and Executive Order 13175 on <link4>Consultation and Coordination With Indian Tribal Governments</link4>.",
|
||||
"defaultMessage": "The map covers all U.S. census tracts, including those located within Tribal Nations, to the extent that data is available (see our <link1>Methodology & data</link1> page for more information). CEQ is engaging in consultation and coordination with Tribal Nations on the beta version of the map to provide Tribal Nations with meaningful opportunities for input, consistent with CEQ’s <link2> Action Plan for Consultation and Coordination with Tribal Nations</link2>, President Biden’s <link3>Memorandum on Tribal Consultation and Strengthening Nation-to-Nation Consultation</link3>, and <link4>Executive Order 13175 on Consultation and Coordination With Indian Tribal Governments</link4>.",
|
||||
"description": "Navigate to the explore the map page. Under the map, you will see tribal nations paragraph 1"
|
||||
},
|
||||
"fab.survey.text": {
|
||||
|
|
|
|||
|
|
@ -607,7 +607,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
class="j40-aboutcard-sm-link"
|
||||
>
|
||||
<a
|
||||
class="j40-aboutcard-link"
|
||||
href="/en/methodology"
|
||||
>
|
||||
Methodology & data
|
||||
|
|
@ -662,7 +661,6 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
class="j40-aboutcard-sm-link"
|
||||
>
|
||||
<a
|
||||
class="j40-aboutcard-link"
|
||||
href="/en/"
|
||||
>
|
||||
Explore the map
|
||||
|
|
@ -731,7 +729,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
class="j40-aboutcard-sm-link"
|
||||
>
|
||||
<a
|
||||
class="usa-link usa-link--external j40-aboutcard-link"
|
||||
class="usa-link usa-link--external"
|
||||
data-cy=""
|
||||
href="mailto:Screeningtool-Support@omb.eop.gov"
|
||||
rel="noreferrer"
|
||||
|
|
@ -791,7 +789,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
|
|||
class="j40-aboutcard-sm-link"
|
||||
>
|
||||
<a
|
||||
class="usa-link usa-link--external j40-aboutcard-link"
|
||||
class="usa-link usa-link--external"
|
||||
data-cy=""
|
||||
href="https://github.com/usds/justice40-tool"
|
||||
rel="noreferrer"
|
||||
|
|
|
|||
|
|
@ -140,6 +140,18 @@ components include:
|
|||
}
|
||||
}
|
||||
|
||||
// all external links
|
||||
.usa-link--external::after {
|
||||
margin-top: .5ex !important;
|
||||
}
|
||||
|
||||
// external links in the dataset Cards
|
||||
li[class*='datasetCard-module'] .usa-link--external::after {
|
||||
margin-top: .2ex !important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
******************************
|
||||
* FOOTER STYLES
|
||||
|
|
@ -164,8 +176,12 @@ components include:
|
|||
@include u-display('inline-block');
|
||||
@include u-margin-top(1.5)
|
||||
}
|
||||
}
|
||||
|
||||
// external links in the footer only
|
||||
.usa-link--external::after {
|
||||
margin-top: .2ex !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -185,12 +201,50 @@ This section will outline styles that are component specific
|
|||
// Maplibre overrides
|
||||
// Note that these need to be here to properly override defaults
|
||||
|
||||
|
||||
/**
|
||||
Geolocate Icon Styling:
|
||||
In mobile, the icon has 4 states; default, locating (class = *-waiting), locked (class = *-active) and panning (class = *-background).
|
||||
|
||||
These overides change the active and background classes
|
||||
|
||||
We are using #0076d6 or hsl(207, 100%, 42%) for all colors in relation to Geolocation.
|
||||
|
||||
The reason the Icon was changed was to match the other overlayed icons - such as territory shortcuts. These other icons don't have multiple states embedded in them. This new color scheme creates ambiguity among two states, namely (off and locked) as they have the same exact style.
|
||||
*/
|
||||
.mapboxgl-ctrl {
|
||||
button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active {
|
||||
.mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='hsl(207, 100%, 42%)'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E") !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mapboxgl-ctrl {
|
||||
button.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-background {
|
||||
.mapboxgl-ctrl-icon {
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='29' height='29' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' fill='hsl(207, 100%, 42%)'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 005.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 009 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 003.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0011 5.1V5s0-1-1-1zm0 2.5a3.5 3.5 0 110 7 3.5 3.5 0 110-7z'/%3E%3C/svg%3E") !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
Beacon - the beacon's color (*-location-dot) and proximity animation (::before), inner radius (::after) was changed and . The reason the beacon was changed was to increase the contrast between the beacon and the census tract layers
|
||||
*/
|
||||
.mapboxgl-user-location-dot, .mapboxgl-user-location-dot::before {
|
||||
background-color: #0076d6 !important;
|
||||
}
|
||||
|
||||
.mapboxgl-user-location-dot::after {
|
||||
border: 4px solid #FFF !important;
|
||||
}
|
||||
|
||||
|
||||
// Overide mapbox popup styles
|
||||
.mapboxgl-popup-close-button {
|
||||
font-size: 3em;
|
||||
margin-right: 12px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.mapboxgl-popup-content {
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5) !important;
|
||||
border-radius: 8px !important;
|
||||
|
|
@ -371,9 +425,9 @@ a.mapboxgl-ctrl-logo {
|
|||
@include u-margin-top(5);
|
||||
}
|
||||
|
||||
.j40-aboutcard-link {
|
||||
font-weight: bold;
|
||||
}
|
||||
// .j40-aboutcard-link {
|
||||
// font-weight: bold;
|
||||
// }
|
||||
}
|
||||
|
||||
.j40-aboutcard-sm-card {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue