Skip to content
This repository was archived by the owner on Nov 30, 2022. It is now read-only.

Commit e13881a

Browse files
garygrossgartengarygrossgarten
committed
update home page ripple effect on cards
1 parent 470ebc3 commit e13881a

2 files changed

Lines changed: 34 additions & 28 deletions

File tree

‎src/app/pages/home/home.page.html‎

Lines changed: 30 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -30,66 +30,67 @@
3030

3131
<ion-row>
3232
<ion-col size="12" sizeSm="6" sizeMd="4">
33-
<fiv-ripple (fivClick)="navigate('/components')">
34-
<ion-card class="big">
33+
<ion-card class="big">
34+
<fiv-ripple (fivClick)="navigate('/components')">
3535
<ion-card-header>
3636
<ion-card-subtitle>Ionic 4 UI Components</ion-card-subtitle>
3737
<ion-card-title>Components</ion-card-title>
3838
</ion-card-header>
3939
<ion-card-content>
4040
Awesome content
4141
</ion-card-content>
42-
</ion-card>
43-
</fiv-ripple>
42+
</fiv-ripple>
43+
</ion-card>
4444

4545
</ion-col>
4646
<ion-col size="12" sizeSm="6" sizeMd="8" no-padding>
4747
<ion-grid fixed no-padding>
4848
<ion-row>
4949
<ion-col size="12" sizeMd="6">
50-
<fiv-ripple (fivClick)="navigate('/getting-started')">
51-
<ion-card class="small">
50+
<ion-card class="small">
51+
<fiv-ripple (fivClick)="navigate('/getting-started')">
5252
<ion-card-header>
5353
<ion-card-subtitle>Learn more about the UI Library</ion-card-subtitle>
5454
<ion-card-title>Getting Started</ion-card-title>
5555
</ion-card-header>
5656
<ion-card-content>
5757
Awesome content
5858
</ion-card-content>
59-
</ion-card>
60-
</fiv-ripple>
59+
</fiv-ripple>
60+
</ion-card>
6161
</ion-col>
6262
<ion-col size="12" sizeMd="6">
63-
<fiv-ripple (fivClick)="navigate('/installation')">
64-
<ion-card class="small">
63+
<ion-card class="small">
64+
65+
<fiv-ripple (fivClick)="navigate('/installation')">
6566
<ion-card-header>
6667
<ion-card-subtitle>First Steps</ion-card-subtitle>
6768
<ion-card-title>Installation</ion-card-title>
6869
</ion-card-header>
6970
<ion-card-content>
7071
Awesome content
7172
</ion-card-content>
72-
</ion-card>
73-
</fiv-ripple>
73+
</fiv-ripple>
74+
</ion-card>
7475
</ion-col>
7576
</ion-row>
7677
<ion-row>
7778
<ion-col size="12" sizeMd="6">
78-
<fiv-ripple (fivClick)="navigate('/developer-tools')">
79-
<ion-card class="small">
79+
<ion-card class="small">
80+
<fiv-ripple (fivClick)="navigate('/developer-tools')">
8081
<ion-card-header>
8182
<ion-card-subtitle>Discover our VS Code Plugins</ion-card-subtitle>
8283
<ion-card-title>Developer Tools</ion-card-title>
8384
</ion-card-header>
8485
<ion-card-content>
8586

8687
</ion-card-content>
87-
</ion-card>
88-
</fiv-ripple>
88+
</fiv-ripple>
89+
</ion-card>
8990
</ion-col>
9091
<ion-col size="12" sizeMd="6">
91-
<fiv-ripple>
92-
<ion-card class="small">
92+
<ion-card class="small">
93+
<fiv-ripple>
9394
<ion-card-header>
9495
<ion-card-subtitle>Support Us</ion-card-subtitle>
9596
<ion-card-title>Star this project on github</ion-card-title>
@@ -100,18 +101,19 @@
100101
repo="ionic-4-components">
101102
</mdo-github-button>
102103
</ion-card-content>
103-
</ion-card>
104-
</fiv-ripple>
104+
</fiv-ripple>
105+
106+
</ion-card>
105107
</ion-col>
106108
</ion-row>
107109
</ion-grid>
108110
</ion-col>
109111
</ion-row>
110112
<ion-row>
111113
<ion-col size="12" sizeSm="6" sizeMd="4">
112-
<fiv-ripple>
113114

114-
<ion-card class="small">
115+
<ion-card class="small">
116+
<fiv-ripple>
115117
<ion-card-header>
116118
<ion-card-subtitle>Get in Touch</ion-card-subtitle>
117119
<ion-card-title>The Fivethree Team</ion-card-title>
@@ -122,21 +124,21 @@
122124
href="https://twitter.com/mrcjln" class="twitter">@mrcjln</a> or on <a target="blank"
123125
href="https://fivethree.io">fivethree.io</a>.
124126
</ion-card-content>
125-
</ion-card>
126-
</fiv-ripple>
127+
</fiv-ripple>
128+
</ion-card>
127129
</ion-col>
128130
<ion-col size="12" sizeSm="6" sizeMd="4">
129-
<fiv-ripple (click)="open('https://github.com/fivethree-team/ionic-4-components')">
130-
<ion-card class="small">
131+
<ion-card class="small">
132+
<fiv-ripple (click)="open('https://github.com/fivethree-team/ionic-4-components')">
131133
<ion-card-header>
132134
<ion-card-subtitle>Contributions Welcome</ion-card-subtitle>
133135
<ion-card-title>Contributing</ion-card-title>
134136
</ion-card-header>
135137
<ion-card-content>
136138
If you want to add a component or found a bug, create a pull request or file an issue!
137139
</ion-card-content>
138-
</ion-card>
139-
</fiv-ripple>
140+
</fiv-ripple>
141+
</ion-card>
140142
</ion-col>
141143
<ion-col size="12" sizeSm="6" sizeMd="4">
142144
<ion-card class="small">

‎src/app/pages/home/home.page.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ ion-card {
1414
}
1515
}
1616

17+
fiv-ripple {
18+
height: 100%;
19+
}
20+
1721
ion-card:hover {
1822
box-shadow: 0 0.35em 1.175em rgba(0, 0, 0, 0.1),
1923
0 0.175em 0.5em rgba(0, 0, 0, 0.08);

0 commit comments

Comments
 (0)