youwen5/eexiv
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

finally fix mobile styling

Browse source
This commit is contained in:
Youwen Wu 2024-02-14 16:51:00 -08:00
parent 62ddeaff6a
commit 12cc1ec29b
3 changed files with 19 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/app/components/MobileMenu.tsx
View file

@ -31,6 +31,7 @@ export default function MobileMenu() {
} }
return ( return (
<>
<div className='w-20'> <div className='w-20'>
<button <button
className='p-2 rounded-xl hover:bg-blue-400' className='p-2 rounded-xl hover:bg-blue-400'
@ -38,12 +39,13 @@ export default function MobileMenu() {
> >
<RxHamburgerMenu size={40} /> <RxHamburgerMenu size={40} />
</button> </button>
</div>
<div <div
className={`${isOpen ? '' : styles['menu-hidden']} ${styles.menu} shadow-md shadow-slate-300`} className={`${isOpen ? '' : styles['menu-hidden']} ${styles.menu} shadow-md shadow-slate-300`}
> >
<span className={styles['search-bar']}> <div className={styles['search-bar']}>
<SearchBar onSubmit={handleSubmit} /> <SearchBar onSubmit={handleSubmit} />
</span> </div>
<p className='text-slate-600 mx-4 my-4'> <p className='text-slate-600 mx-4 my-4'>
We gratefully acknowledge support from our volunteer peer reviewers, We gratefully acknowledge support from our volunteer peer reviewers,
member institutions, and all{' '} member institutions, and all{' '}
@ -56,6 +58,6 @@ export default function MobileMenu() {
. .
</p> </p>
</div> </div>
</div> </>
) )
} }

6
src/app/components/SearchBar.tsx
View file

@ -25,10 +25,10 @@ export default function SearchBar({
} }
return ( return (
<div className='w-full flex flex-nowrap'> <div className='mx-2 flex flex-nowrap gap-2'>
<input <input
type='text' type='text'
className='py-3 px-5 rounded-xl text-slate-800 flex-grow' className='py-3 px-5 rounded-xl text-slate-800 flex-grow flex-shrink min-w-0'
name='q' name='q'
placeholder='Search...' placeholder='Search...'
onChange={handleInputChange} onChange={handleInputChange}
@ -37,7 +37,7 @@ export default function SearchBar({
/> />
<button <button
type='submit' type='submit'
className='p-2.5 mx-4 border-2 rounded-xl hover:bg-blue-300 flex-shrink' className='p-2.5 border-2 rounded-xl hover:bg-blue-300 flex-shrink'
onClick={handleClick} onClick={handleClick}
> >
Search Search

9
src/app/components/mobileMenu.module.css
View file

@ -1,14 +1,13 @@
.menu { .menu {
@apply overflow-hidden left-[0] top-[235px] z-10 absolute bg-slate-200; @apply overflow-hidden top-[235px] z-10 absolute bg-slate-200;
@apply duration-300; height: 180px;
height: calc(200px);
transition: height 0.2s ease-in-out; transition: height 0.2s ease-in-out;
width: 100vw; width: 100vw;
right: 0; left: 0;
} }
.search-bar { .search-bar {
@apply w-full flex justify-center z-10 px-4 py-2 bg-slate-300; @apply z-10 mt-2 mx-[2px] sm:m-2;
} }
.search-bar button { .search-bar button {