releasef mobile profiles

Sammers21 · Jul 14, 2023 · 000d7d0 · 000d7d0
1 parent 350251b
commit 000d7d0
Show file tree

Hide file tree

Showing 3 changed files with 73 additions and 38 deletions.
diff --git a/frontend/src/components/Profile/PhotoCard.jsx b/frontend/src/components/Profile/PhotoCard.jsx
@@ -7,7 +7,7 @@ import SaveIcon from '@mui/icons-material/Save';
 import relativeTime from 'dayjs-ext/plugin/relativeTime'
 import React from "react";
 
-const PhotoCard = ({ data, update, loading }) => {
+const PhotoCard = ({ isMobile, data, update, loading }) => {
   dayjs.extend(relativeTime)
   var insert = ""
   if (data.media) {
@@ -63,7 +63,11 @@ const PhotoCard = ({ data, update, loading }) => {
       {data.itemLevel + " equipped ilvl"}
     </Typography>
   </Box>;
+
   let picture = <Box
+    width={isMobile ? '40%' : 'auto'}
+    height={isMobile ? 'auto' : '100%'}
+    si
     component="img"
     sx={{
       border: 1,
@@ -79,18 +83,22 @@ const PhotoCard = ({ data, update, loading }) => {
   } else {
     updButton = <Button sx={{p: 1, marginTop: 1,}} variant="contained" onClick={() => update()}>Update now</Button>;
   }
+
   return (<Box
+    width={isMobile ? '100%' : 'auto'}
     display="flex"
     borderRadius={2}
-    margin={1}
-    padding={2}
-    flexDirection={'row'}
+    margin={isMobile ? 1 : 1}
+    padding={isMobile ? 1 : 1}
+    flexDirection={isMobile ? 'column' : 'row'}
     sx={{
       backgroundColor: alpha(aroundColor, 0.3),
     }}
   >
-    {picture}
-    {charInfoTypog}
+    <Box display={'flex'} flexDirection={'row'} justifyContent={'center'}>
+      {picture}
+      {charInfoTypog}
+    </Box>
     <Box sx={{
       width: '100%',
       p: 1,

diff --git a/frontend/src/components/Profile/PvpBracketBox.jsx b/frontend/src/components/Profile/PvpBracketBox.jsx
@@ -1,7 +1,7 @@
 import {alpha, Box, Divider, Typography} from "@mui/material";
 import {aroundColor, winRateGreyColor} from "../../theme";
 
-const PvpBracketBox = ({bracket, rating, wins, loses}) => {
+const PvpBracketBox = ({isMobile, totalInRow, bracket, rating, wins, loses}) => {
   let shortBracketName = bracket;
   if (bracket.startsWith('ARENA')) {
     shortBracketName = bracket.split('_')[1];
@@ -27,8 +27,25 @@ const PvpBracketBox = ({bracket, rating, wins, loses}) => {
   } else if (rating >= 900) {
     ratingColor = '#d2d2d2'
   }
+  var ratingVariant = 'h3';
+  var bracketVariant = 'h5';
+  if (isMobile) {
+    ratingVariant = 'h4';
+    bracketVariant = 'h7';
+  }
+  let under = <Box display={'flex'} flexDirection={isMobile ? 'column' : 'row'}>
+    <Typography variant={ratingVariant} component="div" color={ratingColor}>{rating}</Typography>
+    {showWinRate && (<Box m={1} display={'column'}>
+      <Box display={'flex'}>
+        <Typography variant="h7" component="div" color={wonColor}>{wins}</Typography>
+        <Typography variant="h7" component="div" color={winRateGreyColor}> / </Typography>
+        <Typography variant="h7" component="div" color={lostColor}>{loses}</Typography>
+      </Box>
+      <Typography variant="h7" component="div" color={winRateGreyColor}>{winRate + 'win ratio'}</Typography>
+    </Box>)}
+  </Box>;
   return (
-    <Box width="100%"
+    <Box width={isMobile ? `${100 / totalInRow}%` : `${100 / totalInRow}%`}
          marginX={1}
          marginY={1}
          padding={1}
@@ -38,20 +55,10 @@ const PvpBracketBox = ({bracket, rating, wins, loses}) => {
          }}>
       <Box display="flex" flexDirection={'column'}>
         <Typography
-          variant="h5"
+          variant={bracketVariant}
           component="div">{shortBracketName}</Typography>
         <Divider/>
-        <Box display={'flex'}>
-          <Typography variant="h3" component="div" color={ratingColor}>{rating}</Typography>
-          {showWinRate && (<Box m={1} display={'column'}>
-            <Box display={'flex'}>
-            <Typography variant="h7" component="div" color={wonColor}>{wins}</Typography>
-            <Typography variant="h7" component="div" color={winRateGreyColor}> / </Typography>
-            <Typography variant="h7" component="div" color={lostColor}>{loses}</Typography>
-            </Box>
-            <Typography variant="h7" component="div" color={winRateGreyColor}>{winRate + 'win ratio'}</Typography>
-          </Box>)}
-        </Box>
+        {under}
       </Box>
     </Box>);
 };

diff --git a/frontend/src/components/Profile/index.jsx b/frontend/src/components/Profile/index.jsx
@@ -18,7 +18,20 @@ const Profile = () => {
   let [data, setData] = useState({});
   let [status, setStatus] = useState(200);
   let [loading, setLoading] = useState(false);
-  document.title = `${capitalizeFirstLetter(name)}-${capitalizeFirstLetter(realm)}`;
+  document.title = `${capitalizeFirstLetter(name)}-${capitalizeFirstLetter(realm)} on`;
+  const [width, setWidth] = useState(window.innerWidth);
+  useEffect(() => {
+    window.addEventListener('resize', function () {
+      setWidth(window.innerWidth);
+    });
+    return () => {
+      window.removeEventListener('resize', function () {
+        setWidth(window.innerWidth);
+      });
+    }
+  }, []);
+  const isMobile = width <= 900;
+
   const loadProfile = async (update) => {
     let url
     if (update) {
@@ -43,43 +56,50 @@ const Profile = () => {
   }, [region, realm, name]);
   let arenaAndRbg = ['ARENA_2v2', 'ARENA_3v3', 'BATTLEGROUNDS'].map((bracket) => {
     let found = (data?.brackets ?? []).find((b) => b.bracket_type === bracket)
-    return (<PvpBracketBox bracket={bracket} rating={found?.rating ?? 0} wins={found?.won ?? 0} loses={found?.lost ?? 0}/>);
+    return (
+        <PvpBracketBox totalInRow={3} isMobile={isMobile} bracket={bracket} rating={found?.rating ?? 0} wins={found?.won ?? 0}
+                       loses={found?.lost ?? 0}/>)
   });
   var shuffle
   if (data.class) {
-    shuffle = CLASS_AND_SPECS[data.class].map((spec) => {
+    let classAndSpec = CLASS_AND_SPECS[data.class];
+    shuffle = classAndSpec.map((spec) => {
       let found = (data?.brackets ?? []).find((b) => b.bracket_type.includes(spec))
-      return (<PvpBracketBox bracket={spec} rating={found?.rating ?? 0} wins={found?.won ?? 0} loses={found?.lost ?? 0}/>);
+      return (
+        <PvpBracketBox totalInRow={classAndSpec.length} isMobile={isMobile} bracket={spec} rating={found?.rating ?? 0} wins={found?.won ?? 0} loses={found?.lost ?? 0}/>
+      );
     });
   } else {
     shuffle = [];
   }
   let normalResp = <><>
     <Header/>
-    <Box sx={{
-      width: '100%',
-      backgroundColor: containerBg,
-      minHeight: '100vh',
-      paddingTop: '105px',
-      paddingLeft: '3%',
-      paddingRight: '3%',
-      paddingBottom: '45px',
-    }} display={'flex'}
-         flexDirection={'column'}>
-      <PhotoCard data={data} loading={loading} update={() => {
+    <Box
+      width={'100%'}
+      sx={{
+        backgroundColor: containerBg,
+        minHeight: '100vh',
+        paddingTop: '105px',
+        paddingLeft: isMobile ? '2%' : '3%',
+        paddingRight: isMobile ? '2%' : '3%',
+        paddingBottom: '45px',
+      }} display={'flex'} flexDirection={'column'}>
+      <PhotoCard isMobile={isMobile} data={data} loading={loading} update={() => {
         return loadProfile(true);
-      }}></PhotoCard>
-      <Box display={'flex'}>
+      }}/>
+      <Box display={'flex'} flexDirection={'row'} justifyContent={'space-between'}>
         {arenaAndRbg}
       </Box>
-      <Box display={'flex'}>
+      <Box display={'flex'} flexDirection={'row'} justifyContent={'space-between'}>
         {shuffle}
       </Box>
       <Talents data={data}></Talents>
     </Box>
     <Footer/>
   </>
   </>;
+
+
   let notFoundResp = <><>
     <Header/>
     <NotFound/>