feat(ui5-dynamic-page): add responsive paddings (#7923)

SAP · Nov 28, 2023 · 9670fab · 9670fab
1 parent 18cccb2
commit 9670fab
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 15 deletions.
diff --git a/packages/fiori/src/DynamicPage.hbs b/packages/fiori/src/DynamicPage.hbs
@@ -18,20 +18,20 @@
 
     </div>
 
-    <div class="{{classes.content}}">
-      {{#if headerInContent}}
-        <slot name="headerArea"></slot>
-      {{/if}}
+    {{#if headerInContent}}
+      <slot name="headerArea"></slot>
+    {{/if}}
 
-      {{#unless actionsInTitle}}
-        <ui5-dynamic-page-header-actions
-            ?snapped="{{headerSnapped}}"
-            ?pinned="{{headerPinned}}"
-            @ui5-expand-button-click={{onExpandClick}}
-            @ui5-pin-button-click={{onPinClick}}
-          ></ui5-dynamic-page-header-actions>
-      {{/unless}}
+    {{#unless actionsInTitle}}
+      <ui5-dynamic-page-header-actions
+          ?snapped="{{headerSnapped}}"
+          ?pinned="{{headerPinned}}"
+          @ui5-expand-button-click={{onExpandClick}}
+          @ui5-pin-button-click={{onPinClick}}
+        ></ui5-dynamic-page-header-actions>
+    {{/unless}}
 
+    <div class="{{classes.content}}">
       <slot></slot>
     </div>
   </div>

diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts
@@ -3,6 +3,9 @@ import customElement from "@ui5/webcomponents-base/dist/decorators/customElement
 import property from "@ui5/webcomponents-base/dist/decorators/property.js";
 import slot from "@ui5/webcomponents-base/dist/decorators/slot.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import type { ResizeObserverCallback } from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
 import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { Timeout } from "@ui5/webcomponents-base/dist/types.js";
@@ -42,6 +45,12 @@ const SCROLL_DEBOUNCE_RATE = 0; // ms
 class DynamicPage extends UI5Element {
 	static i18nBundle: I18nBundle;
 
+	constructor() {
+		super();
+
+		this._updateMediaRange = this.updateMediaRange.bind(this);
+	}
+
 	static async onDefine() {
 		DynamicPage.i18nBundle = await getI18nBundle("INIT_PACKAGE_VAR_NAME");
 	}
@@ -55,6 +64,15 @@ class DynamicPage extends UI5Element {
 	@property({ type: Boolean })
 	showFooter!: boolean;
 
+	/**
+	 * Defines the current media query size.
+	 *
+	 * @type {string}
+	 * @private
+	 */
+	@property()
+	mediaRange!: string;
+
 	@slot({ "default": true, type: HTMLElement })
 	content!: HTMLElement[];
 
@@ -71,6 +89,15 @@ class DynamicPage extends UI5Element {
 	iPreviousScrollAmount = 0;
 	_debounceInterval?: Timeout | null;
 	showHeaderInStickArea = false;
+	_updateMediaRange: ResizeObserverCallback;
+
+	onEnterDOM() {
+		ResizeHandler.register(this, this._updateMediaRange);
+	}
+
+	onExitDOM() {
+		ResizeHandler.deregister(this, this._updateMediaRange);
+	}
 
 	get classes() {
 		return {
@@ -167,6 +194,10 @@ class DynamicPage extends UI5Element {
 			fn();
 		}, delay);
 	}
+
+	updateMediaRange() {
+		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef()!.offsetWidth);
+	}
 }
 
 DynamicPage.define();

diff --git a/packages/fiori/src/themes/DynamicPage.css b/packages/fiori/src/themes/DynamicPage.css
@@ -30,7 +30,6 @@
     box-sizing: border-box;
     z-index: 1;
     opacity: 1;
-    padding: 0 1rem;
 }
 
 :host([show-footer]) .ui5-dynamic-page-content {
@@ -50,6 +49,9 @@
     border: 1px solid;
     border-radius: 0.25rem;
     background-color: #fff;
+    box-sizing: border-box;
+    width: auto;
+    margin: 0 0.5rem 0.5rem 0.5rem;
 }
 
 /* Footer animation */
@@ -72,4 +74,35 @@
         transform: translateY(100%);
         opacity: 0;
     }
+}
+
+::slotted([slot="titleArea"]) {
+    width: auto;
+}
+
+/* Responsive paddings */
+
+:host([media-range="S"]) .ui5-dynamic-page-content,
+:host([media-range="S"]) ::slotted([slot="titleArea"]),
+:host([media-range="S"]) ::slotted([slot="headerArea"]) {
+    padding: 0 1rem;
+}
+
+:host([media-range="S"]) ::slotted([slot="headerArea"]) {
+    padding-top: 0.5rem;
+}
+
+:host([media-range="M"]) .ui5-dynamic-page-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"]) ::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"]) ::slotted([slot="titleArea"]),
+:host([media-range="XL"]) ::slotted([slot="headerArea"]) {
+    padding: 0 3rem;
 }
diff --git a/packages/fiori/src/themes/DynamicPageHeader.css b/packages/fiori/src/themes/DynamicPageHeader.css
@@ -1,10 +1,10 @@
 :host {
     background: #fff;
-    padding-top: var(--_ui5_dynamic_page_header_padding_top);
-    padding-bottom: var(--_ui5_dynamic_page_header_padding_bottom);
     display: block;
 }
 
 .ui5-dynamic-page-header-root {
     background: inherit;
+    padding-top: var(--_ui5_dynamic_page_header_padding_top);
+    padding-bottom: var(--_ui5_dynamic_page_header_padding_bottom);
 }