Deployment - sept 13

packages/nulp_elite/public/locales/be/translation.json

@@ -296,5 +296,7 @@
   "ADMIN":"অ্যাডমিন",
   "LEARNING_REPORT":"লার্নিং রিপোর্ট",
   "POPULAR_COURSES" : "জনপ্রিয় কোর্স",
-  "RECENTLY_ADDED":"সম্প্রতি যোগ করা হয়েছে"
+  "RECENTLY_ADDED":"সম্প্রতি যোগ করা হয়েছে",
+  "CONTENT_DERIVED_FROM": "এই বিষয়বস্তু থেকে সংগৃহীত",
+  "PUBLISHED_ON_NULP_BY": "NULP দ্বারা প্রকাশিত"
 }

packages/nulp_elite/public/locales/en/translation.json

@@ -316,6 +316,7 @@
   "ADMIN":"Admin",
   "LEARNING_REPORT":"Learning Report",
   "POPULAR_COURSES" : "Popular Courses",
-  "RECENTLY_ADDED":"Recently Added"
-
+  "RECENTLY_ADDED":"Recently Added",
+  "CONTENT_DERIVED_FROM": "This content is derived from",
+  "PUBLISHED_ON_NULP_BY": "PUBLISHED ON NULP BY"
 }

packages/nulp_elite/public/locales/gg/translation.json

@@ -306,7 +306,8 @@
   "ADMIN":"એડમિન",
   "LEARNING_REPORT":"લર્નિંગ રિપોર્ટ",
   "POPULAR_COURSES" : "લોકપ્રિય અભ્યાસક્રમો",
-  "RECENTLY_ADDED":"તાજેતરમાં ઉમેરાયેલ"
-
+  "RECENTLY_ADDED":"તાજેતરમાં ઉમેરાયેલ",
+  "CONTENT_DERIVED_FROM": "આ સામગ્રીમાંથી ઉત્પન્ન છે",
+  "PUBLISHED_ON_NULP_BY": "NULP દ્વારા પ્રકાશિત"
 
 }

packages/nulp_elite/public/locales/hi/translation.json

@@ -298,5 +298,7 @@
   "ADMIN":"व्यवस्थापक",
   "LEARNING_REPORT":"सीखने की रिपोर्ट",
   "POPULAR_COURSES" : "लोकप्रिय पाठ्यक्रम",
-  "RECENTLY_ADDED":"हाल ही में जोड़ा"
+  "RECENTLY_ADDED":"हाल ही में जोड़ा",
+  "CONTENT_DERIVED_FROM": "यह सामग्री से व्युत्पन्न है",
+  "PUBLISHED_ON_NULP_BY": "एनयूपीएलपी द्वारा प्रकाशित"
 }

packages/nulp_elite/public/locales/ma/translation.json

@@ -298,6 +298,8 @@
   "ADMIN":"प्रशासक",
   "LEARNING_REPORT":"शिकण्याचा अहवाल",
   "POPULAR_COURSES" : "लोकप्रिय अभ्यासक्रम",
-  "RECENTLY_ADDED":"अलीकडे जोडले"
+  "RECENTLY_ADDED":"अलीकडे जोडले",
+  "CONTENT_DERIVED_FROM": "ही सामग्री यावरून घेतली आहे",
+  "PUBLISHED_ON_NULP_BY": "एनयूपीएलपीद्वारे प्रकाशित"
 
 }

packages/nulp_elite/public/locales/mal/translation.json

@@ -298,5 +298,7 @@
   "ADMIN":"അഡ്മിൻ",
   "LEARNING_REPORT":"പഠന റിപ്പോർട്ട്",
   "POPULAR_COURSES" : "ജനപ്രിയ കോഴ്സുകൾ",
-  "RECENTLY_ADDED":"അടുത്തിടെ ചേർത്തത് "
+  "RECENTLY_ADDED":"അടുത്തിടെ ചേർത്തത് ",
+  "CONTENT_DERIVED_FROM": "ഈ ഉള്ളടക്കം നിന്നു പ്രാപ്തമായതാണ്",
+  "PUBLISHED_ON_NULP_BY": "NULP വഴി പ്രസിദ്ധീകരിച്ചത്"
 }

packages/nulp_elite/public/locales/ta/translation.json

@@ -323,5 +323,7 @@
   "ADMIN":"நிர்வாகி",
   "LEARNING_REPORT":"கற்றல் அறிக்கை",
   "POPULAR_COURSES" : " జనాదరణ పొందిన కోర్సులు",
-  "RECENTLY_ADDED":"ఇటీవల జోడించబడింది"
+  "RECENTLY_ADDED":"ఇటీవల జోడించబడింది",
+  "CONTENT_DERIVED_FROM": "இந்த உள்ளடக்கம் இதிலிருந்து பெறப்பட்டுள்ளது",
+  "PUBLISHED_ON_NULP_BY": "NULP மூலம் வெளியிடப்பட்டது"
 }

packages/nulp_elite/public/locales/te/translation.json

@@ -261,5 +261,7 @@
   "ADMIN":"నిర్వాహకుడు",
   "LEARNING_REPORT":"లెర్నింగ్ రిపోర్ట్",
   "POPULAR_COURSES" : "జనాదరణ పొందిన కోర్సులు",
-  "RECENTLY_ADDED":"ఇటీవల జోడించబడింది"
+  "RECENTLY_ADDED":"ఇటీవల జోడించబడింది",
+  "CONTENT_DERIVED_FROM": "ఈ సాంఘికత నుండి పొందినది",
+  "PUBLISHED_ON_NULP_BY": "NULP ద్వారా ప్రచురించబడింది"
 }

packages/nulp_elite/src/components/domainCarousel.js

@@ -4,13 +4,10 @@ import Typography from "@mui/joy/Typography";
 import Carousel from "react-multi-carousel";
 import "react-multi-carousel/lib/styles.css";
 import domainWithImage from "../assets/domainImgForm.json";
-import { Tooltip } from "@mui/material";
-import { MarginOutlined } from "@mui/icons-material";
 import Container from "@mui/material/Container";
 import { useTranslation } from "react-i18next";
 import SkeletonLoader from "components/skeletonLoader";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
-// import { useNavigate } from "react-router-dom";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { Button } from "@mui/material";
 const styles = {
@@ -22,25 +19,27 @@ const styles = {
   },
 };
 const responsive = {
-  superLargeDesktop: {
-    // the naming can be any, depends on you.
-    // breakpoint: { max: 4000, min: 3000 },
-    breakpoint: { max: 1280, min: 1024 },
-
-    items: 8,
-  },
   desktop: {
-    // breakpoint: { max: 3000, min: 1024 },
-    breakpoint: { max: 1024, min: 769 },
+    breakpoint: { max: 1920, min: 1240 },
+    items: 10,
+    arrows: false, 
+  },
+  mediumDesktop: {
+    breakpoint: { max: 1240, min: 768 },
     items: 8,
+    partialVisibilityGutter: 20,
+    arrows: true,
   },
   tablet: {
-    breakpoint: { max: 768, min: 464 },
+    breakpoint: { max: 768, min: 600 },
     items: 4,
+    partialVisibilityGutter: 30,
+    arrows: true,
   },
   mobile: {
-    breakpoint: { max: 464, min: 0 },
+    breakpoint: { max: 600, min: 0 },
     items: 3,
+    arrows: true,
   },
 };
 
@@ -164,179 +163,97 @@ export default function DomainCarousel({
 
   return (
     <>
-      {isMobile ? (
-        <Box style={{ position: "relative" }} className="bg-darkblue">
-          <Carousel
-            swipeable={true}
-            draggable={true}
-            showDots={["mobile"]}
-            responsive={responsive}
-            ssr={true}
-            infinite={true}
-            autoPlaySpeed={1000}
-            keyBoardControl={true}
-            customTransition="all .5"
-            transitionDuration={500}
-            containerClass="carousel-container carousel-bx"
-            dotListClass="custom-dot-list-style-none"
-            itemClass="carousel-item-padding-40-px"
-          >
-            {itemsArray &&
-              itemsArray?.slice(0, 10).map((domain, index) => (
-                <Box
-                  className={`my-class ${
-                    activeStates === index
-                      ? "carousel-active-ui"
-                      : userDomain === domain.code
-                      ? "carousel-active-ui"
-                      : ""
-                  }`}
-                  onClick={(e) =>
-                    handleDomainClick(domain.code, index, domain.name)
-                  }
-                  key={index}
-                  orientation="horizontal"
-                  size="sm"
-                  variant="outlined"
-                >
-                  <Box
-                    // className="imgBorder cursor-pointer"
-                    className="cursor-pointer"
-                    // style={{
-                    //   background: "#fff",
-                    //   padding: "4px",
-                    //   borderRadius: "10px",
-                    //   height: "48px",
-                    //   width: "48px",
-                    // }}
-                  >
-                    {/* {(domain.image != undefined) && <img src={require(baseImgUrl+domain.image)}  style={{width:'40px',objectFit:'contain'}} alt={domain.name} />}
-                {(domain.image == undefined)&& <img src={require("../assets/swm.png")}  style={{width:'40px',objectFit:'contain'}} alt={domain.name} />} */}
-                    <img
-                      src={require(`../assets/domainImgs${domain.image}`)}
-                      alt={domain.name}
-                      className="domainHover"
-
-                      // style={{ transform: "translate(5px, 4px)" }}
-                    />
-                    {/* <img src={require("../assets/swm.png")}  style={{width:'40px',objectFit:'contain'}} alt={domain.name} /> */}
-                  </Box>
-                  <Box sx={{ alignSelf: "center" }} className="cursor-pointer">
-                    <Typography
-                      level="title-md"
-                      style={{ fontSize: "12px", textAlign: "center" }}
-                      className="domainText"
-                    >
-                      {domain.name}
-                    </Typography>
-                  </Box>
-                </Box>
-              ))}
-          </Carousel>
-        </Box>
-      ) : (
+      {isLoading && (
         <>
-          {isLoading && (
-            <>
-              <Box>
-                <SkeletonLoader />
-              </Box>
-            </>
-          )}
-
-          {!isLoading && !isBoxVisible && (
-            <Box className="domain-box">
-              <button onClick={handleClick} className="domain-btn">
-                {t("SELECT_YOUR_PREFERRED_DOMAIN")}
-                <KeyboardArrowDownIcon
-                  style={{
-                    color: "#484848",
-                    fontSize: "24px",
-                    verticalAlign: "middle",
-                  }}
-                />
-              </button>
-            </Box>
-          )}
+          <Box>
+            <SkeletonLoader />
+          </Box>
+        </>
+      )}
 
-          {isBoxVisible && (
-            <>
-            <Box className="bg-darkblue1">
-              <Box className="carousel-bx pt-12">
-                <Container
-                  role="main"
-                  maxWidth="xl"
-                  className="carousel"
-                  style={{ paddingTop: "0" }}
-                >
-                  <Box>
-                    <Box
-                      sx={{
-                        display: "flex",
-                        justifyContent: "space-evenly",
-                        width: "100%",
-                      }}
-                    >
-                      {itemsArray &&
-                        itemsArray?.slice(0, 10).map((domain, index) => (
-                          <Box
-                            className={`my-class ${
-                              activeStates === index
-                                ? "carousel-active-ui"
-                                : userDomain === domain.code
-                                ? "carousel-active-ui"
-                                : ""
-                            }`}
-                            onClick={(e) =>
-                              handleDomainClick(domain.code, index, domain.name)
-                            }
-                            key={index}
-                            orientation="horizontal"
-                            size="sm"
-                            variant="outlined"
-                            style={{ display: "flex", margin: "0 4px" }}
-                            onMouseEnter={(event) => handleMouseEnter(index)}
-                            onMouseLeave={handleMouseLeave}
-                          >
-                            <Box className="cursor-pointer">
-                              <Box className="cursor-pointer">
-                                <img
-                                  className="domainHover"
-                                  src={require(`../assets/domainImgs${domain.image}`)}
-                                  alt={domain.name}
-                                />
-                              </Box>
-                              <span className="cursor-pointer domainText">
-                                {domain.name}
-                              </span>
-                              {/* )} */}
-                            </Box>
-                          </Box>
-                        ))}
-                    </Box>
-                  </Box>
+      {!isLoading && !isBoxVisible && (
+        <Box className="domain-box">
+          <button onClick={handleClick} className="domain-btn">
+            {t("SELECT_YOUR_PREFERRED_DOMAIN")}
+            <KeyboardArrowDownIcon
+              style={{
+                color: "#484848",
+                fontSize: "24px",
+                verticalAlign: "middle",
+              }}
+            />
+          </button>
+        </Box>
+      )}
+      {isBoxVisible && (
+        <><Box className="bg-darkblue">
+          <Container
+            role="main"
+            maxWidth="xl"
+            className="carousel"
+            style={{ paddingTop: "0" }}
+          >
+            <Carousel
+              swipeable={true}
+              draggable={true}
+              showDots={false}
+              responsive={responsive}
+              ssr={true}
+              infinite={true}
+              autoPlaySpeed={1000}
+              keyBoardControl={true}
+              customTransition="all .5"
+              transitionDuration={500}
+              containerClass="carousel-container carousel-bx"
+              dotListClass="custom-dot-list-style-none"
+              itemClass="carousel-item-padding-40-px"
+            >
+              {itemsArray &&
+                itemsArray.slice(0, 10).map((domain, index) => (
                   <Box
-                    style={{
-                      textAlign: "center",
-                      margin: "0 auto",
-                    }}
+                    className={`my-class ${activeStates === index || userDomain === domain.code
+                      ? "carousel-active-ui"
+                      : ""}`}
+                    onClick={() => handleDomainClick(domain.code, index, domain.name)}
+                    key={index}
+                    orientation="horizontal"
+                    size="sm"
+                    variant="outlined"
                   >
-                    <Button
-                      onClick={handleClick}
-                      style={{ paddingTop: "0", marginTop: "20px" }}
-                    >
-                      <KeyboardArrowUpIcon
-                        style={{ color: "#fff", fontSize: "33px" }}
-                      />
-                    </Button>
+                    <Box className="cursor-pointer">
+                      <img
+                        src={require(`../assets/domainImgs${domain.image}`)}
+                        alt={domain.name}
+                        className="domainHover" />
+                    </Box>
+                    <Box sx={{ alignSelf: "center" }} className="cursor-pointer">
+                      <Typography
+                        level="title-md"
+                        style={{ fontSize: "12px", textAlign: "center" }}
+                        className="domainText"
+                      >
+                        {domain.name}
+                      </Typography>
+                    </Box>
                   </Box>
-                </Container>
-              </Box>
+                ))}
+            </Carousel>
+            <Box
+              style={{
+                textAlign: "center",
+                margin: "0 auto",
+              }}
+            >
+              <Button
+                onClick={handleClick}
+                style={{ paddingTop: "0"}}
+              >
+                <KeyboardArrowUpIcon
+                  style={{ color: "#fff", fontSize: "33px" }} />
+              </Button>
             </Box>
-            <Box className="height-200"></Box>
-            </>
-          )}
-        </>
+          </Container>
+        </Box><Box className="height-200"></Box></>
       )}
     </>
   );