From ca38369110efc4930ff3977b2a20e1cdec774a3c Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <you@example.com>
Date: Thu, 18 Aug 2022 12:58:46 +0500
Subject: [PATCH] player profile page adaptive

---
 src/pages/PlayerProfile.tsx     | 54 ++++++++++++++++++++++++---------
 src/styles/_player-profile.scss | 23 ++++++++++++--
 2 files changed, 60 insertions(+), 17 deletions(-)

diff --git a/src/pages/PlayerProfile.tsx b/src/pages/PlayerProfile.tsx
index d8726c5..d91cdb1 100644
--- a/src/pages/PlayerProfile.tsx
+++ b/src/pages/PlayerProfile.tsx
@@ -31,7 +31,7 @@ const PlayerProfile = () => {
     <main className="pp">
       <div className="container">
         <div className="pp-inner">
-          <div className="pp-left">
+          <div className={!playerInfo ? "pp-left" : "pp-left ready"}>
             {playerInfo ? (
               <div>
                 <img src={hosting + playerInfo[0].img} alt="" />
@@ -53,7 +53,7 @@ const PlayerProfile = () => {
                 <Skeleton
                   highlightColor={highlightColor}
                   width={"100%"}
-                  style={{ maxWidth: "23rem" }}
+                  style={{ maxWidth: breakpoints["750"] ? "unset" : "23rem" }}
                   height={"3.8rem"}
                 />
               )}
@@ -69,13 +69,17 @@ const PlayerProfile = () => {
                       <Skeleton
                         highlightColor={highlightColor}
                         width={"100%"}
-                        style={{ maxWidth: "20rem" }}
+                        style={{
+                          maxWidth: breakpoints["750"] ? "unset" : "20rem",
+                        }}
                         height={"5.2rem"}
                       />
                       <Skeleton
                         highlightColor={highlightColor}
                         width={"100%"}
-                        style={{ maxWidth: "20rem" }}
+                        style={{
+                          maxWidth: breakpoints["750"] ? "unset" : "20rem",
+                        }}
                         height={"5.2rem"}
                       />
                     </li>
@@ -93,13 +97,17 @@ const PlayerProfile = () => {
                       <Skeleton
                         highlightColor={highlightColor}
                         width={"100%"}
-                        style={{ maxWidth: "20rem" }}
+                        style={{
+                          maxWidth: breakpoints["750"] ? "unset" : "20rem",
+                        }}
                         height={"5.2rem"}
                       />
                       <Skeleton
                         highlightColor={highlightColor}
                         width={"100%"}
-                        style={{ maxWidth: "20rem" }}
+                        style={{
+                          maxWidth: breakpoints["750"] ? "unset" : "20rem",
+                        }}
                         height={"5.2rem"}
                       />
                     </li>
@@ -117,13 +125,17 @@ const PlayerProfile = () => {
                       <Skeleton
                         highlightColor={highlightColor}
                         width={"100%"}
-                        style={{ maxWidth: "20rem" }}
+                        style={{
+                          maxWidth: breakpoints["750"] ? "unset" : "20rem",
+                        }}
                         height={"5.2rem"}
                       />
                       <Skeleton
                         highlightColor={highlightColor}
                         width={"100%"}
-                        style={{ maxWidth: "20rem" }}
+                        style={{
+                          maxWidth: breakpoints["750"] ? "unset" : "20rem",
+                        }}
                         height={"5.2rem"}
                       />
                     </li>
@@ -139,7 +151,7 @@ const PlayerProfile = () => {
                   <Skeleton
                     highlightColor={highlightColor}
                     width={"100%"}
-                    style={{ maxWidth: "23rem" }}
+                    style={{ maxWidth: breakpoints["750"] ? "unset" : "23rem" }}
                     height={"3.8rem"}
                   />
                 )}
@@ -156,13 +168,17 @@ const PlayerProfile = () => {
                       <Skeleton
                         highlightColor={highlightColor}
                         width={"100%"}
-                        style={{ maxWidth: "20rem" }}
+                        style={{
+                          maxWidth: breakpoints["750"] ? "unset" : "20rem",
+                        }}
                         height={"5.2rem"}
                       />
                       <Skeleton
                         highlightColor={highlightColor}
                         width={"100%"}
-                        style={{ maxWidth: "20rem" }}
+                        style={{
+                          maxWidth: breakpoints["750"] ? "unset" : "20rem",
+                        }}
                         height={"5.2rem"}
                       />
                     </li>
@@ -180,13 +196,17 @@ const PlayerProfile = () => {
                       <Skeleton
                         highlightColor={highlightColor}
                         width={"100%"}
-                        style={{ maxWidth: "20rem" }}
+                        style={{
+                          maxWidth: breakpoints["750"] ? "unset" : "20rem",
+                        }}
                         height={"5.2rem"}
                       />
                       <Skeleton
                         highlightColor={highlightColor}
                         width={"100%"}
-                        style={{ maxWidth: "20rem" }}
+                        style={{
+                          maxWidth: breakpoints["750"] ? "unset" : "20rem",
+                        }}
                         height={"5.2rem"}
                       />
                     </li>
@@ -204,13 +224,17 @@ const PlayerProfile = () => {
                       <Skeleton
                         highlightColor={highlightColor}
                         width={"100%"}
-                        style={{ maxWidth: "20rem" }}
+                        style={{
+                          maxWidth: breakpoints["750"] ? "unset" : "20rem",
+                        }}
                         height={"5.2rem"}
                       />
                       <Skeleton
                         highlightColor={highlightColor}
                         width={"100%"}
-                        style={{ maxWidth: "20rem" }}
+                        style={{
+                          maxWidth: breakpoints["750"] ? "unset" : "20rem",
+                        }}
                         height={"5.2rem"}
                       />
                     </li>
diff --git a/src/styles/_player-profile.scss b/src/styles/_player-profile.scss
index 82000f1..9f4ecfb 100644
--- a/src/styles/_player-profile.scss
+++ b/src/styles/_player-profile.scss
@@ -89,11 +89,30 @@
     flex-direction: column;
   }
   .pp-left {
-    display: flex;
-    justify-content: center;
+    @include grid(false, 1fr);
+
+    &.ready {
+      * {
+        justify-self: center;
+      }
+    }
+
+    * {
+      display: flex;
+      justify-content: center;
+    }
   }
 }
 
+@media screen and (max-width: 800px) {
+  .pp {
+    padding-top: 4rem;
+  }
+  .pp-inner {
+    gap: 3.2rem;
+    padding: 3.2rem;
+  }
+}
 @media screen and (max-width: 750px) {
   .pp-right-top,
   .pp-right-bottom {