From 5a186717c4a4347fdddfd2785bf723486dd278a8 Mon Sep 17 00:00:00 2001 From: Alberto Espinoza Date: Thu, 5 Oct 2023 16:42:44 -0600 Subject: [PATCH] R2-2604 - PWA Fixing login page - Fixing page shifted up/down when keyboard is open/closed. Only in android --- app/javascript/app-init.js | 16 ++++++++++++++++ .../components/code-of-conduct/styles.css | 4 ++-- .../index-filters/components/styles.css | 2 +- .../layouts/components/app-layout/styles.css | 7 ++++++- .../layouts/components/login-layout/styles.css | 6 +++++- app/javascript/components/page/styles.css | 6 +++--- .../pages/errors/not-authorized/styles.css | 2 +- .../components/pages/errors/not-found/styles.css | 2 +- app/javascript/config/theme.js | 2 +- 9 files changed, 36 insertions(+), 11 deletions(-) diff --git a/app/javascript/app-init.js b/app/javascript/app-init.js index b01ab19902..86a9287cf9 100644 --- a/app/javascript/app-init.js +++ b/app/javascript/app-init.js @@ -25,4 +25,20 @@ function appInit() { return { store }; } +// This is a workaround for PWA incorrect Height +// Get rid of when this is fixed +// https://bugs.chromium.org/p/chromium/issues/detail?id=1457883 +// https://bugs.chromium.org/p/chromium/issues/detail?id=1464146 +const documentHeight = () => { + const doc = document.documentElement; + + if (window.matchMedia("(display-mode: fullscreen)").matches) { + doc.style.setProperty("--doc-height", `${window.screen.availHeight}px`); + } +}; + +window.screen.orientation.addEventListener("change", documentHeight); + +documentHeight(); + export default appInit; diff --git a/app/javascript/components/code-of-conduct/styles.css b/app/javascript/components/code-of-conduct/styles.css index 860f10fe4b..af1150b3ec 100644 --- a/app/javascript/components/code-of-conduct/styles.css +++ b/app/javascript/components/code-of-conduct/styles.css @@ -1,5 +1,5 @@ .container { - height: 100vh; + height: var(--doc-height, 100vh); display: flex; flex-direction: column; background-color: var(--c-blue); @@ -44,7 +44,7 @@ border-radius: 0 0 10px 10px; display: flex; padding: 16px; - + & span:first-child { flex: 1; } diff --git a/app/javascript/components/index-filters/components/styles.css b/app/javascript/components/index-filters/components/styles.css index 1d72b2ad86..413e8df321 100644 --- a/app/javascript/components/index-filters/components/styles.css +++ b/app/javascript/components/index-filters/components/styles.css @@ -69,7 +69,7 @@ .root { width: 300px; - min-height: 100vh; + min-height: var(--doc-height, 100vh); margin-left: 10px; } diff --git a/app/javascript/components/layouts/components/app-layout/styles.css b/app/javascript/components/layouts/components/app-layout/styles.css index 9f8213a4a4..65f46d54a3 100644 --- a/app/javascript/components/layouts/components/app-layout/styles.css +++ b/app/javascript/components/layouts/components/app-layout/styles.css @@ -1,12 +1,17 @@ +:global html, :global body { + height: var(--doc-height, 100vh); +} + .root { display: flex; overflow: hidden; background: var(--c-content-grey); + height: var(--doc-height, 100vh); } .content { flex-grow: 1; - height: 100vh; + height: var(--doc-height, 100vh); overflow: hidden; background: var(--c-content-grey); transition: var(--transition); diff --git a/app/javascript/components/layouts/components/login-layout/styles.css b/app/javascript/components/layouts/components/login-layout/styles.css index 2c967732fd..3cc7533344 100644 --- a/app/javascript/components/layouts/components/login-layout/styles.css +++ b/app/javascript/components/layouts/components/login-layout/styles.css @@ -22,8 +22,12 @@ background: repeating-linear-gradient(45deg, var(--c-dark-blue), var(--c-dark-blue) 10px, var(--c-blue) 10px, var(--c-blue) 20px); } +:global html, :global body { + height: var(--doc-height, 100vh); +} + .primeroBackground { - height: 100vh; + height: var(--doc-height, 100vh); overflow: auto; display: flex; flex-direction: column; diff --git a/app/javascript/components/page/styles.css b/app/javascript/components/page/styles.css index 7e5b5dd59f..8440790e0e 100644 --- a/app/javascript/components/page/styles.css +++ b/app/javascript/components/page/styles.css @@ -1,6 +1,6 @@ .root { flex-grow: 1; - height: 100vh; + height: var(--doc-height, 100vh); overflow: hidden; overflow-y: scroll; @@ -17,7 +17,7 @@ flex-grow: 1; display: flex; flex-direction: column; - height: 100vh; + height: var(--doc-height, 100vh); overflow: hidden; &.demo { @@ -95,7 +95,7 @@ display: flex; padding: 0; height: 65%; - + & > div:first-of-type { padding: 0 0.5em; overflow-y: scroll; diff --git a/app/javascript/components/pages/errors/not-authorized/styles.css b/app/javascript/components/pages/errors/not-authorized/styles.css index 9a7cb47f70..4ecf524f00 100644 --- a/app/javascript/components/pages/errors/not-authorized/styles.css +++ b/app/javascript/components/pages/errors/not-authorized/styles.css @@ -2,7 +2,7 @@ display: flex; align-items: center; justify-content: center; - height: 100vh; + height: var(--doc-height, 100vh); text-align: center; flex-direction: column; padding: 0 3%; diff --git a/app/javascript/components/pages/errors/not-found/styles.css b/app/javascript/components/pages/errors/not-found/styles.css index 9a7cb47f70..4ecf524f00 100644 --- a/app/javascript/components/pages/errors/not-found/styles.css +++ b/app/javascript/components/pages/errors/not-found/styles.css @@ -2,7 +2,7 @@ display: flex; align-items: center; justify-content: center; - height: 100vh; + height: var(--doc-height, 100vh); text-align: center; flex-direction: column; padding: 0 3%; diff --git a/app/javascript/config/theme.js b/app/javascript/config/theme.js index 5295586f26..cf12c5f455 100644 --- a/app/javascript/config/theme.js +++ b/app/javascript/config/theme.js @@ -71,7 +71,7 @@ const overrides = { "#root": { display: "flex", flexDirection: "column", - height: "100vh" + height: `var(--doc-height, 100vh)` }, legend: { display: "none"