Skip to content

Commit 8b5be62

Browse files
yannbfyannbf
authored
Merge pull request yannbf#17 from lohanidamodar/develop
Adds flash card component and its display
2 parents 2612024 + be3c336 commit 8b5be62

File tree

11 files changed

+155
-0
lines changed

11 files changed

+155
-0
lines changed

‎src/app/app.imports.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,10 @@ import { WalkthroughModalPage } from '../pages/popup-modal/walkthrough-modal/wal
5555
// Alerts
5656
import { AlertsPage } from '../pages/ionic-official-components/alert/alert';
5757

58+
// FlashCard
59+
import { FlashCardComponent } from '../components/flash-card/flash-card';
60+
import { FlashCardPage } from '../pages/miscellaneous/flash-card/flash-card';
61+
5862
// Slides
5963
import { SlidesPage } from '../pages/slide/slide';
6064
import { SlideTransitionsPage } from '../pages/slide/slide-transitions/slide-transitions';
@@ -166,6 +170,8 @@ export const Pages = [
166170
ChartsPage,
167171
RuntimePermissionsPage,
168172
GetImagePage,
173+
FlashCardComponent,
174+
FlashCardPage,
169175

170176
// Modals
171177
PopupModalsPage,

‎src/assets/img/flashcards/how_are_you.jpg

97.4 KB
Loading

‎src/assets/img/flashcards/namaste.jpg

31.2 KB
Loading

‎src/assets/img/flashcards/sorry.jpg

78.8 KB
Loading

‎src/components/flash-card/flash-card.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<ion-card class="fc-container" (click)="toggle()" [class.fc-back]="toggled" #fcContainer>
2+
<div class="front" #front>
3+
<ng-content class="" select=".fc-front"></ng-content>
4+
</div>
5+
6+
<div class="back" #back>
7+
<ng-content select=".fc-back"></ng-content>
8+
</div>
9+
</ion-card>

‎src/components/flash-card/flash-card.scss

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
flash-card {
2+
&{
3+
perspective: 1000px;
4+
}
5+
.fc-container{
6+
transition: 0.6s;
7+
transform-style: preserve-3d;
8+
position: relative;
9+
&.fc-back {
10+
transform: rotateY(180deg);
11+
}
12+
13+
.front {
14+
position: absolute;
15+
top:0;
16+
left:0;
17+
width: 100%;
18+
z-index: 2;
19+
backface-visibility: hidden;
20+
padding: 20px;
21+
background: #f2f2f2;
22+
transform: rotateY(0deg);
23+
}
24+
25+
.back {
26+
width: 100%;
27+
position: absolute;
28+
top:0;
29+
left:0;
30+
background: #f2f2f2;
31+
padding: 20px;
32+
transform: rotateY(180deg);
33+
}
34+
35+
}
36+
.fc-back {
37+
.front {
38+
z-index: 0;
39+
}
40+
.back {
41+
z-index: 2;
42+
}
43+
44+
}
45+
46+
}

‎src/components/flash-card/flash-card.ts

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { Component, ElementRef, ViewChild } from '@angular/core';
2+
3+
@Component({
4+
selector: 'flash-card',
5+
templateUrl: 'flash-card.html'
6+
})
7+
export class FlashCardComponent {
8+
@ViewChild('fcContainer') fcContainer;
9+
@ViewChild('front') fcFront;
10+
@ViewChild('back') fcBack;
11+
toggled: boolean = false;
12+
13+
constructor(private flashCard: ElementRef) {
14+
}
15+
ngAfterViewChecked(){
16+
let frontH = this.fcFront.nativeElement.querySelector('.fc-front').offsetHeight + 40;
17+
let backH = this.fcBack.nativeElement.querySelector('.fc-back').offsetHeight + 40;
18+
let h = ((frontH > backH)? frontH:backH) + 'px';
19+
this.fcContainer.nativeElement.style.height = h;
20+
this.fcBack.nativeElement.style.height = h;
21+
this.fcFront.nativeElement.style.height = h;
22+
}
23+
toggle() {
24+
this.toggled = !this.toggled;
25+
}
26+
27+
}

‎src/pages/miscellaneous/flash-card/flash-card.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<ion-header>
2+
3+
<ion-navbar>
4+
<button ion-button menuToggle>
5+
<ion-icon name="menu"></ion-icon>
6+
</button>
7+
<ion-title>FlashCard</ion-title>
8+
</ion-navbar>
9+
10+
</ion-header>
11+
12+
13+
<ion-content padding>
14+
<flash-card *ngFor="let card of flashCards" >
15+
<div class="fc-front">
16+
<img *ngIf="card.front.image" [src]="card.front.image" />
17+
<h2 text-center>{{card.front.title}}</h2>
18+
<h3 text-center>{{card.front.subtitle}}</h3>
19+
<hr />
20+
<p *ngIf="card.front.title" >{{card.front.content}}</p>
21+
</div>
22+
<div class="fc-back">
23+
<img *ngIf="card.back.image" [src]="card.back.image" />
24+
<h2 text-center>{{card.back.title}}</h2>
25+
<h3 text-center>{{card.back.subtitle}}</h3>
26+
<hr />
27+
<p *ngIf="card.back.title" >{{card.back.content}}</p>
28+
</div>
29+
</flash-card>
30+
</ion-content>

‎src/pages/miscellaneous/flash-card/flash-card.scss

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
page-flash-card {
2+
3+
}

‎src/pages/miscellaneous/flash-card/flash-card.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Component } from '@angular/core';
2+
import { NavController, NavParams } from 'ionic-angular';
3+
4+
@Component({
5+
selector: 'page-flash-card',
6+
templateUrl: 'flash-card.html'
7+
})
8+
export class FlashCardPage {
9+
private flashCards = [
10+
{
11+
front: { image: 'assets/img/flashcards/namaste.jpg', title: 'Namaste', subtitle: 'नमस्ते'},
12+
back: { title: 'meaning', subtitle: 'Hello, Greetings, I bless the divine in you', content: 'It is used to greet people every time they meet. It is usually initiated by the juniors'}
13+
},
14+
{
15+
front: { image: 'assets/img/flashcards/how_are_you.jpg', title: '(Tapailai) Kasto chha?', subtitle: '( तपाईंलाई ) कस्तो छ ?'},
16+
back: { title: 'meaning', subtitle: 'How are you?', content: 'It is used to ask people how they are doing or feeling.'}
17+
},
18+
{
19+
front: { image: 'assets/img/flashcards/sorry.jpg', title: 'Maaph garnuhos', subtitle: 'माफ गर्नुहोस्'},
20+
back: { title: 'meaning', subtitle: 'Excuse me/ pardon me / Sorry', content: 'It is used to ask for forgiveness when you do make mistakes.'}
21+
}
22+
]
23+
constructor(public navCtrl: NavController, public navParams: NavParams) {}
24+
25+
ionViewDidLoad() {
26+
console.log('ionViewDidLoad FlashCardPage');
27+
}
28+
29+
}

‎src/pages/miscellaneous/miscellaneous.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { BlogPostPage } from './blog-post/blog-post';
55
import { ChatsPage } from './chat/chats';
66
import { WeatherPage } from './weather/weather';
77
import { CurrencyConverterPage } from './currency-converter/currency-converter';
8+
import { FlashCardPage } from './flash-card/flash-card';
89
// import { ClockPage } from './clock/clock';
910
import { CountdownOnePage } from './countdown/countdown';
1011
import { TestimonialsPage } from './testimonials/testimonials';
@@ -64,6 +65,10 @@ export class MiscellaneousListPage {
6465
title: 'Tinder Cards',
6566
page: TinderCardsPage
6667
},
68+
{
69+
title: 'Flash Card',
70+
page: FlashCardPage
71+
},
6772
// {
6873
// title: 'Weather',
6974
// page: WeatherPage

0 commit comments

Comments
 (0)