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

Commit 2b01177

Browse files
peterpeterparkerpeterpeterparker
committed
feat: style card and publish modal
1 parent 486ba2c commit 2b01177

File tree

6 files changed

+177
-99
lines changed

6 files changed

+177
-99
lines changed

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

Lines changed: 2 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,7 @@
11
app-feed {
2-
ion-card[class*="sc-ion-card"] {
3-
--background: white;
4-
5-
ion-card-content:not(.first-card) {
6-
display: flex;
7-
align-items: stretch;
8-
flex: 1 1 auto;
9-
width: 100%;
10-
11-
div {
12-
&.preview {
13-
width: 15rem;
14-
min-width: 8rem;
15-
display: flex;
16-
justify-content: center;
17-
align-items: center;
18-
}
19-
}
20-
}
21-
22-
@media screen and (max-width: 720px) {
23-
ion-card-content {
24-
ion-card-subtitle {
25-
display: none;
26-
}
27-
}
28-
}
2+
@import "../../../../global/theme/feed/feed-card";
293

4+
ion-card[class*="sc-ion-card"] {
305
div.deck-container {
316
width: 100%;
327
height: 250px;

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

Lines changed: 28 additions & 23 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">
18+
<div no-shadow slot="content ion-text-lowercase">
1919
<h3>The Progressive Web App alternative for simple presentations 🚀</h3>
2020
</div>
2121
</deckgo-slide-title>
@@ -34,13 +34,18 @@ export class AppFeed {
3434

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

37-
<ion-card-header margin-start margin-end>
38-
<ion-card-title>Card Title</ion-card-title>
39-
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
40-
</ion-card-header>
41-
4237
<ion-card-content class="first-card" margin-start margin-end>
43-
<p>Keep close to Nature's heart... and break clear away, once in
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
4449
awhile,
4550
and climb a mountain or spend a week in the woods. Wash your spirit clean.
4651
</p>
@@ -55,11 +60,11 @@ export class AppFeed {
5560
<div class="summary">
5661

5762
<ion-card-header>
58-
<ion-card-title>Card Title</ion-card-title>
63+
<ion-card-title class="ion-text-uppercase">Card Title</ion-card-title>
5964
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
6065
</ion-card-header>
6166

62-
<p padding-start padding-end>Keep close to Nature's heart... and break clear away, once in
67+
<p padding-start padding-end class="content ion-text-lowercase">Keep close to Nature's heart... and break clear away, once in
6368
awhile,
6469
and climb a mountain or spend a week in the woods. Wash your spirit clean.
6570
</p>
@@ -78,11 +83,11 @@ export class AppFeed {
7883
<div class="summary">
7984

8085
<ion-card-header>
81-
<ion-card-title>Card Title</ion-card-title>
86+
<ion-card-title class="ion-text-uppercase">Card Title</ion-card-title>
8287
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
8388
</ion-card-header>
8489

85-
<p padding-start padding-end>Keep close to Nature's heart... and break clear away, once in
90+
<p padding-start padding-end class="content ion-text-lowercase">Keep close to Nature's heart... and break clear away, once in
8691
awhile,
8792
and climb a mountain or spend a week in the woods. Wash your spirit clean.
8893
</p>
@@ -101,11 +106,11 @@ export class AppFeed {
101106
<div class="summary">
102107

103108
<ion-card-header>
104-
<ion-card-title>Card Title</ion-card-title>
109+
<ion-card-title class="ion-text-uppercase">Card Title</ion-card-title>
105110
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
106111
</ion-card-header>
107112

108-
<p padding-start padding-end>Keep close to Nature's heart... and break clear away, once in
113+
<p padding-start padding-end class="content ion-text-lowercase">Keep close to Nature's heart... and break clear away, once in
109114
awhile,
110115
and climb a mountain or spend a week in the woods. Wash your spirit clean.
111116
</p>
@@ -124,11 +129,11 @@ export class AppFeed {
124129
<div class="summary">
125130

126131
<ion-card-header>
127-
<ion-card-title>Card Title</ion-card-title>
132+
<ion-card-title class="ion-text-uppercase">Card Title</ion-card-title>
128133
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
129134
</ion-card-header>
130135

131-
<p padding-start padding-end>Keep close to Nature's heart... and break clear away, once in
136+
<p padding-start padding-end class="content ion-text-lowercase">Keep close to Nature's heart... and break clear away, once in
132137
awhile,
133138
and climb a mountain or spend a week in the woods. Wash your spirit clean.
134139
</p>
@@ -147,11 +152,11 @@ export class AppFeed {
147152
<div class="summary">
148153

149154
<ion-card-header>
150-
<ion-card-title>Card Title</ion-card-title>
155+
<ion-card-title class="ion-text-uppercase">Card Title</ion-card-title>
151156
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
152157
</ion-card-header>
153158

154-
<p padding-start padding-end>Keep close to Nature's heart... and break clear away, once in
159+
<p padding-start padding-end class="content ion-text-lowercase">Keep close to Nature's heart... and break clear away, once in
155160
awhile,
156161
and climb a mountain or spend a week in the woods. Wash your spirit clean.
157162
</p>
@@ -170,11 +175,11 @@ export class AppFeed {
170175
<div class="summary">
171176

172177
<ion-card-header>
173-
<ion-card-title>Card Title</ion-card-title>
178+
<ion-card-title class="ion-text-uppercase">Card Title</ion-card-title>
174179
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
175180
</ion-card-header>
176181

177-
<p padding-start padding-end>Keep close to Nature's heart... and break clear away, once in
182+
<p padding-start padding-end class="content ion-text-lowercase">Keep close to Nature's heart... and break clear away, once in
178183
awhile,
179184
and climb a mountain or spend a week in the woods. Wash your spirit clean.
180185
</p>
@@ -193,11 +198,11 @@ export class AppFeed {
193198
<div class="summary">
194199

195200
<ion-card-header>
196-
<ion-card-title>Card Title</ion-card-title>
201+
<ion-card-title class="ion-text-uppercase">Card Title</ion-card-title>
197202
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
198203
</ion-card-header>
199204

200-
<p padding-start padding-end>Keep close to Nature's heart... and break clear away, once in
205+
<p padding-start padding-end class="content ion-text-lowercase">Keep close to Nature's heart... and break clear away, once in
201206
awhile,
202207
and climb a mountain or spend a week in the woods. Wash your spirit clean.
203208
</p>
@@ -216,11 +221,11 @@ export class AppFeed {
216221
<div class="summary">
217222

218223
<ion-card-header>
219-
<ion-card-title>Card Title</ion-card-title>
224+
<ion-card-title class="ion-text-uppercase">Card Title</ion-card-title>
220225
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
221226
</ion-card-header>
222227

223-
<p padding-start padding-end>Keep close to Nature's heart... and break clear away, once in
228+
<p padding-start padding-end class="content ion-text-lowercase">Keep close to Nature's heart... and break clear away, once in
224229
awhile,
225230
and climb a mountain or spend a week in the woods. Wash your spirit clean.
226231
</p>

‎studio/src/app/modals/editor/app-publish/app-publish.scss‎

Lines changed: 11 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,24 @@
11
app-publish {
2-
div.tags {
3-
background: var(--ion-color-light);
2+
ion-content {
3+
--background: var(--ion-color-light);
4+
}
5+
6+
@import "../../../../global/theme/feed/feed-card";
47

5-
display: flex;
6-
justify-content: flex-start;
7-
align-items: center;
8-
flex-wrap: wrap;
8+
ion-card-subtitle.tags {
9+
background: white;
910

1011
@media only screen and (min-height: 600px) and (min-width: 768px) {
1112
flex-wrap: inherit;
1213
}
1314

1415
min-height: 42px;
15-
16-
border-radius: 4px;
17-
padding: 2px 4px;
1816
}
1917

20-
input, div.chips {
18+
input {
2119
font-size: var(--font-size-normal);
2220
}
2321

24-
div.chips {
25-
background: rgba(var(--ion-color-primary-rgb), 0.08);
26-
color: var(--ion-color-primary-shade);
27-
border-radius: 16px;
28-
display: inline-flex;
29-
align-items: center;
30-
justify-content: center;
31-
padding: 4px 8px;
32-
margin: 2px;
33-
34-
ion-icon {
35-
padding: 4px 0;
36-
}
37-
38-
ion-label {
39-
padding: 0px 4px;
40-
margin-bottom: 2px;
41-
42-
max-width: 70px;
43-
white-space: nowrap;
44-
overflow: hidden;
45-
text-overflow: ellipsis;
46-
}
47-
}
48-
4922
input {
5023
pointer-events: visible;
5124

@@ -54,9 +27,11 @@ app-publish {
5427
border: none;
5528
outline: 0;
5629

57-
margin: 8px;
5830
padding-bottom: 1px;
5931

32+
max-width: 130px;
33+
height: 40px;
34+
6035
&::placeholder {
6136
color: var(--deckgo-inline-editor-link-placeholder-color, #3880ff);
6237
}

‎studio/src/app/modals/editor/app-publish/app-publish.tsx‎

Lines changed: 51 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import {Component, Element, Listen, State} from '@stencil/core';
2+
import {User} from '../../../models/user';
3+
import {take} from 'rxjs/operators';
4+
import {AuthService} from '../../../services/auth/auth.service';
25

36
interface InputTargetEvent extends EventTarget {
47
value: string;
@@ -18,12 +21,25 @@ export class AppPublish {
1821
@State()
1922
private tagInput: string = null;
2023

24+
private authService: AuthService;
25+
26+
@State()
27+
private user: User;
28+
29+
constructor() {
30+
this.authService = AuthService.getInstance();
31+
}
32+
2133
async componentDidLoad() {
2234
history.pushState({modal: true}, null);
35+
36+
this.authService.watch().pipe(take(1)).subscribe(async (user: User) => {
37+
this.user = user;
38+
});
2339
}
2440

2541
@Listen('window:popstate')
26-
async handleHardwareBackbutton(_e: PopStateEvent) {
42+
async handleHardwareBackButton(_e: PopStateEvent) {
2743
await this.closeModal();
2844
}
2945

@@ -78,20 +94,35 @@ export class AppPublish {
7894
</ion-toolbar>
7995
</ion-header>,
8096
<ion-content padding>
81-
<p>Add or change <strong>tags</strong> (up to 5) so readers know what your presentation is about</p>
97+
<p>Edit the preview of your presentation and add or change tags (up to 5) to make your presentation more inviting to readers</p>
98+
99+
<ion-card class="ion-no-margin">
100+
<ion-card-content>
101+
<div class="summary">
82102

83-
<div class="tags">
84-
{this.renderTags()}
85-
{this.renderInputTags()}
86-
</div>
103+
<ion-card-header>
104+
<ion-card-title contenteditable class="ion-text-uppercase">Card Title</ion-card-title>
87105

88-
<p>Story Preview</p>
106+
<ion-card-subtitle class="tags ion-text-lowercase">
107+
{this.renderTags()}
108+
{this.renderInputTags()}
109+
</ion-card-subtitle>
110+
</ion-card-header>
89111

90-
<div>
91-
Write a preview title
92-
Write a preview subtitle
93-
Include a high-quality image in your story to make it more inviting to readers.
94-
</div>
112+
<p padding-start padding-end contenteditable class="content">Keep close to Nature's heart... and break clear away, once in
113+
awhile,
114+
and climb a mountain or spend a week in the woods. Wash your spirit clean.
115+
</p>
116+
117+
<p class="author" padding>
118+
<ion-label>{this.renderUser()} | Mars 9</ion-label>
119+
</p>
120+
</div>
121+
<div class="preview">
122+
<img src="./assets/img/deckdeckgo-logo.svg"/>
123+
</div>
124+
</ion-card-content>
125+
</ion-card>
95126
</ion-content>
96127
];
97128
}
@@ -122,4 +153,12 @@ export class AppPublish {
122153
}
123154
}
124155

156+
private renderUser() {
157+
if (this.user && this.user.name) {
158+
return <span>{this.user.name}</span>
159+
} else {
160+
return undefined;
161+
}
162+
}
163+
125164
}

‎studio/src/components.d.ts‎

Lines changed: 1 addition & 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';

0 commit comments

Comments
 (0)