From 095c0db0cbd2acae476c39c8f241c35051480520 Mon Sep 17 00:00:00 2001 From: i518532 Date: Wed, 9 Apr 2025 13:30:00 +0300 Subject: [PATCH 1/4] fix(ui5-page): refactor page layouting --- packages/fiori/src/Page.ts | 2 +- packages/fiori/src/themes/Page.css | 46 +++++++++++------------------ packages/fiori/test/pages/Page.html | 16 ++++++++++ 3 files changed, 35 insertions(+), 29 deletions(-) diff --git a/packages/fiori/src/Page.ts b/packages/fiori/src/Page.ts index 08fe1a4fd9b0..a851e5dbcfa9 100644 --- a/packages/fiori/src/Page.ts +++ b/packages/fiori/src/Page.ts @@ -126,7 +126,7 @@ class Page extends UI5Element { } get _contentPaddingBottom() { - return !this.fixedFooter && !this.hideFooter ? "3.5rem" : "0"; + return !this.fixedFooter && !this.hideFooter ? "3.75rem" : "0"; } get _contentTop() { diff --git a/packages/fiori/src/themes/Page.css b/packages/fiori/src/themes/Page.css index 4f2aab14a50b..ad257aa8b741 100644 --- a/packages/fiori/src/themes/Page.css +++ b/packages/fiori/src/themes/Page.css @@ -1,4 +1,3 @@ - :host(:not([hidden])) { width: 100%; height: 100%; @@ -13,6 +12,8 @@ z-index: 0; box-sizing: border-box; background-color: inherit; + display: flex; + flex-direction: column; } .ui5-page-header-root { @@ -21,39 +22,39 @@ .ui5-page-content-root { overflow: hidden auto; - position: absolute; will-change: scroll-position; width: 100%; - top: 2.75rem; - bottom: 0; + flex: 1 1 auto; box-sizing: border-box; font-size: var(--sapFontSize); color: var(--sapTextColor); } +/* Footer normal behavior */ .ui5-page-footer-root { width: 100%; box-sizing: border-box; - position: absolute; - bottom: 0; - left: 0; - z-index: 2; - width: 100%; } :host(:not([fixed-footer])) .ui5-page-footer-root { opacity: 1; bottom: 0.5rem; } -/*** Responsive paddings ***/ ::slotted([ui5-bar][slot="footer"][design="FloatingFooter"]) { - margin: auto; padding: 0; + position: absolute; + bottom: 10px; + box-sizing: border-box; + left: 50%; + transform: translateX(-50%); + width: 95%; + z-index: 2; } /* S Size */ @container (max-width: 599px) { + :host([floating-footer]) .ui5-page-footer-root, .ui5-page-content-root { padding: 0 1rem; @@ -72,6 +73,7 @@ /* M Size */ @container (min-width: 600px) and (max-width: 1023px) { + :host([floating-footer]) .ui5-page-footer-root, .ui5-page-content-root { padding: 0 2rem; @@ -90,6 +92,7 @@ /* L Size */ @container (min-width: 1024px) and (max-width: 1439px) { + :host([floating-footer]) .ui5-page-footer-root, .ui5-page-content-root { padding: 0 2rem; @@ -108,6 +111,7 @@ /* XL Size */ @container (min-width: 1440px) { + :host([floating-footer]) .ui5-page-footer-root, .ui5-page-content-root { padding: 0 3rem; @@ -124,22 +128,6 @@ } } -:host([no-scrolling]) .ui5-page-content-root { - overflow: hidden; -} - -:host([hide-footer][fixed-footer]) .ui5-page-footer-root { - display: none; -} - -:host(:not([fixed-footer]):not([hide-footer])) .ui5-page-footer-root { - animation: bounceShow var(--_ui5-page-animation-duration) forwards ease-in-out; -} - -:host(:not([fixed-footer])[hide-footer]) .ui5-page-footer-root { - animation: bounceHide var(--_ui5-page-animation-duration) forwards ease-in-out; -} - /* BackgroundDesign */ :host([background-design="Solid"]) { background-color: var(--sapBackgroundColor); @@ -159,6 +147,7 @@ transform: translateY(100%); opacity: 0; } + 100% { opacity: 1; } @@ -169,8 +158,9 @@ transform: translateY(-5%); opacity: 1; } + 100% { transform: translateY(100%); opacity: 0; } -} +} \ No newline at end of file diff --git a/packages/fiori/test/pages/Page.html b/packages/fiori/test/pages/Page.html index 65e77e769da6..636d0a8312c3 100644 --- a/packages/fiori/test/pages/Page.html +++ b/packages/fiori/test/pages/Page.html @@ -19,6 +19,22 @@ + From e734660c3773c1e92cadf50b0c3629875aa18571 Mon Sep 17 00:00:00 2001 From: i518532 Date: Wed, 9 Apr 2025 13:33:50 +0300 Subject: [PATCH 2/4] fix(ui5-page): refactor page layouting --- packages/fiori/src/themes/Page.css | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/fiori/src/themes/Page.css b/packages/fiori/src/themes/Page.css index ad257aa8b741..f605215a6595 100644 --- a/packages/fiori/src/themes/Page.css +++ b/packages/fiori/src/themes/Page.css @@ -30,7 +30,6 @@ color: var(--sapTextColor); } -/* Footer normal behavior */ .ui5-page-footer-root { width: 100%; box-sizing: border-box; From fb6d7212fec34263943f8639997456eeabb9a1c5 Mon Sep 17 00:00:00 2001 From: i518532 Date: Wed, 9 Apr 2025 14:59:16 +0300 Subject: [PATCH 3/4] fix(ui5-page): refactor page layouting --- packages/fiori/src/themes/Page.css | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/fiori/src/themes/Page.css b/packages/fiori/src/themes/Page.css index f605215a6595..c46b91f072c8 100644 --- a/packages/fiori/src/themes/Page.css +++ b/packages/fiori/src/themes/Page.css @@ -127,6 +127,22 @@ } } +:host([no-scrolling]) .ui5-page-content-root { + overflow: hidden; +} + +:host([hide-footer][fixed-footer]) .ui5-page-footer-root { + display: none; +} + +:host(:not([fixed-footer]):not([hide-footer])) .ui5-page-footer-root { + animation: bounceShow var(--_ui5-page-animation-duration) forwards ease-in-out; +} + +:host(:not([fixed-footer])[hide-footer]) .ui5-page-footer-root { + animation: bounceHide var(--_ui5-page-animation-duration) forwards ease-in-out; +} + /* BackgroundDesign */ :host([background-design="Solid"]) { background-color: var(--sapBackgroundColor); From 15b17f3c47c58a06ca6257421d935c9c2b210ce8 Mon Sep 17 00:00:00 2001 From: i518532 Date: Wed, 9 Apr 2025 17:02:58 +0300 Subject: [PATCH 4/4] fix(ui5-page): refactor page layouting --- packages/fiori/test/pages/Page.html | 16 ---------------- 1 file changed, 16 deletions(-) diff --git a/packages/fiori/test/pages/Page.html b/packages/fiori/test/pages/Page.html index 636d0a8312c3..65e77e769da6 100644 --- a/packages/fiori/test/pages/Page.html +++ b/packages/fiori/test/pages/Page.html @@ -19,22 +19,6 @@ -