Merge pull request #1989 from tf/widths

Content element widths

entry_types/scrolled/config/locales/de.yml

@@ -62,7 +62,6 @@ de:
           inline_help: Die Beschriftung des Elements wird direkt unterhalb des Elements angezeigt.
           label: Beschriftung
         position:
-          inline_help: 'Mit dieser Einstellung kannst du die Position des Elements im Zusammenspiel mit Fließtext steuern: Das Element kann prominent für sich alleine stehen ("Volle Breite"), im Text verankert werden ("Im Textfluss") oder auch beim Scrollen begleitend neben dem Text stehenbleiben ("Sticky"). Sticky-Elemente bleiben statisch in der Mitte des Viewports neben dem Text stehen, bis entweder der Abschnitt aus dem Viewport gescrollt wird oder sie vom nächsten Sticky-Element des Abschnitts verdrängt werden. In 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
@@ -547,34 +546,6 @@ de:
     help_entries:
       content_elements:
         menu_item: Inhaltselemente
-        text: |
-          # Inhaltselemente
-
-          In jedem Abschnitt können beliebig viele Inhaltselemente
-          eingefügt werden.
-
-          Um ein neues Inhaltselement hinzuzufügen, klicke auf das
-          Plus-Zeichen ober- oder unterhalb eines bestehenden Elements
-          und füge dann Text-Blöcke, Medien, Embeds oder externe
-          Verweise ein.
-
-          Durch einen Klick auf ein Inhaltselement wird diese
-          ausgewählt. In der Seitenleiste erscheinen die verfügbaren
-          Konfigurationsoptionen. Hier kann unter anderem die
-          **Positionierung** der Inhaltselemente festgelegt und weitere
-          Optionen wie **Autoplay** für Audios und Videos oder
-          **Bildunterschriften** bearbeitet werden.
-
-          Für die Darstellung auf breiten
-          Bildschirm-Seitenverhältnissen (Desktop, Notebook, Tablet,
-          Smartphone quer) können einzelne Inhaltselemente, wie
-          Videos, Audios, Video Embeds, 360° Bilder auch als
-          **Sticky** oder **Volle Breite** angeordnet werden.
-
-          Wenn ein Abschnitt mittig ausgerichtet ist, können
-          Inhaltselemente zudem auch nach links oder rechts eingerückt
-          werden. Dabei wird das Inhaltselement soweit verkleinert,
-          dass der Text das Element umfließen kann.
       meta_data:
         menu_item: Titel und Optionen
         text: |

entry_types/scrolled/config/locales/en.yml

@@ -62,7 +62,6 @@ en:
           inline_help: The caption of the element will be displayed directly underneath the element.
           label: Caption
         position:
-          inline_help: 'This setting allows you to control the position of the element in relation to surrounding text blocks: the element can prominently stand alone ("Full Width"), it can be anchored within the text ("Inline") or it can be positioned adjacent to the text ("Sticky"). Sticky elements remain static in the middle of the viewport alongside the text until either the section is scrolled out of the viewport or until they get pushed upwards by the next sticky element of the section. On mobile devices sticky elements automatically get positioned inline. Sticky elements work particularly well on desktop devices in combination with long texts.'
           label: Position
           values:
             full: Full Width
@@ -546,7 +545,6 @@ en:
     help_entries:
       content_elements:
         menu_item: Content Elements
-        text: "# Content Elements\nIn each section, any number of content elements can be inserted and positioned against a background. The position of the content elements on wide screen aspect ratios is determined by the foreground **positioning of the section** (left, right, centre). In portrait mode on smartphones (upright) the content elements are always displayed one below the other for space reasons.\n\n## Insert elements\nTo add a new content element, click on the **plus button** above or below an existing one and then insert text blocks, media, embeds or external links. \n\nBy clicking on the selected content element, a dialog box for **positioning the content elements** and other options, such as activating **autoplay for audio and video** or entering a caption, appears on the right-hand editing bar. \n\nFor display on wide screen aspect ratios (desktop, notebook, tablet, smartphone landscape), individual content elements such as videos, audios, video embeds, 360° images can also be arranged separately from the positioning in the text flow as **sticky** or **full width**. \n\nIf a section is aligned centrally, content elements can also be **indented to the left or right**. In this case, the content element is reduced in size so that the text can be displayed next to, instead of above the content element."
       meta_data:
         menu_item: Title and Options
         text: |

entry_types/scrolled/config/locales/new/widths.de.yml

@@ -0,0 +1,58 @@
+de:
+  pageflow_scrolled:
+    editor:
+      common_content_element_attributes:
+        width:
+          label: Breite
+          inline_help: |-
+            Ziehe den Schieberegler, um die Breite des Elements
+            anzupassen. Breitere Elemente unterbrechen den Textfluss
+            und stehen prominent für sich alleine.
+        position:
+          inline_help: |-
+            Mit dieser Einstellung kannst du die Position des Elements
+            im Zusammenspiel mit Fließtext steuern: Das Element kann
+            im Text verankert werden ("Im Textfluss") oder beim
+            Scrollen begleitend neben dem Text stehenbleiben
+            ("Sticky"). Sticky-Elemente bleiben statisch in der Mitte
+            des Viewports neben dem Text stehen, bis entweder der
+            Abschnitt aus dem Viewport gescrollt wird oder sie vom
+            nächsten Sticky-Element des Abschnitts verdrängt
+            werden. In Mobil-Darstellung werden Sticky Elemente
+            automatisch im Text verankert. Sticky-Elemente
+            funktionieren besonders gut bei Desktop-Darstellung in
+            Kombination mit langen Textpassagen.
+    help_entries:
+      content_elements:
+        text: |
+          # Inhaltselemente
+
+          In jedem Abschnitt können beliebig viele Inhaltselemente
+          eingefügt werden.
+
+          Um ein neues Inhaltselement hinzuzufügen, klicke auf das
+          Plus-Zeichen ober- oder unterhalb eines bestehenden Elements
+          und füge dann Text-Blöcke, Medien, Embeds oder externe
+          Verweise ein.
+
+          Durch einen Klick auf ein Inhaltselement wird diese
+          ausgewählt. In der Seitenleiste erscheinen die verfügbaren
+          Konfigurationsoptionen. Hier kann unter anderem die
+          **Positionierung** und **Breite** der Inhaltselemente
+          festgelegt und weitere Optionen wie **Autoplay** für Audios
+          und Videos bearbeitet werden.
+
+          Für die Darstellung auf breiten
+          Bildschirm-Seitenverhältnissen (Desktop, Notebook, Tablet,
+          Smartphone quer) können einzelne Inhaltselemente, wie
+          Videos, Audios, Video Embeds, 360° Bilder auch als
+          **Sticky** angeordnet werden. Sticky-Elemente bleiben
+          statisch in der Mitte des Viewports neben dem Text stehen,
+          bis entweder der Abschnitt aus dem Viewport gescrollt wird
+          oder sie vom nächsten Sticky-Element des Abschnitts
+          verdrängt werden.
+
+          Wenn ein Abschnitt mittig ausgerichtet ist, können
+          Inhaltselemente zudem auch nach **links oder rechts
+          eingerückt** werden. Dabei wird das Inhaltselement soweit
+          verkleinert, dass der Text das Element umfließen kann.

entry_types/scrolled/config/locales/new/widths.en.yml

@@ -0,0 +1,57 @@
+en:
+  pageflow_scrolled:
+    editor:
+      common_content_element_attributes:
+        width:
+          label: Width
+          inline_help: |-
+            Drag the slider to change the width of the element. Wider
+            elements interrupt the text flow and stand prominently on
+            their own.
+        position:
+          inline_help: |-
+            This setting allows you to control the position of the
+            element in relation to surrounding text blocks: it can be
+            anchored within the text ("Inline") or positioned adjacent
+            to the text ("Sticky"). Sticky elements remain static in
+            the middle of the viewport alongside the text until either
+            the section is scrolled out of the viewport or they get
+            pushed upwards by the next sticky element of the
+            section. On mobile devices sticky elements automatically
+            get positioned inline. Sticky elements work particularly
+            well on desktop devices in combination with long texts.
+    help_entries:
+      content_elements:
+        text: |
+          # Content Elements
+
+          In each section, any number of content elements can be
+          inserted and positioned against a background. The position
+          of the content elements on wide screen aspect ratios is
+          determined by the foreground **positioning of the section**
+          (left, right, center). In portrait mode on smartphones
+          (upright) the content elements are always displayed one
+          below the other for space reasons.
+
+          To add a new content element, click on the **plus button**
+          above or below an existing one and then insert text blocks,
+          media, embeds or external links.
+
+          Click on a content element to select it. The sidebar then
+          displays options for **positioning the content element** and
+          other options, such as activating **autoplay for audio and
+          video**.
+
+          For display on wide screen aspect ratios (desktop, notebook,
+          tablet, smartphone landscape), individual content elements
+          such as videos, audios, video embeds, 360° images can also
+          be arranged separately from the text flow as **sticky**
+          elements. Sticky elements remain static in the middle of the
+          viewport alongside the text until either the section is
+          scrolled out of the viewport or they get pushed upwards by
+          the next sticky element of the section.
+
+          If a section is aligned centrally, content elements can also
+          be **indented to the left or right**. In this case, the
+          content element is reduced in size so that the text can be
+          displayed next to, instead of below the content element."

entry_types/scrolled/doc/creating_content_element_types.md

@@ -64,6 +64,45 @@ the [API reference of
 `pageflow-scrolled`](https://codevise.github.io/pageflow-docs/scrolled/js/master/index.html)
 for a complete list of available components and hooks.
 
+### Supported Positions and Widths
+
+By default, content elements can be placed in all positions:
+
+* `inline`: Default position.
+* `sticky`: Placed in second column next to inline elements in `left`
+  or `right` layout.
+* `left`: Floated to the left in `center` or `centerRagged` layout.
+* `right`: Floated to the right in `center` or `centerRagged` layout.
+
+Content element types can exclude some of these positions by
+explicitly declaring supported positions:
+
+```javascript
+frontend.contentElementTypes.register('inlineImage', {
+  component: InlineImage,
+  supportedPositions: ['inline']
+});
+```
+
+By default, content elements can only have the default width. To allow
+resizing the element with a slider, we can declare a range of
+additional supported widths:
+
+```javascript
+frontend.contentElementTypes.register('inlineImage', {
+  component: InlineImage,
+  supportedWidthRange: ['xxs', 'full']
+});
+```
+
+The following widths are available:
+
+* `xxs`, `xs`, `sm`: Elements are scaled down based on fixed
+  percentage values.
+* `md`: The default width based on the section line width.
+* `lg`, `xl`: Display elements outside section boxes to let them be wider.
+* `full`: Let element take full viewport width.
+
 ### Content Element Lifecycle
 
 The `useContentElementLifecycle` hook allows implementing scroll
@@ -273,9 +312,7 @@ editor.contentElementTypes.register('inlineImage', {
         fileSelectionHandler: 'contentElementConfiguration'
       });
       this.input('caption', TextInputView);
-      this.input('position', SelectInputView, {
-        values: ['inline', 'sticky', 'full']
-      });
+      this.group('ContentElementPosition');
     });
   },
   defaultConfig: {caption: 'Add caption here'},

entry_types/scrolled/doc/creating_themes/custom_colors_and_dimensions.md

@@ -114,40 +114,48 @@ width:
 | ---- | ----------- |
 | `section_max_width` | Settings this property causes section content to be centered once the viewport becomes too wide. |
 
-Depending on their position, content elements have a maximum width by
-default to limit text line length. The following properties can be
-used to adjust these widths for sections using content alignment
-"left" or "right":
+Depending on their position and width, content elements have a maximum
+width to limit text line length. The following properties can be used
+to adjust these widths for sections using content alignment "left" or
+"right":
 
 | Name | Description |
 | ---- | ----------- |
-| `two_column_inline_content_max_width` | Maximum width of inline content (e.g., text block paragraphs) . |
+| `two_column_inline_content_max_width` | Maximum width of inline content (e.g., text block paragraphs). |
+| `two_column_inline_lg_content_max_width` | Maximum width of inline content with width L. |
+| `two_column_inline_xl_content_max_width` | Maximum width of inline content with width XL. |
 | `two_column_sticky_content_max_width` | Maximum width of sticky content (e.g., inline images using position "sticky"). |
-| `two_column_wide_content_max_width` | Maximum width of wide content (e.g., headings using their default position). |
-| `two_column_sticky_content_width` | Percentage width of sticky elements. |
+| `two_column_sticky_lg_content_max_width` | Maximum width of sticky content with width L. |
+| `two_column_sticky_xl_content_max_width` | Maximum width of sticky content with width XL. |
+| `two_column_sticky_content_width` | Width of sticky elements in `vw` units. |
+| `two_column_sticky_lg_content_width` | Width of sticky elements with width L in `vw` units. |
+| `two_column_sticky_xl_content_width` | Width of sticky elements with width XL in `vw` units. |
 
 The following properties control width of content elements in section
 with content alignment "center":
 
 | Name | Description |
 | ---- | ----------- |
 | `centered_inline_content_max_width` | Maximum width of inline content (e.g., text block paragraphs). |
-| `centered_wide_content_max_width` | Maximum width of wide content (e.g., headings using their default position). |
+| `centered_inline_lg_content_max_width` | Maximum width of inline content with width L. |
+| `centered_inline_xl_content_max_width` | Maximum width of inline content with width XL. |
 
 For all of these properties, also a variant using the prefix
 `narrow_section_` can be defined (e.g. `narrow_section_max_width` or
-`narrow_section_two_column_inline_content_max_width`. If one of these
-properties is defined for a theme, Pageflow offers an additional
+`narrow_section_two_column_inline_lg_content_max_width`. If one of
+these properties is defined for a theme, Pageflow offers an additional
 "Width" field in the section settings. The given values apply to a
 section once "Narrow" has been selected as width.
 
 To prevent sticky elements from overlapping inline elements on narrow
-viewports, the following property can be used to control the
-breakpoint below which sticky elements become inline:
+viewports, the following properties can be used to control the
+breakpoints below which sticky elements become inline:
 
 | Name | Description |
 | ---- | ----------- |
-| `narrow_viewport_breakpoint` | Minimum viewport width for sticky elements to be displayed in a second column. |
+| `two_column_sticky_breakpoint` | Minimum viewport width for sticky elements with M or smaller to be displayed in a second column. |
+| `two_column_sticky_lg_breakpoint` | Minimum viewport width for sticky elements with width LG to be displayed in a second column. |
+| `two_column_sticky_xl_breakpoint` | Minimum viewport width for sticky elements with width XL to be displayed in a second column. |
 
 ### Section Appearance