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

Commit 0ede5b4

Browse files
peterpeterparkerpeterpeterparker
committed
feat: demo
1 parent 36577cb commit 0ede5b4

File tree

5 files changed

+308
-8
lines changed

5 files changed

+308
-8
lines changed

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

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
ion-segment {
2+
margin-bottom: 16px;
3+
}
4+
5+
// Source: https://www.w3schools.com/howto/howto_css_devices.asp
6+
7+
div.laptop-container {
8+
9+
/* The laptop with borders */
10+
.laptop {
11+
-webkit-transform-origin: 0 0;
12+
transform-origin: 0 0;
13+
-webkit-transform: scale(.6) translate(-50%); /* Scaled down for a better Try-it experience (change to 1 for full scale) */
14+
transform: scale(.6) translate(-50%); /* Scaled down for a better Try-it experience (change to 1 for full scale) */
15+
left: 50%;
16+
position: absolute;
17+
width: 360px;
18+
height: 250px;
19+
border-radius: 6px;
20+
border-style: solid;
21+
border-color: black;
22+
border-width: 24px 24px 80px;
23+
background-color: black;
24+
25+
}
26+
27+
/* The top of the keyboard */
28+
.laptop:before {
29+
content: '';
30+
display: block;
31+
position: absolute;
32+
width: 250px;
33+
height: 20px;
34+
bottom: -100px;
35+
left: 50%;
36+
-webkit-transform: translate(-50%);
37+
transform: translate(-50%);
38+
background: #f1f1f1;
39+
border-bottom-left-radius: 5px;
40+
border-bottom-right-radius: 5px;
41+
z-index: 1;
42+
}
43+
44+
/* The screen (or content) of the device */
45+
.laptop .content {
46+
width: 366px;
47+
height: 300px;
48+
overflow: hidden;
49+
border: none;
50+
}
51+
52+
/* The keyboard of the laptop */
53+
.laptop:after {
54+
content: '';
55+
display: block;
56+
position: absolute;
57+
width: 500px;
58+
height: 40px;
59+
margin: 22px 0 0 -70px;
60+
background: black;
61+
border-radius: 6px;
62+
}
63+
64+
iframe {
65+
width: 100%;
66+
height: 100%;
67+
border: none;
68+
}
69+
}
70+
71+
div.smartphone-container {
72+
73+
/* The device with borders */
74+
.smartphone {
75+
position: relative;
76+
width: calc(360px / 3.5);
77+
height: calc(640px / 3.5);
78+
margin: auto;
79+
border: 16px black solid;
80+
border-top-width: 20px;
81+
border-bottom-width: 20px;
82+
border-radius: 36px;
83+
}
84+
85+
/* The horizontal line on the top of the device */
86+
.smartphone:before {
87+
content: '';
88+
display: block;
89+
width: 30px;
90+
height: 2px;
91+
position: absolute;
92+
top: -9px;
93+
left: 50%;
94+
transform: translate(-50%, -50%);
95+
background: #333;
96+
border-radius: 10px;
97+
}
98+
99+
/* The circle on the bottom of the device */
100+
.smartphone:after {
101+
content: '';
102+
display: block;
103+
width: 10px;
104+
height: 10px;
105+
position: absolute;
106+
left: 50%;
107+
bottom: -21px;
108+
transform: translate(-50%, -50%);
109+
background: #333;
110+
border-radius: 50%;
111+
}
112+
113+
/* The screen (or content) of the device */
114+
.smartphone .content {
115+
width: 100%;
116+
height: 100%;
117+
margin: 0;
118+
background: white;
119+
120+
position: relative;
121+
overflow: hidden;
122+
}
123+
}
124+
125+
div.tablet-container {
126+
127+
/* The device with borders */
128+
.tablet {
129+
position: relative;
130+
width: calc(1024px / 4);
131+
height: calc(768px / 4);
132+
margin: auto;
133+
border: 16px black solid;
134+
border-top-width: 20px;
135+
border-bottom-width: 20px;
136+
border-radius: 36px;
137+
}
138+
139+
/* The horizontal line on the top of the device */
140+
.tablet:before {
141+
content: '';
142+
display: block;
143+
width: 30px;
144+
height: 2px;
145+
position: absolute;
146+
top: -9px;
147+
left: 50%;
148+
transform: translate(-50%, -50%);
149+
background: #333;
150+
border-radius: 10px;
151+
}
152+
153+
/* The circle on the bottom of the device */
154+
.tablet:after {
155+
content: '';
156+
display: block;
157+
width: 10px;
158+
height: 10px;
159+
position: absolute;
160+
left: 50%;
161+
bottom: -21px;
162+
transform: translate(-50%, -50%);
163+
background: #333;
164+
border-radius: 50%;
165+
}
166+
167+
/* The screen (or content) of the device */
168+
.tablet .content {
169+
width: 100%;
170+
height: 100%;
171+
background: white;
172+
margin: 0;
173+
}
174+
}
175+
176+
div.beamer-container {
177+
height: 200px;
178+
padding: 8px 16px;
179+
}
180+
181+
iframe {
182+
width: 100%;
183+
height: 100%;
184+
border: none;
185+
}

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

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
import {Component, State} from '@stencil/core';
2+
3+
enum DemoType {
4+
MOBILE = 'mobile',
5+
TABLET = 'tablet',
6+
DESKTOP = 'dekstop',
7+
BEAMER = 'beamer'
8+
}
9+
10+
@Component({
11+
tag: 'app-demo',
12+
styleUrl: 'app-demo.scss',
13+
shadow: true
14+
})
15+
export class AppDemo {
16+
17+
@State()
18+
private type: DemoType = DemoType.MOBILE;
19+
20+
private switchType(e: CustomEvent) {
21+
this.type = DemoType[e.detail.value.toUpperCase()] as DemoType;
22+
}
23+
24+
render() {
25+
return <div>
26+
<ion-segment onIonChange={(e: CustomEvent) => this.switchType(e)}>
27+
<ion-segment-button value="mobile" checked={this.type === DemoType.MOBILE}>
28+
<ion-label>Mobile</ion-label>
29+
</ion-segment-button>
30+
<ion-segment-button value="tablet" checked={this.type === DemoType.TABLET}>
31+
<ion-label>Tablet</ion-label>
32+
</ion-segment-button>
33+
<ion-segment-button value="desktop" checked={this.type === DemoType.DESKTOP}>
34+
<ion-label>Desktop</ion-label>
35+
</ion-segment-button>
36+
<ion-segment-button value="beamer" checked={this.type === DemoType.BEAMER}>
37+
<ion-label>Beamer</ion-label>
38+
</ion-segment-button>
39+
</ion-segment>
40+
41+
{this.renderMobile()}
42+
{this.renderTablet()}
43+
{this.renderDesktop()}
44+
{this.renderBeamer()}
45+
</div>;
46+
}
47+
48+
private renderMobile() {
49+
if (this.type === DemoType.MOBILE) {
50+
return <div class="smartphone-container">
51+
<div class="smartphone">
52+
<div class="content">
53+
<iframe src="https://www.deckdeckgo.com" />
54+
</div>
55+
</div>
56+
</div>
57+
} else {
58+
return undefined;
59+
}
60+
}
61+
62+
private renderDesktop() {
63+
if (this.type === DemoType.DESKTOP) {
64+
return <div class="laptop-container">
65+
<div class="laptop">
66+
<div class="content">
67+
<iframe src="https://www.deckdeckgo.com" />
68+
</div>
69+
</div>
70+
</div>
71+
} else {
72+
return undefined;
73+
}
74+
}
75+
76+
private renderTablet() {
77+
if (this.type === DemoType.TABLET) {
78+
return <div class="tablet-container">
79+
<div class="tablet">
80+
<div class="content">
81+
<iframe src="https://www.deckdeckgo.com" />
82+
</div>
83+
</div>
84+
</div>
85+
} else {
86+
return undefined;
87+
}
88+
}
89+
90+
private renderBeamer() {
91+
if (this.type === DemoType.BEAMER) {
92+
return <div class="beamer-container">
93+
<iframe src="https://www.deckdeckgo.com" />
94+
</div>
95+
} else {
96+
return undefined;
97+
}
98+
}
99+
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
app-popular {
22
ion-card[class*="sc-ion-card"] {
33
--background: white;
4+
color: black;
5+
}
6+
7+
div.demo {
8+
position: relative;
49
}
510
}
611

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,12 @@ export class AppPopular {
1818

1919
<p padding-top>What does that mean 🤔?</p>
2020

21-
<p padding-top>It means that every presentations you write and publish with DeckDeckGo are also <strong>apps</strong> for desktop and mobile 🤪</p>
22-
23-
<p padding-top>Furthermore, DeckDeckGo aims to be an online community for sharing presentations, slides and talks about your interests and ideas too.</p>
24-
25-
<p padding-top><strong>Edit anywhere, display everywhere</strong></p>
21+
<p padding-top padding-bottom>It means that every presentations you write and publish with DeckDeckGo are also <strong>apps</strong> 🤪</p>
2622
</ion-card-content>
27-
</ion-card>
28-
23+
</ion-card>,
24+
<div class="demo">
25+
<app-demo></app-demo>
26+
</div>
2927
];
3028
}
3129

‎studio/src/components.d.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,9 +8,9 @@
88
import '@stencil/core';
99

1010
import '@ionic/core';
11-
import 'ionicons';
1211
import 'deckdeckgo';
1312
import 'deckdeckgo-inline-editor';
13+
import 'ionicons';
1414
import {
1515
EventEmitter,
1616
} from '@stencil/core';
@@ -81,6 +81,9 @@ export namespace Components {
8181
'onSlideDidChange'?: (event: CustomEvent<HTMLElement>) => void;
8282
}
8383

84+
interface AppDemo {}
85+
interface AppDemoAttributes extends StencilHTMLAttributes {}
86+
8487
interface AppFeed {}
8588
interface AppFeedAttributes extends StencilHTMLAttributes {}
8689

@@ -194,6 +197,7 @@ declare global {
194197
'AppNavigation': Components.AppNavigation;
195198
'AppAddSlideAction': Components.AppAddSlideAction;
196199
'AppEditorToolbar': Components.AppEditorToolbar;
200+
'AppDemo': Components.AppDemo;
197201
'AppFeed': Components.AppFeed;
198202
'AppPopular': Components.AppPopular;
199203
'AppFeedCardContent': Components.AppFeedCardContent;
@@ -225,6 +229,7 @@ declare global {
225229
'app-navigation': Components.AppNavigationAttributes;
226230
'app-add-slide-action': Components.AppAddSlideActionAttributes;
227231
'app-editor-toolbar': Components.AppEditorToolbarAttributes;
232+
'app-demo': Components.AppDemoAttributes;
228233
'app-feed': Components.AppFeedAttributes;
229234
'app-popular': Components.AppPopularAttributes;
230235
'app-feed-card-content': Components.AppFeedCardContentAttributes;
@@ -301,6 +306,12 @@ declare global {
301306
new (): HTMLAppEditorToolbarElement;
302307
};
303308

309+
interface HTMLAppDemoElement extends Components.AppDemo, HTMLStencilElement {}
310+
var HTMLAppDemoElement: {
311+
prototype: HTMLAppDemoElement;
312+
new (): HTMLAppDemoElement;
313+
};
314+
304315
interface HTMLAppFeedElement extends Components.AppFeed, HTMLStencilElement {}
305316
var HTMLAppFeedElement: {
306317
prototype: HTMLAppFeedElement;
@@ -425,6 +436,7 @@ declare global {
425436
'app-navigation': HTMLAppNavigationElement
426437
'app-add-slide-action': HTMLAppAddSlideActionElement
427438
'app-editor-toolbar': HTMLAppEditorToolbarElement
439+
'app-demo': HTMLAppDemoElement
428440
'app-feed': HTMLAppFeedElement
429441
'app-popular': HTMLAppPopularElement
430442
'app-feed-card-content': HTMLAppFeedCardContentElement
@@ -456,6 +468,7 @@ declare global {
456468
'app-navigation': HTMLAppNavigationElement;
457469
'app-add-slide-action': HTMLAppAddSlideActionElement;
458470
'app-editor-toolbar': HTMLAppEditorToolbarElement;
471+
'app-demo': HTMLAppDemoElement;
459472
'app-feed': HTMLAppFeedElement;
460473
'app-popular': HTMLAppPopularElement;
461474
'app-feed-card-content': HTMLAppFeedCardContentElement;

0 commit comments

Comments
 (0)