diff --git a/packages/fiori/src/DynamicPage.hbs b/packages/fiori/src/DynamicPage.hbs
index f04d9d52d134..7b21915b334a 100644
--- a/packages/fiori/src/DynamicPage.hbs
+++ b/packages/fiori/src/DynamicPage.hbs
@@ -18,20 +18,20 @@
-
- {{#if headerInContent}}
-
- {{/if}}
+ {{#if headerInContent}}
+
+ {{/if}}
- {{#unless actionsInTitle}}
-
- {{/unless}}
+ {{#unless actionsInTitle}}
+
+ {{/unless}}
+
diff --git a/packages/fiori/src/DynamicPage.ts b/packages/fiori/src/DynamicPage.ts
index 5030397419cf..07099cbc0cd0 100644
--- 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
index 2246981aa3af..60bce09f5c24 100644
--- 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;
}
\ No newline at end of file
diff --git a/packages/fiori/src/themes/DynamicPageHeader.css b/packages/fiori/src/themes/DynamicPageHeader.css
index e8e240f5d698..fbd4d846e593 100644
--- 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);
}
\ No newline at end of file