Frontendfixes

src/App.css

@@ -1,5 +1,27 @@
+.App {
+  display: flex;
+  flex-direction: row;
+  overflow-y: auto;
+}
+
+.container {
+  height: 100vh;
+  overflow-y: scroll;
+}
+
+.main-profile-container {
+  z-index: 0;
+}
+
+
 @media (max-width: 768px) {
-  .App > div {
-    margin-left: 0px;
+
+  .App {
+    flex-direction: column;
+  }
+
+  .container {
+    height: 70vh;
   }
 }
+

src/App.js

@@ -8,6 +8,7 @@ import Pagination from './components/Pagination/Pagination';
 import './App.css';
 import './components/Pagination/Pagination.css';
 import filenames from './ProfilesList.json';
+import { useRef } from 'react';
 
 function App() {
   const [profiles, setProfiles] = useState([]);
@@ -16,6 +17,7 @@ function App() {
   const [currentPage, setCurrentPage] = useState(1);
   const [shuffledProfiles, setShuffledProfiles] = useState([]);
   const recordsPerPage = 20;
+  const overFlowingContainerRef = useRef(null);
 
   const currentUrl = window.location.pathname;
 
@@ -87,10 +89,10 @@ function App() {
   };
 
   useEffect(() => {
-    window.scrollTo({
-      top: 0,
-      behavior: 'smooth',
-    });
+    const currentTop = overFlowingContainerRef.current.scrollTop;
+    if (currentTop !== 0) {
+      overFlowingContainerRef.current.scrollTop = 0;
+    }
   }, [currentPage]);
 
   const getPaginatedData = () => {
@@ -108,20 +110,28 @@ function App() {
   return (
     <div className="App">
       <Sidebar />
-      <Search onSearch={handleSearch} />
-      {currentUrl === '/' ? (
-        <>
-          {profiles.length === 0 && searching ? <NoResultFound /> : renderProfiles()}
-          <Pagination
-            currentPage={currentPage}
-            totalPages={Math.ceil((searching ? profiles.length : shuffledProfiles.length) / recordsPerPage)}
-            onNextPage={handleNextPage}
-            onPrevPage={handlePrevPage}
-          />
-        </>
-      ) : (
-        <ErrorPage />
-      )}
+      <div className="container" ref={overFlowingContainerRef} >
+        <Search onSearch={handleSearch} />
+        {currentUrl === '/' ? (
+          <>
+            {profiles.length === 0 && searching ? (
+              <NoResultFound />
+            ) : (
+              <div className="main-profile-container">
+                {renderProfiles()}
+                <Pagination
+                  currentPage={currentPage}
+                  totalPages={Math.ceil((searching ? profiles.length : shuffledProfiles.length) / recordsPerPage)}
+                  onNextPage={handleNextPage}
+                  onPrevPage={handlePrevPage}
+                />
+              </div>
+            )}
+          </>
+        ) : (
+          <ErrorPage />
+        )}
+      </div>
     </div>
   );
 }

src/components/Pagination/Pagination.css

@@ -1,19 +1,22 @@
 .pagination {
-  margin-left: 12rem;
-  padding: 1rem 1rem 1rem 1rem;
+  display: flex;
+  justify-content: center;
+  padding: 1rem;
   height: auto;
   text-align: center;
+  position: sticky;
+  bottom: -18px;
+  background-color: #141d2f;
+  z-index: 2;
 }
 
 .pagination-button {
   background-color: inherit;
   padding: 1rem;
-  margin-left: 3rem;
   align-items: center;
   justify-content: space-between;
   border-radius: 8px;
   border: none;
-  width: 60px;
 }
 
 .pagination-text {

src/components/Profile/Profile.css

@@ -1,7 +1,7 @@
 @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);
 
 .profile-container {
-  margin-left: 20rem;
+  /* margin-left: 20rem; */
   padding: 0rem 1.5rem;
 }
 
@@ -177,9 +177,17 @@
   }
 }
 
+
+@media only screen and (max-width:755px) {
+  .profile-container {
+    margin-left: 0px;
+  }
+}
+
 /* Add this CSS to specifically target Safari */
 @media screen and (-webkit-min-device-pixel-ratio:0) {
   .social-icons i {
     -webkit-backface-visibility : hidden;
   }
-}
+}
+

src/components/Profile/Profile.jsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React , {useState} from 'react';
 import './Profile.css';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faLocationDot } from '@fortawesome/free-solid-svg-icons';
+import dummyProfileLogo from '../../assets/dummyLogo.jpg';
 
 function Profile({ data }) {
   return (
@@ -12,6 +13,7 @@ function Profile({ data }) {
 
   function Card({ data }) {
     const cardRef = React.useRef();
+    const [cardImg,setCardImg] = useState(data?.avatar) // Save image in state and later update if there is an error.
     const handleWheel = (event) => {
       event.stopPropagation();
       event.preventDefault();
@@ -34,7 +36,7 @@ function Profile({ data }) {
       <div className="profile-card">
         <div className="top-container">
           <div className="profile-photo">
-            <img src={data.avatar} alt="User logo" />
+            <img src={cardImg} onError={() => setCardImg(dummyProfileLogo)} alt="User logo" />
           </div>
           <div className="profile-details">
             <h3>{data.name}</h3>

src/components/Search/Search.css

@@ -1,12 +1,12 @@
 .search-bar {
   display: flex;
   align-items: center;
-  justify-content: flex-end;
-  margin-left: 20rem;
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-  padding: 0px 1.5rem;
-  position: relative;
+  justify-content: end;
+  padding: 2rem 1.5rem;
+  background-color: #141d2f;
+  position: sticky;
+  top: -2px;
+  z-index: 1;
 }
 
 .search-bar input {

src/components/Sidebar/Sidebar.css

@@ -3,10 +3,7 @@
   margin-top: 30px;
   margin-bottom: 30px;
   padding: 0px 30px;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 20rem;
+  min-width: 20rem;
   height: 90vh;
   border-right: 2px solid rgba(194, 183, 183, 0.1);
 }