Skip to content

Commit 4d0564f

Browse files
anuja12mishraanuja12mishra
committed
fix(ui): improve card component responsiveness on small screens
1 parent ee2868d commit 4d0564f

File tree

4 files changed

+66
-62
lines changed

4 files changed

+66
-62
lines changed

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

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -16,26 +16,28 @@ 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 flex-wrap gap-2">
20-
<Link href="/" className="z-5 flex-shrink-0">
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 flex-1 max-w-md mx-4">
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 flex-shrink-0">
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 whitespace-nowrap">
34+
<Button className="text-sm whitespace-nowrap">
3335
{session && session.user ? 'Sign Out' : 'Sign In'}
3436
</Button>
3537
</form>
3638
<Link
3739
href="/contributors"
38-
className="btn btn-square btn-ghost umami--click--contributors-button hover:text-hacktoberfest-light transition-colors flex-shrink-0"
40+
className="btn btn-square btn-ghost umami--click--contributors-button hover:text-hacktoberfest-light transition-colors"
3941
>
4042
<BsPeopleFill size="1.5rem" color="white" title="Contributors" />
4143
</Link>
@@ -44,21 +46,24 @@ export async function Header() {
4446
href="https://github.com/max-programming/hacktoberfest-projects"
4547
target="_blank"
4648
rel="noreferrer"
47-
className="btn btn-square btn-ghost umami--click--github-button hover:text-hacktoberfest-light transition-colors flex-shrink-0"
49+
className="btn btn-square btn-ghost umami--click--github-button hover:text-hacktoberfest-light transition-colors"
4850
>
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 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)/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 & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -36,40 +36,41 @@ export default async function ReposPage({
3636
<>
3737
<Header />
3838
<ScrollToTop />
39-
<div className="container mx-auto px-4 mt-16 md:mt-32">
40-
<div className="min-h-screen pt-5 sm:pt-8 md:pt-12">
41-
<div className="text-center">
42-
<div className="w-5/6 max-w-md mx-auto">
43-
<h1 className="mb-5 text-3xl sm:text-4xl md: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 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
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
);
72-
7374
}
7475

7576
export async function generateMetadata({

0 commit comments

Comments
 (0)