Skip to content

Commit 114ef19

Browse files
yannbfyannbf
committed
feat(masonry): Add masonry cards to miscellaneous
1 parent 9b50ecc commit 114ef19

File tree

5 files changed

+140
-4
lines changed

5 files changed

+140
-4
lines changed

‎src/pages/miscellaneous/masonry-cards/masonry-cards.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<ion-header>
2+
3+
<ion-navbar>
4+
<ion-title>Masonry Cards</ion-title>
5+
</ion-navbar>
6+
7+
</ion-header>
8+
<ion-content>
9+
<div class="pins">
10+
<ion-card class="pin" *ngFor="let post of posts">
11+
<img [src]="post.image" />
12+
<div *ngIf="post.description" class="post-description">
13+
<small>{{ post.description }}</small>
14+
</div>
15+
<ion-item>
16+
<ion-avatar item-start>
17+
<img src="assets/img/avatar/marty-avatar.png">
18+
</ion-avatar>
19+
<small>McFly</small>
20+
<p><small>Category</small></p>
21+
</ion-item>
22+
</ion-card>
23+
</div>
24+
</ion-content>

‎src/pages/miscellaneous/masonry-cards/masonry-cards.module.ts

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { NgModule } from '@angular/core';
2+
import { IonicPageModule } from 'ionic-angular';
3+
import { MasonryCardsPage } from './masonry-cards';
4+
5+
@NgModule({
6+
declarations: [
7+
MasonryCardsPage,
8+
],
9+
imports: [
10+
IonicPageModule.forChild(MasonryCardsPage),
11+
],
12+
exports: [
13+
MasonryCardsPage
14+
]
15+
})
16+
export class MasonryCardsPageModule {}

‎src/pages/miscellaneous/masonry-cards/masonry-cards.scss

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
page-masonry-cards {
2+
.pins {
3+
column-count: 2;
4+
}
5+
6+
.pin {
7+
display: inline-block;
8+
}
9+
10+
.card {
11+
margin-top: 10px;
12+
}
13+
14+
ion-avatar {
15+
margin: 0 !important;
16+
}
17+
18+
.item ion-avatar img {
19+
width: 9vw ;
20+
height: 9vw;
21+
}
22+
23+
.post-description {
24+
padding: 8px;
25+
border-bottom: 1px solid #eee;
26+
}
27+
}

‎src/pages/miscellaneous/masonry-cards/masonry-cards.ts

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { Component } from '@angular/core';
2+
import { IonicPage, NavController, NavParams } from 'ionic-angular';
3+
4+
@IonicPage()
5+
@Component({
6+
selector: 'page-masonry-cards',
7+
templateUrl: 'masonry-cards.html',
8+
})
9+
export class MasonryCardsPage {
10+
11+
posts = []
12+
13+
constructor(public navCtrl: NavController, public navParams: NavParams) {
14+
}
15+
16+
ionViewDidLoad() {
17+
this.posts = [
18+
{
19+
description: 'Trying out digital painting',
20+
image: 'https://s-media-cache-ak0.pinimg.com/564x/d5/63/b0/d563b08194f0a92cc7d381f7f8582a08.jpg'
21+
},
22+
{
23+
description: '',
24+
image: 'https://s-media-cache-ak0.pinimg.com/236x/43/f3/3d/43f33de6f96ca8e6f8dc6ff1ad86b586.jpg'
25+
},
26+
{
27+
description: 'Look at this amazing clay humming bird I crafted!',
28+
image: 'https://s-media-cache-ak0.pinimg.com/236x/68/68/a2/6868a2f821e5d15cc8fcd8cfa1694606.jpg'
29+
},
30+
{
31+
description: 'Origami tullip tutorial',
32+
image: 'https://s-media-cache-ak0.pinimg.com/236x/38/6f/8e/386f8ec1725f09883d827094228d0f82.jpg'
33+
},
34+
{
35+
description: '',
36+
image: 'https://s-media-cache-ak0.pinimg.com/564x/f6/61/5c/f6615ca7068da18157588890f9e9e03a.jpg'
37+
},
38+
{
39+
description: '',
40+
image: 'https://s-media-cache-ak0.pinimg.com/564x/0d/29/35/0d2935d14c17aff1baab75360c9e2bd6.jpg'
41+
},
42+
{
43+
description: 'Delicious chocolate bread recipe!',
44+
image: 'https://s-media-cache-ak0.pinimg.com/564x/06/a9/8e/06a98e67111aae83a481a2c1dbb594a4.jpg'
45+
},
46+
{
47+
description: '',
48+
image: 'https://s-media-cache-ak0.pinimg.com/564x/d5/8c/37/d58c3783d6ebf79db0f9c057726800a0.jpg'
49+
},
50+
{
51+
description: '',
52+
image: 'https://s-media-cache-ak0.pinimg.com/564x/f5/35/97/f53597bf16aff91315a0beca27ffdbda.jpg'
53+
},
54+
{
55+
description: '',
56+
image: 'https://s-media-cache-ak0.pinimg.com/564x/cf/fe/6d/cffe6dd7dece1cb0562f65cd3bfba1ac.jpg'
57+
},
58+
{
59+
description: 'Fastest car of all times',
60+
image: 'https://s-media-cache-ak0.pinimg.com/564x/5f/bf/34/5fbf3414f9de301c8f4b868b1c2e2339.jpg'
61+
},
62+
// {
63+
// description: '',
64+
// image: ''
65+
// }
66+
];
67+
}
68+
69+
}

‎src/pages/miscellaneous/miscellaneous.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,10 @@ export class MiscellaneousListPage {
4040
title: 'Flash Card',
4141
page: 'FlashCardPage'
4242
},
43-
// {
44-
// title: 'Currency Converter',
45-
// page: CurrencyConverterPage
46-
// },
43+
{
44+
title: 'Masonry Cards',
45+
page: 'MasonryCardsPage'
46+
},
4747
{
4848
title: 'Testimonials',
4949
page: 'TestimonialsPage'

0 commit comments

Comments
 (0)