From cbecbdbb2cee6d9c40372bf510ced7b88aae9588 Mon Sep 17 00:00:00 2001 From: Yasuaki Uechi Date: Sat, 7 Mar 2020 13:16:01 +0900 Subject: [PATCH] chore: new animation --- web/src/components/Form.tsx | 27 ++++----------------------- web/src/util/css.ts | 2 +- 2 files changed, 5 insertions(+), 24 deletions(-) diff --git a/web/src/components/Form.tsx b/web/src/components/Form.tsx index b472446..16907a7 100644 --- a/web/src/components/Form.tsx +++ b/web/src/components/Form.tsx @@ -4,7 +4,7 @@ import {useTranslation} from 'react-i18next'; import {Link, useHistory} from 'react-router-dom'; import {sanitize} from '../util/text'; import {sendQueryEvent} from '../util/analytics'; -import {mobile, slideUp} from '../util/css'; +import {mobile} from '../util/css'; import Suggestion from './Suggestion'; import {useDeferredState} from '../util/hooks'; @@ -14,7 +14,6 @@ const Form: React.FC<{ const history = useHistory(); const [inputValue, setInputValue] = useState(initialValue); const [suggestionQuery, setSuggestionQuery] = useDeferredState(800, ''); - const [isFocused, setFocus] = useState(false); const [suggested, setSuggested] = useState(false); const inputRef = useRef(null); const {t} = useTranslation(); @@ -66,18 +65,12 @@ const Form: React.FC<{
setFocus(true)} - onBlur={() => setFocus(false)} + onBlur={onSubmitQuery} value={inputValue} ref={inputRef} placeholder={t('placeholder')} aria-label="search form" /> - {isFocused && ( - - {t('pressEnterToSearch')} - - )} {queryGiven && !suggested ? ( @@ -126,8 +119,7 @@ const LogoImage = styled.img` `; const InputView = styled.input.attrs({ - type: 'input', - name: 'search', + type: 'search', autocomplete: 'off', autocorrect: 'off', autocapitalize: 'off', @@ -140,6 +132,7 @@ const InputView = styled.input.attrs({ font-family: 'Montserrat', monospace; font-weight: 600; font-size: 6rem; + appearance: none; ${mobile} { font-size: 2rem; @@ -149,15 +142,3 @@ const InputView = styled.input.attrs({ color: #c8cdda; } `; - -const Tips = styled.div` - color: #ababab; - text-align: center; - overflow: hidden; - - span { - display: block; - animation: ${slideUp} 0.6s cubic-bezier(0.19, 1, 0.22, 1); - animation-fill-mode: both; - } -`; diff --git a/web/src/util/css.ts b/web/src/util/css.ts index bc84c4e..a267cbe 100644 --- a/web/src/util/css.ts +++ b/web/src/util/css.ts @@ -4,7 +4,7 @@ export const mobile = '@media screen and (max-width: 800px)'; export const slideUp = keyframes` from { - transform: translateY(100%); + transform: translateY(150%) skewY(10deg); } to { transform: translateY(0);