Merge pull request #199 from bounswe/mobile-fix-info

Mobile fix info
bounswe · May 11, 2024 · bf8a899 · bf8a899
2 parents 1df25ed + 0b73435
commit bf8a899
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 92 deletions.
diff --git a/mobile/NBAForum/pages/Player.js b/mobile/NBAForum/pages/Player.js
@@ -7,7 +7,7 @@ const Player = ({ route }) => {
   const { baseURL } = useContext(Context);
   const [ playerInfo, setPlayerInfo ] = useState("LL");
   const [ isLoading, setIsLoading ] = useState(true);
-  const  playerID  =  route.params['id'];
+  const playerID = route.params['id'];
   console.log(playerID)
 
   const handleSearch = async (id) => {
@@ -36,49 +36,51 @@ const Player = ({ route }) => {
       <Text style={styles.heading}>{playerInfo.name}</Text>
 
       <View style={styles.frame}>
-        <View style={[styles.sideContainer, styles.backgroundGrey]}>
+        <View style={styles.leftsideContainer}>
           <View style={styles.playerImageContainer}>
             <View style={styles.playerImageWrapper}>
               <Image src={playerInfo.image}  style={styles.playerImage} />
             </View>
-            <View style={styles.personalInfoContainer}>
-              <Text style={styles.personalInfoText}>Personal Information</Text>
+            <View style={styles.infoContainer}>
+              <Text style={styles.sub1Heading}>Personal Information</Text>
               <View style={styles.personalInfoItem}>
-                <Text>Height: {playerInfo.height.substr(-4)}</Text>
-                <Text>Date of Birth: {playerInfo.date_of_birth.substr(1,10)}</Text>
+                <Text style={styles.sub2Heading}>Height:</Text> 
+                <Text>{playerInfo.height.substr(1,4)} cm</Text>
+                <Text style={styles.sub2Heading}>Date of Birth:</Text> 
+                <Text>{playerInfo.date_of_birth.substr(1,10)}</Text>
               </View>
             </View>
           </View>
         </View>
 
-        <View style={[styles.sideContainer, styles.backgroundGrey]}>
+        <View style={styles.rightsideContainer}>
 
-          <View style={[styles.personalCareerContainer, styles.careerContainer]}>
-            <Text style={styles.personalCareerHeading}>Professional Career</Text>
+          <View style={styles.infoContainer}>
+            <Text style={styles.sub1Heading}>Professional Career</Text>
             <View style={styles.careerItem}>
               <View style={styles.careerData}>
-                <Text>Teams:</Text>
+                <Text style={styles.sub2Heading}>Teams</Text>
                   {Object.keys(playerInfo.teams).map((team) => (
-                    <Text key={team}>{team}</Text>
+                    <Text key={team}>{'\u2022'} {team}</Text>
                   ))}
               </View>
             </View>
           </View>
 
-          <View style={[styles.teamInfoContainer, styles.careerContainer]}>
-            <Text style={styles.teamInfoHeading}>Position</Text>
+          <View style={styles.infoContainer}>
+            <Text style={styles.sub2Heading}>Positions</Text>
             <View style={styles.teamInfoItem}>
             {playerInfo.positions.map((position) => (
-                    <Text key={position}>{position}</Text>
+                    <Text key={position}>{'\u2022'} {position}</Text>
                   ))}
             </View>
           </View>
 
-          <View style={[styles.awardsContainer, styles.careerContainer]}>
-            <Text style={styles.awardsHeading}>Awards</Text>
+          <View style={styles.infoContainer}>
+            <Text style={styles.sub2Heading}>Awards</Text>
             <View style={styles.teamInfoItem}>
                   {Object.keys(playerInfo.awards).map((award) => (
-                    <Text key={award}>{award}</Text>
+                    <Text key={award}>{'\u2022'} {award}</Text>
                   ))}
             </View>
           </View>
@@ -96,24 +98,32 @@ const Player = ({ route }) => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 30,
-    backgroundColor: "#1B64EB",
+    backgroundColor: "#87CEEB",
+  },
+  infoContainer: {
+    padding: 10,
+    marginBottom: 5,
+    marginTop: 5,
   },
   frame: {
-    height: '60%',
     flexDirection: 'row',
     padding: 10,
   },
   scrollContainer: {
     flexGrow: 1,
+    backgroundColor: "#87CEEB",
   },
-  sideContainer: {
+  leftsideContainer: {
     flex: 1,
+    backgroundColor: '#eaeaea', 
+    borderTopLeftRadius: 16,
+    borderBottomLeftRadius: 16,
   },
-  backgroundGrey: {
-    backgroundColor: 'white',
+  rightsideContainer: {
+    flex: 1,
+    backgroundColor: '#eaeaea', 
+    borderTopRightRadius: 16,
+    borderBottomRightRadius: 16,
   },
   playerImageContainer: {
     alignItems: 'center',
@@ -132,33 +142,16 @@ const styles = StyleSheet.create({
     height: '100%',
     resizeMode: 'contain',
     borderRadius: 16,
+    marginTop: 10,
   },
-  personalInfoText: {
+  sub2Heading: {
     marginTop: 5,
     fontWeight: 'bold',
-  },
-  personalInfoContainer: {
-    padding: 10,
-    borderRadius: 10,
-    borderRadius: 16,
+    fontSize: 15,
   },
   personalInfoItem: {
     marginBottom: 5,
   },
-  personalCareerContainer: {
-    marginBottom: 20,
-    borderRadius: 16,
-  },
-  careerContainer: {
-    padding: 10,
-    borderRadius: 10,
-    borderRadius: 16,
-  },
-  personalCareerHeading: {
-    fontWeight: 'bold',
-    fontSize: 18,
-    marginBottom: 10,
-  },
   careerItem: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -167,31 +160,21 @@ const styles = StyleSheet.create({
   careerData: {
     flexDirection: 'column',
   },
-  teamInfoContainer: {
-    marginBottom: 20,
-    borderRadius: 16,
-  },
-  teamInfoHeading: {
+  sub1Heading: {
     fontWeight: 'bold',
     fontSize: 18,
     marginBottom: 10,
   },
   teamInfoItem: {
     marginBottom: 5,
   },
-  awardsContainer: {
-    marginBottom: 20,
-    borderRadius: 16,
-  },
-  awardsHeading: {
-    fontWeight: 'bold',
-    fontSize: 18,
-    marginBottom: 10,
-  },
+
   heading: {
     fontSize: 20,
     fontWeight: 'bold',
     marginBottom: 10,
+    marginTop: 10,
+    marginLeft: 10,
   },
 });
 

diff --git a/mobile/NBAForum/pages/Team.js b/mobile/NBAForum/pages/Team.js
@@ -41,12 +41,12 @@ const Team = ({ route }) => {
 
               <Image src={teamInfo.image} style={{width: "100%", height: "100%"}} resizeMode='contain' />
          </View>
-          <Text style={[styles.heading, styles.team_nameHeading]}>{teamInfo.name}</Text>
+          <Text style={styles.heading}>{teamInfo.name}</Text>
 
         <View style={styles.teamInfoContainer}>
           <Text style={[styles.heading, styles.teamInfoHeading]}>Team Info</Text>
 
-            <View style={styles.playerInfo}>
+            <View style={styles.teamInfo}>
               <Text>Conference: {teamInfo.conference}</Text>
               <Text>Division: {teamInfo.division}</Text>
               <Text>Coach: {teamInfo.coach}</Text>
@@ -99,46 +99,16 @@ const styles = StyleSheet.create({
   teamInfoHeading: {
     marginBottom: 10,
   },
-
-  playersContainer: {
-    marginBottom: 20,
-    backgroundColor: '#eaeaea', 
-    padding: 10,
-    borderRadius: 10,
-  },
-  playerItem: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginBottom: 10,
-  },
-  playerPosition: {
-    width: 60,
-    height: 30,
-    borderRadius: 15,
-    backgroundColor: 'rgba(255, 255, 255, 0.8)',
-    justifyContent: 'center',
-    alignItems: 'center',
-    marginRight: 10,
-  },
-  teamImage: {
-    width: 150,
-    height: 150,
-    borderRadius: 25,
-    marginRight: 10,
-  },
   teamImageWrapper: {
     width: '40%',
     aspectRatio: 1, 
     borderRadius: 5,
     overflow: 'hidden',
     borderRadius: 16,
   },
-  playerInfo: {
+  teamInfo: {
     flex: 1,
   },
-  blankSpace: {
-    height: 20, 
-  },
 });
 
 export default Team;