Skip to content

Commit

Permalink
Merge pull request #437 from Ekta29yadav/ui
Browse files Browse the repository at this point in the history 
Task #0000 - no result found UI, domain carousel, notification
  • Loading branch information
@paritshivani
paritshivani authored Aug 1, 2024
2 parents 2b90ee6 + e8625ac commit c51cf6f
Show file tree
Hide file tree
Showing 6 changed files with 153 additions and 116 deletions.
19 changes: 11 additions & 8 deletions packages/nulp_elite/src/components/domainCarousel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,20 +24,23 @@ const styles = {
const responsive = {
superLargeDesktop: {
// the naming can be any, depends on you.
breakpoint: { max: 4000, min: 3000 },
items: 5,
// breakpoint: { max: 4000, min: 3000 },
breakpoint: { max: 1280, min: 1024 },

items: 8,
},
desktop: {
breakpoint: { max: 3000, min: 1024 },
// breakpoint: { max: 3000, min: 1024 },
breakpoint: { max: 1024, min: 769 },
items: 8,
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 2,
breakpoint: { max: 768, min: 464 },
items: 4,
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 4,
items: 3,
},
};

Expand All @@ -57,7 +60,7 @@ export default function DomainCarousel({
// (
// () => domains?.map(() => false) // Initialize all items as inactive
// );
const [isMobile, setIsMobile] = useState(window.innerWidth <= 767);
const [isMobile, setIsMobile] = useState(window.innerWidth <= 1208);
const [activeDomain, setActiveDomain] = useState(null);
const [scrolled, setScrolled] = useState(false);
// const navigate = useNavigate();
Expand All @@ -84,7 +87,7 @@ export default function DomainCarousel({
}, []);

const handleResize = () => {
setIsMobile(window.innerWidth <= 767);
setIsMobile(window.innerWidth <= 1024);
};
useEffect(() => {
const handleScroll = () => {
Expand Down
183 changes: 97 additions & 86 deletions packages/nulp_elite/src/components/header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -419,61 +419,59 @@ function Header({ globalSearchQuery }) {
/>
</Tooltip>
</Link>
<Tooltip
{/* <Tooltip
title={t("Language")}
placement="bottom"
arrow
open={show}
onMouseEnter={() => setShow(true)}
onMouseLeave={() => setShow(false)}
>
<Box sx={{ minWidth: 102, padding: "0px 18px 0px 11px" }}>
<FormControl
fullWidth
size="small"
className="translate xs-h-28"
style={{
display: "flex",
alignItems: "center",
flexDirection: "row",
justifyContent: "end",
}}
> */}
<Box sx={{ minWidth: 102, padding: "0px 18px 0px 11px" }}>
<FormControl
fullWidth
size="small"
className="translate xs-h-28"
style={{
display: "flex",
alignItems: "center",
flexDirection: "row",
justifyContent: "end",
}}
>
<GTranslateIcon />
<Select
labelId="language-select-label"
id="language-select"
className="language"
style={{ border: "none", color: "#4f4f4f" }}
label={t("LANGUAGE")}
value={language}
startIcon={<LanguageIcon />}
onChange={handleChangeLanguage}
inputProps={{ "aria-label": t("SELECT_LANGUAGE") }}
onOpen={() => setShow(false)}
onClose={() => setShow(true)}
>
<GTranslateIcon />
<Select
labelId="language-select-label"
id="language-select"
className="language"
style={{ border: "none", color: "#4f4f4f" }}
label={t("LANGUAGE")}
value={language}
startIcon={<LanguageIcon />}
onChange={handleChangeLanguage}
inputProps={{ "aria-label": t("SELECT_LANGUAGE") }}
onOpen={() => setShow(false)}
onClose={() => setShow(true)}
>
<MenuItem value="en">{t("ENGLISH")}</MenuItem>
<MenuItem value="hi">{t("HINDI")}</MenuItem>
<MenuItem value="ma">{t("MARATHI")}</MenuItem>
<MenuItem value="gg">{t("GUJARATI")}</MenuItem>
<MenuItem value="ta">{t("TAMIL")}</MenuItem>
<MenuItem value="be">{t("BENGALI")}</MenuItem>
<MenuItem value="mal">{t("MALAYALAM")}</MenuItem>
</Select>
</FormControl>
</Box>
</Tooltip>
{/* <Tooltip title={t("Notification")} placement="bottom" arrow>
<MenuItem value="en">{t("ENGLISH")}</MenuItem>
<MenuItem value="hi">{t("HINDI")}</MenuItem>
<MenuItem value="ma">{t("MARATHI")}</MenuItem>
<MenuItem value="gg">{t("GUJARATI")}</MenuItem>
<MenuItem value="ta">{t("TAMIL")}</MenuItem>
<MenuItem value="be">{t("BENGALI")}</MenuItem>
<MenuItem value="mal">{t("MALAYALAM")}</MenuItem>
</Select>
</FormControl>
</Box>
{/* </Tooltip> */}
<Tooltip title={t("Notification")} placement="bottom" arrow>
<Box className="notification-circle xs-hide">
<Tooltip>
<IconButton sx={{ p: 0 }}>
<NotificationsNoneOutlinedIcon />
</IconButton>
</Tooltip>
<Menu
{/* <Menu
sx={{ mt: "45px" }}
id="menu-appbar"
anchorEl={anchorElNotify}
Expand Down Expand Up @@ -504,9 +502,9 @@ function Header({ globalSearchQuery }) {
Text 3
</Link>
</MenuItem>
</Menu>
</Menu> */}
</Box>
</Tooltip> */}
</Tooltip>
<Tooltip title={t("Notification")} placement="bottom" arrow>
<Box className="notification-circle xs-hide">
{/* <NotificationsNoneOutlinedIcon />
Expand Down Expand Up @@ -800,53 +798,62 @@ function Header({ globalSearchQuery }) {
/>
</Link>
</Box>

<Box className="lg-hide translate">
{/* Language Select */}
<Box>
<FormControl
fullWidth
size="small"
style={{
display: "flex",
alignItems: "center",
flexDirection: "row",
justifyContent: "end",
}}
>
{/* <InputLabel id="language-select-label">
<Tooltip
title={t("Language")}
placement="bottom"
arrow
open={show}
onMouseEnter={() => setShow(true)}
onMouseLeave={() => setShow(false)}
>
<Box className="lg-hide translate">
{/* Language Select */}
<Box>
<FormControl
fullWidth
size="small"
style={{
display: "flex",
alignItems: "center",
flexDirection: "row",
justifyContent: "end",
}}
>
{/* <InputLabel id="language-select-label">
{t("LANGUAGE")}
</InputLabel> */}
<GTranslateIcon style={{ color: "#000" }} />
<Select
labelId="language-select-label"
id="language-select"
className="language"
style={{ border: "none" }}
label={t("LANGUAGE")}
value={language}
startIcon={<LanguageIcon />}
onChange={handleChangeLanguage}
inputProps={{ "aria-label": t("SELECT_LANGUAGE") }}
>
<MenuItem value="en">{t("ENGLISH")}</MenuItem>
<MenuItem value="hi">{t("HINDI")}</MenuItem>
</Select>
</FormControl>
<GTranslateIcon style={{ color: "#000" }} />
<Select
labelId="language-select-label"
id="language-select"
className="language"
style={{ border: "none" }}
label={t("LANGUAGE")}
value={language}
startIcon={<LanguageIcon />}
onChange={handleChangeLanguage}
inputProps={{ "aria-label": t("SELECT_LANGUAGE") }}
>
<MenuItem value="en">{t("ENGLISH")}</MenuItem>
<MenuItem value="hi">{t("HINDI")}</MenuItem>
</Select>
</FormControl>
</Box>
</Box>
</Box>
</Tooltip>
<Box className="d-flex">
<Box className="notification-circle lg-hide">
{/* <NotificationsNoneOutlinedIcon />
<Tooltip title={t("Notification")} placement="bottom" arrow>
<Box className="notification-circle lg-hide">
{/* <NotificationsNoneOutlinedIcon />
ekta */}
{/* <IconButton onClick={handleOpenNotifyMenu} sx={{ p: 0 }}> */}
{/* <IconButton onClick={handleOpenNotifyMenu} sx={{ p: 0 }}> */}

{/* <Tooltip>
<IconButton sx={{ p: 0 }}>
<NotificationsNoneOutlinedIcon />
</IconButton>
</Tooltip> */}
{/* <Menu
<Tooltip>
<IconButton sx={{ p: 0 }}>
<NotificationsNoneOutlinedIcon />
</IconButton>
</Tooltip>
{/* <Menu
sx={{ mt: "45px" }}
id="menu-appbar"
anchorEl={anchorElNotify}
Expand Down Expand Up @@ -878,8 +885,12 @@ function Header({ globalSearchQuery }) {
</Link>
</MenuItem>
</Menu> */}
</Box>
</Box>
</Tooltip>
<Tooltip
title={t("PROFILE")}
placement="bottom"
arrow
className={
activePath ===
`${routeConfig.ROUTES.POFILE_PAGE.PROFILE}` ||
Expand Down
1 change: 1 addition & 0 deletions packages/nulp_elite/src/pages/content/noResultFound.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ const NoResult = () => {
margin: "0 21px",
BorderRadius: "10px",
marginTop: "20px",
marginBottom: "20px",
}}
className="center-box"
>
Expand Down
7 changes: 5 additions & 2 deletions packages/nulp_elite/src/pages/profile/continueLearning.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,8 +183,11 @@ const ContinueLearning = () => {
</Box>
{paginatedCourses.length === 0 && (
<>
<NoResult className="center-no-result " />
<Box className="h5-title">Explore Content</Box>
<Box style={{ width: "100%" }}>
<NoResult className="center-no-result " />

<Box className="h5-title">Explore Content</Box>
</Box>
</>
)}

Expand Down
9 changes: 4 additions & 5 deletions packages/nulp_elite/src/pages/profile/learningHistory.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,11 +133,10 @@ const LearningHistory = () => {
</Box>
{filteredCourses?.length === 0 && (
<>
<NoResult
className="center-no-result "
style={{ width: "300px" }}
/>
<Box className="h5-title">Explore Content</Box>
<Box style={{ width: "100%" }}>
<NoResult className="center-no-result " />
<Box className="h5-title">Explore Content</Box>
</Box>
</>
)}

Expand Down
Loading

0 comments on commit c51cf6f

Please sign in to comment.