League table UI

src/app/app-routing.module.ts

@@ -61,7 +61,11 @@ const routes: Routes = [
   {
     path: 'fan-zone',
     loadChildren: () => import('./fan-zone/fan-zone.module').then( m => m.FanZonePageModule)
-  },
+  },
  {
+    path: 'league-table',
+    loadChildren: () => import('./league-table/league-table.module').then( m => m.LeagueTablePageModule)
+  },
+
 ];
 @NgModule({
   imports: [

src/app/league-table/league-table-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { LeagueTablePage } from './league-table.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: LeagueTablePage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class LeagueTablePageRoutingModule {}

src/app/league-table/league-table.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { LeagueTablePageRoutingModule } from './league-table-routing.module';
+
+import { LeagueTablePage } from './league-table.page';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    LeagueTablePageRoutingModule
+  ],
+  declarations: [LeagueTablePage]
+})
+export class LeagueTablePageModule {}

src/app/league-table/league-table.page.html

@@ -0,0 +1,74 @@
+<ion-content>
+    <section class="header-with-action-buttons">
+        <div class="nav">
+            <button (click)="back()"> <ion-icon name="chevron-back-outline"></ion-icon> <span> BACK </span> </button>
+        </div>
+        <header> IPL Standings Table <br> <span> Season 2021 </span> </header>
+        <div class="action">
+            <button> <ion-icon name="share-social"></ion-icon> </button>
+        </div>
+    </section>
+
+    <div class="table-container" *ngIf="tableData">
+
+        <table class="team">
+            <thead>
+                <tr>
+                    <th>
+                        Teams
+                    </th>
+                </tr>
+            </thead>
+            <tbody>                
+                <tr *ngFor="let data of tableData">
+                    <td>
+                        {{ data.team }}
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+
+        <table class="details">
+            <thead>
+                <tr>
+                    <th>
+                        Played
+                    </th>
+                    <th>
+                        Won
+                    </th>
+                    <th>
+                        Lost
+                    </th>
+                    <th>
+                        Tied
+                    </th>
+                    <th>
+                        Net RR
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr *ngFor="let data of tableData">
+                    <td>
+                        {{ data.played }}
+                    </td>
+                    <td>
+                        {{ data.won }}
+                    </td>
+                    <td>
+                        {{ data.lost }}
+                    </td>
+                    <td>
+                        {{ data.tied }}
+                    </td>
+                    <td>
+                        {{ data.netrr }}
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+
+    </div>
+
+</ion-content>

src/app/league-table/league-table.page.scss

@@ -0,0 +1,59 @@
+@import '../colors';
+
+.table-container {
+    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    text-align: center;
+    height: calc(100vh - 70px);
+    overflow: auto;
+    z-index: 0;
+
+    .team {
+        position: sticky;
+        position: -webkit-sticky;
+        left: 0;
+        top: 0;
+        z-index: 1;
+        width: 100px;
+        background-color: darken($brand-blue, 25%);
+        box-shadow: 0px 0px 10px 0px darken($brand-blue, 30%);
+        
+        thead {
+            background-color: rgba($green, 0.8);
+        }
+    }
+
+    .details {
+        width: calc(100% - 100px);
+        overflow-x: auto;
+
+        thead {
+            th {
+                width: 70px;
+            }
+        }
+    }
+
+    table {
+        color: white;
+        background-color: darken($brand-blue, 15%);
+        table-layout:fixed;
+        
+        thead {
+            background-color: rgba($green, 0.3);
+            font-size: 14px;            
+            
+            th {
+                padding: 15px 0;
+                font-weight: normal;
+            }
+        }
+        
+        td {
+            font-size: 16px;
+            height: 50px;
+            padding: 30px 0;
+        }
+    }
+}

src/app/league-table/league-table.page.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { LeagueTablePage } from './league-table.page';
+
+describe('LeagueTablePage', () => {
+  let component: LeagueTablePage;
+  let fixture: ComponentFixture<LeagueTablePage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LeagueTablePage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(LeagueTablePage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/league-table/league-table.page.ts

@@ -0,0 +1,50 @@
+import { Component, OnInit } from '@angular/core';
+import { Location } from '@angular/common';
+
+@Component({
+    selector: 'app-league-table',
+    templateUrl: './league-table.page.html',
+    styleUrls: ['./league-table.page.scss'],
+})
+export class LeagueTablePage implements OnInit {
+
+    tableData = [{
+        team: 'KXIP',
+        played: '20',
+        won: '10',
+        lost: '9',
+        tied: '1',
+        netrr: '+1.107'
+    }, {
+        team: 'MI',
+        played: '20',
+        won: '10',
+        lost: '9',
+        tied: '1',
+        netrr: '+1.107'
+    }, {
+        team: 'RCB',
+        played: '20',
+        won: '10',
+        lost: '9',
+        tied: '1',
+        netrr: '+1.107'
+    }, {
+        team: 'CSK',
+        played: '20',
+        won: '10',
+        lost: '9',
+        tied: '1',
+        netrr: '+1.107'
+    }];
+
+    constructor(private location: Location) { }
+
+    ngOnInit() {
+    }
+
+    back() {
+        this.location.back();
+    }
+
+}

src/app/live/live.page.html

@@ -124,6 +124,15 @@
                 </section>
                 
             </li>
+
+            <li class="collapsible-card">
+                <header>
+                    <label> League Table </label>
+                    <button [routerLink]="['/league-table']">
+                        <ion-icon name="chevron-forward-outline"></ion-icon>
+                    </button>
+                </header>
+            </li>
         </ul>
 
     </div>

src/app/live/live.page.scss

@@ -152,6 +152,13 @@
                 width: 30px;
                 font-size: 24px;
                 color: white;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                ion-icon {
+                    font-size: 20px;
+                }
             }
         }