expansion feature

Author: minhngo3818

src/activity/events/EventsList.js

@@ -89,8 +89,9 @@ function ExpandButton(buttonState, isExpanded) {
 			>
 				<IconButton type="button" onClick={buttonState}>
 					<KeyboardArrowDown
-						id={isExpanded ? "open" : "closed"}
+						className="expand-icon"
 						fontSize="large"
+						id={isExpanded ? "open" : "closed"}
 					/>
 				</IconButton>
 			</Tooltip>
@@ -126,12 +127,13 @@ function EventsList() {
 								isExpanded[singleEvent.id],
 							)}
 						</div>
-						{isExpanded[singleEvent.id] && (
-							<div className="event-expand">
-								{EventDetails(singleEvent.description, singleEvent.meetingUrl)}
-								{EventPosters(singleEvent.images)}
-							</div>
-						)}
+						<div
+							className="event-expand"
+							id={isExpanded[singleEvent.id] ? "expanded" : "collapsed"}
+						>
+							{EventDetails(singleEvent.description, singleEvent.meetingUrl)}
+							{EventPosters(singleEvent.images)}
+						</div>
 					</div>
 				);
 			})}

src/activity/events/events.css

@@ -48,6 +48,7 @@
 .event {
 	display: inline-flexbox;
 	max-width: 800px;
+	height: auto;
 	width: 90%;
 	padding: 5px;
 	margin: 20px auto 40px auto;
@@ -59,10 +60,6 @@
 	transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
 }
 
-.event #expanding {
-	animation: all expanding 1s ease-in-out;
-}
-
 .event:hover {
 	transform: translateY(-15px);
 	box-shadow: 0px 20px 15px 0px rgb(0, 0, 0, 0.5);
@@ -114,20 +111,19 @@
 }
 
 .event-info #title {
-	margin: 0.2rem 0 10px 0;
-	padding: 5px 0.75rem;
+	margin: 0.1rem 0 10px 0;
+	padding: 0.5rem 0.75rem;
 	color: white;
 	font-size: 2.5vh;
-	font-family: "Times New Roman", Times, serif;
 	font-size-adjust: inherit;
 	font-weight: bold;
-	border-radius: 8px;
+	border-radius: 5px;
 	background-color: #21262d;
 }
 
 .event-info #important {
 	display: inline-block;
-	margin: 0px 20px 5px 0;
+	margin: 5px 20px 5px 0;
 	padding: 5px 10px;
 	font-size: 18px;
 	color: white;
@@ -157,12 +153,12 @@
 }
 
 #open {
-	transition: 0.5s;
+	transition: all 0.5s;
 	transform: rotate(-180deg);
 }
 
 #closed {
-	transition: 0.5s;
+	transition: all 0.5s;
 	transform: rotate(0deg);
 }
 
@@ -172,12 +168,24 @@
 
 /* Expand content */
 .event-expand {
-	margin: 0.5rem 1.5rem 2rem 1.5rem;
-	padding: 1.5rem;
 	font-size: 18px;
 	color: white;
 	background-color: #21262d;
 	border-radius: 10px;
+	overflow: hidden;
+	transition: all 0.5s;
+}
+
+#expanded {
+	max-height: 800px;
+	margin: 0.5rem 1.5rem 2rem 1.5rem;
+	padding: 1.5rem;
+}
+
+#collapsed {
+	max-height: 0;
+	margin: 0 1.5rem;
+	padding: 0px 1.5rem;
 }
 
 .event-expand .details {