Skip to content

Commit e2b1b99

Browse files
max-programmingmax-programming
authored
Merge pull request #242 from anuja12mishra/fix/mobile-responsive
Improve repository listing page responsiveness for mobile devices
2 parents b94b15c + 4d0564f commit e2b1b99

File tree

9 files changed

+94
-84
lines changed

9 files changed

+94
-84
lines changed

‎src/app/(public)/_components/button.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,13 @@ export function Button({
1414
<div className="relative inline-block group w-fit transition-all duration-500">
1515
<button
1616
className={cn(
17-
'text-sm font-bold inline-flex justify-center items-center uppercase py-3 px-4 text-center text-white bg-primary-btn-gradient shadow-primary-btn-shadow hover:bg-primary-btn-hover-gradient min-w-20 active:scale-95 active:shadow-lg transition-all duration-150 ease-in-out',
17+
'text-xs sm:text-sm font-bold inline-flex justify-center items-center uppercase py-2 sm:py-3 px-3 sm:px-4 text-center text-white bg-primary-btn-gradient shadow-primary-btn-shadow hover:bg-primary-btn-hover-gradient min-w-16 sm:min-w-20 active:scale-95 active:shadow-lg transition-all duration-150 ease-in-out whitespace-nowrap',
1818
className
1919
)}
2020
{...props}
2121
>
2222
<p className="btn-clip group-hover:opacity-0 duration-300 group-hover:scale-95"></p>
23-
<span className="relative z-20 flex justify-center items-center text-hacktoberfest-light gap-2 font-bold">
23+
<span className="relative z-20 flex justify-center items-center text-hacktoberfest-light gap-1 sm:gap-2 font-bold">
2424
{children}
2525
</span>
2626
</button>

‎src/app/(public)/_components/header.tsx‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -16,20 +16,22 @@ export async function Header() {
1616
return (
1717
<header className="fixed top-0 left-0 w-full z-50 py-3 px-4 sm:px-6">
1818
<div className="border border-hacktoberfest-light-blue rounded-lg py-4 px-4 sm:px-6 container mx-auto backdrop-blur-md shadow-lg">
19-
<div className="flex justify-between items-center">
20-
<Link href="/" className="z-5">
19+
{/* Desktop Layout */}
20+
<div className="hidden md:flex justify-between items-center gap-4">
21+
{/* Logo */}
22+
<Link href="/" className="flex-shrink-0">
2123
<LogoIconsSvg />
2224
</Link>
2325

24-
{/* Desktop Search - Hidden on mobile */}
25-
<div className="hidden md:block">
26+
{/* Search Form */}
27+
<div className="flex-1 max-w-md">
2628
<SearchForm />
2729
</div>
2830

29-
{/* Desktop Navigation - Hidden on mobile */}
30-
<div className="hidden md:flex gap-2 lg:ml-40">
31+
{/* Navigation Actions */}
32+
<div className="flex gap-2 flex-shrink-0 items-center">
3133
<form action={session ? signOutAction : signInAction}>
32-
<Button className="text-xs sm:text-sm">
34+
<Button className="text-sm whitespace-nowrap">
3335
{session && session.user ? 'Sign Out' : 'Sign In'}
3436
</Button>
3537
</form>
@@ -49,16 +51,19 @@ export async function Header() {
4951
<IoLogoGithub size="1.5rem" color="white" title="GitHub" />
5052
</a>
5153
</div>
52-
53-
{/* Mobile Hamburger Menu */}
54-
<MobileMenu session={session} />
5554
</div>
5655

57-
{/* Mobile Search - Visible only on mobile */}
58-
<div className="md:hidden md:mt-4">
59-
<SearchForm />
56+
{/* Mobile Layout */}
57+
<div className="md:hidden">
58+
{/* Logo and Hamburger Menu */}
59+
<div className="flex justify-between items-center ">
60+
<Link href="/" className="flex-shrink-0">
61+
<LogoIconsSvg />
62+
</Link>
63+
<MobileMenu session={session} />
64+
</div>
6065
</div>
6166
</div>
6267
</header>
6368
);
64-
}
69+
}

‎src/app/(public)/_components/hero.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@ export function Hero() {
2727
return (
2828
<div className="relative bg-hero-gradient ">
2929
<div className="z-50 flex flex-col space-y-8 justify-center items-center text-center min-h-screen pt-28 sm:pt-24">
30-
<div className="max-w-md space-y-5">
31-
<h1 className="text-5xl font-medium uppercase heading-text">
30+
<div className="max-w-md space-y-5 px-4">
31+
<h1 className="text-3xl sm:text-4xl md:text-5xl font-medium uppercase heading-text">
3232
Search your language
3333
</h1>
3434
<form
35-
className="items-center w-full max-w-xs mx-auto form-control outline-none "
35+
className="items-center w-full max-w-xs mx-auto form-control outline-none"
3636
onSubmit={handleSearch}
3737
>
3838
<div className="flex w-full">
@@ -41,29 +41,29 @@ export function Hero() {
4141
type="text"
4242
placeholder="Search for your language"
4343
className="w-full max-w-xs bg-transparent rounded-tr-none rounded-br-none input input-bordered text-hacktoberfest-light border-hacktoberfest-light
44-
focus:border-hacktoberfest-light focus:!outline-none focus-visible:!outline-none placeholder:text-hacktoberfest-light"
44+
focus:border-hacktoberfest-light focus:!outline-none focus-visible:!outline-none placeholder:text-hacktoberfest-light text-sm sm:text-base"
4545
name="search"
4646
/>
4747
</div>
4848
<button
4949
type="submit"
50-
className="bg-transparent rounded-tl-none rounded-bl-none group btn btn-square text-hacktoberfest-light border-hacktoberfest-light hover:!border-hacktoberfest-light hover:bg-primary-btn-hover-gradient"
50+
className="bg-transparent rounded-tl-none rounded-bl-none group btn btn-square text-hacktoberfest-light border-hacktoberfest-light hover:!border-hacktoberfest-light hover:bg-primary-btn-hover-gradient flex-shrink-0"
5151
>
52-
<Search />
52+
<Search size={16} className="sm:w-5 sm:h-5" />
5353
</button>
5454
</div>
5555
</form>
56-
<p className="font-medium uppercase text-hacktoberfest-light">
56+
<p className="font-medium uppercase text-hacktoberfest-light text-sm sm:text-base">
5757
Or select the programming language you would like to find
5858
repositories for.
5959
</p>
60-
<div className="flex flex-wrap gap-6 items-center justify-center ">
60+
<div className="flex flex-wrap gap-4 sm:gap-6 items-center justify-center">
6161
{mainLanguages.map(language => (
6262
<LanguageButton key={language} language={language} />
6363
))}
6464
</div>
6565
<div className="dropdown dropdown-top">
66-
<Button tabIndex={0} className="umami--click--otherlangs-button">
66+
<Button tabIndex={0} className="umami--click--otherlangs-button text-sm sm:text-base">
6767
Other languages
6868
</Button>
6969

@@ -75,7 +75,7 @@ export function Hero() {
7575
<li key={language}>
7676
<Link
7777
href={`/repos/${language.toLowerCase()}`}
78-
className="text-gray-700 hover:text-white hover:bg-hacktoberfest-blue rounded-lg transition-colors duration-200 px-3 py-2"
78+
className="text-gray-700 hover:text-white hover:bg-hacktoberfest-blue rounded-lg transition-colors duration-200 px-3 py-2 text-sm"
7979
>
8080
{language}
8181
</Link>

‎src/app/(public)/_components/mobile-menu.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,43 +20,43 @@ export function MobileMenu({ session }: MobileMenuProps) {
2020
const toggleMenu = () => setIsOpen(!isOpen);
2121

2222
return (
23-
<div className="md:hidden">
23+
<div className="md:hidden flex-shrink-0">
2424
{/* Hamburger Button */}
2525
<button
2626
onClick={toggleMenu}
2727
className="text-white hover:text-hacktoberfest-light transition-colors p-2 rounded-lg"
2828
aria-label="Toggle menu"
2929
>
30-
{isOpen ? <HiX size="1.5rem" /> : <HiMenu size="1.5rem" />}
30+
{isOpen ? <HiX size="1.25rem" /> : <HiMenu size="1.25rem" />}
3131
</button>
3232

3333
{/* Mobile Menu Overlay */}
3434
{isOpen && (
35-
<div className="absolute top-full left-0 right-0 mt-2 bg-hacktoberfest-light-blue border border-hacktoberfest-light-blue rounded-lg py-4 px-4 sm:px-6 container mx-auto backdrop-blur-md shadow-lg">
36-
<div className="flex flex-col gap-4">
35+
<div className="absolute top-full left-0 right-0 mt-2 bg-hacktoberfest-light-blue border border-hacktoberfest-light-blue rounded-lg py-4 px-4 sm:px-6 container mx-auto backdrop-blur-md shadow-lg">
36+
<div className="flex flex-col gap-3">
3737
<form action={session ? signOutAction : signInAction}>
38-
<Button className="w-full text-center text-xs sm:text-sm">
38+
<Button className="w-full text-center text-xs">
3939
{session && session.user ? 'Sign Out' : 'Sign In'}
4040
</Button>
4141
</form>
4242

4343
<Link
4444
href="/contributors"
45-
className="flex items-center gap-3 text-white hover:text-hacktoberfest-light transition-colors p-3 rounded-lg"
45+
className="flex items-center gap-3 text-white hover:text-hacktoberfest-light transition-colors p-2 rounded-lg"
4646
onClick={() => setIsOpen(false)}
4747
>
48-
<BsPeopleFill size="1.2rem" />
48+
<BsPeopleFill size="1.1rem" />
4949
<span className="text-sm font-medium">Contributors</span>
5050
</Link>
5151

5252
<a
5353
href="https://github.com/max-programming/hacktoberfest-projects"
5454
target="_blank"
5555
rel="noreferrer"
56-
className="flex items-center gap-3 text-white hover:text-hacktoberfest-light transition-colors p-3 rounded-lg"
56+
className="flex items-center gap-3 text-white hover:text-hacktoberfest-light transition-colors p-2 rounded-lg"
5757
onClick={() => setIsOpen(false)}
5858
>
59-
<IoLogoGithub size="1.2rem" />
59+
<IoLogoGithub size="1.1rem" />
6060
<span className="text-sm font-medium">GitHub</span>
6161
</a>
6262
</div>

‎src/app/(public)/_components/search-form.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,21 +35,21 @@ export function SearchForm() {
3535
}
3636

3737
return (
38-
<div className="hidden px-2 mb-3 sm:flex-1 sm:max-w-md sm:mb-0 sm:px-6 sm:inline-flex">
38+
<div className="w-full">
3939
<form
40-
className="w-full m-2 mx-auto form-control"
40+
className="w-full form-control"
4141
onSubmit={handleSubmit(onSubmit)}
4242
>
4343
<div className="relative">
4444
<input
4545
placeholder="Search"
46-
className="w-full pr-16 bg-transparent text-hacktoberfest-light input input-bordered border-hacktoberfest-light focus:border-hacktoberfest-light-blue focus:outline-none placeholder:text-hacktoberfest-beige transition-colors duration-200"
46+
className="w-full pr-16 bg-transparent text-hacktoberfest-light input input-bordered border-hacktoberfest-light focus:border-hacktoberfest-light-blue focus:outline-none placeholder:text-hacktoberfest-beige transition-colors duration-200 text-sm sm:text-base"
4747
type="text"
4848
{...register('searchQuery', { required: true })}
4949
/>
5050
{searchQuery && searchQuery.trim() !== '' && (
5151
<button
52-
className="absolute top-0 right-0 rounded-l-none btn btn-ghost"
52+
className="absolute top-0 right-0 rounded-l-none btn btn-ghost btn-sm"
5353
type="button"
5454
onClick={() => reset()}
5555
>

‎src/app/(public)/repos/[language]/_components/repo-card.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,10 +35,10 @@ export function RepoCard({ repo }: RepoCardProps) {
3535
<section className="transition duration-300 shadow-sm card bg-hacktoberfest-blue ring-1 ring-hacktoberfest-light hover:scale-105 hover:shadow-2xl hover:shadow-hacktoberfest-light-blue h-125">
3636
<div className="relative p-6 card-body">
3737
<div className="flex-1">
38-
<div className="flex items-center gap-2 justify-between">
38+
<div className="flex items-center justify-between gap-4 overflow-hidden">
3939
<div className="flex items-center gap-2">
4040
<a
41-
className="border-2 rounded-full h-14 aspect-square p-1.5 border-hacktoberfest-beige"
41+
className="border-2 rounded-full h-12 w-12 sm:h-14 sm:w-14 p-1.5 border-hacktoberfest-beige flex-shrink-0"
4242
href={repo.owner.html_url}
4343
title={repo.owner.login}
4444
target="_blank"
@@ -50,9 +50,9 @@ export function RepoCard({ repo }: RepoCardProps) {
5050
className="rounded-full"
5151
/>
5252
</a>
53-
<h2 className="overflow-hidden text-3xl cursor-pointer text-hacktoberfest-light line-clamp-1">
53+
<h2 className="overflow-hidden text-xl sm:text-3xl cursor-pointer text-hacktoberfest-light line-clamp-1">
5454
<a
55-
href={repo.html_url + '?ref=finder.usmans.me'}
55+
href={repo.html_url + "?ref=finder.usmans.me"}
5656
title={repo.name}
5757
target="_blank"
5858
rel="noreferrer"
@@ -64,6 +64,7 @@ export function RepoCard({ repo }: RepoCardProps) {
6464
<ReportButton repo={repo} />
6565
</div>
6666

67+
6768
<h6 className="my-5 text-lg text-hacktoberfest-beige">
6869
{emojify(truncatedDescription)}
6970
{repo.description?.length > MAX_DESCRIPTION_LENGTH && (

‎src/app/(public)/repos/[language]/_components/stars-filter.tsx‎

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -53,16 +53,16 @@ export function StarsFilter() {
5353

5454
return (
5555
<form
56-
className="w-full px-2 m-2 mx-auto mb-4 sm:w-3/4 xl:w-2/4 form-control"
56+
className="w-full px-4 mx-auto mb-4 sm:w-3/4 xl:w-2/4 form-control"
5757
onSubmit={handleSubmit(onSubmit)}
5858
>
59-
<div className="flex flex-col gap-2 sm:flex-row">
59+
<div className="flex flex-col sm:flex-row gap-3 items-stretch">
6060
<Controller
6161
name="startStars"
6262
render={({ field }) => (
6363
<input
6464
type="number"
65-
className="w-3/5 pr-4 m-auto text-center bg-transparent sm:w-full input input-bordered md:text-left text-hacktoberfest-light placeholder:text-hacktoberfest-beige border-hacktoberfest-light focus:border-hacktoberfest-light-blue focus:outline-none transition-colors duration-200 placeholder:line-clamp-1"
65+
className="w-full px-4 py-3 text-center sm:text-left bg-transparent input input-bordered text-hacktoberfest-light placeholder:text-hacktoberfest-beige border-hacktoberfest-light focus:border-hacktoberfest-light-blue focus:outline-none transition-colors duration-200"
6666
{...field}
6767
onChange={e => field.onChange(e.target.valueAsNumber)}
6868
placeholder="Star's Starting Range"
@@ -76,7 +76,7 @@ export function StarsFilter() {
7676
render={({ field }) => (
7777
<input
7878
type="number"
79-
className="w-3/5 pr-4 m-auto text-center bg-transparent sm:w-full input input-bordered md:text-left text-hacktoberfest-light placeholder:text-hacktoberfest-beige border-hacktoberfest-light focus:border-hacktoberfest-light-blue focus:outline-none transition-colors duration-200"
79+
className="w-full px-4 py-3 text-center sm:text-left bg-transparent input input-bordered text-hacktoberfest-light placeholder:text-hacktoberfest-beige border-hacktoberfest-light focus:border-hacktoberfest-light-blue focus:outline-none transition-colors duration-200"
8080
{...field}
8181
onChange={e => field.onChange(e.target.valueAsNumber)}
8282
placeholder="Star's Finish Range"
@@ -86,16 +86,13 @@ export function StarsFilter() {
8686
control={control}
8787
/>
8888

89-
{/* Flex container to center the button */}
90-
<div className="flex items-center justify-center">
91-
<button
92-
className="w-3/5 mx-auto btn bg-hacktoberfest-blue border-hacktoberfest-light text-hacktoberfest-light hover:bg-hacktoberfest-light-blue hover:text-hacktoberfest-blue transition-colors duration-200 md:w-full"
93-
type="submit"
94-
>
95-
Search
96-
</button>
97-
</div>
89+
<button
90+
className="w-full sm:w-auto sm:min-w-[120px] px-6 py-3 btn bg-hacktoberfest-blue border-hacktoberfest-light text-hacktoberfest-light hover:bg-hacktoberfest-light-blue hover:text-hacktoberfest-blue transition-colors duration-200 whitespace-nowrap"
91+
type="submit"
92+
>
93+
Search
94+
</button>
9895
</div>
9996
</form>
10097
);
101-
}
98+
}

‎src/app/(public)/repos/[language]/page.tsx‎

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -36,36 +36,38 @@ export default async function ReposPage({
3636
<>
3737
<Header />
3838
<ScrollToTop />
39-
<div className="container mx-auto mt-32">
40-
<div className="min-h-screen pt-5">
41-
<div className="text-center">
42-
<div className="w-5/6 max-w-md mx-auto">
43-
<h1 className="mb-5 text-5xl font-medium uppercase text-hacktoberfest-light">
44-
<span className="font-bold heading-text">
45-
{repos.total_count}
46-
</span>{' '}
47-
repositories for{' '}
48-
<span className="font-bold heading-text">
49-
{sp.q
50-
? sp.q + ' in ' + capitalize(decodeURIComponent(language))
51-
: capitalize(decodeURIComponent(language))}
52-
</span>
53-
</h1>
39+
<div className="w-full overflow-x-hidden">
40+
<div className="container mx-auto px-4 pt-32 sm:pt-36 md:pt-40 pb-8">
41+
<div className="min-h-screen">
42+
<div className="text-center mb-8">
43+
<div className="max-w-4xl mx-auto">
44+
<h1 className="mb-6 text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-medium uppercase text-hacktoberfest-light break-words px-2">
45+
<span className="font-bold heading-text">
46+
{repos.total_count}
47+
</span>{' '}
48+
repositories for{' '}
49+
<span className="font-bold heading-text">
50+
{sp.q
51+
? sp.q + ' in ' + capitalize(decodeURIComponent(language))
52+
: capitalize(decodeURIComponent(language))}
53+
</span>
54+
</h1>
55+
</div>
56+
</div>
57+
<Sorter />
58+
<StarsFilter />
59+
<div className="grid grid-cols-1 gap-6 px-2 sm:px-4 sm:grid-cols-2 lg:grid-cols-3">
60+
{repos.items.map(repo => (
61+
<RepoCard key={repo.id} repo={repo} />
62+
))}
5463
</div>
5564
</div>
56-
<Sorter />
57-
<StarsFilter />
58-
<div className="grid grid-cols-1 gap-8 p-4 md:grid-cols-2 lg:grid-cols-3">
59-
{repos.items.map(repo => (
60-
<RepoCard key={repo.id} repo={repo} />
61-
))}
62-
</div>
65+
<Pagination
66+
page={page}
67+
totalCount={repos.total_count}
68+
searchParams={sp}
69+
/>
6370
</div>
64-
<Pagination
65-
page={page}
66-
totalCount={repos.total_count}
67-
searchParams={sp}
68-
/>
6971
</div>
7072
</>
7173
);

‎tailwind.config.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,11 @@ const config = {
88
media: false, // or 'media' or 'class'
99
theme: {
1010
extend: {
11+
screens: {
12+
'xs': '320px',
13+
// This adds support for very small screens
14+
// Now we can use xs:text-xs, xs:px-2, etc.
15+
},
1116
fontFamily: {
1217
mono: ['var(--font-atkinson-hyperlegible-mono)', 'monospace']
1318
},

0 commit comments

Comments
 (0)