Player details UI

src/app/components/player-details/player-details.component.scss

@@ -3,7 +3,7 @@ $blue-grey: #949599;
 
 .container {
     background-color: $dark-blue;
-    padding-top: 40px;
+    padding: 40px 0;
 }
 
 .player-primary-data {
@@ -261,7 +261,7 @@ $blue-grey: #949599;
     border-radius: 10px;
     overflow: hidden;
     width: 90%;
-    margin: 0 auto 40px auto;
+    margin: 0 auto;
     padding: 0px 0px 5px 0px;
 
     header {

src/app/match-details/match-details.page.html

@@ -8,27 +8,25 @@
             <button> <ion-icon name="share-social-outline"></ion-icon> </button>            
         </div>
     </section>
-
-    <div class="content-container">
+    
+    <div class="field-container">
+        <figure class="field-image">
+            <img src="assets/home-team/ground.svg">
+        </figure>
         
-        <div class="field-container">
-            <figure class="field-image">
-                <img src="assets/home-team/ground.svg">
-            </figure>
-            
-            <ul class="field-setting">
-                <li *ngFor="let player of matchData.home.players"
-                [ngStyle]="{ 'top.%': getPosition(player.position.y), 'left.%': getPosition(player.position.x) }">
-                    <img [src]="player.image">
-                </li>
-            </ul>
-
-        </div>
+        <ul class="field-setting">
+            <li *ngFor="let player of matchData.home.players"
+            [ngStyle]="{ 'top.%': getPosition(player.position.y), 'left.%': getPosition(player.position.x) }"
+            (click)="selectPlayerDetails()">
+                <img [src]="player.image">
+            </li>
+        </ul>
 
-        <section class="player-details" *ngIf="isPlayerSelected">
-            <app-player-details></app-player-details>
-        </section>
+    </div>
 
-    </div>    
+    <section class="player-details" [ngClass]="{'active' : isPlayerSelected }">
+        <button class="close-button" (click)="isPlayerSelected = false"> <ion-icon name="close-outline"></ion-icon> </button>
+        <app-player-details></app-player-details>
+    </section>
 
 </ion-content>

src/app/match-details/match-details.page.scss

@@ -64,13 +64,12 @@ ion-content {
 }
 
 .field-container {
-    position: sticky;
-    position: -webkit-sticky;
     left: 0;
-    margin-top: 65px;
-    top: 65px;
-    height: calc(100vh - 65px);
+    top: 0px;
+    height: 100vh;
+    width: 100%;
     z-index: 0;
+    position: fixed;
 }
 
 .field-image {    
@@ -96,16 +95,35 @@ ion-content {
     list-style: none;
     padding: 0;
     margin: 0;
-    width: 100%;
-    height: 100%;
+    top: 10%;
+    left: 5%;
+    width: 90%;
+    height: 80%;
     overflow: auto;
     
     li {
         position: absolute;
+        left: 0;
+        top: 0;
+
+        &::before {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 50px;
+            height: 10px;
+            border-radius: 50%;
+            background-color: white;
+            box-shadow: 0px 2px 5px $dark-blue;
+        }
         
         img {
             width: 50px;
             height: 50px;
+            object-fit: cover;
+            object-position: top;
+            position: relative;
         }
 
         h5 {
@@ -119,8 +137,35 @@ ion-content {
 
 .player-details {
     position: relative;
-    z-index: 1;
+    z-index: 2;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0px 0px 5px $dark-blue;
+    transform: translateY(100vh);
+    opacity: 0;
+    transition: transform 0.5s, 0.3s;
+    background-color: $dark-blue;
+
+    .close-button {
+        display: block;
+        width: 40px;
+        height: 40px;
+        margin: 15px 15px 16px auto;
+        border-radius: 50%;
+        border: 1px solid $blue-grey;
+        background-color: rgba($blue-grey, 0.1);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        ion-icon {
+            color: $blue-grey;
+            font-size: 17px;
+        }
+    }
+
+    &.active {
+        opacity: 1;
+        transform: translateY(100px);
+    }
 }

src/app/match-details/match-details.page.ts

@@ -25,7 +25,8 @@ type ITeam = {
     styleUrls: ['./match-details.page.scss'],
 })
 export class MatchDetailsPage implements OnInit {
-    isPlayerSelected: string = '';
+    isPlayerSelected: boolean = false;
+    isHomeTeamSelected: boolean = false;
 
     matchData: {
         home: ITeam,
@@ -63,6 +64,17 @@ export class MatchDetailsPage implements OnInit {
                     y: Math.round((40) * (Math.sin(theta[i]))),
                 }
             });
+
+
+            this.matchData.away.players.push({
+                name: 'Player ' + i.toString(),
+                image: 'assets/mi-roster/' + i.toString() + '.png',
+                jersey: i.toString(),
+                position: {
+                    x: Math.round((30) * (Math.cos(theta[i]))),
+                    y: Math.round((35) * (Math.sin(theta[i]))),
+                }
+            });
         }
     }
 
@@ -74,4 +86,8 @@ export class MatchDetailsPage implements OnInit {
         this.location.back();
     }
 
+    selectPlayerDetails() {
+        this.isPlayerSelected = true;
+    }
+
 }