diff --git a/src/app/components/player-details/player-details.component.html b/src/app/components/player-details/player-details.component.html new file mode 100644 index 0000000..b7ecd1b --- /dev/null +++ b/src/app/components/player-details/player-details.component.html @@ -0,0 +1,87 @@ +
+
+ +
+
+
+ +
+
+ +
+
+ +

KL Rahul

+ +
Batsman,
Wicket Keeper
+
+ +
+ +
+ +
+ + + +
+
+

Now discussing

+
+ + +
+ +
+
ABOUT
+ +
+
\ No newline at end of file diff --git a/src/app/components/player-details/player-details.component.scss b/src/app/components/player-details/player-details.component.scss new file mode 100644 index 0000000..89ac562 --- /dev/null +++ b/src/app/components/player-details/player-details.component.scss @@ -0,0 +1,314 @@ +$dark-blue: #161e2d; +$blue-grey: #949599; + +.container { + background-color: $dark-blue; + padding-top: 40px; +} + +.player-primary-data { + display: flex; + width: 95%; + padding-left: 5%; + position: relative; + + &::before { + content: ''; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-image: url('../../../assets/home-team/KXIP-lion-white.svg'); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + opacity: 0.1; + } + + .details { + width: 50%; + position: relative; + } + + .teams-holder { + position: relative; + z-index: 0; + display: flex; + justify-content: flex-start; + + figure { + width: 50px; + height: 50px; + border-radius: 50%; + position: relative; + z-index: 1; + margin: 0; + display: block; + overflow: hidden; + box-shadow: 0px 0px 5px $dark-blue; + + &:nth-child(2) { + z-index: 0; + transform: translateX(-10px); + } + + img { + width: 100%; + height: 100%; + display: block; + transform: scale(1.5); + } + } + } + + .name { + font-size: 2rem; + font-weight: 700; + letter-spacing: 1px; + color: white; + } + + .role { + position: absolute; + bottom: 60px; + left: 0; + color: $blue-grey; + font-size: 1rem; + display: flex; + align-items: center; + font-weight: 500; + line-height: 1.5; + + ion-icon { + margin-right: 10px; + font-size: 2rem; + vertical-align: middle; + color: var(--brand-red); + } + } + + .player-image { + width: 50%; + display: block; + height: 40vh; + + img { + display: block; + object-fit: contain; + width: 100%; + height: 100%; + object-position: bottom; + } + } +} + +.statistics { + display: flex; + width: 100%; + padding: 0 5%; + list-style: none; + margin: 0 auto -30px auto; + justify-content: space-between; + transform: translateY(-50px); + z-index: 1; + position: relative; + background-color: rgba($dark-blue, 0.8); + box-shadow: 0px -10px 10px rgba($dark-blue, 0.8); + + li { + width: 27vw; + height: 27vw; + background-color: rgba($dark-blue, 0.8); + border: 1px solid rgba($blue-grey, 0.3); + display: flex; + border-radius: 10px; + color: white; + align-items: flex-end; + justify-content: space-between; + padding: 10px; + overflow: hidden; + position: relative; + + &::before { + content: ''; + position: absolute; + left: 0; + top: 0; + background-color: rgba($blue-grey, 0.1); + width: 100%; + height: 100%; + } + } + + label { + font-weight: 500; + font-size: 0.8rem; + align-self: flex-start; + width: 50%; + overflow: visible; + white-space: nowrap; + position: relative; + } + + h5 { + width: 50%; + white-space: nowrap; + overflow: visible; + margin: 0; + font-weight: 700; + font-size: 1.8rem; + align-self: flex-end; + text-align: right; + position: relative; + } +} + +.news { + width: 90%; + margin: 0 auto 20px auto; + + header { + display: flex; + align-items: center; + justify-content: flex-start; + + h4 { + color: #148dfc; + font-size: 0.8rem; + font-weight: 500; + letter-spacing: 0.5px; + } + + span { + margin-right: 10px; + border: 7px solid #148dfc; + border-radius: 50%; + height: 25px; + width: 25px; + background-color: $dark-blue; + } + } + + ul { + list-style: none; + padding: 0; + background-color: lighten($dark-blue, 5%); + box-shadow: 0px 0px 10px darken($dark-blue, 3%); + border-radius: 10px; + overflow: hidden; + + li { + width: 90%; + margin: 0 auto; + padding: 15px 0px; + display: flex; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid rgba($blue-grey, 0.2); + + &:last-child { + border-bottom: none; + } + } + + label { + width: 40px; + text-align: center; + color: white; + font-size: 0.8rem; + display: block; + line-height: 1.3; + + span { + color: $blue-grey; + font-size: 0.8rem; + display: block; + } + } + + p { + width: calc(100% - 100px); + font-size: 0.8rem; + color: white; + font-weight: 500; + line-height: 1.5; + margin: 0; + } + + .share-button { + width: 30px; + height: 30px; + border: 1px solid $blue-grey; + background-color: rgba($blue-grey, 0.1); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-left: 10px; + + ion-icon { + color: $blue-grey; + font-size: 15px; + } + } + } +} + +.about { + background-color: lighten($dark-blue, 5%); + box-shadow: 0px 0px 10px darken($dark-blue, 3%); + border-radius: 10px; + overflow: hidden; + width: 90%; + margin: 0 auto 40px auto; + padding: 0px 0px 5px 0px; + + header { + font-size: 1rem; + font-weight: 500; + color: white; + padding: 15px 5%; + border-bottom: 1px solid rgba($blue-grey, 0.2); + margin: 0; + } + + ul { + list-style: none; + padding: 0; + margin: 0 auto; + width: 90%; + } + + li { + padding: 10px 5px; + display: flex; + width: 100%; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid rgba($blue-grey, 0.2); + text-align: left; + + &:last-child { + border-bottom: none; + } + } + + label { + color: $blue-grey; + font-size: 0.7rem; + display: block; + line-height: 1.3; + width: 100px; + } + + p { + width: calc(100% - 100px); + font-size: 0.9rem; + color: white; + font-weight: 500; + line-height: 1.5; + margin: 0; + opacity: 0.8; + } +} \ No newline at end of file diff --git a/src/app/components/player-details/player-details.component.spec.ts b/src/app/components/player-details/player-details.component.spec.ts new file mode 100644 index 0000000..08937ba --- /dev/null +++ b/src/app/components/player-details/player-details.component.spec.ts @@ -0,0 +1,24 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { IonicModule } from '@ionic/angular'; + +import { PlayerDetailsComponent } from './player-details.component'; + +describe('PlayerDetailsComponent', () => { + let component: PlayerDetailsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PlayerDetailsComponent ], + imports: [IonicModule.forRoot()] + }).compileComponents(); + + fixture = TestBed.createComponent(PlayerDetailsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + })); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/player-details/player-details.component.ts b/src/app/components/player-details/player-details.component.ts new file mode 100644 index 0000000..4fd6c8b --- /dev/null +++ b/src/app/components/player-details/player-details.component.ts @@ -0,0 +1,14 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-player-details', + templateUrl: './player-details.component.html', + styleUrls: ['./player-details.component.scss'], +}) +export class PlayerDetailsComponent implements OnInit { + + constructor() { } + + ngOnInit() {} + +} diff --git a/src/app/live/live.page.html b/src/app/live/live.page.html index 3f31b7a..649db7d 100644 --- a/src/app/live/live.page.html +++ b/src/app/live/live.page.html @@ -34,17 +34,17 @@ diff --git a/src/app/match-details/match-details.module.ts b/src/app/match-details/match-details.module.ts index ee35715..615742a 100644 --- a/src/app/match-details/match-details.module.ts +++ b/src/app/match-details/match-details.module.ts @@ -7,6 +7,7 @@ import { IonicModule } from '@ionic/angular'; import { MatchDetailsPageRoutingModule } from './match-details-routing.module'; import { MatchDetailsPage } from './match-details.page'; +import { PlayerDetailsComponent } from '../components/player-details/player-details.component'; @NgModule({ imports: [ @@ -15,6 +16,6 @@ import { MatchDetailsPage } from './match-details.page'; IonicModule, MatchDetailsPageRoutingModule ], - declarations: [MatchDetailsPage] + declarations: [MatchDetailsPage, PlayerDetailsComponent] }) export class MatchDetailsPageModule {} diff --git a/src/app/match-details/match-details.page.html b/src/app/match-details/match-details.page.html index 4580933..b80f04d 100644 --- a/src/app/match-details/match-details.page.html +++ b/src/app/match-details/match-details.page.html @@ -1,7 +1,7 @@
-
+
@@ -11,6 +11,25 @@
-
+
+
+ +
+ +
    +
  • + +
    #{{ player.jersey }} {{ player.name }}
    +
    • +
+ +
+ +
+ +
+ +
diff --git a/src/app/match-details/match-details.page.scss b/src/app/match-details/match-details.page.scss index fdbc58f..b768d89 100644 --- a/src/app/match-details/match-details.page.scss +++ b/src/app/match-details/match-details.page.scss @@ -61,4 +61,68 @@ ion-content { } } +} + +.field-container { + position: sticky; + position: -webkit-sticky; + left: 0; + margin-top: 65px; + top: 65px; + height: calc(100vh - 65px); + z-index: 0; +} + +.field-image { + display: block; + width: 100%; + height: 100%; + z-index: 0; + position: absolute; + left: 0; + top: 0; + + img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center; + } +} + +.field-setting { + position: relative; + z-index: 1; + list-style: none; + padding: 0; + margin: 0; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + + li { + position: absolute; + + img { + width: 30px; + height: 30px; + } + + h5 { + font-weight: 500; + letter-spacing: 0.5px; + color: $dark-blue; + font-size: 14px; + } + } +} + +.player-details { + position: relative; + z-index: 1; + border-radius: 10px; + overflow: hidden; + box-shadow: 0px 0px 5px $dark-blue; } \ No newline at end of file diff --git a/src/app/match-details/match-details.page.ts b/src/app/match-details/match-details.page.ts index 74d7842..afde09f 100644 --- a/src/app/match-details/match-details.page.ts +++ b/src/app/match-details/match-details.page.ts @@ -1,9 +1,15 @@ import { Component, OnInit } from '@angular/core'; +import { Location } from '@angular/common'; type IPlayer = { name: string, image: string, + jersey: string, + position: { + x: number, + y: number + } }; type ITeam = { @@ -12,11 +18,6 @@ type ITeam = { players: Array }; -type IStadium = { - name: string, - topView: string, - sideView: string, -}; @Component({ selector: 'app-match-details', @@ -24,10 +25,49 @@ type IStadium = { styleUrls: ['./match-details.page.scss'], }) export class MatchDetailsPage implements OnInit { + isPlayerSelected: string = ''; - constructor() { } + matchData: { + home: ITeam, + away: ITeam, + }; + + constructor( + private location: Location + ) { } ngOnInit() { + this.matchData = { + home : { + name: 'KXIP', + image: 'assets/home-team/KXIP.svg', + players: [] + }, + away: { + name: 'MI', + image: 'assets/logos/mi.svg', + players: [] + } + }; + + var theta = [0, Math.PI / 6, Math.PI / 4, Math.PI / 3, Math.PI / 2, 2 * (Math.PI / 3), 3 * (Math.PI / 4), 5 * (Math.PI / 6), Math.PI, 7 * (Math.PI / 6), 5 * (Math.PI / 4), 4 * (Math.PI / 3), 3 * (Math.PI / 2), 5 * (Math.PI / 3), 7 * (Math.PI / 4), 11 * (Math.PI / 6)]; + + + // for (let i = 1; i < 12; i += 1) { + // this.matchData.home.players.push({ + // name: 'Player ' + i.toString(), + // image: 'assets/home-team/roster/' + i.toString() + '.png', + // jersey: i.toString(), + // position: { + // x: Math.round(radius * (Math.cos(theta[i]))), + // y: i*10, + // } + // }); + // } + } + + back() { + this.location.back(); } } diff --git a/src/app/player-stats/player-stats.module.ts b/src/app/player-stats/player-stats.module.ts index 84daa75..0401db4 100644 --- a/src/app/player-stats/player-stats.module.ts +++ b/src/app/player-stats/player-stats.module.ts @@ -8,6 +8,8 @@ import { PlayerStatsPageRoutingModule } from './player-stats-routing.module'; import { PlayerStatsPage } from './player-stats.page'; +import { PlayerDetailsComponent } from '../components/player-details/player-details.component'; + @NgModule({ imports: [ CommonModule, @@ -15,6 +17,6 @@ import { PlayerStatsPage } from './player-stats.page'; IonicModule, PlayerStatsPageRoutingModule ], - declarations: [PlayerStatsPage] + declarations: [PlayerStatsPage, PlayerDetailsComponent] }) export class PlayerStatsPageModule {} diff --git a/src/app/player-stats/player-stats.page.html b/src/app/player-stats/player-stats.page.html index 59a5b72..cf23651 100644 --- a/src/app/player-stats/player-stats.page.html +++ b/src/app/player-stats/player-stats.page.html @@ -2,100 +2,16 @@
- +
-
- +
+
-
- -
-
-
- -
-
- -
-
- -

KL Rahul

- -
Batsman,
Wicket Keeper
-
- -
- -
- -
- -
    -
  • - -
    26
    -
    • - -
  • - -
    64
    -
    • - -
  • - -
    18
    -
    • -
- -
-
-

Now discussing

-
- -
    -
  • - -

    - KL Rahul wins the player of the season 2018 confirms BCCI -

    - -
    • - -
  • - -

    - KL Rahul planning to head back to RCB -

    - -
    • -
-
- -
-
ABOUT
-
    -
  • - -

    KL Rahul

    -
    • -
  • - -

    26

    -
    • -
  • - -

    Mangaluru

    -
    • -
  • - -

    43.64

    -
    • -
-
+
diff --git a/src/app/player-stats/player-stats.page.scss b/src/app/player-stats/player-stats.page.scss index 34d821e..a42fb3b 100644 --- a/src/app/player-stats/player-stats.page.scss +++ b/src/app/player-stats/player-stats.page.scss @@ -62,312 +62,3 @@ ion-content { } } - - -.player-primary-data { - display: flex; - width: 95%; - padding-left: 5%; - position: relative; - margin-top: 90px; - - &::before { - content: ''; - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - background-image: url('../../assets/home-team/KXIP-lion-white.svg'); - background-size: contain; - background-position: center; - background-repeat: no-repeat; - opacity: 0.1; - } - - .details { - width: 50%; - position: relative; - } - - .teams-holder { - position: relative; - z-index: 0; - display: flex; - justify-content: flex-start; - - figure { - width: 50px; - height: 50px; - border-radius: 50%; - position: relative; - z-index: 1; - margin: 0; - display: block; - overflow: hidden; - box-shadow: 0px 0px 5px $dark-blue; - - &:nth-child(2) { - z-index: 0; - transform: translateX(-10px); - } - - img { - width: 100%; - height: 100%; - display: block; - transform: scale(1.5); - } - } - } - - .name { - font-size: 2rem; - font-weight: 700; - letter-spacing: 1px; - color: white; - } - - .role { - position: absolute; - bottom: 60px; - left: 0; - color: $blue-grey; - font-size: 1rem; - display: flex; - align-items: center; - font-weight: 500; - line-height: 1.5; - - ion-icon { - margin-right: 10px; - font-size: 2rem; - vertical-align: middle; - color: var(--brand-red); - } - } - - .player-image { - width: 50%; - display: block; - height: 40vh; - - img { - display: block; - object-fit: contain; - width: 100%; - height: 100%; - object-position: bottom; - } - } -} - -.statistics { - display: flex; - width: 100%; - padding: 0 5%; - list-style: none; - margin: 0 auto -30px auto; - justify-content: space-between; - transform: translateY(-50px); - z-index: 1; - position: relative; - background-color: rgba($dark-blue, 0.8); - box-shadow: 0px -10px 10px rgba($dark-blue, 0.8); - - li { - width: 27vw; - height: 27vw; - background-color: rgba($dark-blue, 0.8); - border: 1px solid rgba($blue-grey, 0.3); - display: flex; - border-radius: 10px; - color: white; - align-items: flex-end; - justify-content: space-between; - padding: 10px; - overflow: hidden; - position: relative; - - &::before { - content: ''; - position: absolute; - left: 0; - top: 0; - background-color: rgba($blue-grey, 0.1); - width: 100%; - height: 100%; - } - } - - label { - font-weight: 500; - font-size: 0.8rem; - align-self: flex-start; - width: 50%; - overflow: visible; - white-space: nowrap; - position: relative; - } - - h5 { - width: 50%; - white-space: nowrap; - overflow: visible; - margin: 0; - font-weight: 700; - font-size: 1.8rem; - align-self: flex-end; - text-align: right; - position: relative; - } -} - -.news { - width: 90%; - margin: 0 auto 20px auto; - - header { - display: flex; - align-items: center; - justify-content: flex-start; - - h4 { - color: #148dfc; - font-size: 0.8rem; - font-weight: 500; - letter-spacing: 0.5px; - } - - span { - margin-right: 10px; - border: 7px solid #148dfc; - border-radius: 50%; - height: 25px; - width: 25px; - background-color: $dark-blue; - } - } - - ul { - list-style: none; - padding: 0; - background-color: lighten($dark-blue, 5%); - box-shadow: 0px 0px 10px darken($dark-blue, 3%); - border-radius: 10px; - overflow: hidden; - - li { - width: 90%; - margin: 0 auto; - padding: 15px 0px; - display: flex; - align-items: center; - justify-content: space-between; - border-bottom: 1px solid rgba($blue-grey, 0.2); - - &:last-child { - border-bottom: none; - } - } - - label { - width: 40px; - text-align: center; - color: white; - font-size: 0.8rem; - display: block; - line-height: 1.3; - - span { - color: $blue-grey; - font-size: 0.8rem; - display: block; - } - } - - p { - width: calc(100% - 100px); - font-size: 0.8rem; - color: white; - font-weight: 500; - line-height: 1.5; - margin: 0; - } - - .share-button { - width: 30px; - height: 30px; - border: 1px solid $blue-grey; - background-color: rgba($blue-grey, 0.1); - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - margin-left: 10px; - - ion-icon { - color: $blue-grey; - font-size: 15px; - } - } - } -} - -.about { - background-color: lighten($dark-blue, 5%); - box-shadow: 0px 0px 10px darken($dark-blue, 3%); - border-radius: 10px; - overflow: hidden; - width: 90%; - margin: 0 auto 40px auto; - padding: 0px 0px 5px 0px; - - header { - font-size: 1rem; - font-weight: 500; - color: white; - padding: 15px 5%; - border-bottom: 1px solid rgba($blue-grey, 0.2); - margin: 0; - } - - ul { - list-style: none; - padding: 0; - margin: 0 auto; - width: 90%; - } - - li { - padding: 10px 5px; - display: flex; - width: 100%; - align-items: center; - justify-content: space-between; - border-bottom: 1px solid rgba($blue-grey, 0.2); - text-align: left; - - &:last-child { - border-bottom: none; - } - } - - label { - color: $blue-grey; - font-size: 0.7rem; - display: block; - line-height: 1.3; - width: 100px; - } - - p { - width: calc(100% - 100px); - font-size: 0.9rem; - color: white; - font-weight: 500; - line-height: 1.5; - margin: 0; - opacity: 0.8; - } -} \ No newline at end of file diff --git a/src/app/player-stats/player-stats.page.ts b/src/app/player-stats/player-stats.page.ts index 1bf3687..a19ef90 100644 --- a/src/app/player-stats/player-stats.page.ts +++ b/src/app/player-stats/player-stats.page.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { Location } from '@angular/common'; @Component({ selector: 'app-player-stats', @@ -7,9 +8,15 @@ import { Component, OnInit } from '@angular/core'; }) export class PlayerStatsPage implements OnInit { - constructor() { } + constructor( + private location: Location + ) { } ngOnInit() { } + back() { + this.location.back(); + } + } diff --git a/src/assets/home-team/roster/1.png b/src/assets/home-team/roster/1.png new file mode 100644 index 0000000..b3af313 Binary files /dev/null and b/src/assets/home-team/roster/1.png differ diff --git a/src/assets/home-team/roster/10.png b/src/assets/home-team/roster/10.png new file mode 100644 index 0000000..826befa Binary files /dev/null and b/src/assets/home-team/roster/10.png differ diff --git a/src/assets/home-team/roster/11.png b/src/assets/home-team/roster/11.png new file mode 100644 index 0000000..6f1acff Binary files /dev/null and b/src/assets/home-team/roster/11.png differ diff --git a/src/assets/home-team/roster/12.png b/src/assets/home-team/roster/12.png new file mode 100644 index 0000000..5c0f633 Binary files /dev/null and b/src/assets/home-team/roster/12.png differ diff --git a/src/assets/home-team/roster/2.png b/src/assets/home-team/roster/2.png new file mode 100644 index 0000000..b4e513f Binary files /dev/null and b/src/assets/home-team/roster/2.png differ diff --git a/src/assets/home-team/roster/3.png b/src/assets/home-team/roster/3.png new file mode 100644 index 0000000..8e6bed6 Binary files /dev/null and b/src/assets/home-team/roster/3.png differ diff --git a/src/assets/home-team/roster/4.png b/src/assets/home-team/roster/4.png new file mode 100644 index 0000000..3479ac3 Binary files /dev/null and b/src/assets/home-team/roster/4.png differ diff --git a/src/assets/home-team/roster/5.png b/src/assets/home-team/roster/5.png new file mode 100644 index 0000000..f65f3ba Binary files /dev/null and b/src/assets/home-team/roster/5.png differ diff --git a/src/assets/home-team/roster/6.png b/src/assets/home-team/roster/6.png new file mode 100644 index 0000000..2376011 Binary files /dev/null and b/src/assets/home-team/roster/6.png differ diff --git a/src/assets/home-team/roster/7.png b/src/assets/home-team/roster/7.png new file mode 100644 index 0000000..941a721 Binary files /dev/null and b/src/assets/home-team/roster/7.png differ diff --git a/src/assets/home-team/roster/8.png b/src/assets/home-team/roster/8.png new file mode 100644 index 0000000..f9bb193 Binary files /dev/null and b/src/assets/home-team/roster/8.png differ diff --git a/src/assets/home-team/roster/9.png b/src/assets/home-team/roster/9.png new file mode 100644 index 0000000..8c4b2d9 Binary files /dev/null and b/src/assets/home-team/roster/9.png differ