Live page fixture match details will be shown on click

src/app/live/live.page.html

@@ -80,7 +80,7 @@
                 </section>
             </li>
 
-            <li class="collapsible-card" [ngClass]="{'active' : showFixtures}">
+            <li class="collapsible-card" [ngClass]="{'active' : showFixtures || !currentMatch || !currentMatch.Innings}">
                 <header>
                     <label> Fixtures </label>
                     <button (click)="showFixtures = !showFixtures"> 
@@ -90,9 +90,14 @@
                 </header>
 
                 <section class="card">
+
+                    <p class="info">
+                        <ion-icon name="information-circle-outline"></ion-icon> Tap the match card to know more
+                    </p>
+
                     <ion-slides  #slides [options]="slideOpts">
                         
-                        <ion-slide *ngFor="let fixture of fixtures">
+                        <ion-slide *ngFor="let fixture of fixtures" (click)="showMatchDetails(fixture.match_id)">
                             <div class="image-holder">
                                 <figure>
                                     <img src="https://s3.ap-south-1.amazonaws.com/assets-kxip.sportz.io/prod/waf-images/91/55/a5/16-9/5PE9uqJSZw.jpg">

src/app/live/live.page.scss

@@ -176,6 +176,21 @@
             padding: 15px;
             background-color: lighten($brand-blue, 1%);
             border-radius: 7px;
+
+            .info {
+                display: flex;
+                align-items: flex-start;
+                justify-content: flex-start;
+                margin: 0px;
+                font-style: italic;
+                font-size: 1rem;
+                color: white;
+
+                ion-icon {
+                    width: 20px;
+                    height: 20px;
+                }
+            }
         }
 
         table {

src/app/live/live.page.ts

@@ -280,8 +280,8 @@ export class LivePage implements OnInit {
         });
     }
 
-    showMatchDetails() {
-        this.router.navigate(['/match-details', { match_id: this.currentMatch.Matchdetail.Match.Id }]);
+    showMatchDetails(matchId?: string | number) {
+        this.router.navigate(['/match-details', { match_id: matchId ? matchId : this.currentMatch.Matchdetail.Match.Id }]);
     }
 
 }