Skip to content

Commit 9f689fe

Browse files
one-communityone-community
authored
Merge pull request #4239 from OneCommunityGlobal/Prem-UI-overlapping-issue
Prem UI overlapping issue
2 parents 08a18d7 + 09ed377 commit 9f689fe

4 files changed

Lines changed: 96 additions & 127 deletions

File tree

‎package-lock.json‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -203,4 +203,4 @@
203203
],
204204
"**/*.{css,scss,sass}": "stylelint"
205205
}
206-
}
206+
}

‎src/components/CommunityPortal/CPDashboard.jsx‎

Lines changed: 65 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useState, useEffect } from 'react';
22
import { Container, Row, Col, Card, CardBody, Button, Input } from 'reactstrap';
3-
import './CPDashboard.css';
3+
import styles from './CPDashboard.module.css';
44
import { FaCalendarAlt, FaMapMarkerAlt, FaUserAlt } from 'react-icons/fa';
55
import { ENDPOINTS } from '../../utils/URL';
66
import axios from 'axios';
@@ -89,152 +89,101 @@ export function CPDashboard() {
8989
);
9090

9191
return (
92-
<Container fluid className="dashboard-container">
93-
<header className="dashboard-header">
92+
<Container className={styles['dashboard-container']}>
93+
<header className={styles['dashboard-header']}>
9494
<h1>All Events</h1>
95-
<div className="dashboard-controls">
96-
<div className="dashboard-search-container">
95+
<div className={styles['dashboard-controls']}>
96+
<div className={styles['dashboard-search-container']}>
9797
<Input
9898
type="search"
9999
placeholder="Search events..."
100100
value={search}
101101
onChange={e => setSearch(e.target.value)}
102-
className="dashboard-search"
102+
className={styles['dashboard-search']}
103103
/>
104104
</div>
105105
</div>
106106
</header>
107107

108108
<Row>
109-
<Col md={3} className="dashboard-sidebar">
110-
<div className="filter-section">
109+
<Col md={3} className={styles['dashboard-sidebar']}>
110+
<div className={styles['filter-section']}>
111111
<h4>Search Filters</h4>
112-
<div className="filter-item">
113-
<label htmlFor="date-tomorrow"> Dates</label>
114-
<div className="filter-options-horizontal">
115-
<div>
116-
<Input type="radio" name="dates" /> Tomorrow
112+
<div className={styles['filter-section-divider']}>
113+
<div className={styles['filter-item']}>
114+
<label htmlFor="date-tomorrow"> Dates</label>
115+
<div className={styles['filter-options-horizontal']}>
116+
<div>
117+
<Input type="radio" name="dates" /> Tomorrow
118+
</div>
119+
<div>
120+
<Input type="radio" name="dates" /> This Weekend
121+
</div>
117122
</div>
123+
<Input type="date" placeholder="Ending After" className={styles['date-filter']} />
124+
</div>
125+
<div className={styles['filter-item']}>
126+
<label htmlFor="online-only">Online</label>
118127
<div>
119-
<Input type="radio" name="dates" /> This Weekend
128+
<Input type="checkbox" /> Online Only
120129
</div>
121130
</div>
122-
<Input
123-
type="date"
124-
value={selectedDate}
125-
onChange={handleDateChange}
126-
className="date-filter"
127-
/>
128-
{dateError && (
129-
<p className="date-error-message" style={{ color: 'red', marginTop: '5px' }}>
130-
{dateError}
131-
</p>
132-
)}
133-
</div>
134-
<div className="filter-item">
135-
<label htmlFor="online-only">Online</label>
136-
<div>
137-
<Input type="checkbox" /> Online Only
131+
<div className={styles['filter-item']}>
132+
<label htmlFor="branches">Branches</label>
133+
<Input type="select">
134+
<option>Select branches</option>
135+
</Input>
136+
</div>
137+
<div className={styles['filter-item']}>
138+
<label htmlFor="themes">Themes</label>
139+
<Input type="select">
140+
<option>Select themes</option>
141+
</Input>
142+
</div>
143+
<div className={styles['filter-item']}>
144+
<label htmlFor="categories">Categories</label>
145+
<Input type="select">
146+
<option>Select categories</option>
147+
</Input>
138148
</div>
139-
</div>
140-
<div className="filter-item">
141-
<label htmlFor="branches">Branches</label>
142-
<Input type="select">
143-
<option>Select branches</option>
144-
</Input>
145-
</div>
146-
<div className="filter-item">
147-
<label htmlFor="themes">Themes</label>
148-
<Input type="select">
149-
<option>Select themes</option>
150-
</Input>
151-
</div>
152-
<div className="filter-item">
153-
<label htmlFor="categories">Categories</label>
154-
<Input type="select">
155-
<option>Select categories</option>
156-
</Input>
157149
</div>
158150
</div>
159151
</Col>
160152

161-
<Col md={9} className="dashboard-main">
162-
<h2 className="section-title">Events</h2>
163-
164-
{error && <div className="alert alert-danger">{error}</div>}
165-
166-
{isLoading ? (
167-
<div className="d-flex justify-content-center mt-4"></div>
168-
) : displayedEvents.length > 0 ? (
169-
<Row>
170-
{displayedEvents.map(event => (
171-
<Col md={4} key={event._id || event.id} className="event-card-col">
172-
<Card
173-
className="event-card"
174-
style={{
175-
display: 'flex',
176-
flexDirection: 'column',
177-
borderRadius: 14,
178-
overflow: 'hidden',
179-
}}
180-
>
181-
<div className="event-card-img-container">
182-
<FixedRatioImage
183-
src={event.coverImage}
153+
<Col md={9} className={styles['dashboard-main']}>
154+
<h2 className={styles['section-title']}>Events</h2>
155+
<Row>
156+
{events.length > 0 ? (
157+
events.map(event => (
158+
<Col md={4} key={event.id} className={styles['event-card-col']}>
159+
<Card className={styles['event-card']}>
160+
<div className={styles['event-card-img-container']}>
161+
<img
162+
src={event.image}
184163
alt={event.title}
185-
fallback={FALLBACK_IMG}
164+
className={styles['event-card-img']}
186165
/>
187166
</div>
188-
<CardBody style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
189-
<h5 className="event-title">{event.title}</h5>
190-
<p className="event-date">
191-
<FaCalendarAlt className="event-icon" /> {formatDate(event.date)}
167+
<CardBody>
168+
<h5 className={styles['event-title']}>{event.title}</h5>
169+
<p className={styles['event-date']}>
170+
<FaCalendarAlt className={styles['event-icon']} /> {event.date}
192171
</p>
193-
<p className="event-location">
194-
<FaMapMarkerAlt className="event-icon" /> {event.location || 'TBD'}
172+
<p className={styles['event-location']}>
173+
<FaMapMarkerAlt className={styles['event-icon']} /> {event.location}
195174
</p>
196-
<p className="event-organizer">
197-
<FaUserAlt className="event-icon" /> {event.maxAttendees || 'No limit'}{' '}
198-
Attendees limit
175+
<p className={styles['event-organizer']}>
176+
<FaUserAlt className={styles['event-icon']} /> {event.organizer}
199177
</p>
200178
</CardBody>
201179
</Card>
202180
</Col>
203-
))}
204-
</Row>
205-
) : (
206-
<div className="no-events">No events available</div>
207-
)}
208-
209-
<div className="d-flex justify-content-center mt-4">
210-
<div className="pagination-controls">
211-
<Button
212-
color="secondary"
213-
disabled={pagination.currentPage === 1}
214-
onClick={() =>
215-
setPagination(prev => ({ ...prev, currentPage: prev.currentPage - 1 }))
216-
}
217-
>
218-
Previous
219-
</Button>
220-
221-
<span className="mx-3">
222-
Page {pagination.currentPage} of {totalPages}
223-
</span>
224-
225-
<Button
226-
color="secondary"
227-
disabled={pagination.currentPage === totalPages}
228-
onClick={() =>
229-
setPagination(prev => ({ ...prev, currentPage: prev.currentPage + 1 }))
230-
}
231-
>
232-
Next
233-
</Button>
234-
</div>
235-
</div>
236-
237-
<div className="dashboard-actions text-center mt-4">
181+
))
182+
) : (
183+
<div className={styles['no-events']}>No events available</div>
184+
)}
185+
</Row>
186+
<div className={styles['dashboard-actions']}>
238187
<Button color="primary">Show Past Events</Button>
239188
</div>
240189
</Col>

src/components/CommunityPortal/CPDashboard.css renamed to src/components/CommunityPortal/CPDashboard.module.css

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,16 @@ body {
66
}
77

88
.dashboard-container {
9-
padding: 40px 20px;
9+
padding: 20px 15px;
1010
max-width: 1400px;
1111
margin: 0 auto;
1212
background: #ffffff;
1313
border-radius: 16px;
1414
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
15+
font-size: 16px;
16+
line-height: 1.6;
17+
letter-spacing: 0.2px;
18+
width: min(95%, 1400px);
1519
}
1620

1721
.dashboard-header {
@@ -57,19 +61,26 @@ body {
5761
.filter-section h4 {
5862
font-size: 1.8rem;
5963
color: #2c3e50;
60-
margin-bottom: 20px;
64+
/* margin-bottom: 20px; */
6165
font-weight: 600;
6266
}
6367

64-
.filter-item input,
65-
.filter-item select {
66-
padding: 12px 15px;
68+
.filter-section-divider {
69+
height: fit-content;
70+
margin: 10px 10px;;
71+
border-radius: 1px;
72+
display: flex;
73+
flex-direction: column;
74+
}
75+
76+
.filter-item{
77+
padding: 8px 15px;
6778
margin-top: 10px;
68-
border: 1px solid #ddd;
79+
/* border: 1px solid #ddd; */
6980
border-radius: 8px;
7081
width: 100%;
7182
font-size: 1rem;
72-
background: #ffffff;
83+
/* background: #ffffff; */
7384
transition: all 0.3s ease;
7485
}
7586

@@ -81,12 +92,17 @@ body {
8192
}
8293

8394
.dashboard-main {
95+
margin-top: 25px;
96+
display: flex;
97+
flex-wrap: wrap;
98+
gap: 20px;
99+
background-color: #e5e5e5;
84100
padding: 30px;
85-
background: #ffffff;
86101
border-radius: 12px;
87-
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
102+
box-shadow: 0 4px 12px #0000001a;
88103
}
89104

105+
90106
.section-title {
91107
font-size: 2.2rem;
92108
color: #2c3e50;
@@ -154,3 +170,7 @@ body {
154170
background-color: #34495e;
155171
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
156172
}
173+
174+
.date-filter {
175+
margin-top: 15px;
176+
}

0 commit comments

Comments
 (0)