From 5f3ab39c11f4fc5392e41c99ed02613412c5176c Mon Sep 17 00:00:00 2001
From: felixindynamsoft <indrawan.felix123@gmail.com>
Date: Mon, 16 Dec 2024 10:30:59 -0800
Subject: [PATCH] fix: mobile layout for result

---
 css/index.css |  4 +++-
 js/init.js    |  3 ++-
 js/util.js    | 20 ++++++++++++++++++++
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/css/index.css b/css/index.css
index 03d6119..09f7e0e 100644
--- 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
index d0f936b..96ee9b0 100644
--- 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
index 0b5027d..8e97b8a 100644
--- 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