some fix responsive css + some logic

So-Fan · Sep 20, 2023 · 7b0019d · 7b0019d
1 parent af9c7f2
commit 7b0019d
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 15 deletions.
diff --git a/client/src/Components/FavAthlete/Carroussel/Carroussel.js b/client/src/Components/FavAthlete/Carroussel/Carroussel.js
@@ -9,6 +9,7 @@ const Carroussel = ({ athletesFollowing, athletesSupportingData }) => {
   const [rightArrowClicked, setRightArrowClicked] = useState(false);
   const [leftArrowClicked, setLeftArrowClicked] = useState(false);
   const [counter, setCounter] = useState(0);
+  const [isTotalElementsEqualTwo, setIsTotalElementsEqualTwo] = useState();
 
   const fakeArray = [
     {
@@ -82,7 +83,18 @@ const Carroussel = ({ athletesFollowing, athletesSupportingData }) => {
       setLeftArrowClicked(false);
     }
   }, [rightArrowClicked, leftArrowClicked, counter]);
-// console.log("athletesSupportingData --> ",athletesSupportingData)
+  // console.log("athletesSupportingData --> ",athletesSupportingData)
+  useEffect(() => {
+    if (athletesSupportingData.length + athletesFollowing.length === 2) {
+      console.log(
+        "il y a moins de 3 éléments --> ",
+        athletesFollowing.length + athletesSupportingData.length
+      );
+      setIsTotalElementsEqualTwo(true);
+    } else {
+      setIsTotalElementsEqualTwo(false);
+    }
+  }, [athletesFollowing, athletesSupportingData]);
   return (
     <div className="carroussel-section">
       <div className="carroussel-athlete-wrap">
@@ -116,6 +128,34 @@ const Carroussel = ({ athletesFollowing, athletesSupportingData }) => {
               </div>
             );
           })}
+          {/* {isTotalElementsEqualTwo && (
+            <>
+            <div
+              // style={{ visibility: "hidden" }}
+              className="athlete-template-container"
+              >
+              
+              <AthleteTemplate
+              // href={`/athleteprofile/${athlete.athleteId}`}
+              // src={athlete.profile_avatar}
+              // athleteName={athlete.username}
+              // isFan={athlete.isFan}
+              />
+            </div>
+            <div
+              // style={{ visibility: "hidden" }}
+              className="athlete-template-container"
+              >
+              
+              <AthleteTemplate
+              // href={`/athleteprofile/${athlete.athleteId}`}
+              // src={athlete.profile_avatar}
+              // athleteName={athlete.username}
+              // isFan={athlete.isFan}
+              />
+            </div>
+              </>
+          )} */}
         </div>
       </div>
       {counter !== (arrayLength - 2) * 120 * -1 && (

diff --git a/client/src/Components/FavAthlete/FavAthlete.css b/client/src/Components/FavAthlete/FavAthlete.css
@@ -71,6 +71,11 @@
     border-radius: 99px;
   } */
 }
+@media (max-width: 950px) {
+  .favAthlete-container {
+display: none;
+  }
+}
 @media (max-width: 900px) {
   .favAthlete-container {
     width: 220px;

diff --git a/client/src/Components/FeedSuggestions/FeedSuggestions.css b/client/src/Components/FeedSuggestions/FeedSuggestions.css
@@ -40,7 +40,7 @@
 @media (max-width: 950px) {
   .feedsuggestions-component{
     width: 250px;
-    display: none;
+    /* display: none; */
   }
 }
 @media (max-width: 900px) {

diff --git a/client/src/Pages/Home/Home.css b/client/src/Pages/Home/Home.css
@@ -12,6 +12,7 @@
   justify-content: space-between;
   height: 686px; /* A modif*/
   max-height: 686px; /* A modif*/
+  padding-top: 50px;
 }
 .home-left-separation-line{
   border: 0.3px solid rgba(0, 0, 0, 0.1);
@@ -173,7 +174,11 @@
   }
   .home-left-container {
     /* min-height: 420px; */
+    display: flex;
+    flex-direction: column-reverse;
     max-height: 492px;
+    padding-top: 70px;
+    /* background-color: red; */
   }
   .home-feedsidenavlink-wrap {
     width: 200px;

diff --git a/client/src/Pages/Home/Home.js b/client/src/Pages/Home/Home.js
@@ -343,9 +343,10 @@ function Home({
           style={
             isLogged?.account_type === "athlete"
               ? { height: "686px", maxHeight: "686px" }
-              : athletesFollowing.length === 0
+              : athletesFollowing.length === 0 &&
+                athletesSupportingData.length === 0
               ? { height: "398px" }
-              : { maxHeight: "646px" }
+              : { maxHeight: "552px" }
             // athletesFollowing.length === 0 ? {}: {}
           }
         >
@@ -354,7 +355,7 @@ function Home({
             style={
               isLogged?.account_type === "athlete"
                 ? { height: "138px" }
-                : { height: "64px" }
+                : { height: "0px" }
             }
           >
             {/* <div className="home-feedsidenavlink-wrap">

diff --git a/client/src/Pages/NftCollection/NftCollection.js b/client/src/Pages/NftCollection/NftCollection.js
@@ -325,7 +325,7 @@ const NftCollection = ({
             }
           /> */}
           <NftCard
-          hidePrice={true}
+            hidePrice={true}
             nftsFromOwner={nftsFromOwner}
             userFrom={dataConcat?.collected}
             isNftSpam={nftsFromOwner?.spamInfo?.isSpam}
@@ -344,18 +344,16 @@ const NftCollection = ({
       );
     }
   };
-  useEffect(() => {
-
-  }, [])
-
+  useEffect(() => {}, []);
+
   return (
     <div className="nftcollection-page">
       <div>
-        <NftCollectionPageHeader 
-        hidePrice={true}
-        collectionInfo={dataConcat?.collections[0]} 
-        collectionFloorPriceApiData={collectionFloorPriceApiData}
-        ethPrice={ethPrice}
+        <NftCollectionPageHeader
+          hidePrice={true}
+          collectionInfo={dataConcat?.collections[0]}
+          collectionFloorPriceApiData={collectionFloorPriceApiData}
+          ethPrice={ethPrice}
         />
         <ProfileSubMenu
           isProfileSubMenuButtonClicked={isProfileSubMenuButtonClicked}