Skip to content

Commit 7c54e9b

Browse files
desig9steindesig9stein
committed
refactor(card): update the card sample
1 parent b83ebdd commit 7c54e9b

File tree

2 files changed

+106
-63
lines changed

2 files changed

+106
-63
lines changed

‎src/app/card/card.sample.html‎

Lines changed: 93 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -99,19 +99,21 @@ <h5 igxCardHeaderSubtitle>{{cards[1].subtitle}}</h5>
9999

100100
<article class="card">
101101
<igx-card>
102-
<igx-card-header>
103-
@if(!properties.hideHeader && !hideTitle) {
104-
<h5 igxCardHeaderTitle>{{cards[1].title}}</h5>
105-
}
106-
@if(!properties.hideHeader && !hideSubtitle) {
107-
<h5 igxCardHeaderSubtitle>{{cards[1].subtitle}}</h5>
108-
}
109-
@if(!properties.hideMedia) {
110-
<igx-card-media width="62px" height="62px">
111-
<img [src]="cards[1].imageUrl" />
112-
</igx-card-media>
113-
}
114-
</igx-card-header>
102+
@if(!properties.hideHeader) {
103+
<igx-card-header>
104+
@if(!hideTitle) {
105+
<h5 igxCardHeaderTitle>{{cards[1].title}}</h5>
106+
}
107+
@if(!hideSubtitle) {
108+
<h5 igxCardHeaderSubtitle>{{cards[1].subtitle}}</h5>
109+
}
110+
@if(!properties.hideMedia) {
111+
<igx-card-media width="62px" height="62px">
112+
<img [src]="cards[1].imageUrl" />
113+
</igx-card-media>
114+
}
115+
</igx-card-header>
116+
}
115117

116118
<igx-divider type="dashed" [middle]="true"></igx-divider>
117119

@@ -141,22 +143,37 @@ <h5 igxCardHeaderSubtitle>{{cards[1].subtitle}}</h5>
141143
flex: 1 1 auto;
142144
"
143145
>
144-
<igx-card-header>
145-
<igx-avatar [src]="cards[2].avatarUrl"></igx-avatar>
146-
<h3 igxCardHeaderTitle>{{ cards[2].title }}</h3>
147-
<h5 igxCardHeaderSubtitle>{{ cards[2].subtitle }}</h5>
148-
</igx-card-header>
149146

150-
<igx-card-actions [vertical]="false">
151-
@for(button of cards[2].buttons; track button){
152-
<button igxButton igxRipple>{{ button }}</button>
153-
}
154-
</igx-card-actions>
147+
@if(!properties.hideHeader) {
148+
<igx-card-header>
149+
@if(!hideThumbnail) {
150+
<igx-avatar [src]="cards[2].avatarUrl"></igx-avatar>
151+
}
152+
153+
@if(!hideTitle) {
154+
<h3 igxCardHeaderTitle>{{ cards[2].title }}</h3>
155+
}
156+
157+
@if(!hideSubtitle) {
158+
<h5 igxCardHeaderSubtitle>{{ cards[2].subtitle }}</h5>
159+
}
160+
</igx-card-header>
161+
}
162+
163+
@if(!properties.hideActions) {
164+
<igx-card-actions [vertical]="false">
165+
@for(button of cards[2].buttons; track button){
166+
<button igxButton igxRipple>{{ button }}</button>
167+
}
168+
</igx-card-actions>
169+
}
155170
</div>
156171

157-
<igx-card-media width="86px" height="auto">
172+
@if(!properties.hideMedia) {
173+
<igx-card-media width="86px">
158174
<img [src]="cards[2].imageUrl" />
159175
</igx-card-media>
176+
}
160177
</igx-card>
161178
</article>
162179
<!--Melo Di Card Ends-->
@@ -260,26 +277,36 @@ <h2 class="sample-title">WC Card</h2>
260277

261278
<article class="card">
262279
<igc-card>
263-
<igc-card-header style="flex-direction: row">
264-
@if(!properties.hideMedia) {
265-
<igc-card-media
266-
slot="thumbnail"
267-
style="width: 62px; height: 62px"
268-
>
269-
<img [src]="cards[1].imageUrl" />
270-
</igc-card-media>
271-
}
272-
@if(!properties.hideHeader) { @if(!hideTitle) {
273-
<span slot="title">{{cards[1].title}}</span>
274-
}
275-
@if(!hideSubtitle) {
276-
<span slot="subtitle">{{cards[1].subtitle}}</span>
280+
<div style="
281+
display: flex;
282+
">
283+
@if(!properties.hideHeader) {
284+
<igc-card-header>
285+
@if(!properties.hideMedia) {
286+
<div slot="thumbnail">
287+
<igc-card-media
288+
slot="thumbnail"
289+
style="width: 62px; height: 62px"
290+
>
291+
<img [src]="cards[1].imageUrl" />
292+
</igc-card-media>
293+
</div>
294+
}
295+
296+
@if(!properties.hideHeader) { @if(!hideTitle) {
297+
<span slot="title">{{cards[1].title}}</span>
298+
}
299+
@if(!hideSubtitle) {
300+
<span slot="subtitle">{{cards[1].subtitle}}</span>
301+
}
302+
}
303+
</igc-card-header>
277304
}
278-
}
279-
</igc-card-header>
305+
</div>
306+
280307

281308
@if(!properties.hideActions) {
282-
<igc-card-actions>
309+
<igc-card-actions>
283310
@for(icon of cards[1].icons; track icon) {
284311
<button
285312
igxIconButton="flat"
@@ -304,25 +331,38 @@ <h2 class="sample-title">WC Card</h2>
304331
flex: 1 1 auto;
305332
"
306333
>
307-
<igc-card-header>
308-
<igc-avatar
309-
slot="thumbnail"
310-
[src]="cards[2].avatarUrl"
311-
></igc-avatar>
312-
<span slot="title">{{ cards[2].title }}</span>
313-
<span slot="subtitle">{{ cards[2].subtitle }}</span>
314-
</igc-card-header>
334+
@if(!properties.hideHeader) {
335+
<igc-card-header>
336+
@if(!hideThumbnail) {
337+
<igc-avatar
338+
slot="thumbnail"
339+
[src]="cards[2].avatarUrl"
340+
></igc-avatar>
341+
}
342+
@if(!hideTitle) {
343+
<span slot="title">{{ cards[2].title }}</span>
344+
}
315345

316-
<igc-card-actions>
346+
@if(!hideSubtitle) {
347+
<span slot="subtitle">{{ cards[2].subtitle }}</span>
348+
}
349+
</igc-card-header>
350+
}
351+
352+
@if(!properties.hideActions) {
353+
<igc-card-actions>
317354
@for(button of cards[2].buttons; track button){
318355
<igc-button variant="flat">{{ button }}</igc-button>
319356
}
320357
</igc-card-actions>
358+
}
321359
</div>
322360

323-
<igc-card-media style="width: 86px; height: 132px">
324-
<img [src]="cards[2].imageUrl" />
325-
</igc-card-media>
361+
@if(!properties.hideMedia) {
362+
<igc-card-media style="width: 86px">
363+
<img [src]="cards[2].imageUrl" />
364+
</igc-card-media>
365+
}
326366
</igc-card>
327367
</article>
328368
<!--Melo Di Card Ends-->

‎src/app/card/card.sample.scss‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
.cards-wrapper {
22
display: grid;
3-
grid-template-columns: repeat(2, 1fr);
3+
grid-template-columns: repeat(2, minmax(340px, 1fr));
44
justify-items: center;
55
padding-block-start: 2rem;
6+
gap: 1rem;
67
}
78

89
.angular-cards, .wc-cards {
@@ -11,19 +12,21 @@
1112
grid-auto-flow: row;
1213
grid-template-rows: subgrid;
1314
grid-row: span 5;
15+
}
16+
17+
.custom-controls {
18+
display: grid;
1419
gap: 1rem;
1520
}
1621

17-
.card {
18-
min-width: 320px;
19-
max-width: 320px;
22+
#igniteui-demo-app .sample-title {
23+
margin-bottom: 0;
24+
}
2025

21-
h4 {
22-
margin-bottom: 1rem;
23-
}
26+
#igniteui-demo-app .sample-wrapper {
27+
height: auto;
2428
}
2529

26-
.custom-controls {
27-
display: grid;
28-
gap: 1rem;
30+
#igniteui-demo-app .content {
31+
padding-bottom: 1rem;
2932
}

0 commit comments

Comments
 (0)