From ae0db530ec41fd505a3590fff1d60c5f302c914d Mon Sep 17 00:00:00 2001 From: Abhishek Date: Aug 01 2018 14:42:06 +0000 Subject: [PATCH 1/7] add podcast provider --- diff --git a/src/providers/fedora-podcast/podcast.ts b/src/providers/fedora-podcast/podcast.ts new file mode 100755 index 0000000..9dde1bf --- /dev/null +++ b/src/providers/fedora-podcast/podcast.ts @@ -0,0 +1,96 @@ +import ENV from '@environment'; +import { HttpClient } from '@angular/common/http'; +import { Observable } from 'rxjs/Observable'; +import { chooseEndpoint } from '../../utils'; +import { map } from 'rxjs/operators'; +import { Injectable } from '@angular/core'; + +/* Endpoint for this service. +* +* Since Simplecast API does not support CORS, we need to use a proxy when running +* on browser platforms. +*/ +const ENDPOINT = chooseEndpoint('/podcast', 'https://api.simplecast.com/v1/'); + +/** + * Podcast ID of Fedora Podcast + */ +const PODCAST_ID = 4543 + +/** + * Represents a podcast fetched from Simplecast + */ +export interface Podcast { + /** + * Unique ID of the podcast, supplied by the Simplecast API + */ + id: number, + + /** + * The Time duration of the podcast + */ + duration: number, + + /** + * The Podcast Number + */ + + number: number, + + /** + * Title of the podcast + */ + + title: string, + + /** + * Description of the podcast + */ + description: string, + + /** + * Date of publishing the podcast + */ + publishedAt: Date, + + /** + * URL of Podcast Source File + */ + audioUrl: string, + + /** + * Sharing URL of the Podcast Source File + */ + shareUrl: string +} + +/** + * Service for fetching Podcasts from Community API + */ +@Injectable() +export class PodcastService { + constructor(private http: HttpClient) { + } + + /** + * Fetch the list of latest podcastss on Fedora Community + * + * @returns Observable which emits an array of Podcasts + */ + getPodcasts(): Observable { + return this.http.get(`${ENDPOINT}/podcasts/${PODCAST_ID}/episodes.json`, { headers: { 'X-API-KEY': ENV.SIMPLECAST_CONFIG.apiKey } }) + .pipe( + map((data: any[]) => data.map((podcast: any) => ({ + id: podcast.id, + number: podcast.number, + title: podcast.title, + duration: podcast.duration, + displayTime: Math.floor(podcast.duration/60),//convert to minutes + description: podcast.description, + publishedAt: podcast.published_at, + audioUrl: podcast.audio_url, + shareUrl: podcast.share_url + }))) + ); + } +} \ No newline at end of file From 196a1e8f40e3835681ccf4650af19bfd399ea427 Mon Sep 17 00:00:00 2001 From: Abhishek Date: Aug 01 2018 14:44:35 +0000 Subject: [PATCH 2/7] add templates --- diff --git a/src/pages/more/fedora-podcast.html b/src/pages/more/fedora-podcast.html new file mode 100644 index 0000000..9b60a15 --- /dev/null +++ b/src/pages/more/fedora-podcast.html @@ -0,0 +1,25 @@ + + + + + + Fedora Podcast + + + + +
+ +
+
+ + {{podcast.title}} + + + Episode {{podcast.number}} • {{podcast.displayTime}} mins + +
+ + diff --git a/src/pages/more/more.scss b/src/pages/more/more.scss index 1cbbe5b..111653f 100755 --- a/src/pages/more/more.scss +++ b/src/pages/more/more.scss @@ -51,107 +51,222 @@ page-more { bookmarks, about-us, -about-detail, women-diversity { - ion-header { - padding: 16px 24px; - background-color: #fff; - span { - font-family: "Montserrat-Semibold"; - font-size: 16px; - color: #3C6DB3; - letter-spacing: 0.57px; - margin: 0 0 16px 16px; - text-transform: uppercase; +<<<<<<< HEAD about-detail, +women-diversity { + =======about-detail, + fedora-podcast, + podcast-player { + >>>>>>>add templates ion-header { + padding: 16px 24px; + background-color: #fff; + span { + font-family: "Montserrat-Semibold"; + font-size: 16px; + color: #3C6DB3; + letter-spacing: 0.57px; + margin: 0 0 16px 16px; + text-transform: uppercase; + } + .toolbar-title { + padding: 0 !important; + } } - .toolbar-title { - padding: 0 !important; + .header-md::after { + background-color: #fff; + box-shadow: 0 2px 4px 0 rgba(86, 86, 86, 0.05); + background-image: none; + } + ion-content { + background-color: #ECEDEE !important; } } - .header-md::after { - background-color: #fff; - box-shadow: 0 2px 4px 0 rgba(86, 86, 86, 0.05); - background-image: none; - } - ion-content { - background-color: #ECEDEE !important; - } -} - -about-us, -about-detail { - ion-content { - background-color: #fff !important; - } -} - -about-us { - .header-md::after { - background-color: #FFF; - box-shadow: 0 2px 4px 0 rgba(86, 86, 86, 0.05); - background-image: none; - margin-bottom: 1em; - } - .item { - padding: 0 24px; - } - .label { - font-family: 'OpenSans-Regular'; - font-size: 16px; - color: #535861; - text-transform: none; - letter-spacing: 0; - overflow: visible; + about-us, + about-detail { + ion-content { + background-color: #fff !important; + } } -} - -about-detail { - ion-content { - .scroll-content { - padding: 16px 24px; + about-us { + .header-md::after { + background-color: #FFF; + box-shadow: 0 2px 4px 0 rgba(86, 86, 86, 0.05); + background-image: none; + margin-bottom: 1em; + } + .item { + padding: 0 24px; + } + .label { + font-family: 'OpenSans-Regular'; font-size: 16px; - line-height: 26px; - p { - margin: 0.5em 0; - } + color: #535861; + text-transform: none; + letter-spacing: 0; + overflow: visible; } } -} - -women-diversity { - ion-content { - .scroll-content { - p { - margin:0; + about-detail { + ion-content { + .scroll-content { padding: 16px 24px; - background-color: #fff; - } - ion-label{ - margin: 0 0 4px 0; - padding: 12px 24px; - background-color: #fff; + font-size: 16px; + line-height: 26px; + p { + margin: 0.5em 0; + } } } } - .card { - padding: 12px 24px; - background-color: #FFFFFF !important; - box-shadow: none; - margin: 4px 0; - width: 100%; - } - .card-header { - padding: 0 !important; - } - .card-content { - margin-top: 4px; - padding: 0 !important; + women-diversity { + ion-content { + .scroll-content { + p { + margin: 0; + padding: 16px 24px; + background-color: #fff; + } + ion-label { + margin: 0 0 4px 0; + padding: 12px 24px; + background-color: #fff; + } + } + } + .card { + padding: 12px 24px; + background-color: #FFFFFF !important; + box-shadow: none; + margin: 4px 0; + width: 100%; + } + .card-header { + padding: 0 !important; + } + .card-content { + margin-top: 4px; + padding: 0 !important; + } + ion-card { + span { + display: block; + } + .active-title { + margin-bottom: 4px; + } + } } - ion-card { - span { - display: block; + fedora-podcast { + .header::after { + box-shadow: 0 2px 4px 0 rgba(86, 86, 86, 0.05); } - .active-title { - margin-bottom: 4px; + ion-content { + [col-1], + [col-11] { + padding: 0 !important; + } + background-color: #EFF0F1 !important; + ion-list { + margin: 0 !important; + } + .card { + padding: 12px 16px; + margin: 0 0 2px 0; + width: 100%; + background-color: #fff !important; + box-shadow: none; + display: flex; + flex-direction: row; + align-items: center; + .icon { + margin-right: 8px; + img { + height: 28px; + } + } + } + .card-header { + font-family: "OpenSans-Semibold"; + font-size: 14px; + color: #3B6FBB; + line-height: 20px; + padding: 0; + } + .card-content { + font-family: "OpenSans-Regular"; + font-size: 12px; + color: #535961; + line-height: 20px; + padding: 0; + } + } + } + podcast-player { + .player { + display: flex; + flex-direction: column; + background: linear-gradient(180deg, #3B6DB3 0%, #284071 100%); + padding: 0 1.5em; + height: calc( 100vh - 56px); + text-align: center; + align-items: center; + padding-top: 20%; + justify-content: flex-start; + .banner { + width: 50%; + } + h1 { + font-family: "OpenSans-Semibold"; + font-size: 18px; + color: #FFFFFF; + margin: 0 0 1em 0; + } + h2 { + font-family: "OpenSans-Regular"; + line-height: 20px; + font-size: 14px; + color: #E8EFF8; + margin-bottom: 2.5em; + } + .progress { + display: flex; + flex-direction: column; + width: calc(100% - 3em); + color: #fff; + progress { + width: 100%; + height: 6px; + -webkit-appearance: none; + border: none; + } + progress::-webkit-progress-bar { + background: #637CA6; + border-radius: 100px; + } + progress::-webkit-progress-value { + background: #fff; + border-radius: 100px; + } + .time { + margin-top: 0.5em; + display: flex; + flex-direction: row; + justify-content: space-between; + span { + font-family: "OpenSans-Regular"; + font-size: 12px; + color: #FFFFFF; + } + } + } + .controls { + margin-top: 2em; + width: 100%; + justify-content: space-around; + display: flex; + flex-direction: row; + button { + background: transparent; + } + } } } -} diff --git a/src/pages/more/more.ts b/src/pages/more/more.ts index a3d8374..643612b 100755 --- a/src/pages/more/more.ts +++ b/src/pages/more/more.ts @@ -5,6 +5,7 @@ import { PackageSearchPage } from '../package-search/package-search'; import { Browser } from '../../providers/browser/browser'; import { Post } from '../../providers/fedora-magazine/fedora-magazine'; import { CommunityBlogService } from '../../providers/community-blog/community-blog'; +import { PodcastService, Podcast } from '../../providers/fedora-podcast/podcast'; @Component({ selector: 'page-more', @@ -35,6 +36,9 @@ export class MorePage { break; case 'package': this.navCtrl.push(PackageSearchPage, { animate: true, direction: 'forward' }); + case 'podcast': + this.navCtrl.push(FedoraPodcast, { animate: true, direction: 'forward' }); + break; } } @@ -177,4 +181,171 @@ export class WomenDiversity { this.browser.open(update.link); } } +/** Fedora Podcast Component */ +@Component({ + selector: 'fedora-podcast', + templateUrl: 'fedora-podcast.html', + providers: [PodcastService] +}) +export class FedoraPodcast { + /** + * List of podcasts from Fedora Podcast + */ + private podcasts: Podcast[]; + constructor(private fedorapodcast: PodcastService, public navCtrl: NavController) { + this.podcasts = []; + } + /** + * Fetch podcasts from the Fedora Podcast simplecast channel + */ + private updatePodcasts(): void { + this.fedorapodcast.getPodcasts().subscribe(podcasts => { + this.podcasts = podcasts + }); + } + /**Open player for the podcast + * @param podcast clicked podcast + */ + openPodcastPlayer(podcast) { + //podcast player for current podcast + this.navCtrl.push(PodcastPlayer, { podcast: podcast }); + } + /** + * Get latest podcasts on init + */ + ngOnInit() { + this.updatePodcasts(); + } +} +/** + * Podcast Player Component + */ +@Component({ + selector: 'podcast-player', + templateUrl: 'podcast-player.html', +}) +export class PodcastPlayer { + /** + * Podcast Player component + */ + private selectedPodcast; //selected podcast number ex-1,2,3.. + private mp3Track: HTMLAudioElement; //selected podcast mp3 url + private seektime: number = 10; //seek time of rewind and forward; + private totalLength: string; //total length of the podcast + private currTime: string; //current time of the podcast + private progressValue; //progress bar width + public loaderState: boolean; //state of loader + private playIcon: string = './assets/img/player-play.svg'; //icon for the play button + private pauseIcon: string = './assets/img/player-pause.svg'; //icon for the pause button + private playerIcon: string; //current icon for the player i.e either play or pause depending on state + private currentState: string; //current state of the player i.e playing or not-playing + constructor(public navCtrl: NavController, public navParams: NavParams) { + this.selectedPodcast = navParams.data.podcast; + this.playerIcon = this.playIcon; //set the icon as play + this.currentState = 'not-playing'; //set the state as not playing + this.progressValue = 0; //initialize progress bar value to 0 + this.loaderState = true; //start showing the loader + } + ngOnInit() { + this.toggleTabs('none'); + /** + * Initialise the podcast + */ + this.mp3Track = new Audio(); + this.mp3Track.src = this.selectedPodcast.audioUrl; + this.mp3Track.load(); + + /** + * Add Event listeners - on change and on load + */ + this.mp3Track.addEventListener('timeupdate', this.updateProgress.bind(this)); //bind the update button + this.mp3Track.addEventListener('canplaythrough', this.hideLoader.bind(this)); //hide loader if track can be played + + /** + * Initialise other attributes + */ + this.currTime = this.fancyTimeFormat(this.mp3Track.currentTime); // init current time + this.totalLength = this.fancyTimeFormat(this.selectedPodcast.duration); // init total time + this.loaderState = true; //set loader state + } + /** + * Start Playing the podcast + */ + playAudio() { + this.currentState = 'playing'; //update state + this.mp3Track.play(); //start playing the track + this.playerIcon = this.pauseIcon; // change the icon + } + /** + * Stop playing the podcast + */ + stopAudio() { + this.currentState = 'not-playing'; //update state + this.mp3Track.pause(); //stop playing the track + this.playerIcon = this.playIcon; // change the icon + } + /** + * Pause the podcast and reset on leave + */ + ngOnDestroy() { + if (this.mp3Track) { + this.mp3Track.pause(); + this.mp3Track = null; + } + } + /** + * if the track is not being played, start it otherwise vice-versa + */ + togglePlay() { + this.currentState === 'not-playing' ? this.playAudio() : this.stopAudio(); + } + /** + * seek podcast forward by 10 seconds + */ + forward() { + this.mp3Track.currentTime += this.seektime; + } + /** + * seek podcast back by 10 seconds + */ + rewind() { + this.mp3Track.currentTime -= this.seektime; + } + /** + * Change the current Time and width of progress bar on playing the song + */ + updateProgress() { + if (this.mp3Track) { + this.currTime = this.fancyTimeFormat(this.mp3Track.currentTime); // set current time + //set progress value if ratio is defined + isNaN((this.mp3Track.currentTime / this.mp3Track.duration)) ? this.progressValue = 0 : this.progressValue = (this.mp3Track.currentTime / this.mp3Track.duration); + } + } + /** + * Hide/Show the tabs on the Podcast Player Page + */ + toggleTabs(status) { + let elements = document.querySelectorAll(".tabbar"); + if (elements != null) { + Object.keys(elements).map((key) => { + elements[key].style.display = status; + }); + } + } + /** + * Hides the loader when the song has loaded + */ + hideLoader() { + this.loaderState = false; //stop showing loader + } + /** + * converts time in seconds to MM:SS; + * @param time in seconds + */ + fancyTimeFormat(time) { + var date = new Date(null); + date.setSeconds(time); + return date.toISOString().substr(14, 5); + } +} \ No newline at end of file diff --git a/src/pages/more/podcast-player.html b/src/pages/more/podcast-player.html new file mode 100644 index 0000000..ee2edfc --- /dev/null +++ b/src/pages/more/podcast-player.html @@ -0,0 +1,44 @@ + + + + + + Episode {{selectedPodcast.number}} + + + + +
+
+
+
+
+
+ + +
+ +

{{selectedPodcast.title}}

+

{{selectedPodcast.description}}

+
+ +
+ {{currTime}} + {{totalLength}} +
+
+
+ + + +
+
+ From 09e043944b94cbd6d019e07c4159cace7baea354 Mon Sep 17 00:00:00 2001 From: Abhishek Date: Aug 01 2018 14:44:35 +0000 Subject: [PATCH 3/7] add podcast proxy --- diff --git a/ionic.config.json b/ionic.config.json index cd9d4b5..e9fff87 100644 --- a/ionic.config.json +++ b/ionic.config.json @@ -1,8 +1,9 @@ { "name": "fedora-app", - "app_id": "", - "proxies": [ - { + "integrations": { + "cordova": {} + }, + "proxies": [{ "path": "/twitter", "proxyUrl": "https://api.twitter.com/1.1/" }, @@ -21,10 +22,11 @@ { "path": "/community-blog", "proxyUrl": "https://communityblog.fedoraproject.org/wp-json/wp/v2/" + }, + { + "path": "/podcast", + "proxyUrl": "https://api.simplecast.com/v1/" } ], - "integrations": { - "cordova": {} - }, "type": "ionic-angular" } From e501fa7b036ffe14c5c440f21ef5f53b2cc1c33c Mon Sep 17 00:00:00 2001 From: Abhishek Date: Aug 01 2018 14:45:53 +0000 Subject: [PATCH 4/7] update modules and styles --- diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f759855..b2f8562 100755 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -16,7 +16,7 @@ import { HomePage } from '../pages/home/home'; import { MagazinePage } from '../pages/magazine/magazine'; import { AskPage } from '../pages/ask/ask'; import { CalendarPage, Search, meetingDetails } from '../pages/calendar/calendar'; -import { MorePage, AboutDetailPage, AboutPage, BookmarksPage, WomenDiversity } from '../pages/more/more'; +import { MorePage, AboutDetailPage, AboutPage, BookmarksPage, WomenDiversity, FedoraPodcast, PodcastPlayer } from '../pages/more/more'; import { NotificationsPage } from '../pages/notifications/notifications'; import { PackageSearchPage } from '../pages/package-search/package-search'; import { ViewPackagePage } from '../pages/view-package/view-package'; @@ -49,7 +49,9 @@ import { Browser } from '../providers/browser/browser'; NoBookmarksComponent, NoMeetingsComponent, NoResultsComponent, - NoInternetComponent + NoInternetComponent, + FedoraPodcast, + PodcastPlayer ], imports: [ BrowserModule, @@ -74,7 +76,9 @@ import { Browser } from '../providers/browser/browser'; ViewPackagePage, Search, meetingDetails, - WomenDiversity + WomenDiversity, + FedoraPodcast, + PodcastPlayer ], providers: [ Browser, diff --git a/src/app/app.scss b/src/app/app.scss index 75d458e..56a80ef 100755 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -19,183 +19,255 @@ // @import "../pages/women/women"; // App Shared Rules .iframeWrapper iframe { - width: 100%; - height: 100%; -} + width: 100%; + height: 100%; +} //tab icons-active ion-icon { - &[class*="fedora-"] { - mask-size: contain; - mask-position: 50% 50%; - mask-repeat: no-repeat; - background: currentColor; - width: 1em; - height: 1em; - } - &[class*="fedora-home"] { - mask-image: url(../assets/img/home-active.svg); - } - &[class*="fedora-mag"] { - mask-image: url(../assets/img/mag-active.svg); - } - &[class*="fedora-cal"] { - mask-image: url(../assets/img/cal-active.svg); - } - &[class*="fedora-ask"] { - mask-image: url(../assets/img/ask-active.svg); - } - &[class*="fedora-more"] { - mask-image: url(../assets/img/more-active.svg); - } + &[class*="fedora-"] { + mask-size: contain; + mask-position: 50% 50%; + mask-repeat: no-repeat; + background: currentColor; + width: 1em; + height: 1em; + } + &[class*="fedora-home"] { + mask-image: url(../assets/img/home-active.svg); + } + &[class*="fedora-mag"] { + mask-image: url(../assets/img/mag-active.svg); + } + &[class*="fedora-cal"] { + mask-image: url(../assets/img/cal-active.svg); + } + &[class*="fedora-ask"] { + mask-image: url(../assets/img/ask-active.svg); + } + &[class*="fedora-more"] { + mask-image: url(../assets/img/more-active.svg); + } } //tab icons-inactive .tabs { - a[aria-selected=false] { - .tab-button-icon[ng-reflect-name=fedora-home] { - mask-image: url(../assets/img/home-inactive.svg); - } + a[aria-selected=false] { + .tab-button-icon[ng-reflect-name=fedora-home] { + mask-image: url(../assets/img/home-inactive.svg); } - a[aria-selected=false] { - .tab-button-icon[ng-reflect-name=fedora-mag] { - mask-image: url(../assets/img/mag-inactive.svg); - } + } + a[aria-selected=false] { + .tab-button-icon[ng-reflect-name=fedora-mag] { + mask-image: url(../assets/img/mag-inactive.svg); } - a[aria-selected=false] { - .tab-button-icon[ng-reflect-name=fedora-cal] { - mask-image: url(../assets/img/cal-inactive.svg); - } + } + a[aria-selected=false] { + .tab-button-icon[ng-reflect-name=fedora-cal] { + mask-image: url(../assets/img/cal-inactive.svg); } - a[aria-selected=false] { - .tab-button-icon[ng-reflect-name=fedora-ask] { - mask-image: url(../assets/img/ask-inactive.svg); - } + } + a[aria-selected=false] { + .tab-button-icon[ng-reflect-name=fedora-ask] { + mask-image: url(../assets/img/ask-inactive.svg); } - a[aria-selected=false] { - .tab-button-icon[ng-reflect-name=fedora-more] { - mask-image: url(../assets/img/more-inactive.svg); - } + } + a[aria-selected=false] { + .tab-button-icon[ng-reflect-name=fedora-more] { + mask-image: url(../assets/img/more-inactive.svg); } + } } ion-buttons { - button { - background-color: transparent; - } + button { + background-color: transparent; + } } //tab typography .tabs { - a[aria-selected=false] { - span { - font-family: "Montserrat-Regular"; - font-size: 12px; - color: #9A9FA6; - text-align: left; - } + a[aria-selected=false] { + span { + font-family: "Montserrat-Regular"; + font-size: 12px; + color: #9A9FA6; + text-align: left; } - a[aria-selected=true] { - span { - /* Home: */ - font-family: "Montserrat-SemiBold"; - font-size: 12px; - color: #3C6EB4; - text-align: left; - line-height: 12px; - } + } + a[aria-selected=true] { + span { + /* Home: */ + font-family: "Montserrat-SemiBold"; + font-size: 12px; + color: #3C6EB4; + text-align: left; + line-height: 12px; } + } } .tabs-md[tabsLayout=icon-top] .has-icon .tab-button-text { - margin-top: 8px; + margin-top: 8px; } //styles of the tabbar .tabbar { - padding: 12px 0; - background-color: #fff !important; - box-shadow: 0 2px 4px 0 #565656 !important; - justify-content: space-around !important; + padding: 12px 0; + background-color: #fff !important; + box-shadow: 0 2px 4px 0 #565656 !important; + justify-content: space-around !important; } .tab-button { - overflow: visible !important; - flex: none; + overflow: visible !important; + flex: none; } //styles of the top navbar ion-navbar { - ion-title { - text-align: center; - } - background-color: #fff !important; - box-shadow: 0 2px 4px 0 rgba(86, 86, 86, 0.05); + ion-title { + text-align: center; + } + background-color: #fff !important; + box-shadow: 0 2px 4px 0 rgba(86, 86, 86, 0.05); } .pkg-lib { - color: #A07CBC!important; + color: #A07CBC !important; } .pkg-devel { - color: #E59728!important; + color: #E59728 !important; } //segment styles ion-segment { - padding: 0px 24px 0 24px; - background-color: #fff; + padding: 0px 24px 0 24px; + background-color: #fff; } .segment-button { - font-family: "Montserrat-Light"; - font-size: 12px; - color: #9A9FA6; - text-transform: none; - padding: 0; + font-family: "Montserrat-Light"; + font-size: 12px; + color: #9A9FA6; + text-transform: none; + padding: 0; } .segment-activated { - font-family: "Montserrat-SemiBold"; - font-size: 12px; - color: #3C6EB4; - padding: 0; + font-family: "Montserrat-SemiBold"; + font-size: 12px; + color: #3C6EB4; + padding: 0; } //empty state styles .emptystate { - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; - align-items: center; - height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + text-align: center; + align-items: center; + height: 100%; + img { + margin-bottom: 20px; + } + h1 { + font-family: "Montserrat-SemiBold"; + font-size: 19px; + color: #79818B; + margin: 0; + } + h2 { + font-family: "OpenSans-Regular"; + font-size: 14px; + color: #79818B; + line-height: 20px; + margin: 10px 0 20px 0; img { - margin-bottom: 20px; - } - h1 { - font-family: "Montserrat-SemiBold"; - font-size: 19px; - color: #79818B; - margin: 0; - } - h2 { - font-family: "OpenSans-Regular"; - font-size: 14px; - color: #79818B; - line-height: 20px; - margin: 10px 0 20px 0; - img { - margin: 0 2px; - display: inline-block; - margin-bottom: 0px; - } - } - button { - padding: 12px; - width: auto; - background: transparent; - border: 1px solid #3C6EB4; - border-radius: 2px; - font-family: "Montserrat-SemiBold"; - font-size: 14px; - color: #3C6EB4; - line-height: 14px; + margin: 0 2px; + display: inline-block; + margin-bottom: 0px; } + } + button { + padding: 12px; + width: auto; + background: transparent; + border: 1px solid #3C6EB4; + border-radius: 2px; + font-family: "Montserrat-SemiBold"; + font-size: 14px; + color: #3C6EB4; + line-height: 14px; + } +} + +//styles for loader +.loader-ellipsis { + display: inline-block; + position: relative; + width: 64px; + height: 64px; + div { + position: absolute; + top: 27px; + width: 11px; + height: 11px; + border-radius: 50%; + background: rgba(#79818B, 0.15); + animation-timing-function: cubic-bezier(0, 1, 1, 0); + } + div:nth-child(1) { + left: 6px; + animation: loader-ellipsis1 0.6s infinite; + } + div:nth-child(2) { + left: 6px; + animation: loader-ellipsis2 0.6s infinite; + } + div:nth-child(3) { + left: 26px; + animation: loader-ellipsis2 0.6s infinite; + } + div:nth-child(4) { + left: 45px; + animation: loader-ellipsis3 0.6s infinite; + } +} + +@keyframes loader-ellipsis1 { + 0% { + transform: scale(0); + } + 100% { + transform: scale(1); + } } -.hidden{ - display: none; -} \ No newline at end of file +@keyframes loader-ellipsis3 { + 0% { + transform: scale(1); + } + 100% { + transform: scale(0); + } +} + +@keyframes loader-ellipsis2 { + 0% { + transform: translate(0, 0); + } + 100% { + transform: translate(19px, 0); + } +} + +.loader { + height: 100%; + width: 100%; + background-color: #EFF0F1; + position: absolute; + top: 0; + z-index: 999; + display: grid; + place-items: center center; + justify-content: center; +} + +.hidden { + display: none; +} From 04f86807f2c477ada871986c002729bdf2e1cf3a Mon Sep 17 00:00:00 2001 From: Abhishek Date: Aug 01 2018 14:45:53 +0000 Subject: [PATCH 5/7] add icons --- diff --git a/src/assets/img/play.svg b/src/assets/img/play.svg new file mode 100644 index 0000000..9380d50 --- /dev/null +++ b/src/assets/img/play.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/player-pause.svg b/src/assets/img/player-pause.svg new file mode 100644 index 0000000..dcafef4 --- /dev/null +++ b/src/assets/img/player-pause.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/player-play.svg b/src/assets/img/player-play.svg new file mode 100644 index 0000000..5e9e886 --- /dev/null +++ b/src/assets/img/player-play.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/podcastbanner.png b/src/assets/img/podcastbanner.png new file mode 100644 index 0000000..3ebd2c1 Binary files /dev/null and b/src/assets/img/podcastbanner.png differ From 736f0d9e5a3b585c86aa2561ce3fbb31eb876798 Mon Sep 17 00:00:00 2001 From: Abhishek Date: Aug 01 2018 14:50:43 +0000 Subject: [PATCH 6/7] fix tabs and icons --- diff --git a/src/app/app.module.ts b/src/app/app.module.ts index b2f8562..186e84b 100755 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -15,8 +15,8 @@ import { TabsPage } from '../pages/tabs/tabs'; import { HomePage } from '../pages/home/home'; import { MagazinePage } from '../pages/magazine/magazine'; import { AskPage } from '../pages/ask/ask'; -import { CalendarPage, Search, meetingDetails } from '../pages/calendar/calendar'; import { MorePage, AboutDetailPage, AboutPage, BookmarksPage, WomenDiversity, FedoraPodcast, PodcastPlayer } from '../pages/more/more'; +import { CalendarPage, Search, meetingDetails } from '../pages/calendar/calendar'; import { NotificationsPage } from '../pages/notifications/notifications'; import { PackageSearchPage } from '../pages/package-search/package-search'; import { ViewPackagePage } from '../pages/view-package/view-package'; diff --git a/src/assets/img/player-forward.svg b/src/assets/img/player-forward.svg new file mode 100644 index 0000000..6ed6a79 --- /dev/null +++ b/src/assets/img/player-forward.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/player-rewind.svg b/src/assets/img/player-rewind.svg new file mode 100644 index 0000000..6d16ddf --- /dev/null +++ b/src/assets/img/player-rewind.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/pages/more/more.scss b/src/pages/more/more.scss index 111653f..608e5d6 100755 --- a/src/pages/more/more.scss +++ b/src/pages/more/more.scss @@ -51,12 +51,11 @@ page-more { bookmarks, about-us, -<<<<<<< HEAD about-detail, -women-diversity { - =======about-detail, +about-detail, +women-diversity , fedora-podcast, podcast-player { - >>>>>>>add templates ion-header { + ion-header { padding: 16px 24px; background-color: #fff; span { From 8091452ad9499fdbc9ba16e1379d055e17c38801 Mon Sep 17 00:00:00 2001 From: Abhishek Date: Aug 01 2018 14:58:51 +0000 Subject: [PATCH 7/7] fix navigation bug --- diff --git a/src/pages/more/more.ts b/src/pages/more/more.ts index 643612b..eeed3b6 100755 --- a/src/pages/more/more.ts +++ b/src/pages/more/more.ts @@ -36,6 +36,7 @@ export class MorePage { break; case 'package': this.navCtrl.push(PackageSearchPage, { animate: true, direction: 'forward' }); + break; case 'podcast': this.navCtrl.push(FedoraPodcast, { animate: true, direction: 'forward' }); break;