diff --git a/CHANGELOG.md b/CHANGELOG.md index 27811501c..05eb6ee39 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ ### Web Components: New Templates - slide-playground: v1.0.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/playground/CHANGELOG.md)) +- slide-split: v1.2.0 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/split/CHANGELOG.md)) ### Web Components diff --git a/docs/docs/slides/app-slide-split/app-slide-split.md b/docs/docs/slides/app-slide-split/app-slide-split.md index 731ef3cb8..124c53607 100644 --- a/docs/docs/slides/app-slide-split/app-slide-split.md +++ b/docs/docs/slides/app-slide-split/app-slide-split.md @@ -160,5 +160,7 @@ The following theming options will affect this component if set on its host or p | --slide-split-text-align | inherit | Modify for example to center if you want to align the text in the middle | | --slide-split-title-display | none | The `slot` title is per default hidden even if you provide it. If you wish to displays it, modify this attribute | | --zIndex | 1 | The z-index of the slide | +| --slide-split-display-start | flex | Start side display property | +| --slide-split-display-end | flex | End side display property | [deckdeckgo]: https://deckdeckgo.com diff --git a/docs/src/app/pages/docs/slides/app-slide-split/app-slide-split.tsx b/docs/src/app/pages/docs/slides/app-slide-split/app-slide-split.tsx index 68bfcfa5b..08c1fef0d 100644 --- a/docs/src/app/pages/docs/slides/app-slide-split/app-slide-split.tsx +++ b/docs/src/app/pages/docs/slides/app-slide-split/app-slide-split.tsx @@ -321,6 +321,16 @@ export class AppSlideContent { 1 The z-index of the slide + + --slide-split-display-start + flex + Start side display property + + + --slide-split-display-end + flex + End side display property + diff --git a/studio/package-lock.json b/studio/package-lock.json index cdcb69cdd..02523c8c2 100644 --- a/studio/package-lock.json +++ b/studio/package-lock.json @@ -220,9 +220,9 @@ } }, "@deckdeckgo/slide-split": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/@deckdeckgo/slide-split/-/slide-split-1.1.4.tgz", - "integrity": "sha512-okiZPEWaATQOin5wWGmj9sGqkRFZe5VyJVj/SnLUrTtSqWZ9XIRz05eSle5m2An5uXYvG7ugJCxGd0cDCxXDuQ==", + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@deckdeckgo/slide-split/-/slide-split-1.2.0.tgz", + "integrity": "sha512-gE4UzY2MqNP6HcFA40xEqVF2ZJMDOGG3zBVOfSXfLDe/On14U3FQbmGsAqzVUEHZQhtbWRoEd2RfnHu1suoUmw==", "requires": { "@deckdeckgo/slide-utils": "^1.1.0" } diff --git a/studio/package.json b/studio/package.json index cd32a8e5d..f4418a658 100644 --- a/studio/package.json +++ b/studio/package.json @@ -36,7 +36,7 @@ "@deckdeckgo/slide-playground": "^1.0.1", "@deckdeckgo/slide-poll": "^1.0.1", "@deckdeckgo/slide-qrcode": "^1.0.3", - "@deckdeckgo/slide-split": "^1.1.4", + "@deckdeckgo/slide-split": "^1.2.0", "@deckdeckgo/slide-title": "^1.0.1", "@deckdeckgo/slide-utils": "^1.1.0", "@deckdeckgo/slide-youtube": "^1.0.1", diff --git a/studio/src/app/components/landing/app-landing-deck/app-landing-deck.scss b/studio/src/app/components/landing/app-landing-deck/app-landing-deck.scss index bb3d886fd..73097a046 100644 --- a/studio/src/app/components/landing/app-landing-deck/app-landing-deck.scss +++ b/studio/src/app/components/landing/app-landing-deck/app-landing-deck.scss @@ -50,7 +50,7 @@ app-landing-deck { width: 100%; } - @media (max-width: 576px) { + @media (max-width: 768px) { div[slot="start"] { h2 { padding: 0; @@ -58,8 +58,10 @@ app-landing-deck { } &:first-of-type { - div[slot="end"] { - display: none; + --slide-split-display-end: none; + + div[slot="start"] { + text-align: center; } } } diff --git a/webcomponents/slides/split/CHANGELOG.md b/webcomponents/slides/split/CHANGELOG.md index 00408fcb6..e1f3e5c47 100644 --- a/webcomponents/slides/split/CHANGELOG.md +++ b/webcomponents/slides/split/CHANGELOG.md @@ -1,6 +1,12 @@ +# 1.2.0 (2020-06-23) + +### Style + +- split display in `start` and `end` + # 1.1.4 (2020-05-11) -### Feat +### Features - update Stencil for Gatsby build diff --git a/webcomponents/slides/split/package-lock.json b/webcomponents/slides/split/package-lock.json index 522c14c3b..999a68323 100644 --- a/webcomponents/slides/split/package-lock.json +++ b/webcomponents/slides/split/package-lock.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/slide-split", - "version": "1.1.4", + "version": "1.2.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/webcomponents/slides/split/package.json b/webcomponents/slides/split/package.json index a06fa18b1..dd4380abc 100644 --- a/webcomponents/slides/split/package.json +++ b/webcomponents/slides/split/package.json @@ -1,6 +1,6 @@ { "name": "@deckdeckgo/slide-split", - "version": "1.1.4", + "version": "1.2.0", "description": "The Split template is a simple slide to display the content in two columns on a slide of your presentation", "main": "dist/index.js", "module": "dist/index.mjs", diff --git a/webcomponents/slides/split/src/components/slide/deckdeckgo-slide-split.scss b/webcomponents/slides/split/src/components/slide/deckdeckgo-slide-split.scss index 61bdea8fa..157666b17 100644 --- a/webcomponents/slides/split/src/components/slide/deckdeckgo-slide-split.scss +++ b/webcomponents/slides/split/src/components/slide/deckdeckgo-slide-split.scss @@ -27,7 +27,6 @@ div.deckgo-slide-split { ) / 2 ); - display: flex; align-items: var(--slide-split-align, inherit); text-align: var(--slide-split-text-align, inherit); @@ -35,11 +34,13 @@ div.deckgo-slide-split { var(--slide-split-padding-start, var(--slide-padding-start-default)); &.deckgo-slide-split-start { + display: var(--slide-split-display-start, flex); background: var(--slide-split-background-start); color: var(--slide-split-color-start); } &.deckgo-slide-split-end { + display: var(--slide-split-display-end, flex); background: var(--slide-split-background-end); color: var(--slide-split-color-end); }