mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-07-29 16:01:18 -07:00
Website copy layout styling updates for Tuesday launch (#685)
* Add basic accordion in AreaDetail * Refactor AreaDetail to use a Grid layout - adds useWindowSize to detect window resizes for mobile view - Map and AreaDetail to use Grid - removes some component styling from J40 - updates snapshot - MapWrapper to use Grid * Add custom Accordion styling - make J40 map a 9:3 Grid layout split - override native Accordion heading styles - make the Accordion multi-selectable - add some dummy data for indicators * Update AreaDetail to match design - remove styles in AreaDetail - increase height of MapInfoPanel - add Accordian items (indicators) - updates snapshot * Add a Beta Tag to the logo * Change the line height on indicators descriptions * Update package-lock after the rebase * Remove threshold from MapLegend - move feature selected border color to utils - remove all tooltip logic - remove all styles associated with tooltips - add legend label and descript to constants - refactor tests to be snapshots * Add borders between additional indicators * Modify copy and update styles - add the ordinal superscript back - update the copy - update the snapshots * Add additional indicators keys * Connect indicator keys to the UI - update the areaDetail snapshot * Render additional indicators accordion open onLoad - update snapshot * Update copy on About page * Update copy on indicator descriptions - update snapshots * Update the "How you can help section" - update the snapshot * Add a comma to "ZIP file will contain..." * Add the Datasets section to the methodology page - update snapshot * Update Methodology process list to trussworks - remove custom process list - remove custom CSS from global file - change copy * Modify layout of Methodology to using Grid - modify Dataset section to use Grid - remove outdated component CSS - update the snapshot * Update copy based on product feedback - update snapshots * Remove Accordions - updates snapshots - white CBG groups will show "Not community of focus"
This commit is contained in:
Vim
GitHub
parent
487f6a8e04
commit
522872037a
33 changed files with 2029 additions and 1208 deletions
|
|
@ -15,6 +15,8 @@ import ReactMapGL, {
|
|||
import bbox from '@turf/bbox';
|
||||
import * as d3 from 'd3-ease';
|
||||
import {isMobile} from 'react-device-detect';
|
||||
import {Grid} from '@trussworks/react-uswds';
|
||||
import {useWindowSize} from 'react-use';
|
||||
|
||||
// Contexts:
|
||||
import {useFlags} from '../contexts/FlagContext';
|
||||
|
|
@ -64,6 +66,7 @@ const J40Map = ({location}: IJ40Interface) => {
|
|||
const [transitionInProgress, setTransitionInProgress] = useState<boolean>(false);
|
||||
const [geolocationInProgress, setGeolocationInProgress] = useState<boolean>(false);
|
||||
const [isMobileMapState, setIsMobileMapState] = useState<boolean>(false);
|
||||
const {width: windowWidth} = useWindowSize();
|
||||
|
||||
const mapRef = useRef<MapRef>(null);
|
||||
const flags = useFlags();
|
||||
|
|
@ -170,94 +173,99 @@ const J40Map = ({location}: IJ40Interface) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<div className={styles.mapAndInfoPanelContainer}>
|
||||
<ReactMapGL
|
||||
{...viewport}
|
||||
mapStyle={makeMapStyle(flags)}
|
||||
minZoom={constants.GLOBAL_MIN_ZOOM}
|
||||
maxZoom={constants.GLOBAL_MAX_ZOOM}
|
||||
mapOptions={{hash: true}}
|
||||
width="100%"
|
||||
height={isMobileMapState ? '44vh' : '100%'}
|
||||
dragRotate={false}
|
||||
touchRotate={false}
|
||||
interactiveLayerIds={[constants.HIGH_SCORE_LAYER_NAME]}
|
||||
onViewportChange={setViewport}
|
||||
onClick={onClick}
|
||||
onLoad={onLoad}
|
||||
onTransitionStart={onTransitionStart}
|
||||
onTransitionEnd={onTransitionEnd}
|
||||
ref={mapRef}
|
||||
data-cy={'reactMapGL'}
|
||||
>
|
||||
<Source
|
||||
id={constants.HIGH_SCORE_SOURCE_NAME}
|
||||
type="vector"
|
||||
promoteId={constants.GEOID_PROPERTY}
|
||||
tiles={[constants.FEATURE_TILE_HIGH_ZOOM_URL]}
|
||||
maxzoom={constants.GLOBAL_MIN_ZOOM_HIGH}
|
||||
minzoom={constants.GLOBAL_MAX_ZOOM_HIGH}
|
||||
<>
|
||||
<Grid col={12} desktop={{col: 9}}>
|
||||
<ReactMapGL
|
||||
{...viewport}
|
||||
mapStyle={makeMapStyle(flags)}
|
||||
minZoom={constants.GLOBAL_MIN_ZOOM}
|
||||
maxZoom={constants.GLOBAL_MAX_ZOOM}
|
||||
mapOptions={{hash: true}}
|
||||
width="100%"
|
||||
height={windowWidth < 1024 ? '44vh' : '100%'}
|
||||
dragRotate={false}
|
||||
touchRotate={false}
|
||||
interactiveLayerIds={[constants.HIGH_SCORE_LAYER_NAME]}
|
||||
onViewportChange={setViewport}
|
||||
onClick={onClick}
|
||||
onLoad={onLoad}
|
||||
onTransitionStart={onTransitionStart}
|
||||
onTransitionEnd={onTransitionEnd}
|
||||
ref={mapRef}
|
||||
data-cy={'reactMapGL'}
|
||||
>
|
||||
<Layer
|
||||
id={constants.CURRENTLY_SELECTED_FEATURE_HIGHLIGHT_LAYER_NAME}
|
||||
source-layer={constants.SCORE_SOURCE_LAYER}
|
||||
type='line'
|
||||
paint={{
|
||||
'line-color': constants.DEFAULT_OUTLINE_COLOR,
|
||||
'line-width': constants.CURRENTLY_SELECTED_FEATURE_LAYER_WIDTH,
|
||||
'line-opacity': constants.CURRENTLY_SELECTED_FEATURE_LAYER_OPACITY,
|
||||
}}
|
||||
minzoom={constants.GLOBAL_MIN_ZOOM_HIGHLIGHT}
|
||||
maxzoom={constants.GLOBAL_MAX_ZOOM_HIGHLIGHT}
|
||||
/>
|
||||
|
||||
<Layer
|
||||
id={constants.BLOCK_GROUP_BOUNDARY_LAYER_NAME}
|
||||
type='line'
|
||||
source-layer={constants.SCORE_SOURCE_LAYER}
|
||||
paint={{
|
||||
'line-color': constants.BORDER_HIGHLIGHT_COLOR,
|
||||
'line-width': constants.HIGHLIGHT_BORDER_WIDTH,
|
||||
}}
|
||||
filter={filter}
|
||||
minzoom={constants.GLOBAL_MIN_ZOOM_HIGH}
|
||||
/>
|
||||
</Source>
|
||||
{('fs' in flags && detailViewData && !transitionInProgress) && (
|
||||
<Popup
|
||||
className={styles.j40Popup}
|
||||
tipSize={5}
|
||||
anchor="top"
|
||||
longitude={detailViewData.longitude!}
|
||||
latitude={detailViewData.latitude!}
|
||||
closeOnClick={true}
|
||||
onClose={setDetailViewData}
|
||||
captureScroll={true}
|
||||
<Source
|
||||
id={constants.HIGH_SCORE_SOURCE_NAME}
|
||||
type="vector"
|
||||
promoteId={constants.GEOID_PROPERTY}
|
||||
tiles={[constants.FEATURE_TILE_HIGH_ZOOM_URL]}
|
||||
maxzoom={constants.GLOBAL_MIN_ZOOM_HIGH}
|
||||
minzoom={constants.GLOBAL_MAX_ZOOM_HIGH}
|
||||
>
|
||||
<AreaDetail properties={detailViewData.properties} />
|
||||
</Popup>
|
||||
)}
|
||||
<NavigationControl
|
||||
showCompass={false}
|
||||
className={styles.navigationControl}
|
||||
<Layer
|
||||
id={constants.CURRENTLY_SELECTED_FEATURE_HIGHLIGHT_LAYER_NAME}
|
||||
source-layer={constants.SCORE_SOURCE_LAYER}
|
||||
type='line'
|
||||
paint={{
|
||||
'line-color': constants.DEFAULT_OUTLINE_COLOR,
|
||||
'line-width': constants.CURRENTLY_SELECTED_FEATURE_LAYER_WIDTH,
|
||||
'line-opacity': constants.CURRENTLY_SELECTED_FEATURE_LAYER_OPACITY,
|
||||
}}
|
||||
minzoom={constants.GLOBAL_MIN_ZOOM_HIGHLIGHT}
|
||||
maxzoom={constants.GLOBAL_MAX_ZOOM_HIGHLIGHT}
|
||||
/>
|
||||
|
||||
<Layer
|
||||
id={constants.BLOCK_GROUP_BOUNDARY_LAYER_NAME}
|
||||
type='line'
|
||||
source-layer={constants.SCORE_SOURCE_LAYER}
|
||||
paint={{
|
||||
'line-color': constants.BORDER_HIGHLIGHT_COLOR,
|
||||
'line-width': constants.HIGHLIGHT_BORDER_WIDTH,
|
||||
}}
|
||||
filter={filter}
|
||||
minzoom={constants.GLOBAL_MIN_ZOOM_HIGH}
|
||||
/>
|
||||
</Source>
|
||||
{('fs' in flags && detailViewData && !transitionInProgress) && (
|
||||
<Popup
|
||||
className={styles.j40Popup}
|
||||
tipSize={5}
|
||||
anchor="top"
|
||||
longitude={detailViewData.longitude!}
|
||||
latitude={detailViewData.latitude!}
|
||||
closeOnClick={true}
|
||||
onClose={setDetailViewData}
|
||||
captureScroll={true}
|
||||
>
|
||||
<AreaDetail properties={detailViewData.properties} />
|
||||
</Popup>
|
||||
)}
|
||||
<NavigationControl
|
||||
showCompass={false}
|
||||
className={styles.navigationControl}
|
||||
/>
|
||||
{'gl' in flags ? <GeolocateControl
|
||||
className={styles.geolocateControl}
|
||||
positionOptions={{enableHighAccuracy: true}}
|
||||
onGeolocate={onGeolocate}
|
||||
// @ts-ignore // Types have not caught up yet, see https://github.com/visgl/react-map-gl/issues/1492
|
||||
onClick={onClickGeolocate}
|
||||
/> : ''}
|
||||
{geolocationInProgress ? <div>Geolocation in progress...</div> : ''}
|
||||
<TerritoryFocusControl onClickTerritoryFocusButton={onClickTerritoryFocusButton}/>
|
||||
{'fs' in flags ? <FullscreenControl className={styles.fullscreenControl}/> :'' }
|
||||
</ReactMapGL>
|
||||
</Grid>
|
||||
|
||||
<Grid col={12} desktop={{col: 3}} className={styles.mapInfoPanel}>
|
||||
<MapInfoPanel
|
||||
className={styles.mapInfoPanel}
|
||||
featureProperties={detailViewData?.properties}
|
||||
selectedFeatureId={selectedFeature?.id}
|
||||
/>
|
||||
{'gl' in flags ? <GeolocateControl
|
||||
className={styles.geolocateControl}
|
||||
positionOptions={{enableHighAccuracy: true}}
|
||||
onGeolocate={onGeolocate}
|
||||
// @ts-ignore // Types have not caught up yet, see https://github.com/visgl/react-map-gl/issues/1492
|
||||
onClick={onClickGeolocate}
|
||||
/> : ''}
|
||||
{geolocationInProgress ? <div>Geolocation in progress...</div> : ''}
|
||||
<TerritoryFocusControl onClickTerritoryFocusButton={onClickTerritoryFocusButton}/>
|
||||
{'fs' in flags ? <FullscreenControl className={styles.fullscreenControl}/> :'' }
|
||||
</ReactMapGL>
|
||||
<MapInfoPanel
|
||||
className={styles.mapInfoPanel}
|
||||
featureProperties={detailViewData?.properties}
|
||||
selectedFeatureId={selectedFeature?.id}
|
||||
/>
|
||||
</div>
|
||||
</Grid>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue