From 2a72779cefbd355f31fe4b8428728bdb4810ca2e Mon Sep 17 00:00:00 2001 From: sau-mili <146661411+sau-mili@users.noreply.github.com> Date: Thu, 5 Oct 2023 14:33:01 +0530 Subject: [PATCH 01/12] Update index.js- Event cards place side by side --- pages/events/index.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/pages/events/index.js b/pages/events/index.js index 65339d0..ee05afc 100644 --- a/pages/events/index.js +++ b/pages/events/index.js @@ -18,10 +18,23 @@ function EventPage() { }, ]; + const eventCardContainerStyle = { + display: "flex", + flexWrap: "wrap", + justifyContent: "space-between", + }; + + const eventCardStyle = { + flex: 1, + maxWidth: "calc(33.33% - 20px)", // Adjust the width + marginRight: "20px", // Adjust the topmargin + marginBottom: "20px", // Adjust the bottommargin + }; + return ( <> -
+
{EventData.map((event) => { return ( ( -
+
Date: Thu, 5 Oct 2023 14:40:39 +0530 Subject: [PATCH 02/12] Update Events page --- pages/events/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/pages/events/index.js b/pages/events/index.js index ee05afc..bbdcd10 100644 --- a/pages/events/index.js +++ b/pages/events/index.js @@ -22,6 +22,7 @@ function EventPage() { display: "flex", flexWrap: "wrap", justifyContent: "space-between", + padding: "10px", }; const eventCardStyle = { @@ -29,6 +30,7 @@ function EventPage() { maxWidth: "calc(33.33% - 20px)", // Adjust the width marginRight: "20px", // Adjust the topmargin marginBottom: "20px", // Adjust the bottommargin + padding: "10px", }; return ( From 6540db12f7f951055032e376856fc03b4e8b07c1 Mon Sep 17 00:00:00 2001 From: sau-mili <146661411+sau-mili@users.noreply.github.com> Date: Thu, 5 Oct 2023 14:42:29 +0530 Subject: [PATCH 03/12] Update Events page cards --- pages/events/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/pages/events/index.js b/pages/events/index.js index bbdcd10..b6c3bc7 100644 --- a/pages/events/index.js +++ b/pages/events/index.js @@ -23,12 +23,14 @@ function EventPage() { flexWrap: "wrap", justifyContent: "space-between", padding: "10px", + marginRight: "20px", // Adjust the rightmargin + marginLeft: "20px", // Adjust the bottommargin }; const eventCardStyle = { flex: 1, maxWidth: "calc(33.33% - 20px)", // Adjust the width - marginRight: "20px", // Adjust the topmargin + marginRight: "20px", // Adjust the rightmargin marginBottom: "20px", // Adjust the bottommargin padding: "10px", }; From f783cd8de29598a5c29944c30114c63e7518cb98 Mon Sep 17 00:00:00 2001 From: sau-mili <146661411+sau-mili@users.noreply.github.com> Date: Thu, 5 Oct 2023 14:44:51 +0530 Subject: [PATCH 04/12] Update Event page --- pages/events/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/events/index.js b/pages/events/index.js index b6c3bc7..ec32260 100644 --- a/pages/events/index.js +++ b/pages/events/index.js @@ -22,7 +22,7 @@ function EventPage() { display: "flex", flexWrap: "wrap", justifyContent: "space-between", - padding: "10px", + gap: "20px", marginRight: "20px", // Adjust the rightmargin marginLeft: "20px", // Adjust the bottommargin }; From 03baa39c5cd644c72dc736859b538f736bc54160 Mon Sep 17 00:00:00 2001 From: sau-mili <146661411+sau-mili@users.noreply.github.com> Date: Thu, 5 Oct 2023 14:50:03 +0530 Subject: [PATCH 05/12] Update to make the cards equal --- pages/events/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/pages/events/index.js b/pages/events/index.js index ec32260..5650826 100644 --- a/pages/events/index.js +++ b/pages/events/index.js @@ -59,6 +59,7 @@ function EventPage() { const EventCard = (props) => (
+
{props.title} ( height={180} objectFit="cover" /> +

{props.title}

{props.description}

From 3d0ca0628627c7b2ab5e7f17b618f1de75bce07d Mon Sep 17 00:00:00 2001 From: sau-mili <146661411+sau-mili@users.noreply.github.com> Date: Thu, 5 Oct 2023 14:57:11 +0530 Subject: [PATCH 06/12] UpdateEvents page - beautify with proper space --- pages/events/index.js | 72 +++++++++++++++++++++++++++++++------------ 1 file changed, 53 insertions(+), 19 deletions(-) diff --git a/pages/events/index.js b/pages/events/index.js index 5650826..1289a8a 100644 --- a/pages/events/index.js +++ b/pages/events/index.js @@ -22,17 +22,39 @@ function EventPage() { display: "flex", flexWrap: "wrap", justifyContent: "space-between", - gap: "20px", - marginRight: "20px", // Adjust the rightmargin - marginLeft: "20px", // Adjust the bottommargin + gap: "20px", // Add gap between cards }; const eventCardStyle = { - flex: 1, - maxWidth: "calc(33.33% - 20px)", // Adjust the width - marginRight: "20px", // Adjust the rightmargin - marginBottom: "20px", // Adjust the bottommargin - padding: "10px", + flex: "0 0 calc(33.33% - 20px)", // Equal size for all cards with padding + padding: "20px", // Padding inside the card + }; + + const imageContainerStyle = { + height: "400px", + overflow: "hidden", + position: "relative", + }; + + const overlayStyle = { + content: "", + position: "absolute", + top: "0", + left: "0", + right: "0", + bottom: "0", + background: "linear-gradient(transparent, rgba(0, 0, 0, 0.7))", + pointerEvents: "none", + opacity: "0", + transition: "opacity 0.3s ease-in-out", + }; + + const overlayEnter = (e) => { + e.currentTarget.querySelector(".overlay").style.opacity = "1"; + }; + + const overlayLeave = (e) => { + e.currentTarget.querySelector(".overlay").style.opacity = "0"; }; return ( @@ -47,6 +69,11 @@ function EventPage() { description={event.description} image={event.image} link={event.link} + style={eventCardStyle} + imageContainerStyle={imageContainerStyle} + overlayStyle={overlayStyle} + overlayEnter={overlayEnter} + overlayLeave={overlayLeave} /> ); })} @@ -57,18 +84,25 @@ function EventPage() { } const EventCard = (props) => ( -
+
-
- {props.title} -
+
+ {props.title} +
+

{props.title}

{props.description}

From acd0fc59fbb67ec71cbecab7ddcc7e31903730e4 Mon Sep 17 00:00:00 2001 From: sau-mili <146661411+sau-mili@users.noreply.github.com> Date: Thu, 5 Oct 2023 15:01:21 +0530 Subject: [PATCH 07/12] Update index.js --- pages/events/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/events/index.js b/pages/events/index.js index 1289a8a..060eb66 100644 --- a/pages/events/index.js +++ b/pages/events/index.js @@ -22,7 +22,7 @@ function EventPage() { display: "flex", flexWrap: "wrap", justifyContent: "space-between", - gap: "20px", // Add gap between cards + gap: "5px", // Add gap between cards }; const eventCardStyle = { From 636802220fdb33c835cc06711cd24a3f2258ca57 Mon Sep 17 00:00:00 2001 From: sau-mili <146661411+sau-mili@users.noreply.github.com> Date: Thu, 5 Oct 2023 15:15:16 +0530 Subject: [PATCH 08/12] Update events page --- pages/events/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/pages/events/index.js b/pages/events/index.js index 060eb66..0d57a89 100644 --- a/pages/events/index.js +++ b/pages/events/index.js @@ -27,6 +27,7 @@ function EventPage() { const eventCardStyle = { flex: "0 0 calc(33.33% - 20px)", // Equal size for all cards with padding + margin: "10px", // Adjust margin for spacing between event blocks padding: "20px", // Padding inside the card }; From 81dae17f17b1d7a911b0bf5c0229ed89e4e0c344 Mon Sep 17 00:00:00 2001 From: sau-mili <146661411+sau-mili@users.noreply.github.com> Date: Thu, 5 Oct 2023 15:22:08 +0530 Subject: [PATCH 09/12] Update gap --- pages/events/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/events/index.js b/pages/events/index.js index 0d57a89..2923d5c 100644 --- a/pages/events/index.js +++ b/pages/events/index.js @@ -26,7 +26,7 @@ function EventPage() { }; const eventCardStyle = { - flex: "0 0 calc(33.33% - 20px)", // Equal size for all cards with padding + flex: "1" margin: "10px", // Adjust margin for spacing between event blocks padding: "20px", // Padding inside the card }; From 182b35e5475e1a61a5babeb669e9afb8861eb862 Mon Sep 17 00:00:00 2001 From: sau-mili <146661411+sau-mili@users.noreply.github.com> Date: Thu, 5 Oct 2023 15:23:19 +0530 Subject: [PATCH 10/12] Update event --- pages/events/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/events/index.js b/pages/events/index.js index 2923d5c..214073d 100644 --- a/pages/events/index.js +++ b/pages/events/index.js @@ -22,11 +22,11 @@ function EventPage() { display: "flex", flexWrap: "wrap", justifyContent: "space-between", - gap: "5px", // Add gap between cards + gap: "20px", // Add gap between cards }; const eventCardStyle = { - flex: "1" + flex: "1" , margin: "10px", // Adjust margin for spacing between event blocks padding: "20px", // Padding inside the card }; From a3deae0ef0216f647e650afc56094a5d30dc1a3a Mon Sep 17 00:00:00 2001 From: sau-mili <146661411+sau-mili@users.noreply.github.com> Date: Thu, 5 Oct 2023 16:22:36 +0530 Subject: [PATCH 11/12] Update Events page cards --- pages/events/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/pages/events/index.js b/pages/events/index.js index 214073d..cb8b171 100644 --- a/pages/events/index.js +++ b/pages/events/index.js @@ -33,6 +33,7 @@ function EventPage() { const imageContainerStyle = { height: "400px", + width: "100%", overflow: "hidden", position: "relative", }; @@ -100,7 +101,7 @@ const EventCard = (props) => ( layout="responsive" width={300} height={180} - objectFit="cover" + objectFit="contain" />
From ccbf5cacb2c73f5516785d7e7152574c8b66281c Mon Sep 17 00:00:00 2001 From: sau-mili <146661411+sau-mili@users.noreply.github.com> Date: Thu, 5 Oct 2023 16:25:14 +0530 Subject: [PATCH 12/12] Update events --- pages/events/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/events/index.js b/pages/events/index.js index cb8b171..e28f46a 100644 --- a/pages/events/index.js +++ b/pages/events/index.js @@ -32,7 +32,7 @@ function EventPage() { }; const imageContainerStyle = { - height: "400px", + height: "100%", width: "100%", overflow: "hidden", position: "relative",