feat(ui5-dynamic-page): fit content that has 100% height

SAP · Dec 5, 2023 · ecb78a1 · ecb78a1
1 parent 9670fab
commit ecb78a1
Show file tree

Hide file tree

Showing 6 changed files with 571 additions and 8 deletions.
diff --git a/packages/fiori/src/DynamicPage.hbs b/packages/fiori/src/DynamicPage.hbs
@@ -32,7 +32,12 @@
     {{/unless}}
 
     <div class="{{classes.content}}">
-      <slot></slot>
+      <div class="{{classes.fitContent}}">
+        <slot></slot>
+        {{#if showFooter}}
+          <div class="{{classes.spacer}}"></div>
+        {{/if}}
+      </div>
     </div>
   </div>
 

diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts
@@ -113,9 +113,15 @@ class DynamicPage extends UI5Element {
 			content: {
 				"ui5-dynamic-page-content": true,
 			},
+			fitContent: {
+				"ui5-dynamic-page-fit-content": true,
+			},
 			footer: {
 				"ui5-dynamic-page-footer": true,
 			},
+			spacer: {
+				"ui5-dynamic-page-spacer": true,
+			},
 		};
 	}
 

diff --git a/packages/fiori/src/themes/DynamicPage.css b/packages/fiori/src/themes/DynamicPage.css
@@ -19,10 +19,29 @@
 }
 
 .ui5-dynamic-page-scroll-container {
-    overflow-y: scroll;
+    overflow-y: auto;
     height: 100%;
 }
 
+/* Automatically fit content that has height: 100% */
+.ui5-dynamic-page-scroll-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.ui5-dynamic-page-content {
+   flex-grow: 1;
+   position: relative;
+}
+
+.ui5-dynamic-page-fit-content {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
 /* Footer  */
 .ui5-dynamic-page-footer {
     position: sticky;
@@ -32,8 +51,12 @@
     opacity: 1;
 }
 
-:host([show-footer]) .ui5-dynamic-page-content {
-    padding-bottom: 4rem;
+.ui5-dynamic-page-spacer {
+    height: var(--_ui5_dynamic_page_footer_spacer);
+}
+
+:host([show-footer]) .ui5-dynamic-page-fit-content {
+    bottom: var(--_ui5_dynamic_page_footer_spacer);
 }
 
 :host([show-footer]) .ui5-dynamic-page-footer {
@@ -82,7 +105,7 @@
 
 /* Responsive paddings */
 
-:host([media-range="S"]) .ui5-dynamic-page-content,
+:host([media-range="S"]) .ui5-dynamic-page-fit-content,
 :host([media-range="S"]) ::slotted([slot="titleArea"]),
 :host([media-range="S"]) ::slotted([slot="headerArea"]) {
     padding: 0 1rem;
@@ -92,16 +115,16 @@
     padding-top: 0.5rem;
 }
 
-:host([media-range="M"]) .ui5-dynamic-page-content,
+:host([media-range="M"]) .ui5-dynamic-page-fit-content,
 :host([media-range="M"]) ::slotted([slot="titleArea"]),
 :host([media-range="M"]) ::slotted([slot="headerArea"]),
-:host([media-range="L"]) .ui5-dynamic-page-content,
+:host([media-range="L"]) .ui5-dynamic-page-fit-content,
 :host([media-range="L"]) ::slotted([slot="titleArea"]),
 :host([media-range="L"]) ::slotted([slot="headerArea"]) {
     padding: 0 2rem;
 }
 
-:host([media-range="XL"]) .ui5-dynamic-page-content,
+:host([media-range="XL"]) .ui5-dynamic-page-fit-content,
 :host([media-range="XL"]) ::slotted([slot="titleArea"]),
 :host([media-range="XL"]) ::slotted([slot="headerArea"]) {
     padding: 0 3rem;

diff --git a/packages/fiori/src/themes/base/DynamicPage-parameters.css b/packages/fiori/src/themes/base/DynamicPage-parameters.css
@@ -1,3 +1,4 @@
 :root {
     --_ui5_dynamic_page_title_content_padding_left: 1rem; 
+    --_ui5_dynamic_page_footer_spacer: 4rem; 
 }