mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-07-29 11:01:18 -07:00
Fix button centering on iphone (#581)
* 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
GitHub
parent
55b37fe448
commit
fba3090d36
8 changed files with 60 additions and 49 deletions
|
|
@ -1,34 +1,8 @@
|
|||
.territoryFocusButton {
|
||||
width: 2.5em;
|
||||
height: 2.5em;
|
||||
border-width: 1px 2px;
|
||||
border-color: #000000;
|
||||
border-style: solid;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.territoryFocusButton:not(:disabled):hover {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.territoryFocusContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 1.75em;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 300px;
|
||||
z-index: 10;
|
||||
left: 20px;
|
||||
top: 150px;
|
||||
}
|
||||
|
||||
.territoryFocusButton:first-child {
|
||||
border-top-width: 2px;
|
||||
}
|
||||
|
||||
.territoryFocusButton:last-child {
|
||||
border-bottom-width: 2px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
declare namespace TerritoryFocusControlModuleScssNamespace {
|
||||
export interface ITerritoryFocusControlModuleScss {
|
||||
territoryFocusContainer: string;
|
||||
territoryFocusButton: string;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
1
client/src/images/mapbtn-48.svg
Normal file
1
client/src/images/mapbtn-48.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M-.54.11h24v24h-24Z" transform="translate(0.54 -0.11)" style="fill:none"/><path d="M11.74,13.46H10.18V16H8.61V13.46H4.67V12.31L8.79,6.83h1.39v5.28h1.56ZM8.61,9.22,6.34,12.11H8.61Z" transform="translate(0.54 -0.11)"/><path d="M12.74,13.77a2.23,2.23,0,0,1,.15-.83,2.62,2.62,0,0,1,.39-.67,3.51,3.51,0,0,1,.55-.54,6.51,6.51,0,0,1,.64-.43,4,4,0,0,1-1.08-.89A2,2,0,0,1,13,9.12a2.21,2.21,0,0,1,.22-.95,2.54,2.54,0,0,1,.62-.77,3.13,3.13,0,0,1,.94-.5,3.8,3.8,0,0,1,1.19-.18,4,4,0,0,1,1.1.15,3.14,3.14,0,0,1,.9.44,2.15,2.15,0,0,1,.61.7,1.82,1.82,0,0,1,.22.9,2.26,2.26,0,0,1-.4,1.34,3.46,3.46,0,0,1-1.08,1,4,4,0,0,1,1.24.95,2.07,2.07,0,0,1,.46,1.4,2.21,2.21,0,0,1-.25,1.06,2.54,2.54,0,0,1-.68.81A3.14,3.14,0,0,1,17,16a3.86,3.86,0,0,1-1.23.19A3.93,3.93,0,0,1,14.6,16a3.14,3.14,0,0,1-1-.48,2.15,2.15,0,0,1-.65-.76A2,2,0,0,1,12.74,13.77Zm4.63-.22A1,1,0,0,0,17.2,13a1.82,1.82,0,0,0-.42-.41,4.34,4.34,0,0,0-.56-.33c-.2-.1-.4-.2-.59-.31a2.45,2.45,0,0,0-1,.74,1.37,1.37,0,0,0-.35.85,1.08,1.08,0,0,0,.41.9,1.9,1.9,0,0,0,1.16.32,1.78,1.78,0,0,0,1.09-.31A1,1,0,0,0,17.37,13.55ZM14.58,9.2a1,1,0,0,0,.13.53,1.53,1.53,0,0,0,.35.37,2.64,2.64,0,0,0,.49.29l.55.26a2.13,2.13,0,0,0,.41-.26,1.88,1.88,0,0,0,.35-.34,2.2,2.2,0,0,0,.26-.39,1,1,0,0,0,.09-.41,1,1,0,0,0-.11-.47,1.15,1.15,0,0,0-.31-.35,1.19,1.19,0,0,0-.42-.21,1.59,1.59,0,0,0-.48-.07,1.51,1.51,0,0,0-.53.09,1.46,1.46,0,0,0-.41.23,1.13,1.13,0,0,0-.28.34A.92.92,0,0,0,14.58,9.2Z" transform="translate(0.54 -0.11)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
1
client/src/images/mapbtn-AK.svg
Normal file
1
client/src/images/mapbtn-AK.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M-.54.11h24v24h-24Z" transform="translate(0.54 -0.11)" style="fill:none"/><path d="M9.34,14H6.62L6,16H4.22L7.16,6.9H8.94L11.86,16H10ZM7,12.55H9l-.92-3H8Z" transform="translate(0.54 -0.11)"/><path d="M15.39,12.2h-.93V16H12.68V6.9h1.78v3.72h.93L17.47,6.9h2l-2.57,4.39L19.82,16h-2.2Z" transform="translate(0.54 -0.11)"/></svg>
|
||||
|
After Width: | Height: | Size: 415 B |
1
client/src/images/mapbtn-HI.svg
Normal file
1
client/src/images/mapbtn-HI.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M-.54.11h24v24h-24Z" transform="translate(0.54 -0.11)" style="fill:none"/><path d="M9.64,12.19H6.7V16H4.92V6.9H6.7v3.7H9.64V6.9h1.78V16H9.64Z" transform="translate(0.54 -0.11)"/><path d="M12.63,14.41h2.31V8.48H12.63V6.9H19V8.48H16.72v5.93H19V16h-6.4Z" transform="translate(0.54 -0.11)"/></svg>
|
||||
|
After Width: | Height: | Size: 385 B |
1
client/src/images/mapbtn-PR.svg
Normal file
1
client/src/images/mapbtn-PR.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M-.54.11h24v24h-24Z" transform="translate(0.54 -0.11)" style="fill:none"/><path d="M5.25,7a12.1,12.1,0,0,1,1.2-.16c.44,0,.87-.06,1.31-.06a7.88,7.88,0,0,1,1.36.11,3.3,3.3,0,0,1,1.22.44,2.54,2.54,0,0,1,.89.92,3.05,3.05,0,0,1,.35,1.54,3.15,3.15,0,0,1-.3,1.43,2.79,2.79,0,0,1-.79,1,3.24,3.24,0,0,1-1.13.56,4.69,4.69,0,0,1-1.3.18H7.55l-.31,0-.21,0V16H5.25ZM7.9,8.3l-.49,0a2.53,2.53,0,0,0-.38,0v3l.16,0,.22,0H7.8a3.23,3.23,0,0,0,.69-.07,1.61,1.61,0,0,0,.62-.24,1.18,1.18,0,0,0,.43-.48,1.75,1.75,0,0,0,.17-.82,1.38,1.38,0,0,0-.16-.71,1.19,1.19,0,0,0-.41-.45,1.57,1.57,0,0,0-.58-.23A2.84,2.84,0,0,0,7.9,8.3Z" transform="translate(0.54 -0.11)"/><path d="M12.71,7l.64-.1L14,6.82l.67,0h.6a6.54,6.54,0,0,1,1.25.12,3.37,3.37,0,0,1,1.11.42,2.33,2.33,0,0,1,.78.81,2.55,2.55,0,0,1,.29,1.26,3.93,3.93,0,0,1-.11,1,3,3,0,0,1-.31.72,2.23,2.23,0,0,1-.47.54,4.33,4.33,0,0,1-.61.41l2.2,4H17.39l-1.84-3.56H14.49V16H12.71Zm2.73,1.36-.54,0a1.81,1.81,0,0,0-.41.05v2.64h.7a2.06,2.06,0,0,0,1.21-.34,1.3,1.3,0,0,0,.47-1.12,1.14,1.14,0,0,0-.37-.91A1.49,1.49,0,0,0,15.44,8.35Z" transform="translate(0.54 -0.11)"/></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -282,6 +282,7 @@ $j40-blue-background-color: #EFF6FB;
|
|||
// see more here: https://thatemil.com/blog/2014/04/06/intrinsic-sizing-of-svg-in-responsive-web-design/
|
||||
.mapboxgl-ctrl-icon {
|
||||
height: 1em;
|
||||
pointer-events: none; /* this keeps the icons from "eating" the click events instead of the button getting them */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -296,6 +297,30 @@ $j40-blue-background-color: #EFF6FB;
|
|||
background-image: url("../../node_modules/uswds/dist/img/usa-icons/remove.svg");
|
||||
}
|
||||
}
|
||||
|
||||
button.mapboxgl-ctrl-zoom-to-48 {
|
||||
.mapboxgl-ctrl-icon {
|
||||
background-image: url("../images/mapbtn-48.svg");
|
||||
}
|
||||
}
|
||||
|
||||
button.mapboxgl-ctrl-zoom-to-ak {
|
||||
.mapboxgl-ctrl-icon {
|
||||
background-image: url("../images/mapbtn-AK.svg");
|
||||
}
|
||||
}
|
||||
|
||||
button.mapboxgl-ctrl-zoom-to-hi {
|
||||
.mapboxgl-ctrl-icon {
|
||||
background-image: url("../images/mapbtn-HI.svg");
|
||||
}
|
||||
}
|
||||
|
||||
button.mapboxgl-ctrl-zoom-to-pr {
|
||||
.mapboxgl-ctrl-icon {
|
||||
background-image: url("../images/mapbtn-PR.svg");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue