Fixtures carousel

src/app/live/live.page.html

@@ -80,11 +80,52 @@
 
             </li>
 
-            <li class="collapsible-card">
+            <li class="collapsible-card" [ngClass]="{'active' : showFixtures}">
                 <header>
-                    <label> Matches </label>
-                    <button> + </button>
-                </header>                
+                    <label> Fixtures </label>
+                    <button (click)="showFixtures = !showFixtures"> 
+                        <span *ngIf="!showFixtures"> + </span> 
+                        <span *ngIf="showFixtures"> - </span>
+                    </button>
+                </header>
+
+                <section class="card">
+                    <ion-slides  #slides [options]="slideOpts" (ionSlideDidChange)="selectIndex()">
+                        <ion-slide *ngFor="let matchDay of bookingSeatsData"
+                        (click)="showBookingDetails(matchDay)">
+                            <div class="image-holder">
+                                <figure>
+                                    <img [src]="matchDay.staduim.sideView">
+                                </figure>
+                            </div>
+                
+                            <section class="content">
+                                <section class="match-day-card">
+                                    <div class="teams">
+                                        <img [src]="matchDay.matchDetails.home.image" alt="">
+                                        <span></span>
+                                        <img [src]="matchDay.matchDetails.away.image" alt="">
+                                    </div>
+                    
+                                    <p class="event-details">
+                                        {{ getEventDateTime(matchDay.dateTime) }} <br>
+                                        {{ matchDay.staduim.name }} Stadium
+                                    </p>                        
+                    
+                                    <h4> {{ matchDay.matchDetails.home.name }} v/s {{ matchDay.matchDetails.away.name }}</h4>
+                    
+                                    <h5> {{ matchDay.matchType }} </h5>
+                                </section>
+                            </section>
+                
+                        </ion-slide>
+                    </ion-slides>
+    
+                    <button class="view-more-button" (click)="showBookingDetailsByIndex()">
+                        Book Now
+                    </button>
+                </section>
+                
             </li>
         </ul>
 

src/app/live/live.page.scss

@@ -1,3 +1,4 @@
+$lumous-blue: #1a2389;
 $dark-blue-shade1: #24367c;
 $dark-blue-shade2: #263982;
 $green: #01b868;
@@ -188,7 +189,6 @@ ion-content {
             color: white;
             font-size: 1rem;
             height: 40px;
-            margin-top: 15px;
             box-shadow: 0px 0px 5px 2px darken($dark-blue-shade2, 10%);           
         }
         
@@ -203,17 +203,14 @@ ion-content {
             font-size: 1rem;
             
             thead {
-                line-height: 2;
-            }
-        }
 
-        tr {
-            &:last-child {
-                td {
-                    padding-bottom: 0px;
+                th {
+                    padding-bottom: 20px;
                 }
             }
+        }
 
+        tr {            
             td {
                 overflow: hidden;
                 width: 100%;
@@ -243,4 +240,126 @@ ion-content {
 
 .chat-button {
     --background: #d73e53;
+}
+
+ion-slides {
+    padding: 30px 0 20px 0;
+    position: relative;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    overflow: visible;
+    height: 40vh;
+    overflow: hidden;
+
+    ion-slide {
+        display: block;        
+        overflow: visible;
+        text-align: left;
+        height: 80%;
+        position: relative;        
+        transform: scale(0.9);
+        background-color: transparent;
+        transition: transform 0.3s;
+
+        &.swiper-slide-active {
+            transform: scale(1);
+        }
+    }
+
+    .image-holder {
+        position: relative;
+        height: 100%;
+        overflow: hidden;
+        border-radius: 7px;
+        box-shadow: 0px 10px 25px -7px darken($lumous-blue, 80%);        
+
+        figure {
+            margin: 0;
+            display: block;
+            width: 100%;
+            height: 100%;
+            filter: brightness(60%);
+            transition: filter 0.3s;
+            border: 0px;
+            padding: 0;
+            border-radius: 7px;
+            overflow: hidden;
+
+            img {
+                height: 100%;
+                object-fit: cover;
+                display: block;
+                width: 100%;
+            }
+        }
+    }
+
+    .content {
+        height: auto;
+        position: relative;
+        transform: translateY(-80%);
+        box-shadow: 0px 20px 25px -10px darken($lumous-blue, 80%);
+        background-color: white;
+        width: 90%;
+        margin: 0 auto;
+        border-radius: 7px;
+        overflow: visible;
+        z-index: 1;
+        padding-bottom: 10px;
+        opacity: 0.8;
+    }
+
+    .teams {
+        display: flex;
+        justify-content: space-between;
+        width: 130px;
+        margin: 0 auto -25px auto;
+        height: 50px;
+        border-radius: 30px;
+        background-color: lighten(#cecece, 10%);
+        align-items: center;
+        padding: 0 15px;
+        position: relative;
+        transform: translateY(-25px);
+        z-index: 1;
+
+        span {
+            font-size: 1rem;
+            width: 12px;
+            height: 3px;
+            background-color: darken(#cecece, 15%);
+        }
+        
+        img {
+            width: 33px;
+            height: 33px;
+            border-radius: 50%;
+        }
+    }
+
+    p, h4, h5 {
+        margin: 0;
+        padding: 0 10%;
+        text-align: center;
+    }
+
+    .event-details {
+        margin: 20px 0 5px;
+        color: darken(#cecece, 30%);
+        font-size: 0.8rem;
+        font-weight: 500;
+    }
+
+    h4 {
+        color: darken(#cecece, 50%);
+        font-size: 1.1rem;
+        line-height: 1.5;
+    }
+
+    h5 {
+        color: darken(#cecece, 50%);
+        font-size: 0.9rem;
+        line-height: 1.5;
+    }
 }

src/app/live/live.page.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit } from '@angular/core';
-import { ModalController } from '@ionic/angular';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { IonSlides, ModalController } from '@ionic/angular';
 import * as moment from 'moment';
 import { ChatPage } from '../chat/chat.page';
 import * as faker from 'faker';
@@ -36,7 +36,21 @@ type IscoreCard = {
     styleUrls: ['./live.page.scss'],
 })
 export class LivePage implements OnInit {
+    @ViewChild('slides') slides: IonSlides;
+    
     showScoreCard: boolean = true;
+    showFixtures: boolean = true;
+
+    selectedIndex: number = 0;
+
+    slideOpts = {
+        slidesPerView: 1.5,
+        spaceBetween: 15,
+        initialSlide: 0,
+        centeredSlides: true,
+        simulateTouch: false,
+        followFinger: false,
+    };
 
     matchStats: {
         homeTeam: IscoreCard,
@@ -104,6 +118,14 @@ export class LivePage implements OnInit {
         return moment(dateTime).format('DD MMM');
     }
 
+    getEventDateTime(dateTime: Date) {
+        return moment(dateTime).format('ddd, MMM DD YYYY hh:mm a');
+    }
+
+    selectIndex() {
+        this.slides.getActiveIndex().then((index) => this.selectedIndex = index);
+    }
+
     ngOnInit() {
         for (let i = 0; i < 3; i += 1) {
             this.bookingSeatsData.push({
@@ -262,4 +284,9 @@ export class LivePage implements OnInit {
         this.router.navigate(['/booking-details' , { matchData: JSON.stringify(matchData) }]);
     }
 
+    showBookingDetailsByIndex() {
+        let index = this.selectedIndex;
+        this.router.navigate(['/booking-details' , { matchData: JSON.stringify(this.bookingSeatsData[index]) }]);
+    }
+
 }