Aydogdy
/
react-typescript-chess-federation
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

player profile page adaptive

This commit is contained in:
VividTruthKeeper 2022-08-18 12:58:46 +05:00
parent eb4876f8bc
commit ca38369110
2 changed files with 60 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
src/pages/PlayerProfile.tsx
View File

@ -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>

23
src/styles/_player-profile.scss
View File

@ -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 {