Merge pull request #319 from shreyas1434shinde/boardEnrollment

Task #PS-2128: Handle Large text translations like Malayalam language
tekdi · Oct 3, 2024 · 584e9d0 · 584e9d0
2 parents e14d5e7 + bad0466
commit 584e9d0
Show file tree

Hide file tree

Showing 10 changed files with 51 additions and 40 deletions.
diff --git a/public/locales/en/common.json b/public/locales/en/common.json
@@ -579,6 +579,7 @@
  "SAVE_AND_NEXT": "Save and Next",
  "TO_SAVE_YOUR_PROGRESS": "“Save & Next” to save your progress. You can come back and change it anytime.",
  "MANDATORY": "Mandatory for {{FeesStepBoards}} only. For other Boards, this step is automatically marked completed. Please click on Save to submit the data.",
- "COMPLETED": "Completed"
+ "COMPLETED": "Completed",
+ "MARK_AS_COMPLETE":"Mark as Complete"
  }
 }
diff --git a/src/components/CohortSelectionSection.tsx b/src/components/CohortSelectionSection.tsx
@@ -419,7 +419,7 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
  width: '100%',
  marginBottom: '0rem',
  '@media (max-width: 900px)': {
- width: isAttendanceOverview ? '100%' : '50%',
+ width: isAttendanceOverview ? '100%' : '62%',
  },
  }}
  MenuProps={{
@@ -517,12 +517,12 @@ const CohortSelectionSection: React.FC<CohortSelectionSectionProps> = ({
  '@media (max-width: 902px)': {
  width: isAttendanceOverview
  ? '100%'
- : '60%',
+ : '62%',
  },
  '@media (max-width: 702px)': {
  width: isAttendanceOverview
  ? '100%'
- : '50%',
+ : '65%',
  },
  }
  }

diff --git a/src/components/FacilitatorDrawer.tsx b/src/components/FacilitatorDrawer.tsx
@@ -91,7 +91,8 @@ const FacilitatorDrawer: React.FC<FacilitatorDrawerProps> = ({
  sx={{
  border: `1px solid ${theme?.palette?.warning['A400']}`,
  color: theme?.palette?.warning['A400'],
- width: '121px',
+ width: 'fit-content',
+ px: '20px',
  }}
  variant="outlined"
  >
@@ -105,7 +106,8 @@ const FacilitatorDrawer: React.FC<FacilitatorDrawerProps> = ({
  variant="contained"
  color="primary"
  onClick={onPrimaryClick}
- sx={{ width: '199px' }}
+ sx={{ width: 'fit-content', px: '20px' }}
+ className="one-line-text"
  >
  {primary}
  </Button>

diff --git a/src/components/LearnerModal.tsx b/src/components/LearnerModal.tsx
@@ -211,15 +211,18 @@ const LearnerModal = ({
  <Box sx={buttonContainerStyles}>
  <Button
  sx={closeButtonStyles(theme)}
+ style={{ width: 'fit-content', padding: '5px 16px' }}
  onClick={onClose}
  variant="outlined"
  >
  {t('COMMON.CLOSE')}
  </Button>
  <Button
  sx={profileButtonStyles(theme)}
+ style={{ width: 'fit-content', padding: '5px 16px' }}
  variant="contained"
  onClick={handleLearnerFullProfile}
+ fullWidth
  >
  {t('PROFILE.VIEW_FULL_PROFILE')}
  </Button>

diff --git a/src/pages/board-enrollment/student-detail/index.tsx b/src/pages/board-enrollment/student-detail/index.tsx
@@ -393,8 +393,10 @@ const BoardEnrollmentDetail = () => {
  },
  border: `1px solid ${theme.palette.error.contrastText}`,
  mt: '15px',
- width: '144px',
+ width: 'fit-content',
+ px: '20px',
  }}
+ className="one-line-text"
  variant="outlined"
  onClick={handleBack}
  disabled={activeStep === 0}
@@ -403,12 +405,14 @@ const BoardEnrollmentDetail = () => {
  </Button>
  <Button
  sx={{
- width: '144px',
  height: '40px',
  fontSize: '14px',
  fontWeight: '500',
  mt: '15px',
+ width: 'fit-content',
+ px: '20px',
  }}
+ className="one-line-text"
  variant="contained"
  color="primary"
  onClick={handleNext}

diff --git a/src/pages/centers/[cohortId]/index.tsx b/src/pages/centers/[cohortId]/index.tsx
@@ -539,7 +539,7 @@ const CohortPage = () => {
  border: `1px solid ${theme.palette.error.contrastText}`,
  borderRadius: '100px',
  height: '40px',
- width: '163px',
+ px: '16px',
  color: theme.palette.error.contrastText,
  }}
  onClick={handleOpen}
@@ -619,15 +619,15 @@ const CohortPage = () => {
  type: 'fraction',
  }}
  breakpoints={{
- 500: {
+ 600: {
  slidesPerView: 1,
  spaceBetween: 20,
  },
- 740: {
+ 900: {
  slidesPerView: 2,
  spaceBetween: 20,
  },
- 900: {
+ 1200: {
  slidesPerView: 3,
  spaceBetween: 30,
  },
@@ -725,7 +725,7 @@ const CohortPage = () => {
  <Box mt={3} px="18px">
  <Grid container spacing={3}>
  {sessions?.map((item) => (
- <Grid item xs={12} sm={6} md={4} key={item.id}>
+ <Grid item xs={12} sm={12} md={6} lg={4} mb={2} key={item.id}>
  <SessionCard
  data={item}
  isEventDeleted={handleEventDeleted}
@@ -769,7 +769,7 @@ const CohortPage = () => {
  border: '1px solid #1E1B16',
  borderRadius: '100px',
  height: '40px',
- width: '126px',
+ px: '16px',
  color: theme.palette.error.contrastText,
  }}
  className="text-1E"

diff --git a/src/pages/centers/index.tsx b/src/pages/centers/index.tsx
@@ -69,34 +69,32 @@ const CentersPage = () => {
  if (router.isReady) {
  const queryParamValue = router.query.tab ? Number(router.query.tab) : 1;
 
- if ([1,2].includes(queryParamValue))
- setValue(queryParamValue);
- else
- setValue(1);
+ if ([1, 2].includes(queryParamValue)) setValue(queryParamValue);
+ else setValue(1);
  }
  }, [router.isReady, router.query.tab]);
 
  useEffect(() => {
  // Merge existing query params with new ones
  if (router.isReady) {
- const updatedQuery = { ...router.query, tab: value };
+  const updatedQuery = { ...router.query, tab: value };
 
- // Update the URL without reloading the page
- router.push(
- {
- pathname: router.pathname,
- query: updatedQuery,
- },
- undefined,
- { shallow: true }
- );
- }
+  // Update the URL without reloading the page
+  router.push(
+  {
+  pathname: router.pathname,
+  query: updatedQuery,
+  },
+  undefined,
+  { shallow: true }
+  );
+  }
  }, [value]);
 
  useEffect(() => {
  if (typeof window !== 'undefined' && window.localStorage) {
  const role = localStorage.getItem('role');
- setType("");
+ setType('');
  if (role === Role.TEAM_LEADER) {
  setIsTeamLeader(true);
  } else {
@@ -420,7 +418,7 @@ const CentersPage = () => {
  border: '1px solid #1E1B16',
  borderRadius: '100px',
  height: '40px',
- width: '9rem',
+ px: '20px',
  color: theme.palette.error.contrastText,
  }}
  className="text-1E"

diff --git a/src/pages/course-planner-detail.tsx b/src/pages/course-planner-detail.tsx
@@ -681,8 +681,8 @@ const CoursePlannerDetail = () => {
  )}
  </div>
  <FacilitatorDrawer
- secondary={'Cancel'}
- primary={`Mark as Complete (${selectedCount})`}
+ secondary={t('COMMON.CANCEL')}
+ primary={`${t('BOARD_ENROLMENT.MARK_AS_COMPLETE')} (${selectedCount})`}
  toggleDrawer={toggleDrawer}
  drawerState={drawerState}
  onPrimaryClick={() => {

diff --git a/src/pages/learner/[userId].tsx b/src/pages/learner/[userId].tsx
@@ -262,7 +262,10 @@ const LearnerProfile: React.FC<LearnerProfileProp> = ({
  };
 
  // Conditionally add fromDate and toDate to filters if selectedValue doesn't match the specific condition
- if (selectedValue !== t('DASHBOARD.AS_OF_TODAY_DATE', { day_date: currentDayMonth })) {
+ if (
+ selectedValue !==
+ t('DASHBOARD.AS_OF_TODAY_DATE', { day_date: currentDayMonth })
+ ) {
  filters.fromDate = fromDates;
  filters.toDate = toDates;
  }
@@ -863,11 +866,10 @@ const LearnerProfile: React.FC<LearnerProfileProp> = ({
  // }}
  >
  <Button
- className="min-width-md-20"
  sx={{
  fontSize: '14px',
  lineHeight: '20px',
- minWidth: '100%',
+ minWidth: 'fit-content',
  padding: '10px 24px 10px 16px',
  gap: '8px',
  borderRadius: '100px',
@@ -1013,4 +1015,4 @@ export const getStaticPaths: GetStaticPaths<{ slug: string }> = async () => {
 export default withAccessControl(
  'accessLearnerProfile',
  accessControl
-)(LearnerProfile);
+)(LearnerProfile);
diff --git a/src/pages/user-profile/[userId].tsx b/src/pages/user-profile/[userId].tsx
@@ -446,8 +446,8 @@ const TeacherProfile: React.FC<TeacherProfileProp> = ({
  sx={{
  fontSize: '14px',
  lineHeight: '20px',
- width: '100%',
- minWidth: '182px',
+
+ minWidth: 'fit-content',
  padding: '10px 24px 10px 16px',
  gap: '8px',
  borderRadius: '100px',
@@ -456,7 +456,8 @@ const TeacherProfile: React.FC<TeacherProfileProp> = ({
  textAlign: 'center',
  color: theme.palette.warning.A200,
  border: `1px solid #4D4639`,
- maxWidth: '40%',
+
+ px: '16px',
  }}
  onClick={handleOpenAddLearnerModal}
  >