Skip to content

Commit 0ae8491

Browse files
lazycipherlazycipher
committed
Responsiveness Fix Events Page
1 parent f06f814 commit 0ae8491

File tree

2 files changed

+78
-72
lines changed

2 files changed

+78
-72
lines changed

‎src/user/events/events.js‎

Lines changed: 59 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -134,30 +134,32 @@ class Events extends Component {
134134
};
135135

136136
let Events = allEvents?.map((Item, index) => (
137-
<Grid item xs={6} sm={4} key={index} className="card__container">
137+
<Grid item xs={12} sm={6} md={4} key={index} className="card__container">
138138
{Date.parse(Item.eventDate) >= Date.parse(new Date()) ? (
139139
<Card>
140140
<CardActions>
141141
<Grid container spacing={1}>
142-
<Row>
143-
<Col xs={1}>
144-
{Item.isCancelled ? (
145-
<div className="cancelled">{""}</div>
146-
) : (
147-
<div className="div-upcoming">{""}</div>
148-
)}
149-
</Col>
150-
<Col sm={3} xs={12}>
151-
<Moment className="div2" format="D" withTitle>
152-
{Item?.eventDate}
153-
</Moment>
154-
</Col>
155-
<Col sm={5} xs={12}>
156-
<div className="div3">
157-
<Moment format="ddd, MMM YYYY">{Item?.eventDate}</Moment>
158-
</div>
159-
</Col>
160-
</Row>
142+
<Grid item xs={12}>
143+
<Row>
144+
<Col sm={1}>
145+
{Item.isCancelled ? (
146+
<div className="cancelled">{""}</div>
147+
) : (
148+
<div className="div-upcoming">{""}</div>
149+
)}
150+
</Col>
151+
<Col md={3} xs={5}>
152+
<Moment className="div2" format="D" withTitle>
153+
{Item?.eventDate}
154+
</Moment>
155+
</Col>
156+
<Col md={5} xs={5}>
157+
<div className="div3">
158+
<Moment format="ddd, MMM YYYY">{Item?.eventDate}</Moment>
159+
</div>
160+
</Col>
161+
</Row>
162+
</Grid>
161163
<div className="inside">
162164
<Grid item xs={12}>
163165
<p className="eventName">{Item?.eventName}</p>
@@ -205,25 +207,25 @@ class Events extends Component {
205207
<Card>
206208
<CardActions>
207209
<Grid container spacing={1}>
208-
<Row>
209-
<Col xs={1}>
210-
{Item.isCancelled ? (
211-
<div className="cancelled">{""}</div>
212-
) : (
213-
<div className="div-past">{""}</div>
214-
)}
215-
</Col>
216-
<Col sm={3} xs={12}>
217-
<Moment className="div2" format="D" withTitle>
218-
{Item?.eventDate}
219-
</Moment>
220-
</Col>
221-
<Col sm={5} xs={12}>
222-
<div className="div3">
223-
<Moment format="ddd, MMM YYYY">{Item?.eventDate}</Moment>
224-
</div>
225-
</Col>
226-
</Row>
210+
<Grid item xs={12}>
211+
<Row>
212+
<Col xs={1}>
213+
{Item.isCancelled ? (
214+
<div className="cancelled">{""}</div>
215+
) : (
216+
<div className="div-past">{""}</div>
217+
)}
218+
</Col>
219+
<Col md={3} xs={3}>
220+
<Moment className="div2" format="D" withTitle>
221+
{Item?.eventDate}
222+
</Moment>
223+
</Col>
224+
<Col className="date" md={5} xs={7}>
225+
<Moment format="ddd, MMM YYYY">{Item?.eventDate}</Moment>
226+
</Col>
227+
</Row>
228+
</Grid>
227229
<div className="inside">
228230
<Grid item xs={12}>
229231
<p className="eventName">{Item.eventName}</p>
@@ -272,24 +274,24 @@ class Events extends Component {
272274
));
273275

274276
return (
275-
<div className="organization">
276-
<div className="navigation">
277-
<Navigation event={this.state.event}></Navigation>
278-
</div>
279-
<div className="events">
280-
<h1 className="event_header">All Events</h1>
281-
<Grid container spacing={3}>
282-
{Events}
283-
</Grid>
277+
<>
278+
<Navigation event={this.state.event}></Navigation>
279+
<div className="organization">
280+
<div className="events">
281+
<h1 className="event_header">All Events</h1>
282+
<Grid container spacing={3}>
283+
{Events}
284+
</Grid>
284285

285-
<div className="event__pagination__container">
286-
<Pagination
287-
showSizeChanger
288-
onShowSizeChange={this.onShowSizeChange}
289-
defaultCurrent={1}
290-
total={100}
291-
onChange={this.handlePagination}
292-
/>
286+
<div className="event__pagination__container">
287+
<Pagination
288+
showSizeChanger
289+
onShowSizeChange={this.onShowSizeChange}
290+
defaultCurrent={1}
291+
total={allEvents.length}
292+
onChange={this.handlePagination}
293+
/>
294+
</div>
293295
</div>
294296
</div>
295297
<Popups
@@ -309,7 +311,7 @@ class Events extends Component {
309311
eventId={this.state.eventId}
310312
eventInfo={this.state.singleEvent}
311313
/>
312-
</div>
314+
</>
313315
);
314316
}
315317
}

‎src/user/events/events.scss‎

Lines changed: 19 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,6 @@
33
min-height: 100vh;
44
height: auto;
55
font-family: Muli, sans-serif;
6-
.navigation {
7-
background: #f5f5f5;
8-
flex-grow: 1;
9-
border-right: solid 1px #dfe9f1;
10-
position: fixed;
11-
top: 0px;
12-
bottom: 0px;
13-
left: 0px;
14-
overflow-y: scroll;
15-
}
166
.events {
177
padding: 20px;
188
margin-top: 2vh;
@@ -31,9 +21,7 @@
3121
}
3222
.MuiCard-root {
3323
overflow: hidden;
34-
height: 42vh;
3524
}
36-
3725
.event__pagination__container {
3826
display: flex;
3927
flex-direction: row;
@@ -98,13 +86,13 @@
9886
font-size: 3rem;
9987
}
10088

101-
.div3 {
89+
.date {
10290
background-color: #ffffff;
10391
width: auto;
10492
text-align: center;
10593
font-size: 1.45rem;
106-
margin-left: 7vw;
107-
margin-right: -12vw;
94+
display: flex;
95+
align-items: center;
10896
.day {
10997
font-weight: 25px;
11098
}
@@ -114,6 +102,7 @@
114102
}
115103

116104
.inside {
105+
width: 100%;
117106
margin-right: 2vw;
118107
margin-left: 2vw;
119108
}
@@ -163,3 +152,18 @@
163152
color: #1a73ed;
164153
}
165154
}
155+
156+
@media (min-width: 320px) and (max-width: 1024px){
157+
.organization {
158+
margin-left: 0;
159+
.events {
160+
margin: 0;
161+
.event_header {
162+
text-align: center;
163+
}
164+
.card__container {
165+
max-width: 100%;
166+
}
167+
}
168+
}
169+
}

0 commit comments

Comments
 (0)