Merged in r2-2604-pwa-fixing-login-page (pull request #6530)

R2-2604 - PWA Fixing login page Approved-by: Joshua Toliver
primeroIMS · Oct 10, 2023 · 7e3590f · 7e3590f
2 parents a8e073a + 5a18671
commit 7e3590f
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -71,7 +71,7 @@ const overrides = {
       "#root": {
         display: "flex",
         flexDirection: "column",
-        height: "100vh"
+        height: `var(--doc-height, 100vh)`
       },
       legend: {
         display: "none"