Skip to content
This repository was archived by the owner on Feb 6, 2024. It is now read-only.

Commit f562fb0

Browse files
peterpeterparkerpeterpeterparker
committed
feat: add feed card content for first card too
1 parent bc439b2 commit f562fb0

File tree

9 files changed

+186
-79
lines changed

9 files changed

+186
-79
lines changed

‎studio/src/app/components/feed/app-feed-card/app-feed-card.scss‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎studio/src/app/components/feed/app-feed-card/app-feed-card.tsx‎

Lines changed: 0 additions & 41 deletions
This file was deleted.

‎studio/src/app/components/feed/app-feed/app-feed.scss‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
app-feed {
2-
@import "../../../../global/theme/feed/feed-card";
32

43
ion-card[class*="sc-ion-card"] {
4+
--background: white;
5+
56
div.deck-container {
67
width: 100%;
78
height: 250px;

‎studio/src/app/components/feed/app-feed/app-feed.tsx‎

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ export class AppFeed {
1515
<deckgo-deck embedded={true} pager={false}>
1616
<deckgo-slide-title>
1717
<h1 slot="title">DeckDeckGo</h1>
18-
<div no-shadow slot="content ion-text-lowercase">
18+
<div no-shadow slot="content">
1919
<h3>The Progressive Web App alternative for simple presentations 🚀</h3>
2020
</div>
2121
</deckgo-slide-title>
@@ -34,26 +34,7 @@ export class AppFeed {
3434

3535
<hr class="deck-divider" margin></hr>
3636

37-
<ion-card-content class="first-card" margin-start margin-end>
38-
39-
<ion-card-header>
40-
<ion-card-title class="ion-text-uppercase">Card Title</ion-card-title>
41-
<ion-card-subtitle class="ion-text-lowercase">
42-
<div class="chips"><ion-label>Javascript&nbsp;</ion-label></div>
43-
<div class="chips"><ion-label>Typescript&nbsp;</ion-label></div>
44-
<div class="chips"><ion-label>Ionic&nbsp;</ion-label></div>
45-
</ion-card-subtitle>
46-
</ion-card-header>
47-
48-
<p class="content ion-text-lowercase">Keep close to Nature's heart... and break clear away, once in
49-
awhile,
50-
and climb a mountain or spend a week in the woods. Wash your spirit clean.
51-
</p>
52-
53-
<p class="author" padding-top padding-bottom>
54-
<ion-label>David Dal Busco | Mars 9</ion-label>
55-
</p>
56-
</ion-card-content>
37+
<app-feed-card-content firstCard={true}></app-feed-card-content>
5738
</ion-card>,
5839
<app-feed-card></app-feed-card>,
5940
<app-feed-card></app-feed-card>,

‎studio/src/app/components/feed/card/app-feed-card-content/app-feed-card-content.scss‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
app-feed-card-content {
2+
3+
ion-card-content {
4+
display: flex;
5+
align-items: stretch;
6+
flex: 1 1 auto;
7+
width: 100%;
8+
9+
ion-card-title, ion-card-subtitle {
10+
width: 380px;
11+
max-width: 380px;
12+
white-space: nowrap;
13+
overflow: hidden;
14+
}
15+
16+
ion-card-subtitle {
17+
display: flex;
18+
flex-wrap: wrap;
19+
}
20+
21+
p.content {
22+
color: black;
23+
margin-top: 8px;
24+
margin-bottom: 8px;
25+
}
26+
27+
div {
28+
&.preview {
29+
width: 15rem;
30+
min-width: 8rem;
31+
display: flex;
32+
justify-content: center;
33+
align-items: center;
34+
}
35+
}
36+
37+
38+
input, div.chips {
39+
font-size: var(--font-size-normal);
40+
}
41+
42+
div.chips {
43+
background: rgba(var(--ion-color-primary-rgb), 0.08);
44+
color: var(--ion-color-primary-shade);
45+
border-radius: 16px;
46+
display: inline-flex;
47+
align-items: center;
48+
justify-content: center;
49+
padding: 4px 8px;
50+
margin: 4px 4px 4px 0;
51+
height: 100%;
52+
53+
ion-icon {
54+
padding: 4px 0;
55+
}
56+
57+
ion-label {
58+
padding: 0px 4px;
59+
margin-bottom: 2px;
60+
61+
max-width: 125px;
62+
white-space: nowrap;
63+
overflow: hidden;
64+
text-overflow: ellipsis;
65+
}
66+
}
67+
}
68+
69+
@media screen and (max-width: 720px) {
70+
ion-card-content {
71+
ion-card-subtitle {
72+
display: none;
73+
}
74+
}
75+
}
76+
}

‎studio/src/app/components/feed/card/app-feed-card-content/app-feed-card-content.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import {Component, Prop} from '@stencil/core';
2+
3+
@Component({
4+
tag: 'app-feed-card-content',
5+
styleUrl: 'app-feed-card-content.scss',
6+
shadow: false
7+
})
8+
export class AppFeedCardContent {
9+
10+
@Prop()
11+
firstCard: boolean = false;
12+
13+
render() {
14+
return <ion-card-content>
15+
<div class="summary">
16+
17+
<ion-card-header>
18+
<ion-card-title class="ion-text-uppercase">Card Title</ion-card-title>
19+
20+
<ion-card-subtitle class="ion-text-lowercase">
21+
<div class="chips"><ion-label>Javascript&nbsp;</ion-label></div>
22+
<div class="chips"><ion-label>Typescript&nbsp;</ion-label></div>
23+
<div class="chips"><ion-label>Ionic&nbsp;</ion-label></div>
24+
</ion-card-subtitle>
25+
</ion-card-header>
26+
27+
<p padding-start padding-end class="content ion-text-lowercase">Keep close to Nature's heart... and break clear away, once in
28+
awhile,
29+
and climb a mountain or spend a week in the woods. Wash your spirit clean.
30+
</p>
31+
32+
<p class="author" padding>
33+
<ion-label>David Dal Busco | Mars 9</ion-label>
34+
</p>
35+
</div>
36+
37+
{this.renderPreviewImage()}
38+
</ion-card-content>
39+
}
40+
41+
private renderPreviewImage() {
42+
if (this.firstCard) {
43+
return undefined;
44+
} else {
45+
return <div class="preview">
46+
<img src="./assets/img/deckdeckgo-logo.svg"/>
47+
</div>;
48+
}
49+
}
50+
51+
}

‎studio/src/app/components/feed/card/app-feed-card/app-feed-card.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
app-feed-card {
2+
3+
ion-card[class*="sc-ion-card"] {
4+
--background: white;
5+
}
6+
7+
8+
}

‎studio/src/app/components/feed/card/app-feed-card/app-feed-card.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import {Component} from '@stencil/core';
2+
3+
@Component({
4+
tag: 'app-feed-card',
5+
styleUrl: 'app-feed-card.scss',
6+
shadow: false
7+
})
8+
export class AppFeedCard {
9+
10+
render() {
11+
12+
return <ion-card>
13+
<app-feed-card-content></app-feed-card-content>
14+
</ion-card>
15+
}
16+
17+
}

‎studio/src/components.d.ts‎

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -81,15 +81,22 @@ export namespace Components {
8181
'onSlideDidChange'?: (event: CustomEvent<HTMLElement>) => void;
8282
}
8383

84-
interface AppFeedCard {}
85-
interface AppFeedCardAttributes extends StencilHTMLAttributes {}
86-
8784
interface AppFeed {}
8885
interface AppFeedAttributes extends StencilHTMLAttributes {}
8986

9087
interface AppPopular {}
9188
interface AppPopularAttributes extends StencilHTMLAttributes {}
9289

90+
interface AppFeedCardContent {
91+
'firstCard': boolean;
92+
}
93+
interface AppFeedCardContentAttributes extends StencilHTMLAttributes {
94+
'firstCard'?: boolean;
95+
}
96+
97+
interface AppFeedCard {}
98+
interface AppFeedCardAttributes extends StencilHTMLAttributes {}
99+
93100
interface AppPublish {}
94101
interface AppPublishAttributes extends StencilHTMLAttributes {}
95102

@@ -156,9 +163,10 @@ declare global {
156163
'AppNavigation': Components.AppNavigation;
157164
'AppAddSlideAction': Components.AppAddSlideAction;
158165
'AppEditorToolbar': Components.AppEditorToolbar;
159-
'AppFeedCard': Components.AppFeedCard;
160166
'AppFeed': Components.AppFeed;
161167
'AppPopular': Components.AppPopular;
168+
'AppFeedCardContent': Components.AppFeedCardContent;
169+
'AppFeedCard': Components.AppFeedCard;
162170
'AppPublish': Components.AppPublish;
163171
'AppSlideNavigate': Components.AppSlideNavigate;
164172
'AppAbout': Components.AppAbout;
@@ -185,9 +193,10 @@ declare global {
185193
'app-navigation': Components.AppNavigationAttributes;
186194
'app-add-slide-action': Components.AppAddSlideActionAttributes;
187195
'app-editor-toolbar': Components.AppEditorToolbarAttributes;
188-
'app-feed-card': Components.AppFeedCardAttributes;
189196
'app-feed': Components.AppFeedAttributes;
190197
'app-popular': Components.AppPopularAttributes;
198+
'app-feed-card-content': Components.AppFeedCardContentAttributes;
199+
'app-feed-card': Components.AppFeedCardAttributes;
191200
'app-publish': Components.AppPublishAttributes;
192201
'app-slide-navigate': Components.AppSlideNavigateAttributes;
193202
'app-about': Components.AppAboutAttributes;
@@ -259,12 +268,6 @@ declare global {
259268
new (): HTMLAppEditorToolbarElement;
260269
};
261270

262-
interface HTMLAppFeedCardElement extends Components.AppFeedCard, HTMLStencilElement {}
263-
var HTMLAppFeedCardElement: {
264-
prototype: HTMLAppFeedCardElement;
265-
new (): HTMLAppFeedCardElement;
266-
};
267-
268271
interface HTMLAppFeedElement extends Components.AppFeed, HTMLStencilElement {}
269272
var HTMLAppFeedElement: {
270273
prototype: HTMLAppFeedElement;
@@ -277,6 +280,18 @@ declare global {
277280
new (): HTMLAppPopularElement;
278281
};
279282

283+
interface HTMLAppFeedCardContentElement extends Components.AppFeedCardContent, HTMLStencilElement {}
284+
var HTMLAppFeedCardContentElement: {
285+
prototype: HTMLAppFeedCardContentElement;
286+
new (): HTMLAppFeedCardContentElement;
287+
};
288+
289+
interface HTMLAppFeedCardElement extends Components.AppFeedCard, HTMLStencilElement {}
290+
var HTMLAppFeedCardElement: {
291+
prototype: HTMLAppFeedCardElement;
292+
new (): HTMLAppFeedCardElement;
293+
};
294+
280295
interface HTMLAppPublishElement extends Components.AppPublish, HTMLStencilElement {}
281296
var HTMLAppPublishElement: {
282297
prototype: HTMLAppPublishElement;
@@ -371,9 +386,10 @@ declare global {
371386
'app-navigation': HTMLAppNavigationElement
372387
'app-add-slide-action': HTMLAppAddSlideActionElement
373388
'app-editor-toolbar': HTMLAppEditorToolbarElement
374-
'app-feed-card': HTMLAppFeedCardElement
375389
'app-feed': HTMLAppFeedElement
376390
'app-popular': HTMLAppPopularElement
391+
'app-feed-card-content': HTMLAppFeedCardContentElement
392+
'app-feed-card': HTMLAppFeedCardElement
377393
'app-publish': HTMLAppPublishElement
378394
'app-slide-navigate': HTMLAppSlideNavigateElement
379395
'app-about': HTMLAppAboutElement
@@ -400,9 +416,10 @@ declare global {
400416
'app-navigation': HTMLAppNavigationElement;
401417
'app-add-slide-action': HTMLAppAddSlideActionElement;
402418
'app-editor-toolbar': HTMLAppEditorToolbarElement;
403-
'app-feed-card': HTMLAppFeedCardElement;
404419
'app-feed': HTMLAppFeedElement;
405420
'app-popular': HTMLAppPopularElement;
421+
'app-feed-card-content': HTMLAppFeedCardContentElement;
422+
'app-feed-card': HTMLAppFeedCardElement;
406423
'app-publish': HTMLAppPublishElement;
407424
'app-slide-navigate': HTMLAppSlideNavigateElement;
408425
'app-about': HTMLAppAboutElement;

0 commit comments

Comments
 (0)