Merge pull request #2338 from tf/remaining-space

Add remaining vertical space option for sections

Author: tf

entry_types/scrolled/config/locales/de.yml

@@ -1383,6 +1383,14 @@ de:
             label: Abstand oben (Hochkant)
           portraitPaddingBottom:
             label: Abstand unten (Hochkant)
+          remainingVerticalSpace:
+            label: Verbleibender vertikaler Raum
+            inline_help: Bestimmt, wo der Inhalt positioniert wird, wenn er nicht die gesamte Höhe des Abschnitts ausfüllt.
+            inline_help_disabled: Nur verfügbar, wenn "Volle Viewport-Höhe" in den Abschnittseinstellungen aktiviert ist.
+            values:
+              around: Um den Inhalt
+              above: Über dem Inhalt
+              below: Unter dem Inhalt
       typography_sizes:
         xl: Sehr groß
         lg: Groß

entry_types/scrolled/config/locales/en.yml

@@ -1366,6 +1366,14 @@ en:
             label: Top padding (Portrait)
           portraitPaddingBottom:
             label: Bottom padding (Portrait)
+          remainingVerticalSpace:
+            label: Remaining vertical space
+            inline_help: Controls where content is positioned when it does not fill the full height of the section.
+            inline_help_disabled: Only available when "Use Full Viewport-Height" is enabled in section settings.
+            values:
+              around: Around content
+              above: Above content
+              below: Below content
       typography_sizes:
         xl: Very large
         lg: Large

entry_types/scrolled/package/spec/frontend/features/sectionPadding-spec.js

@@ -129,4 +129,51 @@ describe('section padding', () => {
       '--foreground-padding-bottom': 'var(--theme-section-padding-bottom-md)',
     });
   });
+
+  it('centers content vertically by default', () => {
+    const {getSectionByPermaId} = renderEntry({
+      seed: {
+        sections: [{id: 5, permaId: 6}],
+        contentElements: [{sectionId: 5}]
+      }
+    });
+
+    const section = getSectionByPermaId(6);
+    expect(section.hasRemainingSpaceAbove()).toBe(false);
+    expect(section.hasRemainingSpaceBelow()).toBe(false);
+  });
+
+  it('supports remaining vertical space above content', () => {
+    const {getSectionByPermaId} = renderEntry({
+      seed: {
+        sections: [{
+          id: 5,
+          permaId: 6,
+          configuration: {remainingVerticalSpace: 'above'}
+        }],
+        contentElements: [{sectionId: 5}]
+      }
+    });
+
+    const section = getSectionByPermaId(6);
+    expect(section.hasRemainingSpaceAbove()).toBe(true);
+    expect(section.hasRemainingSpaceBelow()).toBe(false);
+  });
+
+  it('supports remaining vertical space below content', () => {
+    const {getSectionByPermaId} = renderEntry({
+      seed: {
+        sections: [{
+          id: 5,
+          permaId: 6,
+          configuration: {remainingVerticalSpace: 'below'}
+        }],
+        contentElements: [{sectionId: 5}]
+      }
+    });
+
+    const section = getSectionByPermaId(6);
+    expect(section.hasRemainingSpaceAbove()).toBe(false);
+    expect(section.hasRemainingSpaceBelow()).toBe(true);
+  });
 });

entry_types/scrolled/package/spec/support/pageObjects.js

@@ -200,6 +200,14 @@ function createSectionPageObject(el) {
       return foreground.classList.contains(foregroundStyles.paddingBottom);
     },
 
+    hasRemainingSpaceAbove() {
+      return foreground.classList.contains(foregroundStyles.spaceAbove);
+    },
+
+    hasRemainingSpaceBelow() {
+      return foreground.classList.contains(foregroundStyles.spaceBelow);
+    },
+
     hasFadedOutForeground() {
       return foreground.classList.contains(sharedTransitionStyles.fadedOut);
     },

entry_types/scrolled/package/src/editor/views/EditSectionPaddingsView.js

@@ -1,7 +1,7 @@
 import I18n from 'i18n-js';
 
 import {EditConfigurationView, SeparatorView} from 'pageflow/editor';
-import {SliderInputView, RadioButtonGroupInputView, CheckBoxInputView} from 'pageflow/ui';
+import {SliderInputView, RadioButtonGroupInputView, CheckBoxInputView, SelectInputView} from 'pageflow/ui';
 
 import {SectionPaddingVisualizationView} from './inputs/SectionPaddingVisualizationView';
 import {EditMotifAreaInputView} from './inputs/EditMotifAreaInputView';
@@ -189,6 +189,16 @@ function paddingInputs(tab, options) {
     onInteractionStart: scrollToSectionEnd,
     ...disabledOptions
   });
+
+  tab.view(SeparatorView);
+
+  tab.input('remainingVerticalSpace', SelectInputView, {
+    values: ['around', 'above', 'below'],
+    defaultValue: 'around',
+    disabledBinding: 'fullHeight',
+    disabled: fullHeight => !fullHeight,
+    ...disabledOptions
+  });
 }
 
 const motifAreaBinding = ['backdropType'];

entry_types/scrolled/package/src/frontend/Foreground.js

@@ -24,6 +24,16 @@ function className(props, forcePadding) {
     props.transitionStyles.foreground,
     props.transitionStyles[`foreground-${props.state}`],
     {[styles.paddingBottom]: props.paddingBottom || forcePadding},
-    styles[`${props.heightMode}Height`]
+    styles[`${props.heightMode}Height`],
+    styles[spaceClassName(props.section?.remainingVerticalSpace)]
   )
 }
+
+function spaceClassName(remainingVerticalSpace) {
+  if (remainingVerticalSpace === 'above') {
+    return 'spaceAbove';
+  }
+  else if (remainingVerticalSpace === 'below') {
+    return 'spaceBelow';
+  }
+}

entry_types/scrolled/package/src/frontend/Foreground.module.css

@@ -21,6 +21,14 @@
   min-height: 100vh;
 }
 
+.spaceAbove {
+  justify-content: flex-end;
+}
+
+.spaceBelow {
+  justify-content: flex-start;
+}
+
 .paddingBottom {
   padding-bottom: var(--foreground-padding-bottom, 3em);
 }