From 4921f81b7604c9fe8797e0cecbb4fbc8d3861f8a Mon Sep 17 00:00:00 2001 From: kj1352 Date: Sat, 6 Feb 2021 21:09:31 +0530 Subject: [PATCH] Poll UI --- my-release-key.keystore | Bin 2220 -> 0 bytes src/app/app-routing.module.ts | 10 +- src/app/chat/chat.page.scss | 2 +- src/app/components/polls/polls.component.html | 27 +++ src/app/components/polls/polls.component.scss | 156 ++++++++++++++++++ .../components/polls/polls.component.spec.ts | 24 +++ src/app/components/polls/polls.component.ts | 73 ++++++++ src/app/fan-zone/fan-zone.module.ts | 4 +- src/app/fan-zone/fan-zone.page.html | 18 +- src/app/fan-zone/fan-zone.page.scss | 49 ++++++ src/app/fan-zone/fan-zone.page.ts | 2 + 11 files changed, 357 insertions(+), 8 deletions(-) delete mode 100644 my-release-key.keystore create mode 100644 src/app/components/polls/polls.component.html create mode 100644 src/app/components/polls/polls.component.scss create mode 100644 src/app/components/polls/polls.component.spec.ts create mode 100644 src/app/components/polls/polls.component.ts diff --git a/my-release-key.keystore b/my-release-key.keystore deleted file mode 100644 index 0a742365767b52e95455ca1a3fb83360f259ff92..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 2220 zcmcgt`8U)H8=vniWEo3?abCMYVdy)?(#%+HvSr_e$i8Omyi#b0Vvuc$G$vb=x{Q5` zbS;@|65vmPhK3xe z@llloEeHew1u5`DP=Je9l?#9aDo|knKtSLW_#z+rI$7Dx7zNXhuLlzOzxCGPKYpEI zarWw#(>TdwAEDZOsq?P#oQH!QI>}w@EmyI!<3c6MtePyZM~1U94heZcXIb-7wNeUzV~$K zWpaUjyQ8s%K4AaVk8$#|_0tPpqWx-ixWsymo{;AqT##-q{q-@Ev3rlSL^f|fF|pL@*9&!6A$bK%^wy2(qy z+(O7(k|1s=EnMPkfr5_~Vg4)NkrcikV7v zY4h{l*gd$Z#wpf@>nFqOi;<4HrrJ`X)GW{10NP95>WDDs&rik<8#zoO!);g*it~<*}7fI^DR> zwmPSjL|N&?E$Nl4)y~VNplE*U0jajwn#j-YqoitLOyI$fmio4SIfr*st2@rE&iY*h zcW9o2$vTT^cty>njj;G8-}=rjqKfT<@&ubhC}-^#U~v@((%M*V5|Tpp_i5q7459TJ zWeb0{L@EB5(ySY_W@pZkgESZG-dv2OpcPHvbcINdf|o+suI+5^I7KUQYQ9^b=a$UA z>FDG0ZTpBPr~%wtOZK(J@7A%kIfWR3k9nrw+~&Gn6RkYmv?Sjfw2u_uqZNt~MrNr4 zmAce^=V)h%GpFm?%_e2Ak#C!BCL@Qh-itCHm^q8?mF^tHvKR;@^Geqi(VntSOT`@i zx8kLIx;Eh~yoUGI=E9_UVm-DIW6)ovxxp-94&C<7#0KkWUfIc`rkcSKA1m{9Q&spR6LEb;WF%-<=jQ!t; z8wE48w8tF>h5oSdqIg{VePW`51H;LGbA12g1dn1I`N2?J*1@4c!Iwa3G*SZxYJgfe zO-&qL(+!Q(JPm4V;QxaEmmDa7{69-S`V24%AP4~|056mR0FdT?&uzY$L^|dIufiEZ zca3>WJq&K8xO@DovhqGI^I}G0kU@5sbS~c0YQr@Md z5zb@_b(7QIKPTeVn-2VHX?bEb&b`hy)i-{=J@?b_*CGRFnY49R0I2HLG+%SM{p66c1Wl&ZgeDTS)?~C&1;4 ze@_!nFr7Z%P!*7s=EY;KojzlC&iGKVGe~*9zTzo!6AA+$K!qGA14%c=3#2r<&*9<=^-gE(TE<5AsSh zOc2hT6qg2Uah#O`D$xDz;|}k|NFAm0{AUXr5vju~d?di2x~eA2JHu&$E(`<)ZTZ(_ zHN!Hv846NydI1fg1lBkt;#-a@|9k6SM{UyDC!242@$7C_TdS4@fFes>XQys7V}{IO z`OysOAfu_j$z^RS?@Hvk`Ctz#WP^)YE37^CKrC^gaJnt_7Zc|*qVL%8( rf@Tic)cHNkj+fnY^aht-jwEkym6O!gy`S~Y*efdVxy*=)%a#5Yj(W9| diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 6e6783a..48ee618 100644 --- a/src/app/app-routing.module.ts +++ b/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: [ diff --git a/src/app/chat/chat.page.scss b/src/app/chat/chat.page.scss index bca8e56..f835bf2 100644 --- a/src/app/chat/chat.page.scss +++ b/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; diff --git a/src/app/components/polls/polls.component.html b/src/app/components/polls/polls.component.html new file mode 100644 index 0000000..22b68b9 --- /dev/null +++ b/src/app/components/polls/polls.component.html @@ -0,0 +1,27 @@ + + +
+
+ {{ question.text }} +
+ +
    +
  • + + +

    {{ option.pollUserCount }} votes

    +
    • +
+
+ + + + + \ No newline at end of file diff --git a/src/app/components/polls/polls.component.scss b/src/app/components/polls/polls.component.scss new file mode 100644 index 0000000..4ffd6ca --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/app/components/polls/polls.component.spec.ts b/src/app/components/polls/polls.component.spec.ts new file mode 100644 index 0000000..e637f53 --- /dev/null +++ b/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; + + 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(); + }); +}); diff --git a/src/app/components/polls/polls.component.ts b/src/app/components/polls/polls.component.ts new file mode 100644 index 0000000..ac75cd3 --- /dev/null +++ b/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); + } + +} diff --git a/src/app/fan-zone/fan-zone.module.ts b/src/app/fan-zone/fan-zone.module.ts index 88ba88e..d1f5476 100644 --- a/src/app/fan-zone/fan-zone.module.ts +++ b/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 {} diff --git a/src/app/fan-zone/fan-zone.page.html b/src/app/fan-zone/fan-zone.page.html index 1ec9694..04eb76b 100644 --- a/src/app/fan-zone/fan-zone.page.html +++ b/src/app/fan-zone/fan-zone.page.html @@ -54,7 +54,7 @@
  • - +
    @@ -74,6 +74,14 @@
    • + +
  • +
    + + + +
    +
    • @@ -100,4 +108,12 @@ + + + +
    + + +
    + diff --git a/src/app/fan-zone/fan-zone.page.scss b/src/app/fan-zone/fan-zone.page.scss index b07424c..80661d3 100644 --- a/src/app/fan-zone/fan-zone.page.scss +++ b/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; + } + } } \ No newline at end of file diff --git a/src/app/fan-zone/fan-zone.page.ts b/src/app/fan-zone/fan-zone.page.ts index e3e8ae1..d63ea2f 100644 --- a/src/app/fan-zone/fan-zone.page.ts +++ b/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;