From 0bc0e7948024ef2113f744ef315a2bdd756bf84c Mon Sep 17 00:00:00 2001
From: Shivam Gaur <shivamgaur8527@gmail.com>
Date: Wed, 31 Jul 2024 00:41:09 +0530
Subject: [PATCH 1/2] Bug Fixed: The respective image should appear in the
 Recent&Previous Broadcast Cards

---
 .../Broadcast/Component/Carousel/Carousel.jsx | 65 ++++++++++++-------
 1 file changed, 43 insertions(+), 22 deletions(-)

diff --git a/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx b/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx
index 543cc423..93365d63 100644
--- a/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx
+++ b/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx
@@ -18,7 +18,7 @@ export function Carousel(props) {
     toastStatus: false,
     toastType: "",
     toastMessage: "",
-  })
+  });
   const [open, setOpen] = useState(false);
   const [dataa, setDataa] = useState([]);
   const [isLoaded, setLoaded] = useState(false);
@@ -62,10 +62,14 @@ export function Carousel(props) {
   const cardImageArrayLight = dataa.map((item, i) => {
     const style = {
       height: "13em",
-      backgroundSize: "cover",
+      backgroundSize: "23.9em",
+      //backgroundSize: "cover", // Cover the entire area
+      margin: "0 auto",
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat",
       backgroundBlendMode: "screen",
-      clipPath: "polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%)",
-      backgroundImage: `linear-gradient(45deg,rgba(255, 0, 90, 1) 0%,rgba(10, 24, 61, 1) 90%),url(${item.link})`,
+      // clipPath: "polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%)",
+      backgroundImage: `linear-gradient(45deg,rgba(255, 0, 90, 1) 0%,rgba(10, 24, 61, 1) 90%),url(${item.imageUrl[0]})`,
     };
     return style;
   });
@@ -73,12 +77,16 @@ export function Carousel(props) {
   const cardImageArrayDark = dataa.map((item, i) => {
     const style = {
       height: "13em",
-      backgroundSize: "cover",
+      backgroundSize: "23.9em",
+      //backgroundSize: "cover", // Cover the entire area
+      margin: "0 auto",
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat",
       backgroundBlendMode: "screen",
-      clipPath: "polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%)",
+      // clipPath: "polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%)",
       backgroundImage: `linear-gradient(45deg, 
         #4e4376 0%, 
-        #2b5876 90%),url(${item.link})`,
+        #2b5876 90%),url(${item.imageUrl[0]})`,
     };
     return style;
   });
@@ -88,12 +96,14 @@ export function Carousel(props) {
   }, []);
   const getData = async () => {
     setLoaded(false);
-    const result = await boardcast(setToast,toast)
-    const approvedBroadcasts = result.filter(broadcast => broadcast.isApproved);
+    const result = await boardcast(setToast, toast);
+    const approvedBroadcasts = result.filter(
+      (broadcast) => broadcast.isApproved
+    );
     setDataa(approvedBroadcasts);
     setLoaded(true);
-  }
-  const handleCloseToast = (event,reason) => {
+  };
+  const handleCloseToast = (event, reason) => {
     if (reason === "clickaway") {
       return;
     }
@@ -102,7 +112,7 @@ export function Carousel(props) {
 
   const truncatedContent = (content, maxLength) => {
     if (content.length > maxLength) {
-      return content.substring(0, maxLength) + '...';
+      return content.substring(0, maxLength) + "...";
     }
     return content;
   };
@@ -146,7 +156,12 @@ export function Carousel(props) {
                   : `${style["slide-card-light"]} ${style["slide-card"]}`
               }
               onClick={() =>
-                handleOpen(item.content, item.title, item.imageUrl[0], item?.link)
+                handleOpen(
+                  item.content,
+                  item.title,
+                  item.imageUrl[0],
+                  item?.link
+                )
               }
             >
               <div
@@ -154,19 +169,25 @@ export function Carousel(props) {
               ></div>
 
               <h3 className={style["card-head"]}>{item.title}</h3>
-              <div className={style["card-text"]} 
-              dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(truncatedContent(item.content, 250)),}} />
+              <div
+                className={style["card-text"]}
+                dangerouslySetInnerHTML={{
+                  __html: DOMPurify.sanitize(
+                    truncatedContent(item.content, 250)
+                  ),
+                }}
+              />
             </div>
           ))}
         </OwlCarousel>
         {toast.toastStatus && (
-        <SimpleToast
-          open={toast.toastStatus}
-          message={toast.toastMessage}
-          handleCloseToast={handleCloseToast}
-          severity={toast.toastType}
-        />
-      )}
+          <SimpleToast
+            open={toast.toastStatus}
+            message={toast.toastMessage}
+            handleCloseToast={handleCloseToast}
+            severity={toast.toastType}
+          />
+        )}
       </div>
     </React.Fragment>
   );

From 86ff430726f68ea786e498fb4e92cb009b976511 Mon Sep 17 00:00:00 2001
From: Shivam Gaur <shivamgaur8527@gmail.com>
Date: Wed, 31 Jul 2024 15:55:01 +0530
Subject: [PATCH 2/2] Fixed height of broadcast cards

---
 frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx   | 2 +-
 .../pages/Broadcast/Component/Carousel/carousel.module.scss    | 3 +--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx b/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx
index 93365d63..24fc57d4 100644
--- a/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx
+++ b/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx
@@ -173,7 +173,7 @@ export function Carousel(props) {
                 className={style["card-text"]}
                 dangerouslySetInnerHTML={{
                   __html: DOMPurify.sanitize(
-                    truncatedContent(item.content, 250)
+                    truncatedContent(item.content, 170)
                   ),
                 }}
               />
diff --git a/frontend/src/pages/Broadcast/Component/Carousel/carousel.module.scss b/frontend/src/pages/Broadcast/Component/Carousel/carousel.module.scss
index 150d9b18..279c9e7c 100644
--- a/frontend/src/pages/Broadcast/Component/Carousel/carousel.module.scss
+++ b/frontend/src/pages/Broadcast/Component/Carousel/carousel.module.scss
@@ -29,7 +29,7 @@
 
 .slide-card {
   position: relative;
-  min-height: 31em;
+  height: 31em;
   min-width: 20em;
   border-radius: 15px;
   margin: 30px;
@@ -65,7 +65,6 @@
 .card-text {
   line-height: 1.4;
   padding: 1em;
-  padding-top: 2em;
   text-align: justify;
   text-justify: distribute-all-lines;
   font-size: 14px;