fix: mobile layout for result

Dynamsoft · Dec 16, 2024 · 5f3ab39 · 5f3ab39
1 parent 0ac0e1c
commit 5f3ab39
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/css/index.css b/css/index.css
@@ -291,6 +291,7 @@ img {
 }
 
 .result-container .scanned-image {
+  flex: 1;
   max-height: 200px;
 }
 
@@ -301,6 +302,7 @@ img {
 }
 
 .result-container .parsed-result-area {
+  flex: 1;
   width: 100%;
   height: 84%;
   padding: 15px 15px 5px 30px;
@@ -562,7 +564,7 @@ img {
 }
 
 /* Media query for mobile phones */
-@media screen and (orientation: landscape) and (max-width: 1500px) {
+@media screen and (orientation: landscape) and (max-width: 900px) {
   .result-container .parsed-result-area .parsed-filed {
     font-size: 14px;
   }

diff --git a/js/init.js b/js/init.js
@@ -1,4 +1,4 @@
-import { judgeCurResolution, showNotification } from "./util.js";
+import { changeMobileLayout, judgeCurResolution, showNotification } from "./util.js";
 import { createPendingPromise, extractDocumentFields, resultToHTMLElement } from "./util.js";
 
 // Promise variable used to control model loading state
@@ -124,6 +124,7 @@ let init = (async () => {
 })();
 
 const displayResults = (recognizedText, parsedResult) => {
+  changeMobileLayout(); // Update mobile layout to support horizontal view
   parsedResultArea.innerText = "";
 
   // Display MRZ text

diff --git a/js/util.js b/js/util.js
@@ -213,6 +213,26 @@ export function shouldShowScanModeContainer() {
   scanModeContainer.style.display = isHomepageClosed && isResultClosed ? "flex" : "none";
 }
 
+export const isMobile = () =>
+  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+
+export function changeMobileLayout() {
+  const resultArea = resultContainer.querySelector(".result-area");
+  console.log(isMobile(), checkOrientation() === "landscape");
+  Object.assign(
+    resultArea.style,
+    isMobile() && checkOrientation() === "landscape"
+      ? {
+          height: "70%",
+          flexDirection: "row",
+        }
+      : {
+          height: "84%",
+          flexDirection: "column",
+        }
+  );
+}
+
 /** Show notification banner to users
  * @params {string} message - noficiation message
  * @params {string} className - CSS class name to show notification status