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

Commit d71808a

Browse files
peterpeterparkerpeterpeterparker
committed
merge: component demo
2 parents 36577cb + b15fd43 commit d71808a

File tree

11 files changed

+496
-84
lines changed

11 files changed

+496
-84
lines changed

‎studio/src/app/app-root.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ export class AppRoot {
9898
<ion-route url="/signin/:redirect" component="app-signin"/>
9999

100100
<ion-route url="/about" component="app-about"/>
101+
<ion-route url="/team" component="app-team"/>
101102
<ion-route url="/opensource" component="app-opensource"/>
102103
<ion-route url="/privacy" component="app-privacy"/>
103104
<ion-route url="/terms" component="app-terms"/>

‎studio/src/app/components/core/app-footer/app-footer.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,10 @@ export class AppFooter {
1515
<ion-label>About</ion-label>
1616
</ion-anchor>
1717

18+
<ion-anchor href="/team" routerDirection="forward">
19+
<ion-label>Team</ion-label>
20+
</ion-anchor>
21+
1822
<ion-anchor href="/opensource" routerDirection="forward">
1923
<ion-label>Open source</ion-label>
2024
</ion-anchor>

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

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

‎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(type: DemoType) {
21+
this.type = type;
22+
}
23+
24+
render() {
25+
return <div class="container">
26+
<div class="type-selection">
27+
<ion-anchor class={this.type === DemoType.MOBILE ? 'selected' : ''} onClick={() => this.switchType(DemoType.MOBILE)}>
28+
<ion-label>Mobile</ion-label>
29+
</ion-anchor>
30+
<ion-anchor class={this.type === DemoType.TABLET ? 'selected' : ''} onClick={() => this.switchType(DemoType.TABLET)}>
31+
<ion-label>Tablet</ion-label>
32+
</ion-anchor>
33+
<ion-anchor class={this.type === DemoType.DESKTOP ? 'selected' : ''} onClick={() => this.switchType(DemoType.DESKTOP)}>
34+
<ion-label>Desktop</ion-label>
35+
</ion-anchor>
36+
<ion-anchor class={this.type === DemoType.BEAMER ? 'selected' : ''} onClick={() => this.switchType(DemoType.BEAMER)}>
37+
<ion-label>Beamer</ion-label>
38+
</ion-anchor>
39+
</div>
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: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,16 @@
11
app-popular {
22
ion-card[class*="sc-ion-card"] {
33
--background: white;
4+
color: black;
5+
padding: 16px;
6+
7+
width: 350px;
8+
}
9+
10+
ion-card.demo {
11+
padding: 16px;
12+
--background: white;
13+
min-height: 340px;
414
}
515
}
616

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,14 +18,14 @@ 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>
21+
<p padding-top>It means that every presentations you write and publish with DeckDeckGo are <strong>apps</strong> too 🤪</p>
2222

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>
23+
<p padding-top padding-bottom>It is also an online community for sharing presentations, slides and talks about your interests and ideas.</p>
2624
</ion-card-content>
25+
</ion-card>,
26+
<ion-card class="demo">
27+
<app-demo></app-demo>
2728
</ion-card>
28-
2929
];
3030
}
3131

0 commit comments

Comments
 (0)