diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html index 504ec4c..c5f1d23 100644 --- a/src/app/home/home.page.html +++ b/src/app/home/home.page.html @@ -8,15 +8,27 @@ (click)="selectedTab = 'videos'"> Videos - - -

Slide 1

-
- -

Slide 2

-
- -

Slide 3

+ + + +
+
+ +
+
+ +

{{ news.heading }}

+ +

+ {{ news.description }} +

+ +
+ +
+
diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss index ca96378..3c39f66 100644 --- a/src/app/home/home.page.scss +++ b/src/app/home/home.page.scss @@ -44,4 +44,28 @@ ion-content { } } } +} + +ion-slides { + margin: 40px 0px; + + ion-slide { + display: block; + background-color: white; + } + + .image-holder { + position: relative; + + figure { + margin: 0; + display: block; + width: 100%; + + img { + display: block; + width: 100%; + } + } + } } \ No newline at end of file diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts index afaa3bb..8db6c2a 100644 --- a/src/app/home/home.page.ts +++ b/src/app/home/home.page.ts @@ -8,9 +8,65 @@ import { Component, OnInit } from '@angular/core'; export class HomePage implements OnInit { selectedTab: string = 'news'; + slideOpts = { }; + + newsData: Array<{ + id: string | number, + image: string, + heading: string, + description: string, + type: 'VIDEO' | 'ARTICLE', + likes: number, + isBookmarked: boolean, + isLiked: boolean, + comments: Array<{ + user: string, + comment: string, + likes: number + }>, + }> = []; + constructor() { } ngOnInit() { + + this.newsData = [{ + id: 1, + image: 'https://s3.india.com/wp-content/uploads/2020/10/Mayank-Agarwal-celebrates-Kings-XI-Punjabs-win-over-Mumbai-Indians-in-match-37-of-Dream11-IPL-2020-in-Dubai%C2%A9KXIP-Twitter.jpg', + heading: 'KXIP beat MI by 3 Wickets', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ab qui, incidunt illo dolore laboriosam sapiente deserunt officiis ullam. Explicabo accusantium quia tempore totam repellat amet debitis adipisci deserunt iste.', + type: 'VIDEO', + likes: 10, + isLiked: false, + isBookmarked: false, + comments: [{ + user: 'kxipFan', + comment: 'Yay!', + likes: 2, + }, { + user: 'SehwagFan', + comment: 'finally!', + likes: 5, + }] + }, { + id: 2, + image: 'https://www.ak4tsay1.com/wp-content/uploads/2020/02/Kings-XI-Punjab-KXIP-Strengths-and-Weakness-for-IPL-2020-800x445.jpg', + heading: 'KL Rahul scores fastest 100', + description: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ab qui, incidunt illo dolore laboriosam sapiente deserunt officiis ullam. Explicabo accusantium quia tempore totam repellat amet debitis adipisci deserunt iste.', + type: 'ARTICLE', + isLiked: false, + isBookmarked: false, + likes: 308, + comments: [] + }]; + + this.slideOpts = { + slidesPerView: 1.3, + spaceBetween: 30, + slidesOffsetBefore: 30, + slidesOffsetAfter: 30, + } + } }