Skip to content

Commit 1ec6e60

Browse files
ashrit-ram-analaashrit-ram-anala
authored
Merge pull request #106 from ChangePlusPlusVandy/mobile
compliance
2 parents 126d9e5 + 8503494 commit 1ec6e60

9 files changed

Lines changed: 127 additions & 133 deletions

File tree

‎frontend/src/components/Footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const Footer = () => {
1212
className='h-12 md:h-16 w-auto'
1313
/>
1414

15-
<div className='flex flex-col sm:flex-row gap-8 md:gap-12 text-center sm:text-left'>
15+
<div className='flex flex-row gap-8 md:gap-12'>
1616
<div className='flex flex-col gap-2'>
1717
<h3 className='font-semibold text-sm mb-1' style={{ color: '#3C3C3C' }}>
1818
Learn more about us

‎frontend/src/components/Navbar.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -125,11 +125,7 @@ const Navbar = () => {
125125

126126
{/* Mobile Menu */}
127127
{isMobileMenuOpen && (
128-
<div
129-
id='mobile-menu'
130-
className='md:hidden bg-white border-b border-gray-200'
131-
role='menu'
132-
>
128+
<div id='mobile-menu' className='md:hidden bg-white border-b border-gray-200' role='menu'>
133129
<div className='px-4 pt-2 pb-4 space-y-1'>
134130
<Link
135131
to='/'

‎frontend/src/pages/AboutPage/About.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -238,14 +238,14 @@ const AboutPage = ({ previewContent }: AboutPageProps = {}) => {
238238
return (
239239
<div className='flex flex-col mt-8'>
240240
<section>
241-
<div className='grid grid-cols-2 gap-0'>
242-
<div className='bg-white px-8 sm:px-12 py-20 flex items-center'>
243-
<div className='p-8'>
244-
<h2 className='font-[Open_Sans] text-[40px] font-bold leading-[100%] text-gray-800 mb-6'>
241+
<div className='grid grid-cols-1 lg:grid-cols-2 gap-4'>
242+
<div className='bg-white px-6 sm:px-8 lg:px-12 py-10 sm:py-16 lg:py-20 flex items-center'>
243+
<div className='p-4 sm:p-6 lg:p-8'>
244+
<h2 className='font-[Open_Sans] text-2xl sm:text-3xl lg:text-[40px] font-bold leading-[110%] text-gray-800 mb-4 sm:mb-6'>
245245
{content['mission_title']?.value || 'The Mission'}
246246
</h2>
247247
<div
248-
className='font-[Open_Sans] text-[18px] font-normal leading-[150%] text-gray-800'
248+
className='font-[Open_Sans] text-base sm:text-lg font-normal leading-[150%] text-gray-800'
249249
dangerouslySetInnerHTML={{
250250
__html:
251251
content['mission_description']?.value ||
@@ -254,7 +254,7 @@ const AboutPage = ({ previewContent }: AboutPageProps = {}) => {
254254
/>
255255
</div>
256256
</div>
257-
<div className='bg-slate-300 h-[400px] mr-12 overflow-hidden rounded-lg relative group'>
257+
<div className='bg-slate-300 h-[300px] sm:h-[400px] lg:mr-12 overflow-hidden rounded-lg relative group'>
258258
<S3Image
259259
src={missionImageSrc}
260260
fallbackSrc={tcbaDDABill}
@@ -334,12 +334,12 @@ const AboutPage = ({ previewContent }: AboutPageProps = {}) => {
334334
</div>
335335
</section>
336336

337-
<section className='mt-8 bg-white px-20 py-16'>
338-
<div className='text-center space-y-4 mb-12'>
339-
<h2 className='font-[Open_Sans] text-[40px] font-bold leading-[100%] text-gray-800'>
337+
<section className='mt-8 bg-white px-4 sm:px-8 lg:px-20 py-8 sm:py-12 lg:py-16'>
338+
<div className='text-center space-y-4 mb-8 sm:mb-12'>
339+
<h2 className='font-[Open_Sans] text-2xl sm:text-3xl lg:text-[40px] font-bold leading-[110%] text-gray-800'>
340340
Our Coalition
341341
</h2>
342-
<p className='font-[Open_Sans] text-[18px] font-normal leading-[150%] text-gray-800 max-w-3xl mx-auto'>
342+
<p className='font-[Open_Sans] text-base sm:text-lg font-normal leading-[150%] text-gray-800 max-w-3xl mx-auto px-4'>
343343
Representative organizations of older Tennesseans and people with disabilities across
344344
the State have joined the Coalition in an effort to advocate for the communities they
345345
serve.

‎frontend/src/pages/AnnouncementsPage/Announcements.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -140,14 +140,14 @@ const AnnouncementsPage = ({ previewContent }: AnnouncementsPageProps = {}) => {
140140
return (
141141
<div className='mt-8'>
142142
<section>
143-
<div className='grid grid-cols-2 gap-0'>
144-
<div className='bg-white px-8 sm:px-12 py-20 flex items-center'>
145-
<div className='p-8'>
146-
<h2 className='font-[Open_Sans] text-[40px] font-bold leading-[100%] text-gray-800 mb-6'>
143+
<div className='grid grid-cols-1 lg:grid-cols-2 gap-4'>
144+
<div className='bg-white px-6 sm:px-8 lg:px-12 py-10 sm:py-16 lg:py-20 flex items-center'>
145+
<div className='p-4 sm:p-6 lg:p-8'>
146+
<h2 className='font-[Open_Sans] text-2xl sm:text-3xl lg:text-[40px] font-bold leading-[110%] text-gray-800 mb-4 sm:mb-6'>
147147
{content['header_title']?.value || 'Announcements'}
148148
</h2>
149149
<div
150-
className='font-[Open_Sans] text-[18px] font-normal leading-[150%] text-gray-800'
150+
className='font-[Open_Sans] text-base sm:text-lg font-normal leading-[150%] text-gray-800'
151151
dangerouslySetInnerHTML={{
152152
__html:
153153
content['header_description']?.value ||
@@ -156,7 +156,7 @@ const AnnouncementsPage = ({ previewContent }: AnnouncementsPageProps = {}) => {
156156
/>
157157
</div>
158158
</div>
159-
<div className='h-[400px] bg-slate-200 mr-12 rounded-lg overflow-hidden'>
159+
<div className='h-[300px] sm:h-[400px] bg-slate-200 lg:mr-12 rounded-lg overflow-hidden'>
160160
{headerImageSrc && (
161161
<S3Image
162162
src={headerImageSrc}
@@ -168,15 +168,15 @@ const AnnouncementsPage = ({ previewContent }: AnnouncementsPageProps = {}) => {
168168
</div>
169169
</section>
170170
<section className='mt-8'>
171-
<div className='bg-white px-20 py-4'>
172-
<p className='font-[Open_Sans] text-[18px] font-bold text-gray-800 mb-4'>
171+
<div className='bg-white px-4 sm:px-8 lg:px-20 py-4'>
172+
<p className='font-[Open_Sans] text-base sm:text-lg font-bold text-gray-800 mb-4'>
173173
{filterAnnouncements.length}{' '}
174174
{filterAnnouncements.length === 1 ? 'Announcement' : 'Announcements'}
175175
</p>
176-
<div className='flex items-center justify-between'>
177-
<div className='flex gap-2 items-center'>
176+
<div className='flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4'>
177+
<div className='flex gap-2 items-center overflow-x-auto w-full sm:w-auto'>
178178
<button
179-
className={`px-8 py-3 rounded-lg shadow-sm border border-gray-200 transition-colors whitespace-nowrap ${
179+
className={`px-4 sm:px-6 lg:px-8 py-2 sm:py-3 rounded-lg shadow-sm border border-gray-200 transition-colors whitespace-nowrap text-sm sm:text-base ${
180180
timeFilter === null
181181
? 'bg-[#EBF3FF] text-[#194B90]'
182182
: 'bg-white text-[#3C3C3C] hover:bg-gray-200'
@@ -186,7 +186,7 @@ const AnnouncementsPage = ({ previewContent }: AnnouncementsPageProps = {}) => {
186186
All
187187
</button>
188188
<button
189-
className={`px-8 py-3 rounded-lg shadow-sm border border-gray-200 transition-colors whitespace-nowrap ${
189+
className={`px-4 sm:px-6 lg:px-8 py-2 sm:py-3 rounded-lg shadow-sm border border-gray-200 transition-colors whitespace-nowrap text-sm sm:text-base ${
190190
timeFilter === '24h'
191191
? 'bg-[#EBF3FF] text-[#194B90]'
192192
: 'bg-white text-[#3C3C3C] hover:bg-gray-200'
@@ -196,7 +196,7 @@ const AnnouncementsPage = ({ previewContent }: AnnouncementsPageProps = {}) => {
196196
Last Day
197197
</button>
198198
<button
199-
className={`px-8 py-3 rounded-lg shadow-sm border border-gray-200 transition-colors whitespace-nowrap ${
199+
className={`px-4 sm:px-6 lg:px-8 py-2 sm:py-3 rounded-lg shadow-sm border border-gray-200 transition-colors whitespace-nowrap text-sm sm:text-base ${
200200
timeFilter === 'week'
201201
? 'bg-[#EBF3FF] text-[#194B90]'
202202
: 'bg-white text-[#3C3C3C] hover:bg-gray-200'
@@ -206,7 +206,7 @@ const AnnouncementsPage = ({ previewContent }: AnnouncementsPageProps = {}) => {
206206
Last Week
207207
</button>
208208
<button
209-
className={`px-8 py-3 rounded-lg shadow-sm border border-gray-200 transition-colors whitespace-nowrap ${
209+
className={`px-4 sm:px-6 lg:px-8 py-2 sm:py-3 rounded-lg shadow-sm border border-gray-200 transition-colors whitespace-nowrap text-sm sm:text-base ${
210210
timeFilter === 'month'
211211
? 'bg-[#EBF3FF] text-[#194B90]'
212212
: 'bg-white text-[#3C3C3C] hover:bg-gray-200'
@@ -216,7 +216,7 @@ const AnnouncementsPage = ({ previewContent }: AnnouncementsPageProps = {}) => {
216216
Last Month
217217
</button>
218218
<button
219-
className={`px-8 py-3 rounded-lg shadow-sm border border-gray-200 transition-colors whitespace-nowrap ${
219+
className={`px-4 sm:px-6 lg:px-8 py-2 sm:py-3 rounded-lg shadow-sm border border-gray-200 transition-colors whitespace-nowrap text-sm sm:text-base ${
220220
timeFilter === 'year'
221221
? 'bg-[#EBF3FF] text-[#194B90]'
222222
: 'bg-white text-[#3C3C3C] hover:bg-gray-200'

‎frontend/src/pages/BlogsPage/Blogs.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -139,14 +139,14 @@ const BlogsPage = ({ previewContent }: BlogsPageProps = {}) => {
139139
return (
140140
<div className='mt-8'>
141141
<section>
142-
<div className='grid grid-cols-2 gap-0'>
143-
<div className='bg-white px-8 sm:px-12 py-20 flex items-center'>
144-
<div className='p-8'>
145-
<h2 className='font-[Open_Sans] text-[40px] font-bold leading-[100%] text-gray-800 mb-6'>
142+
<div className='grid grid-cols-1 lg:grid-cols-2 gap-4'>
143+
<div className='bg-white px-6 sm:px-8 lg:px-12 py-10 sm:py-16 lg:py-20 flex items-center'>
144+
<div className='p-4 sm:p-6 lg:p-8'>
145+
<h2 className='font-[Open_Sans] text-2xl sm:text-3xl lg:text-[40px] font-bold leading-[110%] text-gray-800 mb-4 sm:mb-6'>
146146
{content['header_title']?.value || 'Blogs'}
147147
</h2>
148148
<div
149-
className='font-[Open_Sans] text-[18px] font-normal leading-[150%] text-gray-800'
149+
className='font-[Open_Sans] text-base sm:text-lg font-normal leading-[150%] text-gray-800'
150150
dangerouslySetInnerHTML={{
151151
__html:
152152
content['header_description']?.value ||
@@ -155,7 +155,7 @@ const BlogsPage = ({ previewContent }: BlogsPageProps = {}) => {
155155
/>
156156
</div>
157157
</div>
158-
<div className='h-[400px] bg-slate-200 mr-12 rounded-lg overflow-hidden'>
158+
<div className='h-[300px] sm:h-[400px] bg-slate-200 lg:mr-12 rounded-lg overflow-hidden'>
159159
{headerImageSrc && (
160160
<S3Image
161161
src={headerImageSrc}
@@ -168,14 +168,14 @@ const BlogsPage = ({ previewContent }: BlogsPageProps = {}) => {
168168
</section>
169169

170170
<section className='mt-8'>
171-
<div className='bg-white px-20 py-4'>
172-
<p className='font-[Open_Sans] text-[18px] font-bold text-gray-800 mb-4'>
171+
<div className='bg-white px-4 sm:px-8 lg:px-20 py-4'>
172+
<p className='font-[Open_Sans] text-base sm:text-lg font-bold text-gray-800 mb-4'>
173173
{filteredBlogs.length} {filteredBlogs.length === 1 ? 'Blog' : 'Blogs'}
174174
</p>
175-
<div className='flex items-center justify-between'>
176-
<div className='flex gap-2 items-center'>
175+
<div className='flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4'>
176+
<div className='flex gap-2 items-center overflow-x-auto w-full sm:w-auto'>
177177
<button
178-
className={`px-8 py-3 rounded-lg shadow-sm border border-gray-200 transition-colors whitespace-nowrap ${
178+
className={`px-4 sm:px-6 lg:px-8 py-2 sm:py-3 rounded-lg shadow-sm border border-gray-200 transition-colors whitespace-nowrap text-sm sm:text-base ${
179179
timeFilter === null
180180
? 'bg-[#EBF3FF] text-[#194B90]'
181181
: 'bg-white text-[#3C3C3C] hover:bg-gray-200'
@@ -185,7 +185,7 @@ const BlogsPage = ({ previewContent }: BlogsPageProps = {}) => {
185185
All
186186
</button>
187187
<button
188-
className={`px-8 py-3 rounded-lg shadow-sm border border-gray-200 transition-colors whitespace-nowrap ${
188+
className={`px-4 sm:px-6 lg:px-8 py-2 sm:py-3 rounded-lg shadow-sm border border-gray-200 transition-colors whitespace-nowrap text-sm sm:text-base ${
189189
timeFilter === '24h'
190190
? 'bg-[#EBF3FF] text-[#194B90]'
191191
: 'bg-white text-[#3C3C3C] hover:bg-gray-200'
@@ -195,7 +195,7 @@ const BlogsPage = ({ previewContent }: BlogsPageProps = {}) => {
195195
Last Day
196196
</button>
197197
<button
198-
className={`px-8 py-3 rounded-lg shadow-sm border border-gray-200 transition-colors whitespace-nowrap ${
198+
className={`px-4 sm:px-6 lg:px-8 py-2 sm:py-3 rounded-lg shadow-sm border border-gray-200 transition-colors whitespace-nowrap text-sm sm:text-base ${
199199
timeFilter === 'week'
200200
? 'bg-[#EBF3FF] text-[#194B90]'
201201
: 'bg-white text-[#3C3C3C] hover:bg-gray-200'
@@ -205,7 +205,7 @@ const BlogsPage = ({ previewContent }: BlogsPageProps = {}) => {
205205
Last Week
206206
</button>
207207
<button
208-
className={`px-8 py-3 rounded-lg shadow-sm border border-gray-200 transition-colors whitespace-nowrap ${
208+
className={`px-4 sm:px-6 lg:px-8 py-2 sm:py-3 rounded-lg shadow-sm border border-gray-200 transition-colors whitespace-nowrap text-sm sm:text-base ${
209209
timeFilter === 'month'
210210
? 'bg-[#EBF3FF] text-[#194B90]'
211211
: 'bg-white text-[#3C3C3C] hover:bg-gray-200'
@@ -215,7 +215,7 @@ const BlogsPage = ({ previewContent }: BlogsPageProps = {}) => {
215215
Last Month
216216
</button>
217217
<button
218-
className={`px-8 py-3 rounded-lg shadow-sm border border-gray-200 transition-colors whitespace-nowrap ${
218+
className={`px-4 sm:px-6 lg:px-8 py-2 sm:py-3 rounded-lg shadow-sm border border-gray-200 transition-colors whitespace-nowrap text-sm sm:text-base ${
219219
timeFilter === 'year'
220220
? 'bg-[#EBF3FF] text-[#194B90]'
221221
: 'bg-white text-[#3C3C3C] hover:bg-gray-200'

‎frontend/src/pages/ContactPage/Contact.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,20 +78,20 @@ const ContactPage = ({ previewContent }: ContactPageProps = {}) => {
7878
};
7979

8080
return (
81-
<div className='mt-8 bg-white px-20 py-16'>
81+
<div className='mt-8 bg-white px-4 sm:px-8 lg:px-20 py-8 sm:py-12 lg:py-16'>
8282
<Link
8383
to='/register'
8484
className='inline-flex items-center gap-2 text-[#3C3C3C] hover:text-black font-medium mb-6'
8585
>
8686
<IoArrowBack size={20} />
8787
Back to Get Involved
8888
</Link>
89-
<div className='mb-12'>
90-
<h1 className='font-[Open_Sans] text-[40px] font-bold leading-[100%] text-gray-800 mb-6'>
89+
<div className='mb-8 sm:mb-12'>
90+
<h1 className='font-[Open_Sans] text-2xl sm:text-3xl lg:text-[40px] font-bold leading-[110%] text-gray-800 mb-4 sm:mb-6'>
9191
{content['header_title']?.value || 'Contact Us'}
9292
</h1>
9393
<p
94-
className='font-[Open_Sans] text-[18px] font-normal leading-[150%] text-gray-800 max-w-2xl'
94+
className='font-[Open_Sans] text-base sm:text-lg font-normal leading-[150%] text-gray-800 max-w-2xl'
9595
dangerouslySetInnerHTML={{
9696
__html:
9797
content['header_description']?.value ||

0 commit comments

Comments
 (0)