Merge pull request #176 from shreyas1434shinde/BugFixes

#PS-1780 UI changes for List view of extra sessions
tekdi · Aug 23, 2024 · 7b344d1 · 7b344d1
2 parents f8ae34a + e112c5c
commit 7b344d1
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 6 deletions.
diff --git a/src/components/SessionCard.tsx b/src/components/SessionCard.tsx
@@ -89,7 +89,7 @@ const SessionsCard: React.FC<SessionsCardProps> = ({
       sx={{
         border: `1px solid ${theme.palette.warning['A100']}`,
         borderRadius: '8px',
-        marginBottom: '16px',
+        marginBottom: '25px',
       }}
     >
       <Box

diff --git a/src/pages/centers/[cohortId]/index.tsx b/src/pages/centers/[cohortId]/index.tsx
@@ -52,9 +52,15 @@ import ReactGA from 'react-ga4';
 import { Session } from '../../../utils/Interfaces';
 import Schedule from '../../../components/Schedule';
 import reassignLearnerStore from '@/store/reassignLearnerStore';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Pagination, Navigation } from 'swiper/modules';
 import { Role } from '@/utils/app.constant';
 import { showToastMessage } from '@/components/Toastify';
 import { getEventList } from '@/services/EventService';
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/navigation';
+
 import manageUserStore from '@/store/manageUserStore';
 import { modifyAttendanceLimit, eventDaysLimit } from '../../../../app.config';
 
@@ -526,19 +532,49 @@ const CohortPage = () => {
             >
               {t('COMMON.UPCOMING_EXTRA_SESSION', { days: eventDaysLimit })}
             </Box>
-            <Box mt={3}>
-              <Grid container spacing={2}>
+            <Box mt={3} sx={{position:'relative'}}>
+              <Swiper
+                pagination={{
+                  type: 'fraction',
+                }}
+                breakpoints={{
+                  500: {
+                    slidesPerView: 1, 
+                    spaceBetween: 20, 
+                  },
+                  740: {
+                    slidesPerView: 2, 
+                    spaceBetween: 20, 
+                  },
+                  900: {
+                    slidesPerView: 3,
+                    spaceBetween: 30,
+                  },
+                  2000: {
+                    slidesPerView: 4,
+                    spaceBetween: 40,
+                  },
+                }}
+                navigation={true}
+                modules={[Pagination, Navigation]}
+                className="mySwiper"
+              >
+
                 {extraSessions?.map((item) => (
-                  <Grid item xs={12} sm={6} md={6} key={item.id}>
+                  <>
+                  <SwiperSlide>
                     <SessionCard
                       data={item}
                       isEventDeleted={handleEventDeleted}
                     >
                       <SessionCardFooter item={item} />
                     </SessionCard>
-                  </Grid>
+                  </SwiperSlide>
+                  </>
                 ))}
-              </Grid>
+
+              </Swiper>
+
             </Box>
             {extraSessions && extraSessions?.length === 0 && (
               <Box

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -1028,3 +1028,53 @@ legend.Mui-focused {
   color: var(--mui-palette-warning-300) !important; 
 }
 
+
+.swiper-button-prev, .swiper-rtl .swiper-button-next{
+  right: 50px !important;
+  left: unset !important;
+  border: 1px solid var(--mui-palette-warning-A100);
+  height: 32px !important;
+  width: 32px !important;
+  border-radius: 4px !important;
+
+}
+
+.swiper-button-next{
+  left: unset !important;
+  border: 1px solid var(--mui-palette-warning-A100);
+  height: 32px !important;
+  width: 32px !important;
+  border-radius: 4px !important;
+}
+.swiper-button-prev, .swiper-button-next{
+  top: unset !important;
+  bottom: 0px !important;
+}
+
+.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
+  content: 'prev';
+  font-size: 14px !important;
+   color: #1C1B1F !important;   /* not in custom theme */
+}
+
+.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
+  content: 'next';
+  font-size: 14px !important;
+  color: #1C1B1F !important; /* not in custom theme */
+}
+.swiper{
+  position: unset !important;
+}
+
+.swiper-pagination-fraction{
+  position: absolute;
+  width: fit-content !important;
+  bottom: 0px !important;
+}
+
+.swiper-pagination-fraction{
+  color: var(--mui-palette-warning-400) !important;
+  font-size: 12px;
+  font-weight: 500;
+}
+