diff --git a/src/app/home-details/home-details.page.html b/src/app/home-details/home-details.page.html index 5b7afcb..d473de2 100644 --- a/src/app/home-details/home-details.page.html +++ b/src/app/home-details/home-details.page.html @@ -1,5 +1,4 @@ - + + + + + + diff --git a/src/app/home-details/home-details.page.scss b/src/app/home-details/home-details.page.scss index 4764b74..ab7e5f5 100644 --- a/src/app/home-details/home-details.page.scss +++ b/src/app/home-details/home-details.page.scss @@ -1,3 +1,5 @@ +@import '../colors'; + .topbar { position: fixed; top: 0; @@ -139,6 +141,20 @@ border-width: 0px; box-shadow: 0px 0px 15px rgba(var(--light-grey-rgb), 0.3); animation: showUpContent 0.5s forwards; + + figure { + border-radius: 10px; + overflow: hidden; + margin-bottom: 20px; + display: block; + + img { + display: block; + width: 100%; + height: 100%; + object-fit: cover; + } + } } @keyframes showUpContent { @@ -158,173 +174,15 @@ color: var(--light-grey); overflow: hidden; transition: opacity 0.1s; -} - - -.action-buttons { - display: flex; - padding: 0 3%; - z-index: 1; - margin: 0 auto 20px; - width: 90%; - background-color: white; - border-radius: 10px; - position: sticky; - position: -webkit-sticky; - bottom: 10px; - z-index: 2; - box-shadow: 0px 0px 15px rgba(var(--light-grey-rgb), 0.3); - justify-content: center; - height: 60px; - - .shortcuts { - display: flex; - align-items: center; - height: 100%; - width: 50%; - - button { - margin-right: 5px; - border-radius: 50%; - background-color: rgba(var(--light-grey-rgb), 0.1); - margin: 0 auto; - width: 40px; - height: 40px; - - &.wide-button { - width: auto; - border-radius: 5px; - padding: 0 10px; - } - - &.active { - ion-icon, span { - color: var(--brand-red); - } - } - - span { - vertical-align: middle; - color: var(--light-grey); - } - - ion-icon { - vertical-align: middle; - color: var(--brand-black); - font-size: 1.2rem; - } - } - } -} - -.comments { - background-color: white; - width: 90%; - position: relative; - box-shadow: 0px 0px 0px var(--light-grey); - z-index: 1; - margin: -20px auto 20px; - border-radius: 10px; - box-shadow: 0px 0px 15px rgba(var(--light-grey-rgb), 0.3); - border-radius: 10px; - overflow: hidden; - opacity: 0; - animation: fadeInFromBottom 0.5s forwards; - header { - font-size: 1.1rem; - margin: 0px; - line-height: 1.5; - font-weight: 500; - color: var(--brand-black); - transition: opacity 0.1s; - background-color: white; - padding: 10px 5%; + p { + margin-bottom: 20px; } +} - ul { - list-style: none; - padding: 0; - margin: 0; - - li { - padding: 5px 5% 10px; - border-top: 1px solid rgba(var(--light-grey-rgb), 0.3); - line-height: 1.5; - } - - label { - font-size: 1rem; - font-weight: 500; - letter-spacing: 1px; - color: rgba(var(--brand-red-rgb), 0.8); - } - - p { - margin: 3px 0; - font-size: 1rem; - font-weight: 400; - color: var(--light-grey); - } - - button { - background-color: #f3f3f3; - margin-right: 5px; - height: 30px; - width: auto; - border-radius: 5px; - padding: 0 5px; - - span { - vertical-align: middle; - color: var(--light-grey); - } - - ion-icon { - vertical-align: middle; - color: var(--brand-black); - font-size: 1rem; - } - - - &.active { - ion-icon, span { - color: var(--brand-red); - } - } - } - - .input-holder { - display: flex; - width: 100%; - height: 70px; - align-items: center; - - input { - width: calc(100% - 80px); - margin: 0 auto; - border: 1px solid rgba(var(--light-grey-rgb), 0.3); - border-radius: 30px; - font-size: 14px; - color: var(--brand-black); - font-weight: 500; - height: 40px; - padding: 0 15px; - background-color: white; - } - - button { - width: 40px; - height: 40px; - background-color: var(--brand-red); - margin: 0 auto; - border-radius: 50%; - - ion-icon { - color: white; - font-size: 16px; - } - } - } - } +.share-button { + --background: transparent; + border-radius: 50%; + background: linear-gradient(to left, darken($brand-red, 20%), $brand-gold); + transform: translate(-10px, -10px); } \ No newline at end of file diff --git a/src/app/home-details/home-details.page.ts b/src/app/home-details/home-details.page.ts index 7f0677b..01b0afc 100644 --- a/src/app/home-details/home-details.page.ts +++ b/src/app/home-details/home-details.page.ts @@ -1,8 +1,8 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit} from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { Location } from '@angular/common'; import { DomSanitizer } from '@angular/platform-browser'; -import { NewsService } from '../services/news.service'; +import { NewsService, IMAGE_BASE_URL } from '../services/news.service'; import { ToastService } from '../services/toast.service'; @Component({ @@ -12,6 +12,8 @@ import { ToastService } from '../services/toast.service'; }) export class HomeDetailsPage implements OnInit { myComment: string = ''; + image_url = IMAGE_BASE_URL; + newsDetails: any = {}; constructor( private route: ActivatedRoute, @@ -25,6 +27,10 @@ export class HomeDetailsPage implements OnInit { return this.dom.bypassSecurityTrustResourceUrl(url); } + transformYourHtml(htmlTextWithStyle) { + return this.dom.bypassSecurityTrustHtml(htmlTextWithStyle += ''); + } + ngOnInit() { let alias_title = this.route.snapshot.paramMap.get('alias_title'); let type = this.route.snapshot.paramMap.get('type'); @@ -33,6 +39,55 @@ export class HomeDetailsPage implements OnInit { console.log(alias_title); console.log(type); + + if (type === 'news') { + this.newsService.getArticleDetails(alias_title).then((data: any) => { + + if (data && data.content && data.content.data) { + this.newsDetails = data.content.data; + } else { + this.toastService.presentToastWithOptions("No News available"); + } + + }, (err) => { + console.log(err); + this.toastService.presentToastWithOptions("Failed to fetch details", "danger"); + }); + } + + if (type === 'videos') { + this.newsService.getVideoDetails(alias_title).then((data: any) => { + + if (data && data.content && data.content.data) { + this.newsDetails = data.content.data; + } else { + this.toastService.presentToastWithOptions("No Video available"); + } + + }, (err) => { + console.log(err); + this.toastService.presentToastWithOptions("Failed to fetch details", "danger"); + }); + } + + if (type === 'gallery') { + this.newsService.getGalleryDetails(alias_title).then((data: any) => { + + if (data && data.content && data.content.data) { + this.newsDetails = data.content.data; + } else { + this.toastService.presentToastWithOptions("No Photos available"); + } + + }, (err) => { + console.log(err); + this.toastService.presentToastWithOptions("Failed to fetch details", "danger"); + }); + } + } + + getLowRestImagePath(path: string) { + return path.replace("/0/", "/4-3/388-218/"); } back() { diff --git a/src/app/home/home.page.html b/src/app/home/home.page.html index abd5d96..2a9fb98 100644 --- a/src/app/home/home.page.html +++ b/src/app/home/home.page.html @@ -29,7 +29,7 @@

{{ news.short_title }}

-
+
@@ -63,7 +63,7 @@

{{ news.short_title ? news.short_title : news.asset_title }}

-
+
@@ -94,7 +94,7 @@

{{ news.short_title ? news.short_title : news.asset_title }}

-
+
diff --git a/src/app/home/home.page.scss b/src/app/home/home.page.scss index 27695b4..f95719a 100644 --- a/src/app/home/home.page.scss +++ b/src/app/home/home.page.scss @@ -145,15 +145,11 @@ ion-slides { line-height: 1.5; font-weight: 400; display: -webkit-box; - -webkit-line-clamp: 4; + -webkit-line-clamp: 3; -webkit-box-orient: vertical; color: var(--light-grey); overflow: hidden; transition: opacity 0.1s; - - p { - margin: 0; - } } .action-buttons { diff --git a/src/app/home/home.page.ts b/src/app/home/home.page.ts index b181d30..f3971eb 100644 --- a/src/app/home/home.page.ts +++ b/src/app/home/home.page.ts @@ -3,6 +3,7 @@ import { IonSlides } from '@ionic/angular'; import { Router } from '@angular/router'; import { NewsService, IMAGE_BASE_URL } from '../services/news.service'; import { ToastService } from '../services/toast.service'; +import { DomSanitizer } from '@angular/platform-browser'; @Component({ selector: 'app-home', @@ -35,9 +36,14 @@ export class HomePage implements OnInit { constructor( private router: Router, private newsService: NewsService, - private toastService: ToastService + private toastService: ToastService, + private dom: DomSanitizer, ) { } + transformYourHtml(htmlTextWithStyle) { + return this.dom.bypassSecurityTrustHtml(htmlTextWithStyle += ''); + } + ngOnInit() { this.newsService.getArticles().then((data: any) => { if (data && data.content && data.content.items) { diff --git a/src/app/services/news.service.ts b/src/app/services/news.service.ts index c6fad8f..d49b39b 100644 --- a/src/app/services/news.service.ts +++ b/src/app/services/news.service.ts @@ -24,7 +24,7 @@ export class NewsService { } getVideoDetails(title_alias_from_listing_api: string) { - return this.http.get('https://www.punjabkingsipl.in/api/video/' + title_alias_from_listing_api); + return this.http.get('https://www.punjabkingsipl.in/api/video/' + title_alias_from_listing_api).toPromise(); } getGalleries() { @@ -32,6 +32,6 @@ export class NewsService { } getGalleryDetails(title_alias_from_listing_api: string) { - return this.http.get('https://www.punjabkingsipl.in/api/photo/' + title_alias_from_listing_api); + return this.http.get('https://www.punjabkingsipl.in/api/photo/' + title_alias_from_listing_api).toPromise(); } } diff --git a/src/global.scss b/src/global.scss index 21a4862..c0fbed8 100644 --- a/src/global.scss +++ b/src/global.scss @@ -36,10 +36,6 @@ letter-spacing: 0.5px; } -p, header, h1, h2, h3, h4, h5, h6 { - margin: 0; -} - ion-content { --background: transparent; background: linear-gradient(to bottom, darken($brand-blue, 20%), $brand-blue 80%);