🍁 Bug Fixed: The respective image should appear in the Recent&Previou…

…s Broadcast Cards (#1100)
HITK-TECH-Community · Aug 1, 2024 · 21effd3 · 21effd3
1 parent dabd60f
commit 21effd3
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx b/frontend/src/pages/Broadcast/Component/Carousel/Carousel.jsx
@@ -63,9 +63,10 @@ export function Carousel(props) {
     const style = {
       height: "13em",
       backgroundSize: "cover",
+      backgroundPosition: "center",
       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})`,
+      backgroundImage: `linear-gradient(45deg,rgba(255, 0, 90, 1) 0%,
+      rgba(10, 24, 61, 1) 90%), url(${item.imageUrl[0]})`,
     };
     return style;
   });
@@ -74,11 +75,11 @@ export function Carousel(props) {
     const style = {
       height: "13em",
       backgroundSize: "cover",
+      backgroundPosition: "center",
       backgroundBlendMode: "screen",
-      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;
   });
@@ -149,13 +150,13 @@ export function Carousel(props) {
                 handleOpen(item.content, item.title, item.imageUrl[0], item?.link)
               }
             >
-              <div
+              <div 
                 style={dark ? cardImageArrayDark[i] : cardImageArrayLight[i]}
               ></div>
-
+              
               <h3 className={style["card-head"]}>{item.title}</h3>
               <div className={style["card-text"]} 
-              dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(truncatedContent(item.content, 250)),}} />
+              dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(truncatedContent(item.content, 170)),}} />
             </div>
           ))}
         </OwlCarousel>

diff --git 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;