Poll UI

src/app/app-routing.module.ts

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

src/app/chat/chat.page.scss

@@ -183,7 +183,7 @@
 
         li {
             background-color: rgba(white, 0.1);
-            border-radius: 7px;
+            border-radius: 10px;
             overflow: hidden;
             padding: 0px 15px;
             display: flex;

src/app/components/polls/polls.component.html

@@ -0,0 +1,27 @@
+<ion-slides>
+    <ion-slide #slides *ngFor="let question of pollQuestions">
+        <section class="question-card">
+            <header class="question">
+                {{ question.text }}
+            </header>
+    
+            <ul class="options" [ngClass]="{'show-votes' : question.selectedAnswer !== null }">
+                <li *ngFor="let option of question.options; let i = index"
+                [ngClass]="{'active' : question.selectedAnswer === i }"
+                (click)="question.selectedAnswer = i">
+                    <span class="progress"
+                    [ngStyle]="{ 'width.%' : (question.selectedAnswer !== null ? ((option.pollUserCount * 100) / question.maxUserCount) : 0 ) }"></span>
+                    <label> {{ option.text }} </label>
+                    <p> {{ option.pollUserCount }} votes </p>
+                </li>
+            </ul>
+        </section>
+    </ion-slide>
+</ion-slides>
+
+
+<button class="next-button" (click)="nextQuestion()" *ngIf="showNext">
+    <span class="text"> Next </span>
+
+    <span class="dot"></span>
+</button>

src/app/components/polls/polls.component.scss

@@ -0,0 +1,156 @@
+@import '../../colors';
+
+ion-slides {
+    display: block;
+    height: 100%;
+}
+
+ion-slide {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.question-card {
+    width: 80%;
+    padding: 10px;
+    border-radius: 10px;
+    box-shadow: 3px 3px 5px black;
+    margin: 40px  auto;
+    overflow: hidden;
+    background-color: darken($blue-grey, 30%);
+
+    header {
+        font-size: 1.2rem;
+        line-height: 1.5;
+        color: $dark-blue;
+        border-bottom: 2px solid rgba(white, 0.5);
+        padding: 5px 5px 15px 5px;
+        color: white;
+        margin-bottom: 10px;
+    }
+    
+    .options {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+
+        &.show-votes {
+            p {
+                display: block;
+            }
+        }
+
+        li {
+            background-color: rgba(white, 0.1);
+            border-radius: 10px;
+            overflow: hidden;
+            padding: 0px 15px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 50px;
+            margin: 20px 0;
+            position: relative;
+
+            .progress {
+                position: absolute;
+                left: 0;
+                top: 0;
+                height: 100%;
+                width: 0%;
+                background-color: $dark-blue;
+                pointer-events: none;
+                transition: transform 0.3s, width 0.3s, background-color 0.3s;
+                border-radius: 10px;
+            }
+
+            &.active {
+                .progress {
+                    background-color: $pink;
+                }
+            }
+
+            label {
+                font-weight: 500;
+                font-size: 0.9rem;
+                position: relative;
+                color: white;
+            }
+
+            &:last-child {
+                margin: 20px 0px 10px 0px;
+            }
+        }
+
+        p {
+            margin: 0;
+            display: none;
+            font-size: 0.9rem;
+            font-style: italic;
+            font-weight: 500;
+            position: relative;
+        }
+    }
+}
+
+
+.next-button {
+    display: block;
+    width: 150px;
+    border-radius: 30px;
+    height: 60px;
+    background-color: darken($sea-blue, 15%);
+    color: white;
+    font-size: 1.2rem;
+    font-weight: 500;
+    position: fixed;
+    z-index: 1;
+    bottom: 10vh;
+    left: calc(50% - 75px);
+    overflow: hidden;
+
+    &::before {
+        content: '';
+        position: absolute;
+        left: 30px;
+        top: 0;
+        width: 30px;
+        height: 30px;
+        background-color: darken($sea-blue, 10%);
+        border-radius: 50%;
+        display: block;
+        transform: scale(1.5)translateY(-5px);
+    }
+
+    &::after {
+        content: '';
+        position: absolute;
+        right: 30px;
+        bottom: 0;
+        width: 30px;
+        height: 30px;
+        background-color: darken($sea-blue, 10%);
+        border-radius: 50%;
+        display: block;
+        transform: scale(2.5)translateY(5px);
+    }
+
+    .text {
+        position: relative;
+        z-index: 1;
+    }
+
+    .dot {
+        position: absolute;
+        left: 30px;
+        bottom: 0px;
+        width: 30px;
+        height: 30px;
+        background-color: darken($sea-blue, 10%);
+        border-radius: 50%;
+        display: block;
+        transform: scale(0.3);
+    }
+}

src/app/components/polls/polls.component.spec.ts

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

src/app/components/polls/polls.component.ts

@@ -0,0 +1,73 @@
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { IonSlides } from '@ionic/angular';
+
+@Component({
+    selector: 'app-polls',
+    templateUrl: './polls.component.html',
+    styleUrls: ['./polls.component.scss'],
+})
+export class PollsComponent implements OnInit {
+    @ViewChild('slides') slides: IonSlides;
+
+    slideOpts = {
+        slidesPerView: 1,
+        initialSlide: 0,
+        centeredSlides: true,
+        // simulateTouch: false,
+        // followFinger: false,
+    };
+
+    showNext: boolean = true;
+
+    pollQuestions: Array<{
+        text: string,
+        selectedAnswer: number,
+        maxUserCount: number,
+        options: Array<{
+            text: string,
+            pollUserCount: number,
+        }>
+    }> = [];
+
+    constructor() { }
+
+    ngOnInit() {
+        this.pollQuestions = [{
+            text: 'Who will bat first? (CSK vs KXIP)',
+            selectedAnswer: null,
+            maxUserCount: 1000,
+            options: [{
+                text: 'CSK',
+                pollUserCount: 304,
+            }, {
+                text: 'KXIP',
+                pollUserCount: 586,
+            }, {
+                text: 'Match Cancelled',
+                pollUserCount: 110
+            }]
+        }, {
+            text: 'Best opener for KXIP',
+            selectedAnswer: null,
+            maxUserCount: 5090,
+            options: [{
+                text: 'KL Rahul',
+                pollUserCount: 2988,
+            }, {
+                text: 'N Pooran',
+                pollUserCount: 1342,
+            }, {
+                text: 'C Gayle',
+                pollUserCount: 460
+            }, {
+                text: 'G Maxwell',
+                pollUserCount: 300
+            }]
+        }];
+    }
+
+    nextQuestion() {
+        console.log(this.slides);
+    }
+
+}

src/app/fan-zone/fan-zone.module.ts

@@ -8,6 +8,8 @@ import { FanZonePageRoutingModule } from './fan-zone-routing.module';
 
 import { FanZonePage } from './fan-zone.page';
 
+import { PollsComponent } from '../components/polls/polls.component';
+
 @NgModule({
   imports: [
     CommonModule,
@@ -15,6 +17,6 @@ import { FanZonePage } from './fan-zone.page';
     IonicModule,
     FanZonePageRoutingModule
   ],
-  declarations: [FanZonePage]
+  declarations: [FanZonePage, PollsComponent]
 })
 export class FanZonePageModule {}

src/app/fan-zone/fan-zone.page.html

@@ -54,7 +54,7 @@
             </li>
             <li [routerLink]="['/quiz']">
                 <div>
-                    <ion-icon name="bar-chart-outline"></ion-icon>
+                    <ion-icon name="podium-outline"></ion-icon>
 
                     <label> Quiz </label>
                 </div>
@@ -74,6 +74,14 @@
                     <label> Tickets </label>
                 </div>
             </li>
+
+            <li (click)="showPolls = true">
+                <div>
+                    <ion-icon name="bar-chart-outline"></ion-icon>
+
+                    <label> Polls </label>
+                </div>
+            </li>
         </ul>
     </div>
 
@@ -100,4 +108,12 @@
         </ion-slide>
     </ion-slides>
 
+
+
+
+    <section class="poll-modal" [ngClass]="{'active': showPolls }">
+        <button class="back-button" (click)="showPolls = false"> <ion-icon name="close-outline"></ion-icon> </button>
+        <app-polls class="poll-widget"></app-polls>
+    </section>
+
 </ion-content>

src/app/fan-zone/fan-zone.page.scss

@@ -336,4 +336,53 @@
         margin-top: 5px;
         letter-spacing: 0.5px;
     }
+}
+
+
+.poll-modal {
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 3;
+    background-color: rgba(black, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(100vh - 56px);
+    width: 100%;
+    transform: scale(0);
+    opacity: 0;
+    transition: transform 0.5s, opacity 0.8s;
+
+    &.active {
+        transform: scale(1);
+        opacity: 1;
+    }
+
+    .poll-widget {
+        display: block;
+        width: 100%;
+        height: 100%;
+    }
+
+
+    .back-button {
+        position: absolute;
+        top: 15px;
+        right: 20px;
+        width: 40px;
+        height: 40px;
+        background: rgba($pink, 0.8);
+        border: 0px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 3;
+    
+        ion-icon {
+            color: white;
+            font-size: 20px;
+        }
+    }
 }

src/app/fan-zone/fan-zone.page.ts

@@ -12,6 +12,8 @@ import { Router } from '@angular/router';
 export class FanZonePage implements OnInit {
     @ViewChild('slides') slides: IonSlides;
 
+    showPolls: boolean = false;
+
     emojis = ['assets/icons/emojis/heart.png', 'assets/icons/emojis/laughing.png', 'assets/icons/emojis/surprised.png', 'assets/icons/emojis/thumb-up.png'];
 
     showSlides: boolean = false;