fix(FT-21): mobile view layout

jonassimoen · Nov 30, 2023 · 041569a · 041569a
1 parent 1bac9f2
commit 041569a
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 9 deletions.
diff --git a/src/components/Player/PlayerStyle.tsx b/src/components/Player/PlayerStyle.tsx
@@ -6,11 +6,11 @@ export const PlayerStyle = styled.div`
     position: relative;
     cursor: pointer;
     text-align: ${(props: any) => !props.player ? "center" : "inherit"};
-    width: 100px;
-    height: 60px;
+    width: 70px;
+    height: 50px;
 
     @media ${mediaQueries.mobileM} {
-        width: 85px;
+        width: 60px;
         height: 55px;
     }
 
@@ -21,7 +21,7 @@ export const PlayerStyle = styled.div`
 
     .position-label {
         position: absolute;
-        top: 135%;
+        top: 125%;
         margin: 0 auto;
         text-align: center;
         color: white;
@@ -32,10 +32,18 @@ export const PlayerStyle = styled.div`
 ` as any;
 
 export const PlayerBg = styled.img`
-    position: relative;
-    width: 50px;
-    height: 50px;
+    position: absolute;
+	max-width: 55%;
 	opacity: ${(props: any) => props.inactive ? 0.4 : 1};
+	margin: 0 auto;
+    inset: 5% 0px 25%;
+    background-size: 100%;
+    background-position-x: 50%;
+	background-image: url("${(props: any) => props.src}");
+
+	@media ${mediaQueries.mobileM} {
+		max-width: 65%;
+	}
 ` as any;
 
 export const Badge = styled.div`

diff --git a/src/components/PlayerList/PlayerListStyle.ts b/src/components/PlayerList/PlayerListStyle.ts
@@ -104,12 +104,15 @@ export const TableStyle = styled(Table)`
     }
 
 	.avatar-container {
-		margin-bottom: -15px;
+		margin-bottom: -10px;
 	}
 
     .ant-table-tbody {
         .ant-table-row {
             background-color: #FFF;
+            > td:first-child {
+                padding: 0px 10px 0px 15px;
+            }
             > td {
                 border: none;
                 padding: 3.5px;

diff --git a/src/components/Team/TeamStyle.ts b/src/components/Team/TeamStyle.ts
@@ -47,7 +47,7 @@ export const TeamStyle = styled.div`
 
     @media ${mediaQueries.mobileM} {
         padding: 0px 0 30px;
-        height: ${(props: TeamProps) => (props.heightRatio / props.widthRatio) * 1.5 * 375}px;
+        height: ${(props: TeamProps) => (props.heightRatio / props.widthRatio) * 2 * 350}px;
         margin: ${(props: TeamProps) => (props.centerAligned ? "0 auto;" : "inherit")};
     }