Skip to content

Commit

Permalink
Merge pull request #671 from sonaliTekdi/responsive_changes
Browse files Browse the repository at this point in the history 
Task #227193  - [FE] - Mobile responsive
  • Loading branch information
@paritshivani
paritshivani authored Oct 4, 2024
2 parents 6945cd2 + a84be7f commit 3997963
Show file tree
Hide file tree
Showing 7 changed files with 59 additions and 47 deletions.
19 changes: 12 additions & 7 deletions packages/nulp_elite/src/components/header.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,9 +216,9 @@ function Header({ globalSearchQuery }) {
boxShadow: searchQuery ? '0 2px 4px rgba(0, 0, 0, 0.2)' : 'none',
color: searchQuery ? '#fff' : "#000"
};
const handleLogout =() => {
sessionStorage.setItem('isModalShown', 'false');
}
const handleLogout = () => {
sessionStorage.setItem('isModalShown', 'false');
}
return (
<>
<Box
Expand Down Expand Up @@ -615,9 +615,9 @@ const handleLogout =() => {
</MenuItem>
</Link>
<Link href="/logoff" underline="none" textAlign="center"
onClick={handleLogout}>
onClick={handleLogout}>
<MenuItem>


{t("LOGOUT")}

Expand Down Expand Up @@ -738,6 +738,11 @@ const handleLogout =() => {
>
<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>
Expand Down Expand Up @@ -873,9 +878,9 @@ const handleLogout =() => {
className="ml-10"
onClick={() => {
sessionStorage.setItem("urlPath", "learningreport");
window.open(routeConfig.ROUTES.LEARNING_REPORT, "_blank");
window.open(routeConfig.ROUTES.LEARNING_REPORT, "_blank");
}}
style={{color:'#1976d2'}}
style={{ color: '#1976d2' }}
>
{t("LEARNING_REPORT")}
</MenuItem>
Expand Down
9 changes: 6 additions & 3 deletions packages/nulp_elite/src/pages/content/Player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -261,17 +261,20 @@ const updateContentStateForAssessment = async () => {
return (
<div>
<Header />
<Box sx={{ height: 'calc(100vh - 210px)', overflowY:'auto' }}>
<Box>
<Container maxWidth="xl" role="main" className="player mt-15">
<Grid container spacing={2} className="mt-10 mb-30">
<Grid item xs={12} md={12} lg={12}>
<Box
className="d-flex mr-20 my-20 px-10"
style={{ alignItems: "center",justifyContent:'space-between' }}
>
<Link onClick={handleBackNavigation} className="viewAll mr-17 mt-10">
<Button
onClick={handleBackNavigation}
className="custom-btn-primary mr-17 mt-15"
>
{t("BACK")}
</Link>
</Button>
</Box>
</Grid>
<Grid item xs={12} md={9} lg={9}>
Expand Down
29 changes: 13 additions & 16 deletions packages/nulp_elite/src/pages/content/joinCourse.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -611,21 +611,20 @@ const JoinCourse = () => {
{t("BACK")}
</Button>
</Box>
<Box>
{" "}

<Box>
<Button
onClick={() => handleLinkClick(childnode)}
className="custom-btn-primary mr-5"
>
{t("START_LEARNING")}
</Button>
{!isCompleted && (
onClick={() => handleLinkClick(childnode)}
className="custom-btn-primary mr-5"
>
{t("START_LEARNING")}
</Button>
{!isCompleted &&
<Button
onClick={handleLeaveCourseClick} // Open confirmation dialog
className="custom-btn-danger"
>
{" "}
{t("LEAVE_COURSE")}
className="custom-btn-danger xs-mt-10"
> {t("LEAVE_COURSE")}

</Button>
)}
</Box>
Expand Down Expand Up @@ -689,10 +688,8 @@ const JoinCourse = () => {
{!isCompleted && (
<Button
onClick={handleLeaveCourseClick} // Open confirmation dialog
className="custom-btn-danger"
>
{" "}
{t("LEAVE_COURSE")}
className="custom-btn-danger xs-mt-10"
> {t("LEAVE_COURSE")}
</Button>
)}{" "}
</Box>
Expand Down
21 changes: 10 additions & 11 deletions packages/nulp_elite/src/pages/events/eventDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -770,7 +770,7 @@ const formatTimeWithTimezone = (date) => {
<div>
<Header />
{toasterMessage && <ToasterCommon response={toasterMessage} />}
<Box sx={{ height: 'calc(100vh - 210px)', overflowY:'auto' }}>
<Box>
<Snackbar
open={showEnrollmentSnackbar}
autoHideDuration={6000}
Expand Down Expand Up @@ -838,7 +838,7 @@ const formatTimeWithTimezone = (date) => {
spacing={2}
className="bg-whitee custom-event-container mb-20 custom-container mb-38"
>
<Grid item xs={3} md={6} lg={2}>
<Grid item xs={12} md={6} lg={2}>
<img
src={
detailData.appIcon
Expand All @@ -849,10 +849,10 @@ const formatTimeWithTimezone = (date) => {
alt="App Icon"
/>
</Grid>
<Grid item xs={9} md={6} lg={6} className="lg-pl-60 xs-pl-30">
<Grid item xs={12} md={6} lg={6} className="lg-pl-60">
<Typography
gutterBottom
className="mt-10 h1-title mb-20 xs-pl-15"
className="mt-10 h1-title mb-20"
>
{detailData.name}
</Typography>
Expand All @@ -878,20 +878,20 @@ const formatTimeWithTimezone = (date) => {
</Box>

<Box className="d-flex mb-20 h3-custom-title xs-hide">
<Box className="d-flex jc-bw alignItems-center pr-5">
<Box className="d-flex alignItems-center pr-5">
<TodayOutlinedIcon className="h3-custom-title pr-5" />
{formatDate(detailData.startDate)}
</Box>
<Box className="d-flex jc-bw alignItems-center pl-10 pr-5">
<Box className="d-flex alignItems-center pl-10 pr-5">
<AccessAlarmsOutlinedIcon className="h3-custom-title pr-5" />
{formatTimeToIST(detailData.startTime)}
</Box>
<Box className="mx-10">To</Box>
<Box className="d-flex jc-bw alignItems-center pl-5 pr-5">
<Box className="d-flex alignItems-center pl-5 pr-5">
<TodayOutlinedIcon className="h3-custom-title pr-5" />
{formatDate(detailData.endDate)}
</Box>
<Box className="d-flex jc-bw alignItems-center pl-10 pr-5">
<Box className="d-flex alignItems-center pl-10 pr-5">
<AccessAlarmsOutlinedIcon className="h3-custom-title pr-5" />
{formatTimeToIST(detailData.endTime)}
</Box>
Expand Down Expand Up @@ -1341,7 +1341,6 @@ const formatTimeWithTimezone = (date) => {
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
width: 1000,
bgcolor: "background.paper",
border: "2px solid #000",
boxShadow: 24,
Expand Down Expand Up @@ -1431,14 +1430,14 @@ const formatTimeWithTimezone = (date) => {
/>
<Box sx={{ mt: 2 }} style={{ textAlign: "right" }}>
<Button
className="custom-btn-primary"
className="custom-btn-primary xs-mb-10"
onClick={handleSubmit}
disabled={!isChecked}
>
{t("SUBMIT")}
</Button>
<Button
className="custom-btn-default"
className="custom-btn-default "
onClick={handleCloseConsentModal}
sx={{ ml: 2 }}
>
Expand Down
4 changes: 2 additions & 2 deletions packages/nulp_elite/src/pages/voting/pollsDetails.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -304,7 +304,7 @@ const pollsDetailes = () => {
key={index}
title={keyword}
placement="right"
className="customlabeltwo cardLabelEllips"
className="customlabeltwo"
>
<Button className="d-inline-block">
{index < 2
Expand All @@ -318,7 +318,7 @@ const pollsDetailes = () => {
<Tooltip
title={items.poll_keywords.slice(3).join(", ")}
placement="right"
className="customlabeltwo cardLabelEllips"
className="customlabeltwo"
>
<Button className="d-inline-block">
{items.poll_keywords[2]} + {items.poll_keywords.length - 3}
Expand Down
12 changes: 6 additions & 6 deletions packages/nulp_elite/src/pages/voting/votingDashboard.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -469,7 +469,7 @@ const votingDashboard = () => {
key={index}
title={keyword}
placement="right"
className="customlabeltwo cardLabelEllips"
className="customlabeltwo"
>
<Button className="d-inline-block">
{index < 2
Expand All @@ -484,7 +484,7 @@ const votingDashboard = () => {
<Tooltip
title={items.poll_keywords.slice(3).join(", ")}
placement="right"
className="customlabeltwo cardLabelEllips"
className="customlabeltwo"
>
<Button className="d-inline-block">
{items.poll_keywords[2]} + {items.poll_keywords.length - 3}
Expand Down Expand Up @@ -774,7 +774,7 @@ const votingDashboard = () => {
key={index}
title={keyword}
placement="right"
className="customlabeltwo cardLabelEllips"
className="customlabeltwo"
>
<Button className="d-inline-block">
{index < 2
Expand All @@ -788,7 +788,7 @@ const votingDashboard = () => {
<Tooltip
title={items.poll_keywords.slice(3).join(", ")}
placement="right"
className="customlabeltwo cardLabelEllips"
className="customlabeltwo"
>
<Button className="d-inline-block">
{items.poll_keywords[2]} + {items.poll_keywords.length - 3}
Expand Down Expand Up @@ -1027,7 +1027,7 @@ const votingDashboard = () => {
key={index}
title={keyword}
placement="right"
className="customlabeltwo cardLabelEllips"
className="customlabeltwo"
>
<Button className="d-inline-block">
{index < 2
Expand All @@ -1041,7 +1041,7 @@ const votingDashboard = () => {
<Tooltip
title={items.poll_keywords.slice(3).join(", ")}
placement="right"
className="customlabeltwo cardLabelEllips"
className="customlabeltwo"
>
<Button className="d-inline-block">
{items.poll_keywords[2]} +{" "}
Expand Down
12 changes: 10 additions & 2 deletions packages/nulp_elite/src/styles/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -767,6 +767,12 @@ button {
}

@media (max-width: 768px) {
.xs-mt-10{
margin-top:10px;
}
.jc-bw{
margin-left: 0px!important;
}
.searchField .MuiInputBase-input::placeholder {
font-size: 12px;
}
Expand Down Expand Up @@ -798,6 +804,7 @@ button {
.h1-title {
line-height: 30px;
margin-bottom: 25px;
font-size: 18px !important;
}

.custom-btn-primary,
Expand Down Expand Up @@ -965,7 +972,8 @@ button {
}

.xss-pb-0 {
padding: 3px 0 5px 16px !important;
padding: 19% 0 5% 16px !important;

}

.MuiDrawer-paper {
Expand Down Expand Up @@ -1151,7 +1159,7 @@ button {
}

.xs-mb-10 {
margin-bottom: 10px;
margin-bottom: 10px !important;
}

.xs-mb-20 {
Expand Down

0 comments on commit 3997963

Please sign in to comment.