Fix search functionality on mobile

Also edit blog card css Signed-off-by: Randy <randymoralesg@gmail.com>
randymorales · Apr 5, 2021 · 81a3cdc · 81a3cdc · vercel · Apr 5, 2021
1 parent 28103eb
commit 81a3cdc
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/cache/data.js b/cache/data.js
diff --git a/pages/blog/index.js b/pages/blog/index.js
@@ -36,7 +36,7 @@ export default function BlogIndex({ allLocalePostsData }) {
 
   const searchEndpoint = query => `/api/search?q=${query}`
 
-  const onChange = useCallback(event => {
+  const onKeyup = useCallback(event => {
     const query = event.target.value
     setQuery(query)
     if (query.length) {
@@ -69,7 +69,7 @@ export default function BlogIndex({ allLocalePostsData }) {
           {/* Search bar */}
           <input
             className={styles.search}
-            onChange={onChange}
+            onKeyup={onKeyup}
             onFocus={onFocus}
             placeholder={t('search-posts')}
             type='text'

diff --git a/styles/blog.module.css b/styles/blog.module.css
@@ -8,6 +8,7 @@
 .search {
   border: 1px solid #666;
   box-sizing: border-box;
+  cursor: 'pointer';
   font-size: 1.3rem;
   margin-bottom: 1rem;
   padding: 0.9rem;
@@ -32,7 +33,7 @@
   margin: 0.5rem;
   position: static;
   transition: 250ms all ease-in-out;
-  width: 45%;
+  width: 400px;
 }
 
 .card:hover {