feat(ui5-page): implement responsive paddings #3412

SAP · Jun 21, 2021 · fa3cdb7 · fa3cdb7
1 parent 76d7d39
commit fa3cdb7
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 25 deletions.
diff --git a/packages/fiori/src/Bar.hbs b/packages/fiori/src/Bar.hbs
@@ -9,4 +9,4 @@
 	<div class="ui5-bar-content-container ui5-bar-endcontent-container">
 		<slot name="endContent"></slot>
 	</div>
-</div>
+</div>
diff --git a/packages/fiori/src/Page.js b/packages/fiori/src/Page.js
@@ -1,6 +1,7 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
-import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
 import PageBackgroundDesign from "./types/PageBackgroundDesign.js";
 
 // Template
@@ -74,6 +75,17 @@ const metadata = {
 		hideFooter: {
 			type: Boolean,
 		},
+
+		/**
+		 * Defines the current media query size.
+		 *
+		 * @type {string}
+		 * @private
+		 * @since 1.0.0-rc.15
+		 */
+		mediaRange: {
+			type: String,
+		},
 	},
 
 	slots: /** @lends sap.ui.webcomponents.fiori.Page.prototype */ {
@@ -172,6 +184,24 @@ class Page extends UI5Element {
 		await fetchI18nBundle("@ui5/webcomponents");
 	}
 
+	constructor() {
+		super();
+
+		this._updateMediaRange = this.updateMediaRange.bind(this);
+	}
+
+	onEnterDOM() {
+		ResizeHandler.register(this, this._updateMediaRange);
+	}
+
+	onExitDOM() {
+		ResizeHandler.deregister(this, this._updateMediaRange);
+	}
+
+	updateMediaRange() {
+		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
+	}
+
 	get _contentBottom() {
 		return !this.floatingFooter && !this.hideFooter ? "2.75rem" : "0";
 	}

diff --git a/packages/fiori/src/themes/Page.css b/packages/fiori/src/themes/Page.css
@@ -28,24 +28,57 @@
 }
 
 .ui5-page-footer-root {
+    width: 100%;
+    box-sizing: border-box;
     position: absolute;
     bottom: 0;
     left: 0;
     z-index: 2;
     width: 100%;
 }
 
-:host([disable-scrolling]) .ui5-page-content-root {
-    overflow: hidden;
-}
-
 :host([floating-footer]) .ui5-page-footer-root {
-    left: 0.5rem;
-    right: 0.5rem;
-    width: auto;
     opacity: 1;
     bottom: 0.5rem;
 }
+/*** Responsive paddings ***/
+
+:host([media-range="S"]) .ui5-page-content-root,
+:host([media-range="S"][floating-footer]) .ui5-page-footer-root {
+	padding: 0 1rem;
+}
+
+:host([media-range="S"]) ::slotted([ui5-bar][slot="header"]) {
+    box-sizing: border-box;
+    padding: 0 .25rem;
+}
+
+:host([media-range="M"]) .ui5-page-content-root,
+:host([media-range="L"]) .ui5-page-content-root,
+:host([media-range="M"][floating-footer]) .ui5-page-footer-root,
+:host([media-range="L"][floating-footer]) .ui5-page-footer-root {
+	padding: 0 2rem;
+}
+
+:host([media-range="M"]) ::slotted([ui5-bar][slot="header"]),
+:host([media-range="L"]) ::slotted([ui5-bar][slot="header"]) {
+    box-sizing: border-box;
+    padding: 0 1.25rem;
+}
+
+:host([media-range="XL"]) .ui5-page-content-root,
+:host([media-range="XL"][floating-footer]) .ui5-page-footer-root {
+	padding: 0 3rem;
+}
+
+:host([media-range="XL"]) ::slotted([ui5-bar][slot="header"]) {
+    box-sizing: border-box;
+    padding: 0 2.25rem;
+}
+
+:host([disable-scrolling]) .ui5-page-content-root {
+    overflow: hidden;
+}
 
 :host([hide-footer]:not([floating-footer])) .ui5-page-footer-root {
     display: none;

diff --git a/packages/fiori/test/pages/Page.html b/packages/fiori/test/pages/Page.html
@@ -27,14 +27,12 @@
 </head>
 
 <body style="background-color: var(--sapBackgroundColor);"></body>
-	<ui5-page id="page" backgroundDesign="List" floating-footer show-footer>
-		<div slot="header">
-			<ui5-bar design="Header">
-				<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
-				<ui5-label slot="middleContent">Title</ui5-label>
-				<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
-			</ui5-bar>
-		</div>
+	<ui5-page id="page" background-design="List" floating-footer show-footer>
+		<ui5-bar design="Header" slot="header">
+			<ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
+			<ui5-label slot="middleContent">Title</ui5-label>
+			<ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
+		</ui5-bar>
 
 		<div>
 			<div style="width: 100%;">

diff --git a/packages/fiori/test/samples/Page.sample.html b/packages/fiori/test/samples/Page.sample.html
@@ -19,14 +19,12 @@
 <section>
 	<h3>Page with floating footer</h3>
 	<div class="snippet">
-        <ui5-page id="page" style="height: 700px; width: 500px" backgroundDesign="List" floating-footer show-footer>
-            <div slot="header">
-                <ui5-bar design="Header">
-                    <ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
-                    <ui5-label slot="middleContent">Title</ui5-label>
-                    <ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
-                </ui5-bar>
-            </div>
+        <ui5-page id="page" style="height: 700px; width: 500px" background-design="List" floating-footer show-footer>
+            <ui5-bar design="Header" slot="header">
+                <ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
+                <ui5-label slot="middleContent">Title</ui5-label>
+                <ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
+            </ui5-bar>
 
             <div>
                 <p class="content-paragraph">
@@ -80,6 +78,7 @@ <h3>Page with floating footer</h3>
         </ui5-page>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
+<<<<<<< HEAD
 <ui5-page id="page" backgroundDesign="List" floating-footer show-footer>
     <div slot="header">
         <ui5-bar design="Header">
@@ -88,6 +87,14 @@ <h3>Page with floating footer</h3>
             <ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
         </ui5-bar>
     </div>
+=======
+<ui5-page id="page" background-design="List" floating-footer show-footer>
+    <ui5-bar design="Header" slot="header">
+        <ui5-button icon="home" title="Go home" slot="startContent"></ui5-button>
+        <ui5-label slot="middleContent">Title</ui5-label>
+        <ui5-button icon="action-settings" title="Go to settings" slot="endContent"></ui5-button>
+    </ui5-bar>
+>>>>>>> b720393d0... feat(ui5-page): implement responsive paddings (#3412)
 
     <div>
         <p>
-Original file line number
+Diff line change
@@ Expand Up / @@ -9,4 +9,4 @@ @@
     	<div class="ui5-bar-content-container ui5-bar-endcontent-container">
     		<slot name="endContent"></slot>
     	</div>
-    </div>
+    </div>