diff --git a/entry_types/scrolled/config/locales/de.yml b/entry_types/scrolled/config/locales/de.yml
index 790684404c..b1f445de7b 100644
--- a/entry_types/scrolled/config/locales/de.yml
+++ b/entry_types/scrolled/config/locales/de.yml
@@ -115,12 +115,6 @@ de:
Position, um das Element vollständig betrachten zu
können. Kleineren Elementen kann so mehr Gewicht
verliehen werden.
- sticky: |-
- Beim Scrollen begleitend neben dem Text
- stehenbleiben. In der Mobil-Darstellung werden Sticky
- Elemente automatisch im Text verankert. Sticky-Elemente
- funktionieren besonders gut bei Desktop-Darstellung in
- Kombination mit langen Textpassagen.
label: Position
values:
full: Volle Breite
@@ -128,7 +122,6 @@ de:
left: Links eingerückt
right: Rechts eingerückt
standAlone: Stand-Alone
- sticky: Sticky
wide: Breit
typographyVariant:
blank: "(Standard)"
diff --git a/entry_types/scrolled/config/locales/en.yml b/entry_types/scrolled/config/locales/en.yml
index af40e865b9..2ce31dc590 100644
--- a/entry_types/scrolled/config/locales/en.yml
+++ b/entry_types/scrolled/config/locales/en.yml
@@ -110,11 +110,6 @@ en:
scrolling. This gives the reader a stable position to
fully view the element. Smaller elements can be given
more weight that way.
- sticky: |-
- Place beside the text while scrolling. In mobile view,
- sticky elements are automatically turned into inline
- elements. Sticky elements work particularly well in
- desktop view in combination with long text passages.
label: Position
values:
full: Full Width
@@ -122,7 +117,6 @@ en:
left: Floated left
right: Floated right
standAlone: Stand alone
- sticky: Sticky
wide: Wide
typographyVariant:
blank: "(Default)"
diff --git a/entry_types/scrolled/config/locales/new/side.de.yml b/entry_types/scrolled/config/locales/new/side.de.yml
new file mode 100644
index 0000000000..96172b1090
--- /dev/null
+++ b/entry_types/scrolled/config/locales/new/side.de.yml
@@ -0,0 +1,19 @@
+de:
+ pageflow_scrolled:
+ editor:
+ common_content_element_attributes:
+ position:
+ values:
+ sticky: Neben dem Text (Sticky)
+ side: Neben dem Text
+ item_inline_help_texts:
+ sticky: |-
+ Beim Scrollen begleitend neben dem Text
+ stehenbleiben. In der Mobil-Darstellung werden Elemente
+ automatisch im Text verankert. Sticky-Elemente
+ funktionieren besonders gut bei Desktop-Darstellung in
+ Kombination mit langen Textpassagen.
+ side: |-
+ In einer zweiten Spalte neben dem Text positionieren. In
+ der Mobil-Darstellung werden Elemente automatisch im
+ Text verankert.
diff --git a/entry_types/scrolled/config/locales/new/side.en.yml b/entry_types/scrolled/config/locales/new/side.en.yml
new file mode 100644
index 0000000000..c3c23e8f32
--- /dev/null
+++ b/entry_types/scrolled/config/locales/new/side.en.yml
@@ -0,0 +1,18 @@
+en:
+ pageflow_scrolled:
+ editor:
+ common_content_element_attributes:
+ position:
+ values:
+ sticky: Alongside (sticky)
+ side: Alongside
+ item_inline_help_texts:
+ sticky: |-
+ Place alongside the text and keep in a fixed posiiton while
+ scrolling. In mobile view, elements are automatically
+ turned into inline elements. Sticky elements work
+ particularly well in desktop view in combination with
+ long text passages.
+ side: |-
+ Place alongside the text. In mobile view, elements are
+ automatically turned into inline elements.
diff --git a/entry_types/scrolled/package/spec/editor/models/ContentElement-spec.js b/entry_types/scrolled/package/spec/editor/models/ContentElement-spec.js
index fde5e702cb..48a1ebb062 100644
--- a/entry_types/scrolled/package/spec/editor/models/ContentElement-spec.js
+++ b/entry_types/scrolled/package/spec/editor/models/ContentElement-spec.js
@@ -30,7 +30,7 @@ describe('ContentElement', () => {
const contentElement = entry.contentElements.get(5);
expect(contentElement.getAvailablePositions()).toEqual(
- ['inline', 'sticky', 'standAlone', 'backdrop']
+ ['inline', 'side', 'sticky', 'standAlone', 'backdrop']
);
});
@@ -52,7 +52,7 @@ describe('ContentElement', () => {
const contentElement = entry.contentElements.get(5);
expect(contentElement.getAvailablePositions()).toEqual(
- ['inline', 'sticky', 'standAlone', 'backdrop']
+ ['inline', 'side', 'sticky', 'standAlone', 'backdrop']
);
});
diff --git a/entry_types/scrolled/package/spec/entryState/structure-spec.js b/entry_types/scrolled/package/spec/entryState/structure-spec.js
index 76ccdc2b66..3eb1d39575 100644
--- a/entry_types/scrolled/package/spec/entryState/structure-spec.js
+++ b/entry_types/scrolled/package/spec/entryState/structure-spec.js
@@ -88,6 +88,16 @@ const contentElementsSeed = [
id: 4,
permaId: 1004,
sectionId: 2,
+ typeName: 'image',
+ configuration: {
+ position: 'side',
+ imageId: 4
+ }
+ },
+ {
+ id: 5,
+ permaId: 1005,
+ sectionId: 2,
typeName: 'textBlock',
configuration: {
children: 'Some more text'
@@ -435,6 +445,16 @@ describe('useSectionForegroundContentElements', () => {
{
id: 4,
permaId: 1004,
+ type: 'image',
+ position: 'side',
+ width: 0,
+ props: {
+ imageId: 4
+ }
+ },
+ {
+ id: 5,
+ permaId: 1005,
type: 'textBlock',
position: 'inline',
width: 0,
diff --git a/entry_types/scrolled/package/spec/frontend/Layout-spec.js b/entry_types/scrolled/package/spec/frontend/Layout-spec.js
index 07e72809a1..03f3e093ea 100644
--- a/entry_types/scrolled/package/spec/frontend/Layout-spec.js
+++ b/entry_types/scrolled/package/spec/frontend/Layout-spec.js
@@ -122,6 +122,24 @@ describe('Layout', () => {
);
});
+ it('creates new group for side elements', () => {
+ const items = [
+ {id: 1, type: 'probe', position: 'inline'},
+ {id: 2, type: 'probe', position: 'side'},
+ {id: 3, type: 'probe', position: 'side'},
+ {id: 4, type: 'probe', position: 'inline'}
+ ];
+ const {container} = renderInEntry(
+
+ {(children, {position}) => {position} {children}
}
+
+ );
+
+ expect(container.textContent).toEqual(
+ '[inline 1 ][side 2 3 inline 4 ]'
+ );
+ });
+
it('places inline elements with custom margin in separate box in same group', () => {
const items = [
{id: 1, type: 'probe', position: 'inline'},
@@ -139,6 +157,22 @@ describe('Layout', () => {
expect(container.textContent).toEqual('[inline normal 1 inline custom 2 inline normal 3 ]');
});
+ it('places side elements with and without custom margin in separate groups', () => {
+ const items = [
+ {id: 1, type: 'probe', position: 'side'},
+ {id: 2, type: 'probeWithCustomMargin', position: 'side'}
+ ];
+ const {container} = renderInEntry(
+
+ {(children, {position, customMargin}) =>
+ {position} {customMargin ? 'custom' : 'normal'} {children}
+ }
+
+ );
+
+ expect(container.textContent).toEqual('[side normal 1 ][side custom 2 ]');
+ });
+
it('places sticky elements with and without custom margin in separate groups', () => {
const items = [
{id: 1, type: 'probe', position: 'sticky'},
@@ -199,6 +233,23 @@ describe('Layout', () => {
});
});
+ it('continues inline box after being interrupted by side box', () => {
+ const items = [
+ {id: 1, type: 'probe', position: 'inline'},
+ {id: 2, type: 'probe', position: 'inline'},
+ {id: 3, type: 'probe', position: 'side'},
+ {id: 4, type: 'probe', position: 'side'},
+ {id: 5, type: 'probe', position: 'inline'},
+ ];
+ const {container} = renderInEntry(
+
+ {(children, boxProps) => {children}}
+
+ );
+
+ expect(container.textContent).toEqual('[( 1 2 |][( 3 4 )| 5 )]');
+ });
+
it('continues inline box after being interrupted by sticky box', () => {
const items = [
{id: 1, type: 'probe', position: 'inline'},
@@ -233,6 +284,23 @@ describe('Layout', () => {
expect(container.textContent).toEqual('[( 1 2 |][( 3 4 )| 5 )]');
});
+ it('continues inline box in new group after side box', () => {
+ const items = [
+ {id: 1, type: 'probe', position: 'inline'},
+ {id: 2, type: 'probe', position: 'side'},
+ {id: 3, type: 'probe', position: 'inline'},
+ {id: 4, type: 'probe', position: 'side'},
+ {id: 5, type: 'probe', position: 'inline'},
+ ];
+ const {container} = renderInEntry(
+
+ {(children, boxProps) => {children}}
+
+ );
+
+ expect(container.textContent).toEqual('[( 1 |][( 2 )| 3 |][( 4 )| 5 )]');
+ });
+
it('continues inline box in new group after sticky box', () => {
const items = [
{id: 1, type: 'probe', position: 'inline'},
@@ -282,6 +350,22 @@ describe('Layout', () => {
expect(container.textContent).toEqual('[( 1 2 )][( 3 )][( 4 )]');
});
+ it('does not continue inline box after being interrupted by side and full box', () => {
+ const items = [
+ {id: 1, type: 'probe', position: 'inline'},
+ {id: 2, type: 'probe', position: 'side'},
+ {id: 3, type: 'probe', position: 'inline', width: 3},
+ {id: 4, type: 'probe', position: 'inline'},
+ ];
+ const {container} = renderInEntry(
+
+ {(children, boxProps) => {children}}
+
+ );
+
+ expect(container.textContent).toEqual('[( 1 )][( 2 )][( 3 )][( 4 )]');
+ });
+
it('does not continue inline box after being interrupted by sticky and full box', () => {
const items = [
{id: 1, type: 'probe', position: 'inline'},
@@ -298,6 +382,22 @@ describe('Layout', () => {
expect(container.textContent).toEqual('[( 1 )][( 2 )][( 3 )][( 4 )]');
});
+ it('does not continue inline box after being interrupted by full and side box', () => {
+ const items = [
+ {id: 1, type: 'probe', position: 'inline'},
+ {id: 2, type: 'probe', position: 'inline', width: 3},
+ {id: 3, type: 'probe', position: 'side'},
+ {id: 4, type: 'probe', position: 'inline'},
+ ];
+ const {container} = renderInEntry(
+
+ {(children, boxProps) => {children}}
+
+ );
+
+ expect(container.textContent).toEqual('[( 1 )][( 2 )][( 3 )( 4 )]');
+ });
+
it('does not continue inline box after being interrupted by full and sticky box', () => {
const items = [
{id: 1, type: 'probe', position: 'inline'},
@@ -329,6 +429,21 @@ describe('Layout', () => {
expect(container.textContent).toEqual('[( 1 )( 2 )( 3 )]');
});
+ it('continues inline box after being interrupted by side custom margin box', () => {
+ const items = [
+ {id: 1, type: 'probe', position: 'inline'},
+ {id: 2, type: 'probeWithCustomMargin', position: 'side'},
+ {id: 3, type: 'probe', position: 'inline'},
+ ];
+ const {container} = renderInEntry(
+
+ {(children, boxProps) => {children}}
+
+ );
+
+ expect(container.textContent).toEqual('[( 1 |][( 2 )| 3 )]');
+ });
+
it('continues inline box after being interrupted by sticky custom margin box', () => {
const items = [
{id: 1, type: 'probe', position: 'inline'},
@@ -344,6 +459,37 @@ describe('Layout', () => {
expect(container.textContent).toEqual('[( 1 |][( 2 )| 3 )]');
});
+ it('inlines side elements of different width at different breakpoints ', () => {
+ const items = [
+ {id: 1, type: 'probe', position: 'side'},
+ {id: 2, type: 'probe', position: 'side', width: 1},
+ {id: 3, type: 'probe', position: 'side', width: 2}
+ ];
+ viewportWidth = 1000;
+ const {container} = renderInEntry(
+
+ {(children, {position}) => {position} {children}
}
+ ,
+ {
+ seed: {
+ themeOptions: {
+ properties: {
+ root: {
+ twoColumnStickyBreakpoint: '950px',
+ twoColumnStickyLgBreakpoint: '1024px',
+ twoColumnStickyXlBreakpoint: '1180px'
+ }
+ }
+ }
+ }
+ }
+ );
+
+ expect(container.textContent).toEqual(
+ '[side 1 inline 2 ][inline 3 ]'
+ );
+ });
+
it('inlines sticky elements of different width at different breakpoints ', () => {
const items = [
{id: 1, type: 'probe', position: 'sticky'},
@@ -375,6 +521,39 @@ describe('Layout', () => {
);
});
+ it('decreases size when inlining wide side elements', () => {
+ const items = [
+ {id: 1, type: 'probe', position: 'side', width: -2},
+ {id: 2, type: 'probe', position: 'side', width: -1},
+ {id: 3, type: 'probe', position: 'side'},
+ {id: 4, type: 'probe', position: 'side', width: 1},
+ {id: 5, type: 'probe', position: 'side', width: 2}
+ ];
+ viewportWidth = 500;
+ const {container} = renderInEntry(
+
+ {(children, {position, width}) => {position} {widthName(width)} {children}
}
+ ,
+ {
+ seed: {
+ themeOptions: {
+ properties: {
+ root: {
+ twoColumnStickyBreakpoint: '950px',
+ twoColumnStickyLgBreakpoint: '1024px',
+ twoColumnStickyXlBreakpoint: '1180px'
+ }
+ }
+ }
+ }
+ }
+ );
+
+ expect(container.textContent).toEqual(
+ '[inline xs 1 ][inline sm 2 ][inline md 3 4 ][inline lg 5 ]'
+ );
+ });
+
it('decreases size when inlining wide sticky elements', () => {
const items = [
{id: 1, type: 'probe', position: 'sticky', width: -2},
diff --git a/entry_types/scrolled/package/src/contentElements/counter/editor.js b/entry_types/scrolled/package/src/contentElements/counter/editor.js
index c391f4ef7e..73ff24da98 100644
--- a/entry_types/scrolled/package/src/contentElements/counter/editor.js
+++ b/entry_types/scrolled/package/src/contentElements/counter/editor.js
@@ -6,7 +6,7 @@ import pictogram from './pictogram.svg';
editor.contentElementTypes.register('counter', {
category: 'data',
pictogram,
- supportedPositions: ['inline', 'sticky', 'standAlone', 'left', 'right'],
+ supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
supportedWidthRange: ['xxs', 'full'],
defaultConfig: {
diff --git a/entry_types/scrolled/package/src/contentElements/dataWrapperChart/editor.js b/entry_types/scrolled/package/src/contentElements/dataWrapperChart/editor.js
index fbe435a9a9..eeb61d329c 100644
--- a/entry_types/scrolled/package/src/contentElements/dataWrapperChart/editor.js
+++ b/entry_types/scrolled/package/src/contentElements/dataWrapperChart/editor.js
@@ -8,7 +8,7 @@ import pictogram from './pictogram.svg';
editor.contentElementTypes.register('dataWrapperChart', {
category: 'data',
pictogram,
- supportedPositions: ['inline', 'sticky', 'standAlone', 'left', 'right'],
+ supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
supportedWidthRange: ['xxs', 'full'],
configurationEditor({entry}) {
diff --git a/entry_types/scrolled/package/src/contentElements/hotspots/editor/index.js b/entry_types/scrolled/package/src/contentElements/hotspots/editor/index.js
index 6bde2b63f5..fa29a105f0 100644
--- a/entry_types/scrolled/package/src/contentElements/hotspots/editor/index.js
+++ b/entry_types/scrolled/package/src/contentElements/hotspots/editor/index.js
@@ -18,7 +18,7 @@ editor.registerSideBarRouting({
editor.contentElementTypes.register('hotspots', {
pictogram,
category: 'interactive',
- supportedPositions: ['inline', 'sticky', 'standAlone', 'left', 'right', 'backdrop'],
+ supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right', 'backdrop'],
supportedWidthRange: ['xxs', 'full'],
editorPath(contentElement) {
diff --git a/entry_types/scrolled/package/src/contentElements/iframeEmbed/editor.js b/entry_types/scrolled/package/src/contentElements/iframeEmbed/editor.js
index 03ab6ce83b..2c822c8870 100644
--- a/entry_types/scrolled/package/src/contentElements/iframeEmbed/editor.js
+++ b/entry_types/scrolled/package/src/contentElements/iframeEmbed/editor.js
@@ -11,7 +11,7 @@ editor.contentElementTypes.register('iframeEmbed', {
pictogram,
category: 'interactive',
featureName: 'iframe_embed_content_element',
- supportedPositions: ['inline', 'sticky', 'standAlone', 'left', 'right'],
+ supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
supportedWidthRange: ['xxs', 'full'],
configurationEditor({entry}) {
diff --git a/entry_types/scrolled/package/src/contentElements/imageGallery/editor/index.js b/entry_types/scrolled/package/src/contentElements/imageGallery/editor/index.js
index 8776c6cc1c..9b5c3ea202 100644
--- a/entry_types/scrolled/package/src/contentElements/imageGallery/editor/index.js
+++ b/entry_types/scrolled/package/src/contentElements/imageGallery/editor/index.js
@@ -10,7 +10,7 @@ import pictogram from './pictogram.svg';
editor.contentElementTypes.register('imageGallery', {
pictogram,
category: 'media',
- supportedPositions: ['inline', 'sticky', 'standAlone', 'left', 'right'],
+ supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
supportedWidthRange: ['xxs', 'full'],
configurationEditor({entry, contentElement}) {
diff --git a/entry_types/scrolled/package/src/contentElements/infoTable/editor.js b/entry_types/scrolled/package/src/contentElements/infoTable/editor.js
index 8fc770833d..9caab3eb98 100644
--- a/entry_types/scrolled/package/src/contentElements/infoTable/editor.js
+++ b/entry_types/scrolled/package/src/contentElements/infoTable/editor.js
@@ -7,7 +7,7 @@ import pictogram from './pictogram.svg';
editor.contentElementTypes.register('infoTable', {
pictogram,
- supportedPositions: ['inline', 'sticky', 'standAlone', 'left', 'right'],
+ supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
supportedWidthRange: ['s', 'xl'],
configurationEditor({entry, contentElement}) {
diff --git a/entry_types/scrolled/package/src/contentElements/inlineAudio/editor.js b/entry_types/scrolled/package/src/contentElements/inlineAudio/editor.js
index c8ce8d942a..531a425249 100644
--- a/entry_types/scrolled/package/src/contentElements/inlineAudio/editor.js
+++ b/entry_types/scrolled/package/src/contentElements/inlineAudio/editor.js
@@ -7,7 +7,7 @@ import pictogram from './pictogram.svg';
editor.contentElementTypes.register('inlineAudio', {
pictogram,
category: 'media',
- supportedPositions: ['inline', 'sticky', 'standAlone', 'left', 'right'],
+ supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
supportedWidthRange: ['xxs', 'full'],
defaultConfig: {playerControlVariant: 'waveformBars'},
diff --git a/entry_types/scrolled/package/src/contentElements/inlineBeforeAfter/editor.js b/entry_types/scrolled/package/src/contentElements/inlineBeforeAfter/editor.js
index e6b8a84e67..f04fa5f332 100644
--- a/entry_types/scrolled/package/src/contentElements/inlineBeforeAfter/editor.js
+++ b/entry_types/scrolled/package/src/contentElements/inlineBeforeAfter/editor.js
@@ -7,7 +7,7 @@ import pictogram from './pictogram.svg';
editor.contentElementTypes.register('inlineBeforeAfter', {
pictogram,
category: 'interactive',
- supportedPositions: ['inline', 'sticky', 'standAlone', 'left', 'right', 'backdrop'],
+ supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right', 'backdrop'],
supportedWidthRange: ['xxs', 'full'],
configurationEditor({entry}) {
diff --git a/entry_types/scrolled/package/src/contentElements/inlineImage/editor.js b/entry_types/scrolled/package/src/contentElements/inlineImage/editor.js
index 09b9069dcf..799ce75522 100644
--- a/entry_types/scrolled/package/src/contentElements/inlineImage/editor.js
+++ b/entry_types/scrolled/package/src/contentElements/inlineImage/editor.js
@@ -8,7 +8,7 @@ import pictogram from './pictogram.svg';
editor.contentElementTypes.register('inlineImage', {
pictogram,
category: 'media',
- supportedPositions: ['inline', 'sticky', 'standAlone', 'left', 'right'],
+ supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
supportedWidthRange: ['xxs', 'full'],
configurationEditor({entry, contentElement}) {
diff --git a/entry_types/scrolled/package/src/contentElements/inlineVideo/editor.js b/entry_types/scrolled/package/src/contentElements/inlineVideo/editor.js
index d778f9dc54..f4efcaede3 100644
--- a/entry_types/scrolled/package/src/contentElements/inlineVideo/editor.js
+++ b/entry_types/scrolled/package/src/contentElements/inlineVideo/editor.js
@@ -35,7 +35,7 @@ const EditMotifAreaMenuItem = Backbone.Model.extend({
editor.contentElementTypes.register('inlineVideo', {
pictogram,
category: 'media',
- supportedPositions: ['inline', 'sticky', 'standAlone', 'left', 'right', 'backdrop'],
+ supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right', 'backdrop'],
supportedWidthRange: ['xxs', 'full'],
configurationEditor({entry}) {
diff --git a/entry_types/scrolled/package/src/contentElements/quote/editor.js b/entry_types/scrolled/package/src/contentElements/quote/editor.js
index b33ca9c63d..dd6b68cbcf 100644
--- a/entry_types/scrolled/package/src/contentElements/quote/editor.js
+++ b/entry_types/scrolled/package/src/contentElements/quote/editor.js
@@ -7,7 +7,7 @@ import pictogram from './pictogram.svg';
editor.contentElementTypes.register('quote', {
pictogram,
- supportedPositions: ['inline', 'sticky', 'standAlone', 'left', 'right'],
+ supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
supportedWidthRange: ['xs', 'xl'],
defaultConfig: {textSize: 'medium'},
diff --git a/entry_types/scrolled/package/src/contentElements/tikTokEmbed/editor.js b/entry_types/scrolled/package/src/contentElements/tikTokEmbed/editor.js
index d1425f1e6c..b1946bdd8e 100644
--- a/entry_types/scrolled/package/src/contentElements/tikTokEmbed/editor.js
+++ b/entry_types/scrolled/package/src/contentElements/tikTokEmbed/editor.js
@@ -5,7 +5,7 @@ import pictogram from './pictogram.svg'
editor.contentElementTypes.register('tikTokEmbed', {
pictogram,
category: 'media',
- supportedPositions: ['inline', 'sticky', 'standAlone', 'left', 'right'],
+ supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
supportedWidthRange: ['md', 'full'],
configurationEditor() {
diff --git a/entry_types/scrolled/package/src/contentElements/twitterEmbed/editor.js b/entry_types/scrolled/package/src/contentElements/twitterEmbed/editor.js
index 1a07b7f241..a840a0ea53 100644
--- a/entry_types/scrolled/package/src/contentElements/twitterEmbed/editor.js
+++ b/entry_types/scrolled/package/src/contentElements/twitterEmbed/editor.js
@@ -5,7 +5,7 @@ import pictogram from './pictogram.svg'
editor.contentElementTypes.register('twitterEmbed', {
pictogram,
category: 'media',
- supportedPositions: ['inline', 'sticky', 'standAlone', 'left', 'right'],
+ supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
configurationEditor() {
this.tab('general', function() {
diff --git a/entry_types/scrolled/package/src/contentElements/videoEmbed/editor.js b/entry_types/scrolled/package/src/contentElements/videoEmbed/editor.js
index 4cc8bf3c48..5805ba53dc 100644
--- a/entry_types/scrolled/package/src/contentElements/videoEmbed/editor.js
+++ b/entry_types/scrolled/package/src/contentElements/videoEmbed/editor.js
@@ -7,7 +7,7 @@ import pictogram from './pictogram.svg';
editor.contentElementTypes.register('videoEmbed', {
pictogram,
category: 'media',
- supportedPositions: ['inline', 'sticky', 'standAlone', 'left', 'right'],
+ supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right'],
supportedWidthRange: ['xxs', 'full'],
configurationEditor({entry}) {
diff --git a/entry_types/scrolled/package/src/contentElements/vrImage/editor.js b/entry_types/scrolled/package/src/contentElements/vrImage/editor.js
index 0213e342e2..53a55aa736 100644
--- a/entry_types/scrolled/package/src/contentElements/vrImage/editor.js
+++ b/entry_types/scrolled/package/src/contentElements/vrImage/editor.js
@@ -6,7 +6,7 @@ import pictogram from './pictogram.svg';
editor.contentElementTypes.register('vrImage', {
pictogram,
category: 'interactive',
- supportedPositions: ['inline', 'sticky', 'standAlone', 'left', 'right', 'backdrop'],
+ supportedPositions: ['inline', 'side', 'sticky', 'standAlone', 'left', 'right', 'backdrop'],
supportedWidthRange: ['xxs', 'full'],
configurationEditor({entry}) {
diff --git a/entry_types/scrolled/package/src/editor/models/ContentElement.js b/entry_types/scrolled/package/src/editor/models/ContentElement.js
index 1489fff8b8..7001ee34ef 100644
--- a/entry_types/scrolled/package/src/editor/models/ContentElement.js
+++ b/entry_types/scrolled/package/src/editor/models/ContentElement.js
@@ -102,7 +102,7 @@ export const ContentElement = Backbone.Model.extend({
const supportedByLayout =
layout === 'center' || layout === 'centerRagged' ?
['inline', 'left', 'right', 'standAlone', backdrop] :
- ['inline', 'sticky', 'standAlone', backdrop];
+ ['inline', 'side', 'sticky', 'standAlone', backdrop];
const supportedByType = this.getType().supportedPositions;
if (supportedByType) {
diff --git a/entry_types/scrolled/package/src/editor/views/inputs/PositionSelectInputView.module.css b/entry_types/scrolled/package/src/editor/views/inputs/PositionSelectInputView.module.css
index 3e02b35601..f4e8b11c93 100644
--- a/entry_types/scrolled/package/src/editor/views/inputs/PositionSelectInputView.module.css
+++ b/entry_types/scrolled/package/src/editor/views/inputs/PositionSelectInputView.module.css
@@ -91,21 +91,28 @@
margin-left: space(3);
}
-.stickyPosition .block {
+.sidePosition .block {
width: 100%;
}
-.stickyPosition .wrapper {
+.sidePosition .wrapper {
float: right;
width: 40%;
- position: sticky;
top: 30%;
}
-.rightLayout.stickyPosition .wrapper {
+.rightLayout.sidePosition .wrapper {
float: left;
}
+.stickyPosition {
+ composes: sidePosition;
+}
+
+.stickyPosition .wrapper {
+ position: sticky;
+}
+
.standAlonePosition .wrapper {
height: 170px;
}
diff --git a/entry_types/scrolled/package/src/entryState/structure.js b/entry_types/scrolled/package/src/entryState/structure.js
index a4d01ee06b..8ef05fb3a8 100644
--- a/entry_types/scrolled/package/src/entryState/structure.js
+++ b/entry_types/scrolled/package/src/entryState/structure.js
@@ -189,8 +189,8 @@ function contentElementData(contentElement, layout) {
const supportedPositions = {
center: ['inline', 'left', 'right'],
centerRagged: ['inline', 'left', 'right'],
- left: ['inline', 'sticky'],
- right: ['inline', 'sticky'],
+ left: ['inline', 'side', 'sticky'],
+ right: ['inline', 'side', 'sticky'],
backdrop: ['backdrop']
};
diff --git a/entry_types/scrolled/package/src/frontend/layouts/TwoColumn.js b/entry_types/scrolled/package/src/frontend/layouts/TwoColumn.js
index a42f23e26d..3cc968e75a 100644
--- a/entry_types/scrolled/package/src/frontend/layouts/TwoColumn.js
+++ b/entry_types/scrolled/package/src/frontend/layouts/TwoColumn.js
@@ -110,19 +110,19 @@ function groupItemsByPosition(items, shouldInline) {
const {customMargin: elementSupportsCustomMargin} =
api.contentElementTypes.getOptions(item.type) || {};
let width = item.width || 0;
- const position = item.position === 'sticky' && !shouldInline(width) ? 'sticky' : 'inline';
+ const position = onTheSide(item.position) && !shouldInline(width) ? item.position : 'inline';
const customMargin = !!elementSupportsCustomMargin && width < widths.full;
- if (item.position === 'sticky' && position === 'inline' && width > widths.md) {
+ if (onTheSide(item.position) && position === 'inline' && width > widths.md) {
width -= 1;
}
if (!currentGroup || previousPosition !== position ||
- (position === 'sticky' && currentBox.customMargin !== customMargin) ||
+ (onTheSide(position) && currentBox.customMargin !== customMargin) ||
currentBox.width !== width) {
currentBox = null;
- if (!(previousPosition === 'sticky' && position === 'inline' && width <= widths.md)) {
+ if (!(onTheSide(previousPosition) && position === 'inline' && width <= widths.md)) {
currentGroup = {
width,
boxes: []
@@ -149,7 +149,7 @@ function groupItemsByPosition(items, shouldInline) {
lastInlineBox = currentBox;
}
else if ((position === 'inline' && width > widths.md) ||
- (customMargin && position !== 'sticky')) {
+ (customMargin && !onTheSide(position))) {
lastInlineBox = null;
}
@@ -163,6 +163,10 @@ function groupItemsByPosition(items, shouldInline) {
return groups;
}
+function onTheSide(position) {
+ return position === 'side' || position === 'sticky';
+}
+
function renderPlaceholder(placeholder) {
if (!placeholder) {
return null;
diff --git a/entry_types/scrolled/package/src/frontend/layouts/TwoColumn.module.css b/entry_types/scrolled/package/src/frontend/layouts/TwoColumn.module.css
index d731b8d82f..98ae1e978d 100644
--- a/entry_types/scrolled/package/src/frontend/layouts/TwoColumn.module.css
+++ b/entry_types/scrolled/package/src/frontend/layouts/TwoColumn.module.css
@@ -80,32 +80,36 @@
margin-left: auto;
}
-.sticky {
+.side {
--content-width: var(--theme-two-column-sticky-content-width, 25vw);
--content-max-width: min(var(--content-width), var(--two-column-sticky-content-max-width, 600px));
- position: sticky;
float: right;
clear: both;
top: 33%;
width: var(--content-width);
}
-.right .sticky {
+.sticky {
+ composes: side;
+ position: sticky;
+}
+
+.right .side {
float: left;
}
-.sticky.width-lg {
+.side.width-lg {
--content-width: var(--theme-two-column-sticky-lg-content-width, 35vw);
--content-max-width: min(var(--content-width),
var(--two-column-sticky-lg-content-max-width, 700px));
}
-.sticky.width-xl {
+.side.width-xl {
--content-width: var(--theme-two-column-sticky-xl-content-width, 45vw);
--content-max-width: min(var(--content-width),
var(--two-column-sticky-xl-content-max-width, 1000px));
}
-.sticky.customMargin {
+.side.customMargin {
width: 100%;
}