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

Commit b38bdd7

Browse files
peterpeterparkerpeterpeterparker
committed
merge: studio publish and cards
2 parents 995f01f + c285d90 commit b38bdd7

File tree

29 files changed

+504
-412
lines changed

29 files changed

+504
-412
lines changed

‎studio/src/app/components/editor/app-editor-toolbar/app-editor-toolbar.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -403,6 +403,16 @@ export class AppEditorToolbar {
403403
const element: HTMLElement = this.applyToAllDeck ? this.selectedElement.parentElement : this.selectedElement;
404404

405405
element.style.setProperty('--background', $event.target.value);
406+
} else if (this.selectedElement.parentElement && this.selectedElement.parentElement.nodeName && this.selectedElement.parentElement.nodeName.toLowerCase() === 'deckgo-slide-split') {
407+
const element: HTMLElement = this.selectedElement.parentElement;
408+
409+
if (this.selectedElement.getAttribute('slot') === 'start') {
410+
element.style.setProperty('--slide-split-background-start', $event.target.value);
411+
} else if (this.selectedElement.getAttribute('slot') === 'end') {
412+
element.style.setProperty('--slide-split-background-end', $event.target.value);
413+
} else {
414+
this.selectedElement.style.background = $event.target.value;
415+
}
406416
} else {
407417
this.selectedElement.style.background = $event.target.value;
408418
}

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

Lines changed: 1 addition & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,8 @@
11
app-feed {
2+
23
ion-card[class*="sc-ion-card"] {
34
--background: white;
45

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-
}
29-
306
div.deck-container {
317
width: 100%;
328
height: 250px;

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

Lines changed: 11 additions & 200 deletions
Original file line numberDiff line numberDiff line change
@@ -34,206 +34,17 @@ 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-
42-
<ion-card-content class="first-card" margin-start margin-end>
43-
<p>Keep close to Nature's heart... and break clear away, once in
44-
awhile,
45-
and climb a mountain or spend a week in the woods. Wash your spirit clean.
46-
</p>
47-
48-
<p class="author" padding-top padding-bottom>
49-
<ion-label>David Dal Busco | Mars 9</ion-label>
50-
</p>
51-
</ion-card-content>
52-
</ion-card>,
53-
<ion-card>
54-
<ion-card-content>
55-
<div class="summary">
56-
57-
<ion-card-header>
58-
<ion-card-title>Card Title</ion-card-title>
59-
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
60-
</ion-card-header>
61-
62-
<p padding-start padding-end>Keep close to Nature's heart... and break clear away, once in
63-
awhile,
64-
and climb a mountain or spend a week in the woods. Wash your spirit clean.
65-
</p>
66-
67-
<p class="author" padding>
68-
<ion-label>David Dal Busco | Mars 9</ion-label>
69-
</p>
70-
</div>
71-
<div class="preview">
72-
<img src="./assets/img/deckdeckgo-logo.svg"/>
73-
</div>
74-
</ion-card-content>
75-
</ion-card>,
76-
<ion-card>
77-
<ion-card-content>
78-
<div class="summary">
79-
80-
<ion-card-header>
81-
<ion-card-title>Card Title</ion-card-title>
82-
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
83-
</ion-card-header>
84-
85-
<p padding-start padding-end>Keep close to Nature's heart... and break clear away, once in
86-
awhile,
87-
and climb a mountain or spend a week in the woods. Wash your spirit clean.
88-
</p>
89-
90-
<p class="author" padding>
91-
<ion-label>David Dal Busco | Mars 9</ion-label>
92-
</p>
93-
</div>
94-
<div class="preview">
95-
<img src="./assets/img/deckdeckgo-logo.svg"/>
96-
</div>
97-
</ion-card-content>
98-
</ion-card>,
99-
<ion-card>
100-
<ion-card-content>
101-
<div class="summary">
102-
103-
<ion-card-header>
104-
<ion-card-title>Card Title</ion-card-title>
105-
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
106-
</ion-card-header>
107-
108-
<p padding-start padding-end>Keep close to Nature's heart... and break clear away, once in
109-
awhile,
110-
and climb a mountain or spend a week in the woods. Wash your spirit clean.
111-
</p>
112-
113-
<p class="author" padding>
114-
<ion-label>David Dal Busco | Mars 9</ion-label>
115-
</p>
116-
</div>
117-
<div class="preview">
118-
<img src="./assets/img/deckdeckgo-logo.svg"/>
119-
</div>
120-
</ion-card-content>
121-
</ion-card>,
122-
<ion-card>
123-
<ion-card-content>
124-
<div class="summary">
125-
126-
<ion-card-header>
127-
<ion-card-title>Card Title</ion-card-title>
128-
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
129-
</ion-card-header>
130-
131-
<p padding-start padding-end>Keep close to Nature's heart... and break clear away, once in
132-
awhile,
133-
and climb a mountain or spend a week in the woods. Wash your spirit clean.
134-
</p>
135-
136-
<p class="author" padding>
137-
<ion-label>David Dal Busco | Mars 9</ion-label>
138-
</p>
139-
</div>
140-
<div class="preview">
141-
<img src="./assets/img/deckdeckgo-logo.svg"/>
142-
</div>
143-
</ion-card-content>
144-
</ion-card>,
145-
<ion-card>
146-
<ion-card-content>
147-
<div class="summary">
148-
149-
<ion-card-header>
150-
<ion-card-title>Card Title</ion-card-title>
151-
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
152-
</ion-card-header>
153-
154-
<p padding-start padding-end>Keep close to Nature's heart... and break clear away, once in
155-
awhile,
156-
and climb a mountain or spend a week in the woods. Wash your spirit clean.
157-
</p>
158-
159-
<p class="author" padding>
160-
<ion-label>David Dal Busco | Mars 9</ion-label>
161-
</p>
162-
</div>
163-
<div class="preview">
164-
<img src="./assets/img/deckdeckgo-logo.svg"/>
165-
</div>
166-
</ion-card-content>
167-
</ion-card>,
168-
<ion-card>
169-
<ion-card-content>
170-
<div class="summary">
171-
172-
<ion-card-header>
173-
<ion-card-title>Card Title</ion-card-title>
174-
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
175-
</ion-card-header>
176-
177-
<p padding-start padding-end>Keep close to Nature's heart... and break clear away, once in
178-
awhile,
179-
and climb a mountain or spend a week in the woods. Wash your spirit clean.
180-
</p>
181-
182-
<p class="author" padding>
183-
<ion-label>David Dal Busco | Mars 9</ion-label>
184-
</p>
185-
</div>
186-
<div class="preview">
187-
<img src="./assets/img/deckdeckgo-logo.svg"/>
188-
</div>
189-
</ion-card-content>
190-
</ion-card>,
191-
<ion-card>
192-
<ion-card-content>
193-
<div class="summary">
194-
195-
<ion-card-header>
196-
<ion-card-title>Card Title</ion-card-title>
197-
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
198-
</ion-card-header>
199-
200-
<p padding-start padding-end>Keep close to Nature's heart... and break clear away, once in
201-
awhile,
202-
and climb a mountain or spend a week in the woods. Wash your spirit clean.
203-
</p>
204-
205-
<p class="author" padding>
206-
<ion-label>David Dal Busco | Mars 9</ion-label>
207-
</p>
208-
</div>
209-
<div class="preview">
210-
<img src="./assets/img/deckdeckgo-logo.svg"/>
211-
</div>
212-
</ion-card-content>
213-
</ion-card>,
214-
<ion-card>
215-
<ion-card-content>
216-
<div class="summary">
217-
218-
<ion-card-header>
219-
<ion-card-title>Card Title</ion-card-title>
220-
<ion-card-subtitle class="ion-text-uppercase">javascript typescript webcomponents</ion-card-subtitle>
221-
</ion-card-header>
222-
223-
<p padding-start padding-end>Keep close to Nature's heart... and break clear away, once in
224-
awhile,
225-
and climb a mountain or spend a week in the woods. Wash your spirit clean.
226-
</p>
227-
228-
<p class="author" padding>
229-
<ion-label>David Dal Busco | Mars 9</ion-label>
230-
</p>
231-
</div>
232-
<div class="preview">
233-
<img src="./assets/img/deckdeckgo-logo.svg"/>
234-
</div>
235-
</ion-card-content>
236-
</ion-card>
37+
<app-feed-card-content firstCard={true} caption="Card Title" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate"></app-feed-card-content>
38+
</ion-card>,
39+
<app-feed-card caption="Card Title" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate"></app-feed-card>,
40+
<app-feed-card caption="Card Title" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate"></app-feed-card>,
41+
<app-feed-card caption="Card Title" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate"></app-feed-card>,
42+
<app-feed-card caption="Card Title" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate"></app-feed-card>,
43+
<app-feed-card caption="Card Title" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate"></app-feed-card>,
44+
<app-feed-card caption="Card Title" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate"></app-feed-card>,
45+
<app-feed-card caption="Card Title" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate"></app-feed-card>,
46+
<app-feed-card caption="Card Title" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate"></app-feed-card>,
47+
<app-feed-card caption="Card Title" description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate"></app-feed-card>
23748
];
23849
}
23950
}

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

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
app-feed-card-content {
2+
3+
ion-card-content {
4+
display: flex;
5+
align-items: stretch;
6+
width: 100%;
7+
8+
ion-card-title, ion-card-subtitle {
9+
white-space: nowrap;
10+
overflow: hidden;
11+
}
12+
13+
ion-card-title {
14+
font-size: var(--font-size-h1);
15+
}
16+
17+
ion-card-subtitle {
18+
display: flex;
19+
flex-wrap: wrap;
20+
}
21+
22+
div.summary {
23+
flex: 2;
24+
25+
p.content {
26+
color: black;
27+
margin-top: 8px;
28+
margin-bottom: 8px;
29+
}
30+
}
31+
32+
div.preview {
33+
width: 12rem;
34+
min-width: 8rem;
35+
display: flex;
36+
justify-content: center;
37+
align-items: center;
38+
39+
img {
40+
max-width: 10rem;
41+
}
42+
}
43+
44+
input, div.chips {
45+
font-size: var(--font-size-normal);
46+
}
47+
48+
div.chips {
49+
background: rgba(var(--ion-color-primary-rgb), 0.08);
50+
color: var(--ion-color-primary-shade);
51+
border-radius: 16px;
52+
display: inline-flex;
53+
align-items: center;
54+
justify-content: center;
55+
padding: 4px 8px;
56+
margin: 4px 4px 4px 0;
57+
height: 100%;
58+
59+
ion-icon {
60+
padding: 4px 0;
61+
}
62+
63+
ion-label {
64+
padding: 0px 4px;
65+
margin-bottom: 2px;
66+
67+
max-width: 125px;
68+
white-space: nowrap;
69+
overflow: hidden;
70+
text-overflow: ellipsis;
71+
}
72+
}
73+
74+
input {
75+
font-size: var(--font-size-normal);
76+
77+
pointer-events: visible;
78+
79+
background: transparent;
80+
color: var(--ion-color-primary);
81+
border: none;
82+
outline: 0;
83+
84+
padding-bottom: 1px;
85+
86+
max-width: 130px;
87+
height: 40px;
88+
89+
&::placeholder {
90+
color: var(--deckgo-inline-editor-link-placeholder-color, #3880ff);
91+
}
92+
}
93+
}
94+
95+
@media screen and (max-width: 540px) {
96+
ion-card-content {
97+
flex-direction: column;
98+
align-items: center;
99+
100+
div.preview:not(.editable) {
101+
display: none;
102+
}
103+
}
104+
}
105+
}

0 commit comments

Comments
 (0)