Skip to content

Commit f7885e8

Browse files
minhngo3818minhngo3818
committed
expand button animation
1 parent 0998b90 commit f7885e8

File tree

2 files changed

+105
-57
lines changed

2 files changed

+105
-57
lines changed

‎src/activity/events/EventsList.js‎

Lines changed: 62 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,13 @@
1-
import React, { useState, useEffect } from "react";
2-
import "photoswipe/dist/photoswipe.css";
1+
import { useState, useEffect } from "react";
2+
// import { PacmanLoader } from "react-spinners";
3+
import { IconButton, Tooltip } from "@mui/material";
4+
import { KeyboardArrowDown } from "@mui/icons-material";
35
import { Gallery, Item } from "react-photoswipe-gallery";
46
import { eventsMap as eventsList } from "../fakeData";
57
import "./events.css";
8+
import "photoswipe/dist/photoswipe.css";
69

7-
function EventsList() {
8-
return (
9-
<div className="events-list">
10-
<ListEvents />
11-
</div>
12-
);
13-
}
14-
export default EventsList;
15-
16-
// Before Collapsed Components
10+
// Before expanding components
1711
function EventDate(month, date) {
1812
return (
1913
<div className="event-date">
@@ -33,7 +27,7 @@ function EventHeader(title, time, location) {
3327
);
3428
}
3529

36-
// Collapsed Contents
30+
// Expanded Contents
3731
function EventDetails(description, meetingUrl) {
3832
return (
3933
<div className="details">
@@ -83,41 +77,65 @@ function EventPosters(posterImages) {
8377
);
8478
}
8579

80+
function ExpandButton(buttonState, isExpanded) {
81+
return (
82+
<div className="expand-button">
83+
<Tooltip
84+
title={!isExpanded ? "expand" : "collapse"}
85+
fontSize="large"
86+
placement="top"
87+
sx={{ fontSize: "16px" }}
88+
arrow
89+
>
90+
<IconButton type="button" onClick={buttonState}>
91+
<KeyboardArrowDown
92+
id={isExpanded ? "open" : "closed"}
93+
fontSize="large"
94+
/>
95+
</IconButton>
96+
</Tooltip>
97+
</div>
98+
);
99+
}
100+
86101
// Render List
87-
function ListEvents() {
88-
const [isCollapse, setCollapse] = useState({});
102+
function EventsList() {
103+
const [isExpanded, setExpand] = useState({});
89104

90-
function handleCollapse(id) {
91-
setCollapse(prevCollapsed => ({
92-
...prevCollapsed,
93-
[id]: !prevCollapsed[id],
105+
function handleExpansion(id) {
106+
setExpand(prevExpanded => ({
107+
...prevExpanded,
108+
[id]: !prevExpanded[id],
94109
}));
95110
}
96111

97-
return eventsList.map(singleEvent => {
98-
return (
99-
<div tabIndex={singleEvent.id} role="button" className="event">
100-
<div className="event-header">
101-
{EventDate(singleEvent.month, singleEvent.day)}
102-
{EventHeader(
103-
singleEvent.title,
104-
singleEvent.time,
105-
singleEvent.location,
106-
)}
107-
<div className="expand-button">
108-
<button
109-
type="button"
110-
onClick={() => handleCollapse(singleEvent.id)}
111-
/>
112-
</div>
113-
</div>
114-
{isCollapse[singleEvent.id] && (
115-
<div className="event-expand">
116-
{EventDetails(singleEvent.description, singleEvent.meetingUrl)}
117-
{EventPosters(singleEvent.images)}
112+
return (
113+
<div className="events-list">
114+
{eventsList.map(singleEvent => {
115+
return (
116+
<div tabIndex={singleEvent.id} role="button" className="event">
117+
<div className="event-header">
118+
{EventDate(singleEvent.month, singleEvent.day)}
119+
{EventHeader(
120+
singleEvent.title,
121+
singleEvent.time,
122+
singleEvent.location,
123+
)}
124+
{ExpandButton(
125+
() => handleExpansion(singleEvent.id),
126+
isExpanded[singleEvent.id],
127+
)}
128+
</div>
129+
{isExpanded[singleEvent.id] && (
130+
<div className="event-expand">
131+
{EventDetails(singleEvent.description, singleEvent.meetingUrl)}
132+
{EventPosters(singleEvent.images)}
133+
</div>
134+
)}
118135
</div>
119-
)}
120-
</div>
121-
);
122-
});
136+
);
137+
})}
138+
</div>
139+
);
123140
}
141+
export default EventsList;

‎src/activity/events/events.css‎

Lines changed: 43 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,15 @@
3636
justify-content: center;
3737
}
3838

39+
@keyframes expanding {
40+
0% {
41+
height: 0;
42+
}
43+
100% {
44+
height: 100%;
45+
}
46+
}
47+
3948
.event {
4049
display: inline-flexbox;
4150
max-width: 800px;
@@ -50,6 +59,10 @@
5059
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
5160
}
5261

62+
.event #expanding {
63+
animation: all expanding 1s ease-in-out;
64+
}
65+
5366
.event:hover {
5467
transform: translateY(-15px);
5568
box-shadow: 0px 20px 15px 0px rgb(0, 0, 0, 0.5);
@@ -71,9 +84,9 @@
7184
color: white;
7285
font-weight: normal;
7386
background-color: #21262d;
74-
border: 2px solid rgb(56, 142, 60);
87+
border: 2px solid rgb(33, 150, 243);
7588
border-radius: 10px;
76-
box-shadow: 0 0 10px rgba(56, 142, 60, 0.6);
89+
box-shadow: 0 0 10px rgba(33, 150, 243, 0.6);
7790
}
7891

7992
.event-date p {
@@ -101,22 +114,25 @@
101114
}
102115

103116
.event-info #title {
104-
margin: 0.5rem 0 1rem 0;
105-
padding: 0;
117+
margin: 0.2rem 0 10px 0;
118+
padding: 5px 0.75rem;
106119
color: white;
107120
font-size: 2.5vh;
121+
font-family: "Times New Roman", Times, serif;
108122
font-size-adjust: inherit;
109123
font-weight: bold;
124+
border-radius: 8px;
125+
background-color: #21262d;
110126
}
111127

112128
.event-info #important {
113129
display: inline-block;
114-
margin: 5px 10px;
115-
padding: 3px 10px;
116-
font-size: 16px;
117-
color: black;
130+
margin: 0px 20px 5px 0;
131+
padding: 5px 10px;
132+
font-size: 18px;
133+
color: white;
118134
border-radius: 5px;
119-
background-color: white;
135+
background-color: #21262d;
120136
}
121137

122138
/* Expand button */
@@ -136,9 +152,24 @@
136152
border: 0;
137153
border-radius: 50%;
138154
cursor: pointer;
155+
color: #ffa611;
139156
background-color: #21262d;
140157
}
141158

159+
#open {
160+
transition: 0.5s;
161+
transform: rotate(-180deg);
162+
}
163+
164+
#closed {
165+
transition: 0.5s;
166+
transform: rotate(0deg);
167+
}
168+
169+
.expand-button button:hover {
170+
border: 3px solid #ffa611;
171+
}
172+
142173
/* Expand content */
143174
.event-expand {
144175
margin: 0.5rem 1.5rem 2rem 1.5rem;
@@ -147,19 +178,18 @@
147178
color: white;
148179
background-color: #21262d;
149180
border-radius: 10px;
150-
transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
151181
}
152182

153183
.event-expand .details {
154-
padding: 0.5rem 1rem;
184+
padding: 0 1rem;
155185
}
156186

157-
#meeting-link {
187+
.event-expand #meeting-link {
158188
text-decoration: none;
159189
color: #2d8cff;
160190
}
161191

162-
.poster-list {
192+
.event-expand #poster-list {
163193
display: inline-flex;
164194
flex-direction: row;
165195
margin: auto 10px;

0 commit comments

Comments
 (0)