andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SizeInput: fix slider bug that broke functionality on mobile

Browse Source 
We were, for some reason, preventing the default behavior of touch
events onTouchStart and onTouchEnd. This made the slider unusable with
drag actions on mobile. I can't remember why we did this to begin with,
probably something important...

The slider thumb size was also increased for better tap target size.
This commit is contained in:
rektdeckard
2020-09-25 23:58:48 -04:00
parent 5b42711c3e
commit 55ddcfc9a7
2 changed files with 17 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/SizeInput/SizeInput.css
View File

@@ -12,6 +12,10 @@
font-size: 16px; font-size: 16px;
} }
.size-bar label {
width: 40px;
}
.size-bar:focus-within { .size-bar:focus-within {
outline: none; outline: none;
} }
@@ -36,9 +40,9 @@
.size-bar input::-webkit-slider-thumb { .size-bar input::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */ -webkit-appearance: none; /* Override default look */
appearance: none; appearance: none;
width: 14px; /* Set a specific slider handle width */ width: 16px; /* Set a specific slider handle width */
height: 14px; /* Slider handle height */ height: 16px; /* Slider handle height */
padding: 6px; margin: 6px;
border-radius: 50%; border-radius: 50%;
background: white; /* Green background */ background: white; /* Green background */
cursor: pointer; /* Cursor on hover */ cursor: pointer; /* Cursor on hover */
@@ -46,24 +50,26 @@
} }
.size-bar input::-moz-range-thumb { .size-bar input::-moz-range-thumb {
width: 14px; /* Set a specific slider handle width */ appearance: none;
height: 14px; /* Slider handle height */ width: 16px; /* Set a specific slider handle width */
padding: 6px; height: 16px; /* Slider handle height */
background: black; /* Green background */ margin: 6px;
border-radius: 50%;
background: white; /* Green background */
cursor: pointer; /* Cursor on hover */ cursor: pointer; /* Cursor on hover */
transition: height 0.1s, width 0.1s; transition: height 0.1s, width 0.1s;
} }
.size-bar input:focus::-moz-range-thumb { .size-bar input:focus::-moz-range-thumb {
outline: none; outline: none;
width: 20px; /* Set a specific slider handle width */ width: 24px; /* Set a specific slider handle width */
height: 20px; /* Slider handle height */ height: 24px; /* Slider handle height */
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2);
} }
.size-bar input:focus::-webkit-slider-thumb { .size-bar input:focus::-webkit-slider-thumb {
outline: none; outline: none;
width: 20px; /* Set a specific slider handle width */ width: 24px; /* Set a specific slider handle width */
height: 20px; /* Slider handle height */ height: 24px; /* Slider handle height */
box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2);
} }

2
src/components/SizeInput/SizeInput.tsx
View File

@@ -7,12 +7,10 @@ import "./SizeInput.css";
type SizeInputProps = {}; type SizeInputProps = {};
const handleFocus = (event: React.UIEvent<HTMLInputElement>) => { const handleFocus = (event: React.UIEvent<HTMLInputElement>) => {
event.preventDefault();
event.currentTarget.focus(); event.currentTarget.focus();
}; };
const handleBlur = (event: React.UIEvent<HTMLInputElement>) => { const handleBlur = (event: React.UIEvent<HTMLInputElement>) => {
event.preventDefault();
event.currentTarget.blur(); event.currentTarget.blur();
}; };