Skip to content

Commit eff9bc0

Browse files
yevkimyevkim
authored
Merge pull request #237 from bettersg/feat/234-about-section
Added back partners section and fixed layout issues
2 parents 782e064 + f4cc637 commit eff9bc0

File tree

5 files changed

+126
-130
lines changed

5 files changed

+126
-130
lines changed

‎frontend/src/app/layout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default function RootLayout({
3535
<ChatProvider>
3636
<div className="h-screen flex flex-col">
3737
<MainHeader />
38-
<div className="h-[calc(100vh-64px)]">{children}</div>
38+
<div className="h-[calc(100vh-64px)] bg-[linear-gradient(117deg,#EFF6FF_0%,#FFF_50%,#FAF5FF_100%)] overflow-y-scroll">{children}</div>
3939
{/* <Footer /> */}
4040
</div>
4141
</ChatProvider>

‎frontend/src/app/page.tsx‎

Lines changed: 122 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { FilterObjType } from "./interfaces/filter";
1313
import clsx from "clsx";
1414
import QueryPrompts from "@/components/query-prompts";
1515
import dynamic from "next/dynamic";
16-
// import Partners from "@/components/partners";
16+
import Partners from "@/components/partners";
1717

1818
// lazy load about section
1919
const AboutSection = dynamic(() => import("@/components/about/about-section"), {
@@ -44,143 +44,140 @@ export default function Home() {
4444
};
4545

4646
return (
47-
<>
48-
<main
49-
className={clsx(
50-
"max-w-[1500px] h-full overflow-y-scroll",
51-
"relative z-10",
52-
"flex flex-col items-center",
53-
"p-4 sm:py-2 md:px-8 lg:px-16",
54-
"xl:mx-auto",
55-
"bg-[linear-gradient(117deg,#EFF6FF_0%,#FFF_50%,#FAF5FF_100%)]"
56-
)}
57-
>
58-
{schemes.length > 0 ? (
59-
<>
60-
{/* Desktop Layout */}
47+
<main
48+
className={clsx(
49+
"max-w-[1500px] h-full",
50+
"relative z-10",
51+
"flex flex-col items-center",
52+
"p-4 sm:py-2 md:px-8 lg:px-16",
53+
"xl:mx-auto"
54+
)}
55+
>
56+
{schemes.length > 0 ? (
57+
<>
58+
{/* Desktop Layout */}
59+
<div
60+
className={clsx(
61+
"overflow-hidden",
62+
"max-md:flex flex-col h-full",
63+
"md:grid gap-2 grid-rows-1 grid-cols-2 lg:grid-cols-[2fr_3fr]"
64+
)}
65+
>
66+
<div className="flex md:hidden">
67+
<UserQuery
68+
resetFilters={resetFilters}
69+
setIsLoadingSchemes={setIsLoadingSchemes}
70+
/>
71+
</div>
72+
<div className="hidden md:flex">
73+
<MainChat
74+
filterObj={filterObj}
75+
resetFilters={resetFilters}
76+
setIsLoadingSchemes={setIsLoadingSchemes}
77+
/>
78+
</div>
79+
<SchemesList
80+
isLoadingSchemes={isLoadingSchemes}
81+
filterObj={filterObj}
82+
setFilterObj={setFilterObj}
83+
nextCursor={nextCursor}
84+
setNextCursor={setNextCursor}
85+
selectedLocations={selectedLocations}
86+
setSelectedLocations={setSelectedLocations}
87+
selectedAgencies={selectedAgencies}
88+
setSelectedAgencies={setSelectedAgencies}
89+
resetFilters={resetFilters}
90+
/>
91+
</div>
92+
93+
{/* Mobile Layout */}
94+
<div
95+
className={`md:hidden flex fixed bottom-0 left-0 right-0 bg-none transition-all duration-300 ease-in-out z-50
96+
${isExpanded ? "h-full" : "h-0"}`}
97+
>
6198
<div
6299
className={clsx(
63-
"overflow-hidden",
64-
"max-md:flex flex-col h-full",
65-
"md:grid gap-2 grid-rows-1 grid-cols-2 lg:grid-cols-[2fr_3fr]"
100+
"w-full h-full",
101+
"transition-opacity duration-300 pt-12",
102+
!isExpanded && "pointer-events-none"
66103
)}
67104
>
68-
<div className="flex md:hidden">
69-
<UserQuery
70-
resetFilters={resetFilters}
71-
setIsLoadingSchemes={setIsLoadingSchemes}
72-
/>
73-
</div>
74-
<div className="hidden md:flex">
105+
{isExpanded && (
75106
<MainChat
76107
filterObj={filterObj}
77108
resetFilters={resetFilters}
109+
setIsExpanded={setIsExpanded}
78110
setIsLoadingSchemes={setIsLoadingSchemes}
79111
/>
80-
</div>
81-
<SchemesList
82-
isLoadingSchemes={isLoadingSchemes}
83-
filterObj={filterObj}
84-
setFilterObj={setFilterObj}
85-
nextCursor={nextCursor}
86-
setNextCursor={setNextCursor}
87-
selectedLocations={selectedLocations}
88-
setSelectedLocations={setSelectedLocations}
89-
selectedAgencies={selectedAgencies}
90-
setSelectedAgencies={setSelectedAgencies}
91-
resetFilters={resetFilters}
92-
/>
112+
)}
93113
</div>
94-
95-
{/* Mobile Layout */}
96-
<div
97-
className={`md:hidden flex fixed bottom-0 left-0 right-0 bg-none transition-all duration-300 ease-in-out z-50
98-
${isExpanded ? "h-full" : "h-0"}`}
99-
>
100-
<div
101-
className={clsx(
102-
"w-full h-full",
103-
"transition-opacity duration-300 pt-12",
104-
!isExpanded && "pointer-events-none"
105-
)}
106-
>
107-
{isExpanded && (
108-
<MainChat
109-
filterObj={filterObj}
110-
resetFilters={resetFilters}
111-
setIsExpanded={setIsExpanded}
112-
setIsLoadingSchemes={setIsLoadingSchemes}
113-
/>
114-
)}
114+
<MiniChatBar
115+
onExpand={() => setIsExpanded(true)}
116+
isExpanded={isExpanded}
117+
/>
118+
</div>
119+
</>
120+
) : (
121+
<>
122+
<div
123+
className={clsx(
124+
"max-w-[35rem] shrink-0",
125+
"flex flex-col items-center gap-4"
126+
)}
127+
>
128+
<div className="p-4">
129+
{/* Desktop*/}
130+
<div className="hidden md:block">
131+
<h1 className="text-center text-4xl font-bold">
132+
<span className="text-schemes-darkblue">
133+
Welcome to Schemes
134+
</span>
135+
<span className="text-schemes-blue">SG</span>
136+
</h1>
137+
<p className="text-schemes-darkblue text-center mt-6 text-2xl">
138+
An AI-supported search engine for public social assistance
139+
schemes in Singapore.
140+
</p>
115141
</div>
116-
<MiniChatBar
117-
onExpand={() => setIsExpanded(true)}
118-
isExpanded={isExpanded}
119-
/>
120-
</div>
121-
</>
122-
) : (
123-
<>
124-
<div
125-
className={clsx(
126-
"max-w-[35rem] h-[calc(100vh-64px)] shrink-0",
127-
"flex flex-col items-center gap-4"
128-
)}
129-
>
130-
<div className="p-4">
131-
{/* Desktop*/}
132-
<div className="hidden md:block">
133-
<h1 className="text-center text-4xl font-bold">
134-
<span className="text-schemes-darkblue">
135-
Welcome to Schemes
136-
</span>
137-
<span className="text-schemes-blue">SG</span>
138-
</h1>
139-
<p className="text-schemes-darkblue text-center mt-6 text-2xl">
140-
An AI-supported search engine for public social assistance
141-
schemes in Singapore.
142-
</p>
143-
</div>
144-
145-
{/* Mobile*/}
146-
<div className="block md:hidden">
147-
<h1 className="text-[32px] font-bold leading-tight">
148-
<div className="text-schemes-darkblue text-center">
149-
Welcome to
150-
</div>
151-
<div className="flex items-center justify-center gap-2">
152-
<span className="text-schemes-darkblue">Schemes</span>
153-
<span className="text-schemes-blue">SG</span>
154-
</div>
155-
</h1>
156-
<p className="text-schemes-darkblue mt-4 text-center leading-snug text-lg">
157-
This is an AI-supported search engine for public social
158-
assistance schemes in Singapore.
159-
</p>
160-
</div>
161142

143+
{/* Mobile*/}
144+
<div className="block md:hidden">
145+
<h1 className="text-[32px] font-bold leading-tight">
146+
<div className="text-schemes-darkblue text-center">
147+
Welcome to
148+
</div>
149+
<div className="flex items-center justify-center gap-2">
150+
<span className="text-schemes-darkblue">Schemes</span>
151+
<span className="text-schemes-blue">SG</span>
152+
</div>
153+
</h1>
154+
<p className="text-schemes-darkblue mt-4 text-center leading-snug text-lg">
155+
This is an AI-supported search engine for public social
156+
assistance schemes in Singapore.
157+
</p>
162158
</div>
163-
<QueryBar searchbarRef={searchbarRef} />
164-
<QueryPrompts focusSearchbar={focusSearchbar} />
165-
<Image
166-
src={backgroundImageOne}
167-
alt="background image one"
168-
className="absolute w-[35%] top-[10%] left-0 -z-10"
169-
unoptimized
170-
priority
171-
/>
172-
<Image
173-
src={backgroundImageTwo}
174-
alt="background image two"
175-
className="absolute w-[35%] top-0 right-0 -z-10"
176-
unoptimized
177-
priority
178-
/>
179159
</div>
180-
<AboutSection />
181-
</>
182-
)}
183-
</main>
184-
</>
160+
<QueryBar searchbarRef={searchbarRef} />
161+
<QueryPrompts focusSearchbar={focusSearchbar} />
162+
<Partners />
163+
<Image
164+
src={backgroundImageOne}
165+
alt="background image one"
166+
className="absolute w-[35%] top-[10%] left-0 -z-10"
167+
unoptimized
168+
priority
169+
/>
170+
<Image
171+
src={backgroundImageTwo}
172+
alt="background image two"
173+
className="absolute w-[35%] top-0 right-0 -z-10"
174+
unoptimized
175+
priority
176+
/>
177+
</div>
178+
<AboutSection />
179+
</>
180+
)}
181+
</main>
185182
);
186183
}

‎frontend/src/components/about/about-section.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ function AboutSection() {
5757
</section>
5858
<section
5959
className={clsx(
60-
"flex flex-col items-center gap-12",
60+
"flex flex-col items-center gap-4",
6161
"py-6 sm:py-9 md:py-12"
6262
)}
6363
>

‎frontend/src/components/partners.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@ import Link from "next/link";
55
export default function Partners() {
66
return (
77
<div className="my-16 w-full">
8-
<p className="text-center text-sm text-slate-500">Our Partners</p>
8+
<p className="text-center text-base md:text-xl">Our Partners</p>
99
<div className="flex justify-center mt-3 gap-3">
1010
<Link href="https://sasw.org.sg" target="_blank" rel="noopener noreferrer">
1111
<Image
1212
src={SASW}
1313
alt="SASW Logo"
14-
height={60}
14+
height={80}
1515
unoptimized
1616
priority
1717
/>

‎frontend/src/components/schemes/schemes-list.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,6 @@ export default function SchemesList({
100100
// load more schemes when bottom of list reached
101101
useEffect(() => {
102102
if (bottomReached && nextCursor) {
103-
console.log("loading");
104103
loadMoreSchemes()
105104
}
106105
}, [bottomReached]);

0 commit comments

Comments
 (0)