瀏覽代碼

Real data added + video embeding for Home page

master
kj1352 4 年之前
父節點
當前提交
41bd1197e6
共有 5 個文件被更改,包括 159 次插入67 次删除
  1. +10
    -11
      src/app/home-details/home-details.page.html
  2. +39
    -23
      src/app/home-details/home-details.page.scss
  3. +7
    -1
      src/app/home-details/home-details.page.ts
  4. +54
    -8
      src/app/home/home.page.html
  5. +49
    -24
      src/app/home/home.page.ts

+ 10
- 11
src/app/home-details/home-details.page.html 查看文件

@@ -1,24 +1,23 @@
<ion-content>
<button (click)="back()"
class="close-article-button active">
<ion-icon name="close"></ion-icon>
</button>
<header class="topbar">
<button (click)="back()" class="close-article-button active">
<ion-icon name="close"></ion-icon>
</button>
</header>

<div class="image-holder">
<figure>
<figure *ngIf="!newsDetails.videoLink">
<img [src]="newsDetails.image">
</figure>

<button *ngIf="newsDetails.type === 'VIDEO'">
<ion-icon name="play"></ion-icon>
</button>

<iframe class="video-embed" *ngIf="newsDetails.videoLink" width="100%" height="100%" [src]="getUrl(newsDetails.videoLink)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h4> {{ newsDetails.heading }} </h4>
</div>

<section class="content">
<div class="details">
{{ newsDetails.description }}
<div class="details" [innerHtml]="newsDetails.description">
</div>
</section>



+ 39
- 23
src/app/home-details/home-details.page.scss 查看文件

@@ -1,26 +1,33 @@
.close-article-button {
width: 40px;
height: 40px;
.topbar {
position: fixed;
top: 10px;
right: 10px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(#ffff, 0.5);
border-radius: 50%;
z-index: 3;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s, transform 0.3s;

&.active {
animation: fadeInFromBottom 0.5s forwards;
}
top: 0;
z-index: 999;
display: block;
width: 100%;

ion-icon {
color: white;
font-size: 20px;
.close-article-button {
width: 40px;
height: 40px;
display: flex;
margin-left: auto;
margin-top: 15px;
margin-right: 15px;
align-items: center;
justify-content: center;
background-color: rgba(#ffff, 0.5);
border-radius: 50%;
opacity: 0;
transform: translateY(10px);
transition: opacity 0.3s, transform 0.3s;
&.active {
animation: fadeInFromBottom 0.5s forwards;
}
ion-icon {
color: white;
font-size: 20px;
}
}
}

@@ -43,7 +50,13 @@
height: 40%;
overflow: hidden;

.video-embed {
position: relative;
z-index: 0;
}

h4 {
pointer-events: none;
font-size: 1.5rem;
margin: 0px;
line-height: 1.5;
@@ -52,10 +65,13 @@
padding: 10px 0;
position: absolute;
color: white;
bottom: 45px;
left: 6%;
bottom: 55px;
left: 4%;
width: 70%;
animation: fadeInFromBottom 0.5s forwards;
background-color: rgba(black, 0.2);
padding: 10px 15px;
border-radius: 10px;
}

button {


+ 7
- 1
src/app/home-details/home-details.page.ts 查看文件

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Location } from '@angular/common';
import { INews } from '../home/home.page';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
selector: 'app-home-details',
@@ -14,9 +15,14 @@ export class HomeDetailsPage implements OnInit {

constructor(
private route: ActivatedRoute,
private location: Location
private location: Location,
private dom:DomSanitizer
) { }

getUrl(url) {
return this.dom.bypassSecurityTrustResourceUrl(url);
}

ngOnInit() {
this.newsDetails = JSON.parse(this.route.snapshot.paramMap.get('news'));
}


+ 54
- 8
src/app/home/home.page.html 查看文件

@@ -6,8 +6,10 @@
<section class="segments">
<button [ngClass]="{'active' : selectedTab === 'news'}"
(click)="selectedTab = 'news'"> News </button>
<button [ngClass]="{'active' : selectedTab === 'popular'}"
(click)="selectedTab = 'popular'"> Popular </button>
<button [ngClass]="{'active' : selectedTab === 'videos'}"
(click)="selectedTab = 'videos'"> Videos </button>
<button [ngClass]="{'active' : selectedTab === 'exclusive'}"
(click)="selectedTab = 'exclusive'"> Exclusive </button>
</section>
</div>
@@ -31,8 +33,7 @@
<section class="content">
<h4> {{ news.heading }} </h4>
<div class="details">
{{ news.description }}
<div class="details" [innerHtml]="news.description">
</div>
</section>
@@ -58,8 +59,8 @@
</ion-slide>
</ion-slides>

<ion-slides #slides [options]="slideOpts" *ngIf="selectedTab === 'popular'">
<ion-slide *ngFor="let news of popularData; let i = index">
<ion-slides #slides [options]="slideOpts" *ngIf="selectedTab === 'videos'">
<ion-slide *ngFor="let news of videoData; let i = index">
<div class="image-holder">
<figure>
<img [src]="news.image">
@@ -77,8 +78,53 @@
<section class="content">
<h4> {{ news.heading }} </h4>
<div class="details">
{{ news.description }}
<div class="details" [innerHtml]="news.description">
</div>
</section>
<section class="action-buttons">
<section class="shortcuts">
<button class="wide-button" (click)="news.isLiked = !news.isLiked"
[ngClass]="{'active' : news.isLiked}">
<ion-icon *ngIf="!news.isLiked" name="heart-outline"></ion-icon>
<ion-icon *ngIf="news.isLiked" name="heart"></ion-icon>
<span> {{ news.isLiked ? news.likes + 1 : news.likes }} </span>
</button>
<button>
<ion-icon name="share-social-outline"></ion-icon>
</button>
</section>
<button class="read-more" (click)="showNewsDetails(news);">
<span> More </span>
<ion-icon name="chevron-forward-outline"></ion-icon>
</button>
</section>
</ion-slide>
</ion-slides>


<ion-slides #slides [options]="slideOpts" *ngIf="selectedTab === 'exclusive'">
<ion-slide *ngFor="let news of exclusiveData; let i = index">
<div class="image-holder">
<figure>
<img [src]="news.image">
</figure>
<button *ngIf="news.type === 'VIDEO'">
<ion-icon name="play"></ion-icon>
</button>
<button *ngIf="news.type === 'ARTICLE'">
<ion-icon name="newspaper"></ion-icon>
</button>
</div>
<section class="content">
<h4> {{ news.heading }} </h4>
<div class="details" [innerHtml]="news.description">
</div>
</section>


+ 49
- 24
src/app/home/home.page.ts 查看文件

@@ -12,6 +12,7 @@ export type INews = {
likes: number,
isBookmarked: boolean,
isLiked: boolean,
videoLink?: string,
comments: Array<{
user: string,
comment: string,
@@ -29,7 +30,7 @@ export type INews = {
export class HomePage implements OnInit {
@ViewChild('slides') slides: IonSlides;
selectedTab: string = 'news';
selectedTab: 'news' | 'videos' | 'exclusive' = 'news';

slideOpts = {
slidesPerView: 1.5,
@@ -41,8 +42,9 @@ export class HomePage implements OnInit {
};

newsData: Array<INews> = [];
videoData: Array<INews> = [];
exclusiveData: Array<INews> = [];

popularData: Array<INews> = [];
showChat: boolean = false;

constructor(
@@ -53,17 +55,14 @@ export class HomePage implements OnInit {
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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ab qui, incidunt illo dolore laboriosam sapiente deserunt officiis u
santium quia tempore totam repellat amet debitis adipisci deserunt iste.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ab qui, incidunt illo dolore laboriosam sapiente deserunt officiis u
santium quia tempore totam repellat amet debitis adipisci deserunt iste.`,
type: 'VIDEO',
image: 'https://www.kxip.in/static-assets/waf-images/c3/b2/7d/16-9/DWWfHZsFg1.jpg',
heading: 'Power packed Pooran claims season best score in 2021 T10 League',
description: `<strong> The southpaw scored 89 off just 26 balls to lead from the front in the T10 League. </strong> <br> <br>
Nicholas Pooran proved to be head and shoulders above the rest on Sunday in the 2021 T10 League, as a glitzy knock of 89 off just 26 balls helped his team Northern Warriors shrug aside the Bangla Tigers. The win has put Pooran’s team top of their group after three games, in good stead to make it to the qualifiers. <br> <br>
Batting first of the night, the Northern Warriors lost opener Waseem Muhammad in just the second over. What followed however was complete dominance from the Warriors batsmen, as Pooran and Lendl Simmons stitched together a 122 run partnership. The Kings XI Punjab batsman lit up the Abu Dhabi night sky in a spectacular display of power hitting.<br> <br>
Pooran smashed 12 sixes and three fours in that innings, as he went all guns blazing against the Bangla Tigers bowlers. The 25-year-old showed his intent right from the get go, getting a six over square leg off just his fourth ball. He carried on from that, targeting Qais Ahmed’s first over to get three sixes and a four from that.
`,
type: 'ARTICLE',
likes: 10,
isLiked: false,
isBookmarked: false,
@@ -80,9 +79,12 @@ export class HomePage implements OnInit {
}]
}, {
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.`,
image: 'https://www.kxip.in/static-assets/waf-images/1b/aa/00/16-9/Xv9C55Ux0g.jpeg',
heading: '16 players retained by Kings XI Punjab for IPL 2021',
description: `<strong> The franchise have decided to release nine players ahead of the auction slated to be held next month. </strong> <br> <br>
Kings XI Punjab have announced their list of retained players for the 2021 Dream11 Indian Premier League, with 16 cricketers making that cut. The list sees the bulk of their core team retained as last season’s captain KL Rahul, opening partner Mayank Agarwal and explosive Caribbean duo of Chris Gayle and Nicholas Pooran have all been retained. <br> <br>
<strong> Retained players </strong>: KL Rahul, Chris Gayle, Mayank Agarwal, Nicholas Pooran, Mandeep Singh, Sarfaraz Khan, Deepak Hooda, Prabhsimran Singh, Mohammed Shami, Chris Jordan, Darshan Nalkande, Ravi Bishnoi, Murugan Ashwin, Arshdeep Singh, Harpreet Brar, Ishan Porel <br> <br>
<strong> Released players </strong>: Glenn Maxwell, Karun Nair, Hardus Viljoen, Jagadeesha Suchith, Mujeeb ur Rahman, Sheldon Cottrell, Jimmy Neesham, Krishnappa Gowtham, Tajinder Singh.`,
type: 'ARTICLE',
isLiked: false,
isBookmarked: false,
@@ -90,22 +92,27 @@ export class HomePage implements OnInit {
comments: []
}];

this.popularData = [{
this.videoData = [{
id: 1,
image: 'https://d1u4oo4rb13yy8.cloudfront.net/book/87643-hsirtkldjx-1524204429.jpg',
heading: 'Secret Behind C.Gayle\'s fitness',
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.`,
image: 'https://i.ytimg.com/vi/4NU0HtDakgo/hqdefault.jpg?sqp=-oaymwEcCPYBEIoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLBjqUDuxgu-GEduxPmXl21pi_7GqQ',
heading: 'Head Coach Anil Kumble on the players retained!',
description: `"The plan was to retain the core" - Head Coach Anil Kumble on the players retained, released and more... 🗣 <br> <br>
<strong> #IPL2021​ #SaddaPunjab </strong>`,
type: 'VIDEO',
videoLink: 'https://www.youtube.com/embed/4NU0HtDakgo',
isLiked: false,
isBookmarked: false,
likes: 1108,
comments: []
}, {
id: 2,
image: 'https://www.insidesport.co/wp-content/uploads/2020/08/WhatsApp-Image-2020-08-15-at-10.14.55-AM.jpeg',
heading: 'KXIP in UAE',
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.`,
image: 'https://i.ytimg.com/vi/0WyRVn1rXLM/hqdefault.jpg?sqp=-oaymwEcCPYBEIoBSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAiUlof7rRoAz1tuIwAUjfshSu1Gw',
heading: 'Dart Challenge with the Kings!',
description: `Bullseye with the Kings! 🎯 <br> <br>
PS: Don't miss the end 😋 <br> <br>
<strong> #SaddaPunjab​ #KXIP </strong>`,
type: 'VIDEO',
videoLink: 'https://www.youtube.com/embed/0WyRVn1rXLM',
isLiked: true,
isBookmarked: false,
likes: 2101,
@@ -115,7 +122,25 @@ export class HomePage implements OnInit {
likes: 2,
isLiked: true,
}]
}];
}];
this.exclusiveData = [{
id: 1,
image: 'https://www.kxip.in/static-assets/waf-images/b2/1a/6a/16-9/d7diD3xdHN.jpg',
heading: 'What makes a good fielder, explained by Jonty Rhodes',
description: `<strong> KXIP’s fielding coach reveals the one tip that can make anyone a better fielder.</strong> <br> <br>
Kings XI Punjab were electric on the field last night, as they managed to defend a meagre total of 127 runs against Sunrisers Hyderabad in the 2020 Dream11 Indian Premier League. KL Rahul’s side managed to hold on to eight catches in the outfield in that game, and were sharp with their ground fielding as well, to give the franchise a memorable win and keep their hopes alive to make it to the playoffs. <br> <br>
Kings XI Punjab’s fielding coach Jonty Rhodes has so far been reluctant to take any credit for his side performing so admirably on the field, but the talisman former South African cricketer’s influence surely seems to have rubbed off on the team. In an exclusive interview with KXIP.in, Rhodes- who was an extraordinary fielder himself in his playing days, revealed what makes a good fielder and what probably has helped KXIP be so dominant in the field.<br> <br>
“Everyone is built differently, everyone’s got different roles in the team, but the one attribute that makes anyone a better fielder is expecting every ball to come to you,” reveals Jonty Rhodes. “It can make you a better fielder even without practicing catching or throwing.” <br> <br>
“Commentators back then used to talk about my good ‘anticipation’ while playing. And I didn’t have faster reflexes than the others, or I would have been a much better batsman. So it wasn’t a case of me seeing the ball earlier, I just expected each game to come to me. I was ready before the ball was hit,” added KXIP’s fielding coach. <br><br>
“It's only 120 balls, so it is very easy to switch on and switch off, but if you are expecting every ball to come to you no matter where you are fielding, you will be an excellent fielder,” clarified Rhodes.
`,
type: 'ARTICLE',
isLiked: false,
isBookmarked: false,
likes: 1108,
comments: []
}];
}

ionViewDidEnter() {


Loading…
取消
儲存