Merge pull request #704 from sonaliTekdi/responsive_changes

Task #227193 - [FE] - Mobile responsive (addconnection page spacing,back button padding,chat window block unblock button allignment,loader on mobile domain list section)
NIUANULP · Oct 16, 2024 · 42a6cb3 · 42a6cb3
2 parents b054b23 + 10260af
commit 42a6cb3
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 29 deletions.
diff --git a/packages/nulp_elite/src/App.js b/packages/nulp_elite/src/App.js
@@ -326,9 +326,8 @@ function App() {
               />
             ))}
           </Routes>
+          <LernModal />    
         </Router>
-      <LernModal />    
-
       </React.Suspense>
       {/* </ChakraProvider> */}
       {/* </ChakraProvider> */}

diff --git a/packages/nulp_elite/src/pages/connections/AddConnections.js b/packages/nulp_elite/src/pages/connections/AddConnections.js
@@ -1336,8 +1336,8 @@ const AddConnections = () => {
               ) : (
                 <Button
                   type="button"
-                  className="viewAll xs-mr-10"
                   onClick={handleBackClick}
+                  className="custom-btn-primary mr-5"
                 >
                   {t("BACK")}
                 </Button>

diff --git a/packages/nulp_elite/src/pages/content/CategoryPage.js b/packages/nulp_elite/src/pages/content/CategoryPage.js
@@ -312,7 +312,7 @@ const CategoryPage = () => {
             style={{ alignItems: "center",justifyContent:'space-between'}}
           >
             <p className="h3-title">{category === "Course" ? "Courses" : category}</p>
-            <Link onClick={handleGoBack} className="viewAll mr-17">
+            <Link onClick={handleGoBack} className="custom-btn-primary mr-17">
               {t("BACK")}
             </Link>
           </Box>

diff --git a/packages/nulp_elite/src/pages/content/joinCourse.js b/packages/nulp_elite/src/pages/content/joinCourse.js
@@ -633,7 +633,7 @@ const JoinCourse = () => {
                   > {t("LEAVE_COURSE")}
 
                   </Button>
-                }
+                )}
               </Box>
             </div>
 

diff --git a/packages/nulp_elite/src/pages/search/DomainList.js b/packages/nulp_elite/src/pages/search/DomainList.js
@@ -112,13 +112,10 @@ const DomainList = ({ globalSearchQuery }) => {
       const user = userID.find((user) => user.user_id === _userId);
 
       if (!user) {
-        console.log("User ID not found. Calling fetchUserAccess...");
         fetchUserAccess();
       } else if (user.creator_access === true) {
         navigate('/webapp/mylernsubmissions');
-        console.log("User ID found with creator access. No need to call fetchUserAccess.");
       } else if (user.creator_access === false) {
-        console.log("User ID found but no creator access. Calling fetchUserAccess...");
         fetchUserAccess();
       }
     } catch (error) {
@@ -185,7 +182,6 @@ const DomainList = ({ globalSearchQuery }) => {
     fetchUserData();
     getRecentlyAddedCourses();
     getPopularCourses();
-    // console.log("domainWithImage--",domainWithImage)
   }, []);
 
   // Function to push data to the array
@@ -197,10 +193,6 @@ const DomainList = ({ globalSearchQuery }) => {
     sessionStorage.setItem("previousRoutes", newPath);
     try {
       const uservData = await util.userData();
-      console.log(
-        "-------------",
-        uservData?.data?.result?.response?.framework?.id[0]
-      );
       setOrgId(uservData?.data?.result?.response?.rootOrgId);
       setFramework(uservData?.data?.result?.response?.framework?.id[0]);
     } catch (error) {
@@ -223,10 +215,8 @@ const DomainList = ({ globalSearchQuery }) => {
     try {
       const url = `${urlConfig.URLS.PUBLIC_PREFIX}${urlConfig.URLS.CHANNEL.READ}/${orgId}`;
       const response = await frameworkService.getChannel(url);
-      // console.log("channel---",response.data.result);
       setChannelData(response.data.result);
     } catch (error) {
-      console.log("error---", error);
       showErrorMessage(t("FAILED_TO_FETCH_DATA"));
     } finally {
       setIsLoading(false);
@@ -241,7 +231,6 @@ const DomainList = ({ globalSearchQuery }) => {
       const selectedIndex = categories.findIndex(
         (category) => category.code === "board"
       );
-      console.log("---------", selectedIndex);
 
       response?.data?.result?.framework?.categories[selectedIndex].terms.map(
         (term) => {
@@ -262,10 +251,8 @@ const DomainList = ({ globalSearchQuery }) => {
       );
       setData(itemsArray);
     } catch (error) {
-      console.log("nulp--  error-", error);
       showErrorMessage(t("FAILED_TO_FETCH_DATA"));
     } finally {
-      console.log("nulp finally---");
       setIsLoading(false);
     }
   };
@@ -341,7 +328,6 @@ const DomainList = ({ globalSearchQuery }) => {
       }
 
       const responseData = await response.json();
-      console.log("data", responseData);
       setRecentlyAddedCourses(responseData?.result?.content || []);
     } catch (error) {
       showErrorMessage(t("FAILED_TO_FETCH_DATA"));
@@ -351,14 +337,12 @@ const DomainList = ({ globalSearchQuery }) => {
   };
 
   const loadContents = async (term) => {
-    // console.log(term);
     navigate(`${routeConfig.ROUTES.CONTENTLIST_PAGE.CONTENTLIST}?1`, {
       state: { domain: term.name, domainName: term.name },
     });
   };
 
   const handleSearch = async (domainquery) => {
-    console.log(domainquery);
     navigate(`${routeConfig.ROUTES.CONTENTLIST_PAGE.CONTENTLIST}?1`, {
       state: { domainquery },
     });
@@ -369,7 +353,6 @@ const DomainList = ({ globalSearchQuery }) => {
       state: { domain: query, domainName: domainName },
     });
   };
-  // console.log(frameworkHardCodedData.result.framework.categories[0].terms);
 
   const handleCardClick = (contentId, courseType) => {
     if (courseType === "Course") {
@@ -450,7 +433,6 @@ const DomainList = ({ globalSearchQuery }) => {
       }
 
       const responseData = await response.json();
-      console.log("data", responseData);
       setPopularCourses(responseData?.result?.content || []);
     } catch (error) {
       showErrorMessage(t("FAILED_TO_FETCH_DATA"));
@@ -467,15 +449,13 @@ const DomainList = ({ globalSearchQuery }) => {
 
   const handleInputChange = (event) => {
     setSearchQuery(event.target.value);
-    console.log("value", event.target.value);
   };
 
   const handleKeyPress = (event) => {
     if (event.key === "Enter") {
       onMobileSearch();
     }
   };
-  console.log(lernUser, 'lernUser from dashboard');
 
 
   return (
@@ -528,7 +508,10 @@ const DomainList = ({ globalSearchQuery }) => {
                 spacing={2}
                 style={{ margin: "20px 0", marginBottom: "10px" }}
               >
-                {data &&
+                 {isLoading ? (
+                  <Loading style={{ margin: "20px 50px", marginBottom: "10px" }}message={t("LOADING")} />
+                ) :
+                (data &&
                   data.slice(0, 10).map((term) => (
                     <Grid
                       item
@@ -559,7 +542,7 @@ const DomainList = ({ globalSearchQuery }) => {
                         </h5>
                       </Box>
                     </Grid>
-                  ))}
+                  )))}
               </Grid>
             </Box>
           </Container>

diff --git a/packages/nulp_elite/src/styles/style.css b/packages/nulp_elite/src/styles/style.css
@@ -772,6 +772,9 @@ button {
 }
 
 @media (max-width: 768px) {
+  .jss2{
+    display: block!important;
+  }
   .xs-mt-10{
     margin-top:10px;
   }
@@ -792,7 +795,7 @@ button {
   }
   .viewAll{
     font-size: 10px !important;
-    padding: 9px 4px !important;
+    padding: 10px !important;
   }
   .d-flex-none {
     display: block !important;
@@ -1184,7 +1187,7 @@ button {
   }
 
   .MuiGrid-container.MuiGrid-spacing-xs-2 {
-    margin: 0 -16px !important;
+    margin: 40px -16px !important;
   }
 
   /* .react-multi-carousel-list{
-Original file line number
+Diff line change
@@ Expand Up / @@ -633,7 +633,7 @@ const JoinCourse = () => { @@
                       > {t("LEAVE_COURSE")}
                       </Button>
-                    }
+                    )}
                   </Box>
                 </div>
@@ Expand Down @@