From 85450642211d09a211b8a51404a306b100757043 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Fri, 5 Feb 2021 12:36:11 +0530 Subject: [PATCH] Fanzone UI -- partial commit --- src/app/app-routing.module.ts | 146 +++++++++--------- src/app/fan-zone/fan-zone-routing.module.ts | 17 ++ src/app/fan-zone/fan-zone.module.ts | 20 +++ src/app/fan-zone/fan-zone.page.html | 60 +++++++ src/app/fan-zone/fan-zone.page.scss | 72 +++++++++ src/app/fan-zone/fan-zone.page.spec.ts | 24 +++ src/app/fan-zone/fan-zone.page.ts | 38 +++++ src/app/home-details/home-details.page.scss | 1 + src/app/live/live.page.html | 6 +- src/app/quiz/quiz.page.html | 4 +- src/app/quiz/quiz.page.ts | 30 ++-- .../swipe-cards/swipe-cards.component.html | 4 +- .../swipe-cards/swipe-cards.component.scss | 2 +- src/app/tabs/tabs-routing.module.ts | 4 + src/app/tabs/tabs.page.html | 23 +-- 15 files changed, 341 insertions(+), 110 deletions(-) create mode 100644 src/app/fan-zone/fan-zone-routing.module.ts create mode 100644 src/app/fan-zone/fan-zone.module.ts create mode 100644 src/app/fan-zone/fan-zone.page.html create mode 100644 src/app/fan-zone/fan-zone.page.scss create mode 100644 src/app/fan-zone/fan-zone.page.spec.ts create mode 100644 src/app/fan-zone/fan-zone.page.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 6dd0a09..6e6783a 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,72 +1,76 @@ -import { NgModule } from '@angular/core'; -import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; - -const routes: Routes = [ - { - path: '', - loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule) - }, - { - path: 'home', - loadChildren: () => import('./home/home.module').then( m => m.HomePageModule) - }, - { - path: 'live', - loadChildren: () => import('./live/live.module').then( m => m.LivePageModule) - }, - { - path: 'more', - loadChildren: () => import('./more/more.module').then( m => m.MorePageModule) - }, - { - path: 'home-details', - loadChildren: () => import('./home-details/home-details.module').then( m => m.HomeDetailsPageModule) - }, - { - path: 'player-stats', - loadChildren: () => import('./player-stats/player-stats.module').then( m => m.PlayerStatsPageModule) - }, - { - path: 'booking', - loadChildren: () => import('./booking/booking.module').then( m => m.BookingPageModule) - }, - { - path: 'booking-details', - loadChildren: () => import('./booking-details/booking-details.module').then( m => m.BookingDetailsPageModule) - }, - { - path: 'match-details', - loadChildren: () => import('./match-details/match-details.module').then( m => m.MatchDetailsPageModule) - }, - { - path: 'chat', - loadChildren: () => import('./chat/chat.module').then( m => m.ChatPageModule) - }, - { - path: 'collections', - loadChildren: () => import('./collections/collections.module').then( m => m.CollectionsPageModule) - }, - { - path: 'add-party', - loadChildren: () => import('./add-party/add-party.module').then( m => m.AddPartyPageModule) - }, - { - path: 'ar-fan-cam', - loadChildren: () => import('./ar-fan-cam/ar-fan-cam.module').then( m => m.ArFanCamPageModule) - }, - { - path: 'quiz', - loadChildren: () => import('./quiz/quiz.module').then( m => m.QuizPageModule) - }, - { - path: 'shop', - loadChildren: () => import('./shop/shop.module').then( m => m.ShopPageModule) +import { NgModule } from '@angular/core'; +import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; + +const routes: Routes = [ + { + path: '', + loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule) + }, + { + path: 'home', + loadChildren: () => import('./home/home.module').then( m => m.HomePageModule) + }, + { + path: 'live', + loadChildren: () => import('./live/live.module').then( m => m.LivePageModule) + }, + { + path: 'more', + loadChildren: () => import('./more/more.module').then( m => m.MorePageModule) + }, + { + path: 'home-details', + loadChildren: () => import('./home-details/home-details.module').then( m => m.HomeDetailsPageModule) + }, + { + path: 'player-stats', + loadChildren: () => import('./player-stats/player-stats.module').then( m => m.PlayerStatsPageModule) + }, + { + path: 'booking', + loadChildren: () => import('./booking/booking.module').then( m => m.BookingPageModule) + }, + { + path: 'booking-details', + loadChildren: () => import('./booking-details/booking-details.module').then( m => m.BookingDetailsPageModule) + }, + { + path: 'match-details', + loadChildren: () => import('./match-details/match-details.module').then( m => m.MatchDetailsPageModule) + }, + { + path: 'chat', + loadChildren: () => import('./chat/chat.module').then( m => m.ChatPageModule) + }, + { + path: 'collections', + loadChildren: () => import('./collections/collections.module').then( m => m.CollectionsPageModule) + }, + { + path: 'add-party', + loadChildren: () => import('./add-party/add-party.module').then( m => m.AddPartyPageModule) + }, + { + path: 'ar-fan-cam', + loadChildren: () => import('./ar-fan-cam/ar-fan-cam.module').then( m => m.ArFanCamPageModule) + }, + { + path: 'quiz', + loadChildren: () => import('./quiz/quiz.module').then( m => m.QuizPageModule) + }, + { + 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) } -]; -@NgModule({ - imports: [ - RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) - ], - exports: [RouterModule] -}) -export class AppRoutingModule {} + +]; +@NgModule({ + imports: [ + RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) + ], + exports: [RouterModule] +}) +export class AppRoutingModule {} diff --git a/src/app/fan-zone/fan-zone-routing.module.ts b/src/app/fan-zone/fan-zone-routing.module.ts new file mode 100644 index 0000000..0b7aebc --- /dev/null +++ b/src/app/fan-zone/fan-zone-routing.module.ts @@ -0,0 +1,17 @@ +import { NgModule } from '@angular/core'; +import { Routes, RouterModule } from '@angular/router'; + +import { FanZonePage } from './fan-zone.page'; + +const routes: Routes = [ + { + path: '', + component: FanZonePage + } +]; + +@NgModule({ + imports: [RouterModule.forChild(routes)], + exports: [RouterModule], +}) +export class FanZonePageRoutingModule {} diff --git a/src/app/fan-zone/fan-zone.module.ts b/src/app/fan-zone/fan-zone.module.ts new file mode 100644 index 0000000..88ba88e --- /dev/null +++ b/src/app/fan-zone/fan-zone.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 { FanZonePageRoutingModule } from './fan-zone-routing.module'; + +import { FanZonePage } from './fan-zone.page'; + +@NgModule({ + imports: [ + CommonModule, + FormsModule, + IonicModule, + FanZonePageRoutingModule + ], + declarations: [FanZonePage] +}) +export class FanZonePageModule {} diff --git a/src/app/fan-zone/fan-zone.page.html b/src/app/fan-zone/fan-zone.page.html new file mode 100644 index 0000000..bc07982 --- /dev/null +++ b/src/app/fan-zone/fan-zone.page.html @@ -0,0 +1,60 @@ + +
+ +
+

+ #FanZone +

+ +

+ Games, Merch & More! +

+
+ +
    +
  • + {{ story.profileImage }} +
    • +
+ +
    +
  • +
    + + + +
    +
    • +
  • +
    + + + +
    +
    • +
  • +
    + + + +
    +
    • +
  • +
    + + + +
    +
    • + +
  • +
    + + + +
    +
    • +
+ +
+ diff --git a/src/app/fan-zone/fan-zone.page.scss b/src/app/fan-zone/fan-zone.page.scss new file mode 100644 index 0000000..b712d0a --- /dev/null +++ b/src/app/fan-zone/fan-zone.page.scss @@ -0,0 +1,72 @@ +@import '../colors'; + +.content-container { + padding-bottom: 50px; +} + +.heading-holder { + padding: 0px 7%; + + .main-header { + background: linear-gradient(90deg, lighten($brand-red, 0%), lighten($brand-red, 10%) 50%); + -webkit-background-clip: text; + background-clip: text; + -webkit-text-fill-color: transparent; + font-size: 2.3rem; + font-weight: 700; + letter-spacing: 1px; + margin: 5% 0%; + } + + p { + color: $blue-grey; + font-size: 1.2rem; + font-weight: 500; + } +} + +.fan-feature-list { + display: flex; + align-items: center; + width: 100%; + padding: 0 5%; + flex-wrap: wrap; + list-style: none; + margin: 0; + + li { + border-radius: 7px; + background-color: rgba(white, 0.1); + box-shadow: 5px 5px 10px -5px darken($dark-blue, 5%); + color: $blue-grey; + width: 25vw; + height: 25vw; + display: flex; + align-items: center; + justify-content: center; + padding: 10px; + text-align: center; + margin: 10px 2vw; + line-height: 1.5; + } + + label { + display: block; + font-size: 0.9rem; + margin-top: 10px; + } + + ion-icon { + margin: 0 auto; + display: block; + font-size: 1.8rem; + } +} + +.stories { + display: inline-block; + + li { + + } +} \ No newline at end of file diff --git a/src/app/fan-zone/fan-zone.page.spec.ts b/src/app/fan-zone/fan-zone.page.spec.ts new file mode 100644 index 0000000..a19726e --- /dev/null +++ b/src/app/fan-zone/fan-zone.page.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { FanZonePage } from './fan-zone.page'; + +describe('FanZonePage', () => { + let component: FanZonePage; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ FanZonePage ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(FanZonePage); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/fan-zone/fan-zone.page.ts b/src/app/fan-zone/fan-zone.page.ts new file mode 100644 index 0000000..651b058 --- /dev/null +++ b/src/app/fan-zone/fan-zone.page.ts @@ -0,0 +1,38 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-fan-zone', + templateUrl: './fan-zone.page.html', + styleUrls: ['./fan-zone.page.scss'], +}) +export class FanZonePage implements OnInit { + + fanStories: Array<{ + profileImage: string, + name: string, + storyImage: string, + likeCount: number, + opened: boolean + }>; + + constructor() { } + + ngOnInit() { + + this.fanStories = [{ + name: 'Amarpreet', + likeCount: 230, + profileImage: 'https://th.bing.com/th/id/OIP.AAvPtBwt0-1npE8vxTgTeQHaHa?pid=Api&rs=1', + storyImage: 'https://www.kxip.in/static-assets/waf-images/43/75/3e/16-9/796-597/sG5PGkS0K7.jpg', + opened: false, + }, { + name: 'Prem', + likeCount: 230, + profileImage: 'https://m.media-amazon.com/images/M/MV5BMmNkMjNkZmEtYWNhYS00ZjI0LTkzZTktZmViODI1NmI0ZmMyXkEyXkFqcGdeQXVyMTM1ODM2MjM@._V1_UY317_CR130,0,214,317_AL_.jpg', + storyImage: 'https://i.pinimg.com/originals/dd/78/64/dd78643b1b2980bcfa83daa2d188fa91.jpg', + opened: false + }] + + } + +} diff --git a/src/app/home-details/home-details.page.scss b/src/app/home-details/home-details.page.scss index 02f803c..74af69f 100644 --- a/src/app/home-details/home-details.page.scss +++ b/src/app/home-details/home-details.page.scss @@ -297,6 +297,7 @@ font-weight: 500; height: 40px; padding: 0 15px; + background-color: white; } button { diff --git a/src/app/live/live.page.html b/src/app/live/live.page.html index 6641f97..c8ea2f6 100644 --- a/src/app/live/live.page.html +++ b/src/app/live/live.page.html @@ -131,17 +131,17 @@ - + 10 - + diff --git a/src/app/quiz/quiz.page.html b/src/app/quiz/quiz.page.html index 0614040..e3ec719 100644 --- a/src/app/quiz/quiz.page.html +++ b/src/app/quiz/quiz.page.html @@ -51,8 +51,8 @@ - diff --git a/src/app/quiz/quiz.page.ts b/src/app/quiz/quiz.page.ts index 736a1e2..8221075 100644 --- a/src/app/quiz/quiz.page.ts +++ b/src/app/quiz/quiz.page.ts @@ -1,5 +1,6 @@ import { Component, OnInit } from '@angular/core'; import * as faker from 'faker'; +import { Location } from '@angular/common'; @Component({ selector: 'app-quiz', @@ -24,7 +25,13 @@ export class QuizPage implements OnInit { }>; showReport: boolean = true; - constructor() { } + constructor( + private location: Location + ) { } + + back() { + this.location.back(); + } ngOnInit() { this.startQuiz(); @@ -43,14 +50,19 @@ export class QuizPage implements OnInit { } }, 1000); - let cardQuestions = []; - - for (let i = 0; i < 4; i += 1) { - cardQuestions.push({ - text: faker.lorem.sentence(), - image: faker.image.abstract() - }); - } + let cardQuestions = [{ + text: 'Is this Chris Gayle?', + image: 'https://i.ebayimg.com/images/g/IP0AAOSwaZVec~9X/s-l300.jpg' + }, { + text: 'KL Rahul has scored 4 consecutive 50s, True or False?', + image: 'https://www.insidesport.co/wp-content/uploads/2019/04/KL-Rahul-1-696x464.jpg' + }, { + text: 'Who is a better Capt?', + image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSUsEaO3_mUEhJ6OGUcu5LS-ZfPi228FSLxng&usqp=CAU' + }, { + text: 'Who will win the next game?', + image: 'https://firstsportz.com/wp-content/uploads/2020/10/WhatsApp-Image-2020-10-25-at-6.12.13-PM-1024x576.jpeg' + }]; this.questions = [{ type: 'MCQ', diff --git a/src/app/quiz/swipe-cards/swipe-cards.component.html b/src/app/quiz/swipe-cards/swipe-cards.component.html index 206e817..6f58862 100644 --- a/src/app/quiz/swipe-cards/swipe-cards.component.html +++ b/src/app/quiz/swipe-cards/swipe-cards.component.html @@ -9,7 +9,7 @@
- - + +
\ No newline at end of file diff --git a/src/app/quiz/swipe-cards/swipe-cards.component.scss b/src/app/quiz/swipe-cards/swipe-cards.component.scss index 52fedf4..b0306f5 100644 --- a/src/app/quiz/swipe-cards/swipe-cards.component.scss +++ b/src/app/quiz/swipe-cards/swipe-cards.component.scss @@ -29,7 +29,7 @@ img { width: 100%; - object-fit: cover; + object-fit: contain; display: block; border-radius: 10px; margin-bottom: 10px; diff --git a/src/app/tabs/tabs-routing.module.ts b/src/app/tabs/tabs-routing.module.ts index c0b2f34..d4fbfb1 100644 --- a/src/app/tabs/tabs-routing.module.ts +++ b/src/app/tabs/tabs-routing.module.ts @@ -38,6 +38,10 @@ 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) } ] }, diff --git a/src/app/tabs/tabs.page.html b/src/app/tabs/tabs.page.html index 84e056d..892eae0 100644 --- a/src/app/tabs/tabs.page.html +++ b/src/app/tabs/tabs.page.html @@ -11,31 +11,10 @@ - - - - - - - - - - - - - - - - + - - - - - -