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

Commit fc5eea8

Browse files
peterpeterparkerpeterpeterparker
committed
merge: decks and first slides screenshots miniatures
2 parents 0cc5232 + 0b06e2f commit fc5eea8

File tree

10 files changed

+107
-137
lines changed

10 files changed

+107
-137
lines changed

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

Lines changed: 0 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,47 +2,5 @@ app-feed {
22

33
ion-card[class*="sc-ion-card"] {
44
--background: white;
5-
6-
div.deck-container {
7-
width: 100%;
8-
height: 250px;
9-
position: relative;
10-
overflow: hidden;
11-
12-
deckgo-deck {
13-
--font-size-h1: 18px;
14-
15-
--slide-padding-top: 16px;
16-
--slide-padding-end: 16px;
17-
--slide-padding-bottom: 16px;
18-
--slide-padding-start: 16px;
19-
20-
--slide-split-padding-top: 16px;
21-
--slide-split-padding-end: 16px;
22-
--slide-split-padding-bottom: 16px;
23-
--slide-split-padding-start: 16px;
24-
25-
--slide-split-title-display: block;
26-
--slide-split-title-padding-top: 4px;
27-
--slide-split-title-padding-end: 16px;
28-
--slide-split-title-padding-bottom: 4px;
29-
--slide-split-title-padding-start: 16px;
30-
31-
--slide-chart-margin-top: 4px;
32-
--slide-chart-margin-start: 4px;
33-
--slide-chart-margin-end: 4px;
34-
--slide-chart-margin-bottom: 4px;
35-
--deckgo-chart-text-display: none;
36-
37-
--slide-author-padding-top: 4px;
38-
--slide-author-padding-end: 4px;
39-
--slide-author-padding-start: 4px;
40-
--slide-author-padding-bottom: 4px;
41-
}
42-
}
43-
44-
hr.deck-divider {
45-
border-bottom: 1px solid rgba(0, 0, 0, .15);
46-
}
475
}
486
}

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

Lines changed: 1 addition & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -9,34 +9,7 @@ export class AppFeed {
99

1010
render() {
1111
return [
12-
<ion-card>
13-
14-
<div class="deck-container">
15-
<deckgo-deck embedded={true} pager={false}>
16-
<deckgo-slide-title>
17-
<h1 slot="title">DeckDeckGo</h1>
18-
<div no-shadow slot="content">
19-
<h3>The Progressive Web App alternative for simple presentations 🚀</h3>
20-
</div>
21-
</deckgo-slide-title>
22-
23-
<deckgo-slide-split>
24-
<h1 slot="title">Progressive Web App</h1>
25-
<h3 slot="start">Publish your presentation as a</h3>
26-
<div slot="end"><strong>Progressive Web App</strong></div>
27-
</deckgo-slide-split>
28-
29-
<deckgo-slide-youtube src="https://www.youtube.com/watch?v=3o3oGBTTRSs">
30-
<h2 slot="title">Remote Control</h2>
31-
</deckgo-slide-youtube>
32-
</deckgo-deck>
33-
</div>
34-
35-
<hr class="deck-divider" margin></hr>
36-
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>,
12+
<app-feed-card compact={false} 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>,
4013
<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>,
4114
<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>,
4215
<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>,

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

Lines changed: 6 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
app-feed-card-content {
22

33
ion-card-content {
4-
display: flex;
5-
align-items: stretch;
6-
width: 100%;
4+
5+
&.compact {
6+
ion-card-header, p.content {
7+
display: none;
8+
}
9+
}
710

811
ion-card-title, ion-card-subtitle {
912
white-space: nowrap;
@@ -19,28 +22,6 @@ app-feed-card-content {
1922
flex-wrap: wrap;
2023
}
2124

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-
4425
input, div.chips {
4526
font-size: var(--font-size-normal);
4627
}
@@ -92,14 +73,4 @@ app-feed-card-content {
9273
}
9374
}
9475

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-
}
10576
}

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

Lines changed: 25 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,10 @@ export class AppFeedCardContent {
1616
private tagInput: string = null;
1717

1818
@Prop()
19-
firstCard: boolean = false;
19+
compact: boolean = true;
20+
21+
@Prop()
22+
miniature: boolean = true;
2023

2124
@Prop()
2225
editable: boolean = false;
@@ -85,39 +88,26 @@ export class AppFeedCardContent {
8588
}
8689

8790
render() {
88-
return <ion-card-content>
89-
<div class="summary">
91+
return <ion-card-content class={this.compact ? "ion-no-padding compact" : "ion-no-padding"}>
92+
{this.renderMiniature()}
9093

91-
<ion-card-header>
92-
<ion-card-title class="ion-text-uppercase" contentEditable={this.editable}>{this.caption}</ion-card-title>
94+
<ion-card-header>
95+
<ion-card-title class="ion-text-uppercase" contentEditable={this.editable}>{this.caption}</ion-card-title>
9396

94-
<ion-card-subtitle class="ion-text-lowercase">
95-
{this.renderTags()}
96-
{this.renderInputTags()}
97-
</ion-card-subtitle>
98-
</ion-card-header>
97+
<ion-card-subtitle class="ion-text-lowercase">
98+
{this.renderTags()}
99+
{this.renderInputTags()}
100+
</ion-card-subtitle>
101+
</ion-card-header>
99102

100-
<p padding-start padding-end class="content" contentEditable={this.editable}>{this.description}</p>
103+
<p padding-start padding-end class="content" contentEditable={this.editable}>{this.description}</p>
101104

102-
<p class="author" padding>
103-
<ion-label>{this.author} | {this.formattedPublication}</ion-label>
104-
</p>
105-
</div>
106-
107-
{this.renderPreviewImage()}
105+
<p class="author" padding>
106+
<ion-label>{this.author} | {this.formattedPublication}</ion-label>
107+
</p>
108108
</ion-card-content>
109109
}
110110

111-
private renderPreviewImage() {
112-
if (this.firstCard) {
113-
return undefined;
114-
} else {
115-
return <div class={this.editable ? "preview editable" : "preview"}>
116-
<img src="./assets/img/deckdeckgo-logo.svg"/>
117-
</div>;
118-
}
119-
}
120-
121111
private renderTags() {
122112
if (!this.tags || this.tags.length <= 0) {
123113
return undefined;
@@ -155,4 +145,12 @@ export class AppFeedCardContent {
155145
return undefined;
156146
}
157147
}
148+
149+
private renderMiniature() {
150+
if (this.miniature) {
151+
return <app-feed-lazy-img></app-feed-lazy-img>;
152+
} else {
153+
return undefined;
154+
}
155+
}
158156
}

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,16 @@ export class AppFeedCard {
2222
@Prop()
2323
description: string;
2424

25+
@Prop()
26+
compact: boolean = true;
27+
28+
@Prop()
29+
miniature: boolean = true;
30+
2531
render() {
2632

2733
return <ion-card class={this.editable ? "ion-no-margin" : undefined}>
28-
<app-feed-card-content editable={this.editable} author={this.author} publication={this.publication} caption={this.caption} description={this.description}></app-feed-card-content>
34+
<app-feed-card-content editable={this.editable} author={this.author} publication={this.publication} caption={this.caption} description={this.description} compact={this.compact} miniature={this.miniature}></app-feed-card-content>
2935
</ion-card>
3036
}
3137

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
img {
2+
max-width: 100%;
3+
}

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

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import {Component, Element} from '@stencil/core';
2+
3+
@Component({
4+
tag: 'app-feed-lazy-img',
5+
styleUrl: 'app-feed-lazy-img.scss',
6+
shadow: true
7+
})
8+
export class AppFeedLazyImg {
9+
10+
@Element() el: HTMLElement;
11+
12+
private observer: IntersectionObserver;
13+
14+
async componentDidLoad() {
15+
const img: HTMLImageElement = this.el.shadowRoot.querySelector('img');
16+
17+
if (img) {
18+
this.observer = new IntersectionObserver(this.onIntersection, { rootMargin: '100px 0px' });
19+
this.observer.observe(img);
20+
}
21+
}
22+
23+
private onIntersection = async (entries: IntersectionObserverEntry[]) => {
24+
for (const entry of entries) {
25+
if (entry.isIntersecting) {
26+
27+
if (this.observer) {
28+
this.observer.disconnect();
29+
}
30+
31+
if (entry.target.getAttribute('data-src')) {
32+
entry.target.setAttribute('src', entry.target.getAttribute('data-src'));
33+
entry.target.removeAttribute('data-src');
34+
}
35+
}
36+
}
37+
};
38+
39+
render() {
40+
return <img data-src="/assets/dummy.png"/>;
41+
}
42+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,9 @@ export class AppPublish {
6262
</ion-toolbar>
6363
</ion-header>,
6464
<ion-content padding>
65-
<p>Edit the preview of your presentation and add or change tags (up to 5) to make your presentation more inviting to readers</p>
65+
<p>Edit the title and summary of your presentation and add or change tags (up to 5) to make your presentation more inviting to readers</p>
6666

67-
<app-feed-card editable={true} author={this.author} publication={this.today} caption={this.caption} description={this.description}></app-feed-card>
67+
<app-feed-card compact={false} miniature={false} editable={true} author={this.author} publication={this.today} caption={this.caption} description={this.description}></app-feed-card>
6868

6969
<div class="ion-padding ion-text-center">
7070
<ion-button shape="round" color="primary">

‎studio/src/assets/dummy.png‎

36.5 KB
Loading

‎studio/src/components.d.ts‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -93,35 +93,44 @@ export namespace Components {
9393
interface AppFeedCardContent {
9494
'author': string;
9595
'caption': string;
96+
'compact': boolean;
9697
'description': string;
9798
'editable': boolean;
98-
'firstCard': boolean;
99+
'miniature': boolean;
99100
'publication': Date;
100101
}
101102
interface AppFeedCardContentAttributes extends StencilHTMLAttributes {
102103
'author'?: string;
103104
'caption'?: string;
105+
'compact'?: boolean;
104106
'description'?: string;
105107
'editable'?: boolean;
106-
'firstCard'?: boolean;
108+
'miniature'?: boolean;
107109
'publication'?: Date;
108110
}
109111

110112
interface AppFeedCard {
111113
'author': string;
112114
'caption': string;
115+
'compact': boolean;
113116
'description': string;
114117
'editable': boolean;
118+
'miniature': boolean;
115119
'publication': Date;
116120
}
117121
interface AppFeedCardAttributes extends StencilHTMLAttributes {
118122
'author'?: string;
119123
'caption'?: string;
124+
'compact'?: boolean;
120125
'description'?: string;
121126
'editable'?: boolean;
127+
'miniature'?: boolean;
122128
'publication'?: Date;
123129
}
124130

131+
interface AppFeedLazyImg {}
132+
interface AppFeedLazyImgAttributes extends StencilHTMLAttributes {}
133+
125134
interface AppDeckSettings {}
126135
interface AppDeckSettingsAttributes extends StencilHTMLAttributes {}
127136

@@ -220,6 +229,7 @@ declare global {
220229
'AppPopular': Components.AppPopular;
221230
'AppFeedCardContent': Components.AppFeedCardContent;
222231
'AppFeedCard': Components.AppFeedCard;
232+
'AppFeedLazyImg': Components.AppFeedLazyImg;
223233
'AppDeckSettings': Components.AppDeckSettings;
224234
'AppGif': Components.AppGif;
225235
'AppPublish': Components.AppPublish;
@@ -256,6 +266,7 @@ declare global {
256266
'app-popular': Components.AppPopularAttributes;
257267
'app-feed-card-content': Components.AppFeedCardContentAttributes;
258268
'app-feed-card': Components.AppFeedCardAttributes;
269+
'app-feed-lazy-img': Components.AppFeedLazyImgAttributes;
259270
'app-deck-settings': Components.AppDeckSettingsAttributes;
260271
'app-gif': Components.AppGifAttributes;
261272
'app-publish': Components.AppPublishAttributes;
@@ -362,6 +373,12 @@ declare global {
362373
new (): HTMLAppFeedCardElement;
363374
};
364375

376+
interface HTMLAppFeedLazyImgElement extends Components.AppFeedLazyImg, HTMLStencilElement {}
377+
var HTMLAppFeedLazyImgElement: {
378+
prototype: HTMLAppFeedLazyImgElement;
379+
new (): HTMLAppFeedLazyImgElement;
380+
};
381+
365382
interface HTMLAppDeckSettingsElement extends Components.AppDeckSettings, HTMLStencilElement {}
366383
var HTMLAppDeckSettingsElement: {
367384
prototype: HTMLAppDeckSettingsElement;
@@ -491,6 +508,7 @@ declare global {
491508
'app-popular': HTMLAppPopularElement
492509
'app-feed-card-content': HTMLAppFeedCardContentElement
493510
'app-feed-card': HTMLAppFeedCardElement
511+
'app-feed-lazy-img': HTMLAppFeedLazyImgElement
494512
'app-deck-settings': HTMLAppDeckSettingsElement
495513
'app-gif': HTMLAppGifElement
496514
'app-publish': HTMLAppPublishElement
@@ -527,6 +545,7 @@ declare global {
527545
'app-popular': HTMLAppPopularElement;
528546
'app-feed-card-content': HTMLAppFeedCardContentElement;
529547
'app-feed-card': HTMLAppFeedCardElement;
548+
'app-feed-lazy-img': HTMLAppFeedLazyImgElement;
530549
'app-deck-settings': HTMLAppDeckSettingsElement;
531550
'app-gif': HTMLAppGifElement;
532551
'app-publish': HTMLAppPublishElement;

0 commit comments

Comments
 (0)