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

Commit bc439b2

Browse files
peterpeterparkerpeterpeterparker
committed
feat: add feed card
1 parent 6410c0b commit bc439b2

File tree

4 files changed

+65
-184
lines changed

4 files changed

+65
-184
lines changed

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
app-feed-card {
2+
@import "../../../../global/theme/feed/feed-card";
3+
}

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
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+
return <ion-card>
12+
<ion-card-content>
13+
<div class="summary">
14+
15+
<ion-card-header>
16+
<ion-card-title class="ion-text-uppercase">Card Title</ion-card-title>
17+
18+
<ion-card-subtitle class="ion-text-lowercase">
19+
<div class="chips"><ion-label>Javascript&nbsp;</ion-label></div>
20+
<div class="chips"><ion-label>Typescript&nbsp;</ion-label></div>
21+
<div class="chips"><ion-label>Ionic&nbsp;</ion-label></div>
22+
</ion-card-subtitle>
23+
</ion-card-header>
24+
25+
<p padding-start padding-end class="content ion-text-lowercase">Keep close to Nature's heart... and break clear away, once in
26+
awhile,
27+
and climb a mountain or spend a week in the woods. Wash your spirit clean.
28+
</p>
29+
30+
<p class="author" padding>
31+
<ion-label>David Dal Busco | Mars 9</ion-label>
32+
</p>
33+
</div>
34+
<div class="preview">
35+
<img src="./assets/img/deckdeckgo-logo.svg"/>
36+
</div>
37+
</ion-card-content>
38+
</ion-card>
39+
}
40+
41+
}

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

Lines changed: 8 additions & 184 deletions
Original file line numberDiff line numberDiff line change
@@ -55,190 +55,14 @@ export class AppFeed {
5555
</p>
5656
</ion-card-content>
5757
</ion-card>,
58-
<ion-card>
59-
<ion-card-content>
60-
<div class="summary">
61-
62-
<ion-card-header>
63-
<ion-card-title class="ion-text-uppercase">Card Title</ion-card-title>
64-
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
65-
</ion-card-header>
66-
67-
<p padding-start padding-end class="content ion-text-lowercase">Keep close to Nature's heart... and break clear away, once in
68-
awhile,
69-
and climb a mountain or spend a week in the woods. Wash your spirit clean.
70-
</p>
71-
72-
<p class="author" padding>
73-
<ion-label>David Dal Busco | Mars 9</ion-label>
74-
</p>
75-
</div>
76-
<div class="preview">
77-
<img src="./assets/img/deckdeckgo-logo.svg"/>
78-
</div>
79-
</ion-card-content>
80-
</ion-card>,
81-
<ion-card>
82-
<ion-card-content>
83-
<div class="summary">
84-
85-
<ion-card-header>
86-
<ion-card-title class="ion-text-uppercase">Card Title</ion-card-title>
87-
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
88-
</ion-card-header>
89-
90-
<p padding-start padding-end class="content ion-text-lowercase">Keep close to Nature's heart... and break clear away, once in
91-
awhile,
92-
and climb a mountain or spend a week in the woods. Wash your spirit clean.
93-
</p>
94-
95-
<p class="author" padding>
96-
<ion-label>David Dal Busco | Mars 9</ion-label>
97-
</p>
98-
</div>
99-
<div class="preview">
100-
<img src="./assets/img/deckdeckgo-logo.svg"/>
101-
</div>
102-
</ion-card-content>
103-
</ion-card>,
104-
<ion-card>
105-
<ion-card-content>
106-
<div class="summary">
107-
108-
<ion-card-header>
109-
<ion-card-title class="ion-text-uppercase">Card Title</ion-card-title>
110-
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
111-
</ion-card-header>
112-
113-
<p padding-start padding-end class="content ion-text-lowercase">Keep close to Nature's heart... and break clear away, once in
114-
awhile,
115-
and climb a mountain or spend a week in the woods. Wash your spirit clean.
116-
</p>
117-
118-
<p class="author" padding>
119-
<ion-label>David Dal Busco | Mars 9</ion-label>
120-
</p>
121-
</div>
122-
<div class="preview">
123-
<img src="./assets/img/deckdeckgo-logo.svg"/>
124-
</div>
125-
</ion-card-content>
126-
</ion-card>,
127-
<ion-card>
128-
<ion-card-content>
129-
<div class="summary">
130-
131-
<ion-card-header>
132-
<ion-card-title class="ion-text-uppercase">Card Title</ion-card-title>
133-
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
134-
</ion-card-header>
135-
136-
<p padding-start padding-end class="content ion-text-lowercase">Keep close to Nature's heart... and break clear away, once in
137-
awhile,
138-
and climb a mountain or spend a week in the woods. Wash your spirit clean.
139-
</p>
140-
141-
<p class="author" padding>
142-
<ion-label>David Dal Busco | Mars 9</ion-label>
143-
</p>
144-
</div>
145-
<div class="preview">
146-
<img src="./assets/img/deckdeckgo-logo.svg"/>
147-
</div>
148-
</ion-card-content>
149-
</ion-card>,
150-
<ion-card>
151-
<ion-card-content>
152-
<div class="summary">
153-
154-
<ion-card-header>
155-
<ion-card-title class="ion-text-uppercase">Card Title</ion-card-title>
156-
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
157-
</ion-card-header>
158-
159-
<p padding-start padding-end class="content ion-text-lowercase">Keep close to Nature's heart... and break clear away, once in
160-
awhile,
161-
and climb a mountain or spend a week in the woods. Wash your spirit clean.
162-
</p>
163-
164-
<p class="author" padding>
165-
<ion-label>David Dal Busco | Mars 9</ion-label>
166-
</p>
167-
</div>
168-
<div class="preview">
169-
<img src="./assets/img/deckdeckgo-logo.svg"/>
170-
</div>
171-
</ion-card-content>
172-
</ion-card>,
173-
<ion-card>
174-
<ion-card-content>
175-
<div class="summary">
176-
177-
<ion-card-header>
178-
<ion-card-title class="ion-text-uppercase">Card Title</ion-card-title>
179-
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
180-
</ion-card-header>
181-
182-
<p padding-start padding-end class="content ion-text-lowercase">Keep close to Nature's heart... and break clear away, once in
183-
awhile,
184-
and climb a mountain or spend a week in the woods. Wash your spirit clean.
185-
</p>
186-
187-
<p class="author" padding>
188-
<ion-label>David Dal Busco | Mars 9</ion-label>
189-
</p>
190-
</div>
191-
<div class="preview">
192-
<img src="./assets/img/deckdeckgo-logo.svg"/>
193-
</div>
194-
</ion-card-content>
195-
</ion-card>,
196-
<ion-card>
197-
<ion-card-content>
198-
<div class="summary">
199-
200-
<ion-card-header>
201-
<ion-card-title class="ion-text-uppercase">Card Title</ion-card-title>
202-
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
203-
</ion-card-header>
204-
205-
<p padding-start padding-end class="content ion-text-lowercase">Keep close to Nature's heart... and break clear away, once in
206-
awhile,
207-
and climb a mountain or spend a week in the woods. Wash your spirit clean.
208-
</p>
209-
210-
<p class="author" padding>
211-
<ion-label>David Dal Busco | Mars 9</ion-label>
212-
</p>
213-
</div>
214-
<div class="preview">
215-
<img src="./assets/img/deckdeckgo-logo.svg"/>
216-
</div>
217-
</ion-card-content>
218-
</ion-card>,
219-
<ion-card>
220-
<ion-card-content>
221-
<div class="summary">
222-
223-
<ion-card-header>
224-
<ion-card-title class="ion-text-uppercase">Card Title</ion-card-title>
225-
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
226-
</ion-card-header>
227-
228-
<p padding-start padding-end class="content ion-text-lowercase">Keep close to Nature's heart... and break clear away, once in
229-
awhile,
230-
and climb a mountain or spend a week in the woods. Wash your spirit clean.
231-
</p>
232-
233-
<p class="author" padding>
234-
<ion-label>David Dal Busco | Mars 9</ion-label>
235-
</p>
236-
</div>
237-
<div class="preview">
238-
<img src="./assets/img/deckdeckgo-logo.svg"/>
239-
</div>
240-
</ion-card-content>
241-
</ion-card>
58+
<app-feed-card></app-feed-card>,
59+
<app-feed-card></app-feed-card>,
60+
<app-feed-card></app-feed-card>,
61+
<app-feed-card></app-feed-card>,
62+
<app-feed-card></app-feed-card>,
63+
<app-feed-card></app-feed-card>,
64+
<app-feed-card></app-feed-card>,
65+
<app-feed-card></app-feed-card>,
24266
];
24367
}
24468
}

‎studio/src/components.d.ts‎

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

84+
interface AppFeedCard {}
85+
interface AppFeedCardAttributes extends StencilHTMLAttributes {}
86+
8487
interface AppFeed {}
8588
interface AppFeedAttributes extends StencilHTMLAttributes {}
8689

@@ -153,6 +156,7 @@ declare global {
153156
'AppNavigation': Components.AppNavigation;
154157
'AppAddSlideAction': Components.AppAddSlideAction;
155158
'AppEditorToolbar': Components.AppEditorToolbar;
159+
'AppFeedCard': Components.AppFeedCard;
156160
'AppFeed': Components.AppFeed;
157161
'AppPopular': Components.AppPopular;
158162
'AppPublish': Components.AppPublish;
@@ -181,6 +185,7 @@ declare global {
181185
'app-navigation': Components.AppNavigationAttributes;
182186
'app-add-slide-action': Components.AppAddSlideActionAttributes;
183187
'app-editor-toolbar': Components.AppEditorToolbarAttributes;
188+
'app-feed-card': Components.AppFeedCardAttributes;
184189
'app-feed': Components.AppFeedAttributes;
185190
'app-popular': Components.AppPopularAttributes;
186191
'app-publish': Components.AppPublishAttributes;
@@ -254,6 +259,12 @@ declare global {
254259
new (): HTMLAppEditorToolbarElement;
255260
};
256261

262+
interface HTMLAppFeedCardElement extends Components.AppFeedCard, HTMLStencilElement {}
263+
var HTMLAppFeedCardElement: {
264+
prototype: HTMLAppFeedCardElement;
265+
new (): HTMLAppFeedCardElement;
266+
};
267+
257268
interface HTMLAppFeedElement extends Components.AppFeed, HTMLStencilElement {}
258269
var HTMLAppFeedElement: {
259270
prototype: HTMLAppFeedElement;
@@ -360,6 +371,7 @@ declare global {
360371
'app-navigation': HTMLAppNavigationElement
361372
'app-add-slide-action': HTMLAppAddSlideActionElement
362373
'app-editor-toolbar': HTMLAppEditorToolbarElement
374+
'app-feed-card': HTMLAppFeedCardElement
363375
'app-feed': HTMLAppFeedElement
364376
'app-popular': HTMLAppPopularElement
365377
'app-publish': HTMLAppPublishElement
@@ -388,6 +400,7 @@ declare global {
388400
'app-navigation': HTMLAppNavigationElement;
389401
'app-add-slide-action': HTMLAppAddSlideActionElement;
390402
'app-editor-toolbar': HTMLAppEditorToolbarElement;
403+
'app-feed-card': HTMLAppFeedCardElement;
391404
'app-feed': HTMLAppFeedElement;
392405
'app-popular': HTMLAppPopularElement;
393406
'app-publish': HTMLAppPublishElement;

0 commit comments

Comments
 (0)