Skip to content

Commit e09e48b

Browse files
navins94navins94
committed
fix responsive
1 parent 34e8ed0 commit e09e48b

File tree

10 files changed

+385
-333
lines changed

10 files changed

+385
-333
lines changed

‎frontend/components/FilterSection.js‎

Lines changed: 35 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ export default function FilterSection({
2929
const [tempSelections, setTempSelections] = useState({});
3030
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
3131
const dropdownRef = useRef(null);
32+
const mobileMenuRef = useRef(null);
3233

3334
const filterConfigs = {
3435
region: {
@@ -111,7 +112,12 @@ export default function FilterSection({
111112

112113
useEffect(() => {
113114
const handleClickOutside = (event) => {
114-
if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
115+
if (
116+
dropdownRef.current &&
117+
!dropdownRef.current.contains(event.target) &&
118+
(!mobileMenuRef.current ||
119+
!mobileMenuRef.current.contains(event.target))
120+
) {
115121
setOpenDropdown(null);
116122
setTempSelections({});
117123
}
@@ -270,7 +276,10 @@ export default function FilterSection({
270276
{config.hasAllOption && (
271277
<>
272278
<button
273-
onClick={() => handleAllSelection(filterKey)}
279+
onClick={(e) => {
280+
e.stopPropagation();
281+
handleAllSelection(filterKey);
282+
}}
274283
className="w-full text-left px-4 py-3 transition-colors duration-150 hover:bg-primary-50 flex items-center gap-3"
275284
>
276285
<div
@@ -309,9 +318,10 @@ export default function FilterSection({
309318
return (
310319
<button
311320
key={option.value}
312-
onClick={() =>
313-
handleTempSelection(filterKey, option.value)
314-
}
321+
onClick={(e) => {
322+
e.stopPropagation();
323+
handleTempSelection(filterKey, option.value);
324+
}}
315325
className="w-full text-left px-4 py-3 transition-colors duration-150 hover:bg-primary-50 flex items-center gap-3"
316326
>
317327
<div
@@ -388,7 +398,10 @@ export default function FilterSection({
388398

389399
{isMobileMenuOpen && (
390400
<div className="lg:hidden fixed inset-0 z-50 bg-black bg-opacity-50 text-black">
391-
<div className="absolute right-0 top-0 bottom-0 w-full sm:w-96 bg-white shadow-2xl">
401+
<div
402+
ref={mobileMenuRef}
403+
className="absolute right-0 top-0 bottom-0 w-full sm:w-96 bg-white shadow-2xl"
404+
>
392405
<div className="flex items-center justify-between p-4 border-b">
393406
<h2 className="text-lg font-bold">Filters</h2>
394407
<button
@@ -434,7 +447,10 @@ export default function FilterSection({
434447
<div className="px-4 pb-4">
435448
{config.hasAllOption && (
436449
<button
437-
onClick={() => handleAllSelection(filterKey)}
450+
onClick={(e) => {
451+
e.stopPropagation();
452+
handleAllSelection(filterKey);
453+
}}
438454
className="w-full text-left py-2 flex items-center gap-3"
439455
>
440456
<div
@@ -469,9 +485,10 @@ export default function FilterSection({
469485
return (
470486
<button
471487
key={option.value}
472-
onClick={() =>
473-
handleTempSelection(filterKey, option.value)
474-
}
488+
onClick={(e) => {
489+
e.stopPropagation();
490+
handleTempSelection(filterKey, option.value);
491+
}}
475492
className="w-full text-left py-2 flex items-center gap-3"
476493
>
477494
<div
@@ -498,13 +515,19 @@ export default function FilterSection({
498515
<Button
499516
variant="primary"
500517
size="sm"
501-
onClick={() => handleApply(filterKey)}
518+
onClick={(e) => {
519+
e.stopPropagation();
520+
handleApply(filterKey);
521+
}}
502522
className="flex-1"
503523
>
504524
Apply
505525
</Button>
506526
<Button
507-
onClick={() => handleClearFilter(filterKey)}
527+
onClick={(e) => {
528+
e.stopPropagation();
529+
handleClearFilter(filterKey);
530+
}}
508531
variant="ghost"
509532
size="sm"
510533
className="flex-1"

‎frontend/components/Footer.js‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -53,14 +53,16 @@ const socialLinks = [
5353
];
5454

5555
const FooterSection = ({ title, links }) => (
56-
<div className="md:col-span-3">
57-
<ParagraphMD className="mb-4">{title}</ParagraphMD>
58-
<ul className="space-y-3">
56+
<div className="col-span-6 sm:col-span-4 lg:col-span-3">
57+
<ParagraphMD className="mb-3 sm:mb-4 text-base sm:text-lg font-semibold">
58+
{title}
59+
</ParagraphMD>
60+
<ul className="space-y-2 sm:space-y-3">
5961
{links.map((link) => (
6062
<li key={link.href}>
6163
<Link
6264
href={link.href}
63-
className="text-[#21252B] hover:text-gray-800 transition-colors font-bold"
65+
className="text-[#21252B] hover:text-gray-800 transition-colors font-bold text-sm sm:text-base"
6466
>
6567
{link.label}
6668
</Link>
@@ -74,27 +76,29 @@ export default function Footer() {
7476
return (
7577
<footer className="bg-white text-black rounded-t-lg">
7678
<div className="bg-gray-20">
77-
<div className="container mx-auto py-16">
78-
<div className="grid grid-cols-1 md:grid-cols-12 gap-12">
79-
<div className="md:col-span-3">
80-
<Link href="/" className="flex items-center gap-2">
79+
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12 lg:py-16">
80+
<div className="grid grid-cols-6 sm:grid-cols-12 gap-6 sm:gap-8 lg:gap-12">
81+
<div className="col-span-6 sm:col-span-12 lg:col-span-3">
82+
<Link href="/" className="inline-flex items-center gap-2">
8183
<Image
8284
src="/images/logo.svg"
8385
alt="Kenya Drylands Investment Hub Logo"
8486
width={230}
8587
height={40}
8688
priority
89+
className="w-48 sm:w-56 lg:w-60 h-auto"
8790
/>
8891
</Link>
8992

90-
<div className="flex items-center gap-2 text-sm text-black mt-8 font-bold">
93+
<div className="flex items-center gap-2 text-xs sm:text-sm text-black mt-6 sm:mt-8 font-bold">
9194
Powered by
9295
<Image
9396
src="/images/footer-logo.png"
9497
alt="Akvo"
9598
width={130}
9699
height={40}
97100
priority
101+
className="w-24 sm:w-28 lg:w-32 h-auto"
98102
/>
99103
</div>
100104
</div>
@@ -110,23 +114,23 @@ export default function Footer() {
110114
</div>
111115
</div>
112116

113-
<div className="container mx-auto py-8">
114-
<div className="flex flex-col md:flex-row justify-between items-start md:items-center">
115-
<div className="mb-6 md:mb-0">
116-
<p className="text-black mb-2">
117+
<div className="container mx-auto px-4 sm:px-6 lg:px-8 py-6 sm:py-8">
118+
<div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
119+
<div className="order-2 lg:order-1">
120+
<p className="text-black mb-2 text-sm sm:text-base">
117121
We apply the principles of open source software, open content and
118122
open data to all of our work.
119123
</p>
120124
<Link
121125
href="/why-how"
122-
className="text-black hover:text-gray-300 transition-colors border-b border-black pb-0.5"
126+
className="text-black hover:text-gray-600 transition-colors border-b border-black pb-0.5 text-sm sm:text-base inline-block"
123127
>
124128
Find out why and how
125129
</Link>
126130
</div>
127131

128-
<div className="flex items-center gap-8">
129-
<div className="flex items-center gap-4">
132+
<div className="flex items-center gap-6 sm:gap-8 order-1 lg:order-2">
133+
<div className="flex items-center gap-3 sm:gap-4">
130134
{socialLinks.map((social) => {
131135
const IconComponent = social.icon;
132136
return (
@@ -138,7 +142,7 @@ export default function Footer() {
138142
target="_blank"
139143
rel="noopener noreferrer"
140144
>
141-
<IconComponent className="w-6 h-6" />
145+
<IconComponent className="w-5 h-5 sm:w-6 sm:h-6" />
142146
</Link>
143147
);
144148
})}

‎frontend/components/HeroSlider.js‎

Lines changed: 60 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -98,45 +98,54 @@ const HeroSlider = ({ setData }) => {
9898
backgroundSize: 'cover',
9999
}}
100100
>
101-
<div className="">
102-
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center min-h-[500px]">
103-
<div className="max-w-2xl mx-auto px-6 pl-32">
104-
<div className="mb-12">
105-
<H2 className="font-extrabold text-primary-500">
106-
{heroData.title ||
107-
'Welcome to the Kenya Drylands Investment Hub'}
108-
</H2>
109-
<ParagraphMD className="mt-4">
110-
{heroData.description ||
111-
"Driving sustainable investment in agrifood, water, and energy across Kenya's drylands"}
112-
</ParagraphMD>
113-
</div>
101+
<div className="w-full">
102+
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-12 items-center min-h-[400px] md:min-h-[500px]">
103+
{/* Text Content */}
104+
<div className="w-full px-6 sm:px-8 md:px-12 lg:pl-16 xl:pl-32 py-8 lg:py-12">
105+
<div className="max-w-2xl mx-auto lg:mx-0">
106+
<div className="mb-8 lg:mb-12">
107+
<H2 className="font-extrabold text-primary-500 text-2xl sm:text-3xl md:text-4xl lg:text-5xl">
108+
{heroData.title ||
109+
'Welcome to the Kenya Drylands Investment Hub'}
110+
</H2>
111+
<ParagraphMD className="mt-4 text-sm sm:text-base lg:text-lg">
112+
{heroData.description ||
113+
"Driving sustainable investment in agrifood, water, and energy across Kenya's drylands"}
114+
</ParagraphMD>
115+
</div>
114116

115-
<div className="mb-8">
116-
<p className="text-[#818181] mb-[10px]">
117-
Search all platform content
118-
</p>
119-
<form onSubmit={handleSearch} className="flex gap-3">
120-
<div className="relative flex-1 flex items-center bg-white border border-gray-200 rounded-full shadow-sm">
121-
<Search className="absolute left-4 text-gray-400 w-5 h-5" />
122-
<input
123-
type="text"
124-
placeholder="Search all platform content.."
125-
value={query}
126-
onChange={handleInputChange}
127-
className="flex-1 pl-12 pr-4 h-12 text-lg bg-transparent border-none focus:outline-none text-black focus:ring-2 focus:ring-primary-500 rounded-full"
128-
/>
129-
<Button variant="primary" className="font-bold">
130-
Search
131-
</Button>
132-
</div>
133-
</form>
117+
<div className="mb-8">
118+
<p className="text-[#818181] mb-3 text-sm sm:text-base">
119+
Search all platform content
120+
</p>
121+
<form
122+
onSubmit={handleSearch}
123+
className="flex flex-col sm:flex-row gap-3"
124+
>
125+
<div className="relative flex-1 flex items-center bg-white border border-gray-200 rounded-full shadow-sm">
126+
<Search className="absolute left-3 sm:left-4 text-gray-400 w-4 h-4 sm:w-5 sm:h-5" />
127+
<input
128+
type="text"
129+
placeholder="Search content..."
130+
value={query}
131+
onChange={handleInputChange}
132+
className="flex-1 pl-10 sm:pl-12 pr-3 sm:pr-4 h-10 sm:h-12 text-sm sm:text-base lg:text-lg bg-transparent border-none focus:outline-none text-black focus:ring-2 focus:ring-primary-500 rounded-full"
133+
/>
134+
<Button
135+
variant="primary"
136+
className="font-bold text-sm sm:text-base h-8 sm:h-10 px-3 sm:px-4"
137+
>
138+
Search
139+
</Button>
140+
</div>
141+
</form>
142+
</div>
134143
</div>
135144
</div>
136145

137-
<div className="relative">
146+
<div className="relative w-full px-6 sm:px-8 lg:px-0 lg:pr-0">
138147
{videoUrl ? (
139-
<div className="relative min-h-[600px] max-h-[600px] overflow-hidden rounded-lg">
148+
<div className="relative h-[300px] sm:h-[400px] md:h-[500px] lg:h-[600px] overflow-hidden rounded-lg">
140149
<video
141150
ref={(ref) => setVideoRef(ref)}
142151
className="w-full h-full object-cover"
@@ -151,36 +160,42 @@ const HeroSlider = ({ setData }) => {
151160
Your browser does not support the video tag.
152161
</video>
153162

154-
<div className="absolute bottom-6 left-6 right-6 z-30 flex items-center justify-between">
163+
<div className="absolute bottom-4 sm:bottom-6 left-4 sm:left-6 right-4 sm:right-6 z-30 flex items-center justify-between">
155164
<div className="flex gap-3">
156165
<button
157166
onClick={togglePlayPause}
158-
className="bg-black/50 backdrop-blur-sm text-white p-2 rounded-full hover:bg-black/70 transition-colors"
167+
className="bg-black/50 backdrop-blur-sm text-white p-1.5 sm:p-2 rounded-full hover:bg-black/70 transition-colors"
159168
aria-label={isPlaying ? 'Pause video' : 'Play video'}
160169
>
161170
{isPlaying ? (
162-
<Pause className="w-5 h-5" />
171+
<Pause className="w-4 h-4 sm:w-5 sm:h-5" />
163172
) : (
164-
<Play className="w-5 h-5" />
173+
<Play className="w-4 h-4 sm:w-5 sm:h-5" />
165174
)}
166175
</button>
167176
</div>
168177
</div>
169178
</div>
170179
) : (
171-
<div className="h-[600px] bg-gradient-to-br from-primary-100 to-primary-200 rounded-lg flex items-center justify-center shadow-2xl">
180+
<div className="h-[300px] sm:h-[400px] md:h-[500px] lg:h-[600px] bg-gradient-to-br from-primary-100 to-primary-200 rounded-lg flex items-center justify-center shadow-2xl">
172181
{loading ? (
173182
<div className="text-center">
174-
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-500 mx-auto mb-4"></div>
175-
<p className="text-primary-600">Loading video...</p>
183+
<div className="animate-spin rounded-full h-10 w-10 sm:h-12 sm:w-12 border-b-2 border-primary-500 mx-auto mb-4"></div>
184+
<p className="text-primary-600 text-sm sm:text-base">
185+
Loading video...
186+
</p>
176187
</div>
177188
) : (
178189
<div className="text-center text-primary-600">
179-
<div className="w-24 h-24 mx-auto mb-4 bg-primary-500 rounded-full flex items-center justify-center">
180-
<Play className="w-12 h-12 text-white" />
190+
<div className="w-20 h-20 sm:w-24 sm:h-24 mx-auto mb-4 bg-primary-500 rounded-full flex items-center justify-center">
191+
<Play className="w-10 h-10 sm:w-12 sm:h-12 text-white" />
181192
</div>
182-
<h3 className="text-xl font-semibold">Kenya Drylands</h3>
183-
<p className="text-primary-500">Investment Hub</p>
193+
<h3 className="text-lg sm:text-xl font-semibold">
194+
Kenya Drylands
195+
</h3>
196+
<p className="text-primary-500 text-sm sm:text-base">
197+
Investment Hub
198+
</p>
184199
</div>
185200
)}
186201
</div>

0 commit comments

Comments
 (0)