publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-08-06 20:14:20 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix button centering on iphone (#581)

Browse source 
* Fix button centering on iphone
For some reason, physical iPhones are not centering the text inside the map buttons correctly. (`48`, `AK`, `HI`, `PR`)
* convert to verbose css syntax
* Test using svg buttons
* Remove unused style reference
* Fix new icon svg images were "eating" the button's click events
This commit is contained in:
TomNUSDS 2021-08-31 14:40:22 -07:00 • committed by GitHub
commit fba3090d36
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 60 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

51
client/src/components/territoryFocusControl.tsx
View file

@ -4,10 +4,10 @@ import {_useMapControl as useMapControl} from 'react-map-gl';
import * as styles from './territoryFocusControl.module.scss';
interface ITerritoryFocusControl {
onClickTerritoryFocusButton : MouseEventHandler<HTMLButtonElement>;
onClickTerritoryFocusButton: MouseEventHandler<HTMLButtonElement>;
}
const TerritoryFocusControl = ({onClickTerritoryFocusButton} : ITerritoryFocusControl) => {
const TerritoryFocusControl = ({onClickTerritoryFocusButton}: ITerritoryFocusControl) => {
const intl = useIntl();
const {containerRef} = useMapControl({
@ -81,28 +81,37 @@ const TerritoryFocusControl = ({onClickTerritoryFocusButton} : ITerritoryFocusCo
),
},
];
// the offset for this array should map the territories variable
const territoriesIconClassName = [
'mapboxgl-ctrl-zoom-to-48',
'mapboxgl-ctrl-zoom-to-ak',
'mapboxgl-ctrl-zoom-to-hi',
'mapboxgl-ctrl-zoom-to-pr',
];
return (
<div ref={containerRef} className={styles.territoryFocusContainer}>
{territories.map((territory) =>
<button
id={territory.short}
key={territory.short}
onClick={onClickTerritoryFocusButton}
className={styles.territoryFocusButton}
aria-label={intl.formatMessage(
{
id: 'map.territoryFocus.focusOn',
defaultMessage: 'Focus on {territory}',
description: 'Focus on the bounds of a specific territory',
},
{
territory: territory.long,
},
)}>
{territory.short}
</button>,
)}
<div className={'mapboxgl-ctrl mapboxgl-ctrl-group'}>
{territories.map((territory, index) =>
<button
id={territory.short}
key={territory.short}
onClick={onClickTerritoryFocusButton}
className={'mapboxgl-ctrl-icon ' + territoriesIconClassName[index]}
aria-label={intl.formatMessage(
{
id: 'map.territoryFocus.focusOn',
defaultMessage: 'Focus on {territory}',
description: 'Focus on the bounds of a specific territory',
},
{
territory: territory.long,
},
)}>
<span className={'mapboxgl-ctrl-icon'} aria-hidden={true}/>
</button>,
)}
</div>
</div>
);
};